From b26dc207c24153cfa1599f6eac5d2baeb9b38a81 Mon Sep 17 00:00:00 2001
From: funjia <13429193897@163.com>
Date: Tue, 25 Nov 2025 19:40:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E4=BA=86=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=A0=87=E7=AD=BE=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTag.vue | 164 +++++++++++++++++++++++++++++++++++
 src/components/Main.vue      |   7 ++
 2 files changed, 171 insertions(+)
 create mode 100644 src/components/CustomTag.vue

diff --git a/src/components/CustomTag.vue b/src/components/CustomTag.vue
new file mode 100644
index 0000000..2185f22
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/Main.vue b/src/components/Main.vue
index 5292f88..a6b52cb 100644
--- a/src/components/Main.vue
+++ b/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;
     }
 }