260 lines
7.5 KiB
Vue
260 lines
7.5 KiB
Vue
<template>
|
|
<div class="toolbar">
|
|
<div class="toolbar-submit">
|
|
<label>模板</label>
|
|
<Select :data="people" v-model="selectedPerson"></Select>
|
|
<Input type="number" title="数量" v-model="count"></Input>
|
|
<Input type="number" title="上下边距" v-model="marginHeight"></Input>
|
|
<Input type="number" title="左右边距" v-model="marginHorizontal"></Input>
|
|
<button class="btn btn-primary" @click="onAdd">添加</button>
|
|
<button class="btn btn-primary" @click="onPrint">打印</button>
|
|
<button class="btn btn-primary" @click="onRest">清空</button>
|
|
</div>
|
|
|
|
<DynamicForm :key="selectedPerson.label" v-show="currentFormSchema" :formConfig="currentFormSchema"
|
|
:initialData="currentConfig" @submit="updateConfig" />
|
|
</div>
|
|
<div class="page" :style="marginVars">
|
|
<template v-for="(item, index) in data" :key="index">
|
|
<component :is="getComponent(item)" :id="index" :config="item.config"></component>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, watch, computed } from "vue";
|
|
// 导入所有组件（确保路径正确）
|
|
// import Disk_After_Sales from "./Disk_After_Sales.vue";
|
|
import Error, { formSchema as formSchema_Error, initialValues as initialValues_Error } from './Error.vue';
|
|
import I5_10400F_16G_256G_1060, { formSchema as formSchema_I510400F, initialValues as initialValues_I510400F } from "./I5_10400F_16G_256G_1060.vue";
|
|
import I5_10400F_16G_512G_2060, { formSchema as formSchema_I510400F2060, initialValues as initialValues_I510400F2060 } from './I5_10400F_16G_512G_2060.vue';
|
|
import I5_9400F_16G_256G_1060, { formSchema as formSchema_I59400F, initialValues as initialValues_I59400F } from "./I5_9400F_16G_256G_1060.vue";
|
|
import I5_4590_8G_120G, { formSchema as formSchema_I54590, initialValues as initialValues_I54590 } from './I5_4590_8G_120G.vue';
|
|
import I3_4130_8G_120G, { formSchema as formSchema_I34130, initialValues as initialValues_I34130 } from './I3_4130_8G_120G.vue';
|
|
import G3260_8G_120G, {
|
|
formSchema as formSchema_G3260,
|
|
initialValues as initialValues_G3260
|
|
} from './G3260_8G_120G.vue';
|
|
import All_in_one_22_4G_120G, { formSchema as formSchema_22AllInOne, initialValues as initialValues_22AllInOne } from "./22寸一体机_4G_120G.vue";
|
|
import All_in_one_24_8G_256G, { formSchema as formSchema_24AllInOne, initialValues as initialValues_24AllInOne } from "./24寸一体机_I5_3代_8G_256G.vue";
|
|
|
|
import DynamicForm from './DynamicForm.vue';
|
|
import Input from './Input/Index.vue';
|
|
import Select from './Select/index.vue';
|
|
|
|
// 修复1: 确保所有配置都有表单数据
|
|
const people = reactive([
|
|
{
|
|
label: 'I5_10400F_16G_256G_1060',
|
|
formSchema: formSchema_I510400F,
|
|
formData: initialValues_I510400F
|
|
},
|
|
{
|
|
label: 'I5_10400F_16G_256G_2060',
|
|
formSchema: formSchema_I510400F2060,
|
|
formData: initialValues_I510400F2060
|
|
},
|
|
{
|
|
label: 'I5_9400F_16G_256G_1060',
|
|
formSchema: formSchema_I59400F,
|
|
formData: initialValues_I59400F
|
|
},
|
|
{
|
|
label: 'I54590_8G_120G',
|
|
formSchema: formSchema_I54590,
|
|
formData: initialValues_I54590
|
|
},
|
|
{
|
|
label: 'I34130_8G_120G',
|
|
formSchema: formSchema_I34130,
|
|
formData: initialValues_I34130
|
|
},
|
|
{
|
|
label: 'G3260_8G_120G',
|
|
formSchema: formSchema_G3260,
|
|
formData: initialValues_G3260
|
|
},
|
|
{
|
|
label: '24寸一体机_I5_3代_8G_256G',
|
|
formSchema: formSchema_24AllInOne,
|
|
formData: initialValues_24AllInOne
|
|
},
|
|
{
|
|
label: '22寸一体机_4G_120G',
|
|
formSchema: formSchema_22AllInOne,
|
|
formData: initialValues_22AllInOne
|
|
},
|
|
{
|
|
label: 'Error',
|
|
formSchema: formSchema_Error,
|
|
formData: initialValues_Error
|
|
},
|
|
]);
|
|
|
|
// 修复2: 初始化选中项为G3260配置
|
|
const selectedPerson = ref(people[0]);
|
|
const data = ref([]);
|
|
// 打印数量
|
|
const count = ref(1);
|
|
// 上下边距
|
|
const marginHeight = ref(0.89);
|
|
// 左右边距
|
|
const marginHorizontal = ref(0.8);
|
|
const currentConfig = ref({ ...initialValues_G3260 });
|
|
const currentFormSchema = ref(formSchema_G3260);
|
|
// 打印样式表引用
|
|
let printStyle = null;
|
|
|
|
// 计算样式变量
|
|
const marginVars = computed(() => ({
|
|
'--margin-height': `${marginHeight.value}cm`,
|
|
'--margin-horizontal': `${marginHorizontal.value}cm`
|
|
}));
|
|
|
|
// 修复3: 正确的watch处理
|
|
watch(selectedPerson, (newVal) => {
|
|
currentConfig.value = { ...newVal.formData };
|
|
currentFormSchema.value = newVal.formSchema;
|
|
}, { immediate: true });
|
|
|
|
const getComponent = (item) => {
|
|
switch (item.name) {
|
|
case 'I5_10400F_16G_256G_1060': return I5_10400F_16G_256G_1060;
|
|
case 'I5_10400F_16G_512G_2060': return I5_10400F_16G_512G_2060;
|
|
case 'I5_9400F_16G_256G_1060': return I5_9400F_16G_256G_1060;
|
|
case 'I5_4590_8G_120G': return I5_4590_8G_120G;
|
|
case 'I3_4130_8G_120G': return I3_4130_8G_120G;
|
|
case 'G3260_8G_120G': return G3260_8G_120G;
|
|
case '24寸一体机_I5_3代_8G_256G': return All_in_one_24_8G_256G;
|
|
case '22寸一体机_4G_120G': return All_in_one_22_4G_120G;
|
|
case 'Error': return Error;
|
|
default: return Error;
|
|
}
|
|
}
|
|
|
|
const onAdd = () => {
|
|
const maxItems = 44;
|
|
const availableSlots = maxItems - data.value.length;
|
|
const addCount = Math.min(count.value, availableSlots);
|
|
|
|
if (addCount <= 0) return;
|
|
|
|
const newItems = Array.from({ length: addCount }, () => ({
|
|
name: selectedPerson.value.label,
|
|
config: { ...currentConfig.value }
|
|
}));
|
|
|
|
data.value.push(...newItems);
|
|
}
|
|
// 重置打印网格
|
|
const onRest = () => {
|
|
data.value = [];
|
|
}
|
|
|
|
const updateConfig = (newConfig) => {
|
|
currentConfig.value = newConfig;
|
|
}
|
|
|
|
const onPrint = () => {
|
|
applyPrintStyles();
|
|
if (window?.electronAPI?.silentPrint) {
|
|
window.electronAPI.silentPrint();
|
|
} else {
|
|
window.print();
|
|
}
|
|
}
|
|
|
|
|
|
// 应用打印样式
|
|
const applyPrintStyles = () => {
|
|
// 移除旧的打印样式
|
|
if (printStyle) {
|
|
document.head.removeChild(printStyle);
|
|
}
|
|
|
|
// 创建新的打印样式
|
|
printStyle = document.createElement('style');
|
|
printStyle.setAttribute('media', 'print');
|
|
printStyle.textContent = `
|
|
@page {
|
|
margin: ${marginHeight.value}cm ${marginHorizontal.value}cm 0;
|
|
}
|
|
|
|
@media print {
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
`;
|
|
|
|
document.head.appendChild(printStyle);
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 原有样式保持不变 */
|
|
body {
|
|
max-width: none !important;
|
|
margin: 0 !important;
|
|
padding: 0rem !important;
|
|
}
|
|
|
|
.page {
|
|
width: 194mm;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 48.5mm);
|
|
grid-template-rows: repeat(11, 25.4mm);
|
|
gap: 0;
|
|
|
|
/* margin: var(--margin-height) var(--margin-horizontal) 0; */
|
|
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.toolbar .toolbar-submit {
|
|
width: 300px;
|
|
}
|
|
|
|
.toolbar-submit button.btn:nth-of-type(n+2) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
@media print {
|
|
|
|
html,
|
|
body {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
body * {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.toolbar {
|
|
display: none;
|
|
}
|
|
|
|
.page,
|
|
.page * {
|
|
visibility: visible;
|
|
}
|
|
|
|
.page {
|
|
width: 194mm;
|
|
height: auto;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
@page {
|
|
/* margin: var(--margin-height) var(--margin-horizontal) 0; */
|
|
margin: 0.89cm 0.80cm 0;
|
|
}
|
|
</style> |