feat: 修改了自定义标签模板

src/components/CustomTag.vue

@@ -0,0 +1,164 @@
+<template>
+    <div :class="'print-area ' + (isShow ? 'border' : '')" @dblclick="onDblClick">
+        <div :class="'item ' + (isShow ? 'show' : 'hide')">
+        
+                <div>{{ config.content1 }}</div>
+                <div>{{ config.content2 }}</div>
+                <div>{{ config.content3 }}</div>
+                <div>{{ config.content4 }}</div>
+                <div>{{ config.content5 }}</div>
+        
+        </div>
+        <div class="id">
+            <span>
+                {{ id }}
+            </span>
+        </div>
+    </div>
+</template>
+<script setup>
+import { reactive, ref } from 'vue';
+const isShow = ref(true);
+
+const props = defineProps(['id', 'config']);
+
+const onDblClick = () => {
+    isShow.value = !isShow.value;
+}
+</script>
+
+<script>
+export const formSchema = {
+    formItems: [
+        { type: 'input', label: '文字1', key: 'content1' },
+        { type: 'input', label: '文字2', key: 'content2' },
+        { type: 'input', label: '文字3', key: 'content3' },
+        { type: 'input', label: '文字4', key: 'content4' },
+        { type: 'input', label: '文字5', key: 'content5' }
+    ]
+};
+
+export const initialValues = {
+    content1: "",
+    content2: "",
+    content3: "",
+    content4: "",
+    content5: ""
+}
+</script>
+<style>
+.print-area {
+    /* border: 0.1mm dashed #87CEFA; */
+    display: flex;
+    justify-content: center;
+    align-content: flex-start;
+    margin: 0.25mm;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+
+.hide {
+    visibility: hidden;
+}
+
+.show {
+    visibility: visible;
+}
+
+.border {
+    border: 0.1mm dashed #87CEFA;
+}
+
+.print-area:nth-child(41),
+.print-area:nth-child(42),
+.print-area:nth-child(43),
+.print-area:nth-child(44) {
+    padding-bottom: 4mm;
+}
+
+.print-area:nth-child(41) .qrcode,
+.print-area:nth-child(42) .qrcode,
+.print-area:nth-child(43) .qrcode,
+.print-area:nth-child(44) .qrcode {
+    height: calc(100% - 5mm);
+}
+
+.item {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.tag {
+    color: red;
+    font-size: 0.8cm;
+}
+
+.reason,
+.time {
+    font-size: 4mm;
+}
+
+/*Styling below is used just for positioning the items inside the label. */
+
+.left-content {
+    width: 24mm;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    height: inherit;
+    font-size: 3mm;
+    line-height: 3mm;
+    color: #87CEFA;
+}
+
+.right-content {
+    display: grid;
+    font-size: 4mm;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: auto;
+}
+
+.qrcode {
+    height: calc(100% - 6mm);
+    margin: 0;
+}
+
+.id {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2cm;
+    pointer-events: none;
+    color: #87CEFA60;
+}
+
+.id span {
+    /* display: block;
+    margin: 0 auto; */
+}
+
+@media print {
+    .id * {
+        visibility: hidden !important;
+    }
+
+    .hide * {
+        visibility: hidden !important;
+    }
+
+    .show {
+        visibility: visible;
+    }
+}
+</style>

src/components/Main.vue

@@ -38,6 +38,7 @@ import G3260_8G_120G, {
 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 HardDisk, { formSchema as formSchema_HardDisk, initialValues as initialValues_HardDisk } from "./HardDisk.vue";
+import CustomTag, { formSchema as formSchema_CustomTag, initialValues as initialValues_CustomTag } from "./CustomTag.vue";
 
 import DynamicForm from './DynamicForm.vue';
 import Input from './Input/Index.vue';
@@ -95,6 +96,11 @@ const people = reactive([
         formSchema: formSchema_Error,
         formData: initialValues_Error
     },
+    {
+        label: 'CustomTag',
+        formSchema: formSchema_CustomTag,
+        formData: initialValues_CustomTag
+    },
 ]);
 
 // 修复2: 初始化选中项为G3260配置
@@ -135,6 +141,7 @@ const getComponent = (item) => {
         case '22寸一体机_4G_120G': return All_in_one_22_4G_120G;
         case 'Error': return Error;
         case 'HardDisk': return HardDisk;
+        case 'CustomTag': return CustomTag;
         default: return Error;
     }
 }