From fb53bec3f3939c59753f5b20b376716d67bda5ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Thu, 12 Jun 2025 18:12:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=89=93=E5=8D=B0=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/print/index.vue             | 31 +++++++++-
 src/views/print/nodes/QRCodeNode.vue  | 27 ++++++---
 src/views/print/nodes/barCodeNode.vue | 44 +++++++++++----
 src/views/print/nodes/image.vue       | 25 ++++++++-
 src/views/print/nodes/selectNode.vue  | 81 +++++++++++++++++++++++++++
 src/views/print/nodes/textNode.vue    | 25 ++++++++-
 src/views/print/nodes/timeNode.vue    | 24 +++++++-
 src/views/print/tool.js               | 10 +++-
 src/views/print/view.vue              | 14 +++--
 9 files changed, 249 insertions(+), 32 deletions(-)
 create mode 100644 src/views/print/nodes/selectNode.vue

diff --git a/src/views/print/index.vue b/src/views/print/index.vue
index 4e07774..252f363 100644
--- a/src/views/print/index.vue
+++ b/src/views/print/index.vue
@@ -9,7 +9,13 @@
           <el-button :type="pageType === 'B3' ? 'primary' : ''" @click="setPage('B3',35.3,50)">B3</el-button>
           <el-button :type="pageType === 'B4' ? 'primary' : ''" @click="setPage('B4',25,35.2)">B4</el-button>
           <el-button :type="pageType === 'B5' ? 'primary' : ''" @click="setPage('B5',17.6,25)">B5</el-button>
+          <el-button :type="pageType === 'zdy' ? 'primary' : ''" @click="setPage('zdy')">自定义</el-button>
         </el-button-group>
+        <el-input-number :disabled="pageType !== 'zdy'" v-model="pageWidth" style="width: 80px;margin-left: 8px;"
+                         :min="0" :controls="false" />
+        <span style="margin: 0 8px">x</span>
+        <el-input-number :disabled="pageType !== 'zdy'" v-model="pageHeight" style="width: 80px" :min="0"
+                         :controls="false" />
         <el-button @click="zoomChange(-0.1)" icon="ZoomOut" circle style="margin-left: 12px;" />
         <el-input v-model="zoomInput" disabled style="margin-left: 8px;width:100px" />
         <el-button @click="zoomChange(0.1)" icon="ZoomIn" circle style="margin-left: 8px;" />
@@ -29,6 +35,8 @@
         </el-tag>
         <el-tag :draggable="true" @dragstart="onDragStart($event, 'dateTime',pid)" class="mx-1" size="large">日期时间
         </el-tag>
+        <el-tag :draggable="true" @dragstart="onDragStart($event, 'select',pid)" class="mx-1" size="large">可选择
+        </el-tag>
         <el-tag :draggable="true" @dragstart="onDragStart($event, 'transverseLine',pid)" class="mx-1" size="large">横线
         </el-tag>
         <el-tag :draggable="true" @dragstart="onDragStart($event, 'verticalLine',pid)" class="mx-1" size="large">竖线
@@ -79,6 +87,10 @@
               <TimeNode v-bind="dateTimeNodeProps"
                         :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TimeNode>
             </template>
+            <template #node-select="selectNodeProps">
+              <SelectNode v-bind="selectNodeProps"
+                          :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></SelectNode>
+            </template>
           </VueFlow>
         </div>
       </div>
@@ -93,6 +105,20 @@
           <el-form-item label="缺省显示" v-if="Object.keys(nodeAttrForm).includes('default')">
             <el-input v-model="nodeAttrForm.default" style="width: 100%" />
           </el-form-item>
+          <el-form-item label="图片地址" v-if="Object.keys(nodeAttrForm).includes('imageSrc')">
+            <el-input v-model="nodeAttrForm.imageSrc" style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="时间类型" v-if="Object.keys(nodeAttrForm).includes('dateTimeType')">
+            <el-select
+              v-model="nodeAttrForm.dateTimeType"
+              placeholder="Select"
+            >
+              <el-option
+                label="实时"
+                value="1"
+              />
+            </el-select>
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -126,6 +152,7 @@ import ImageNode from './nodes/image.vue';
 import BarCodeNode from './nodes/barCodeNode.vue';
 import QRCodeNode from './nodes/QRCodeNode.vue';
 import TimeNode from './nodes/timeNode.vue';
+import SelectNode from './nodes/selectNode.vue';
 import View from './view.vue';
 
 const router = useRouter();
@@ -176,8 +203,8 @@ const edges = ref([]);
 
 const setPage = (type, width, height) => {
   pageType.value = type;
-  pageHeight.value = height;
-  pageWidth.value = width;
+  pageHeight.value = height || pageHeight.value;
+  pageWidth.value = width || pageWidth.value;
 };
 
 const zoomChange = (e) => {
diff --git a/src/views/print/nodes/QRCodeNode.vue b/src/views/print/nodes/QRCodeNode.vue
index 02654fd..35805e1 100644
--- a/src/views/print/nodes/QRCodeNode.vue
+++ b/src/views/print/nodes/QRCodeNode.vue
@@ -1,14 +1,14 @@
 <template>
   <div
     :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-    <NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
                  :max-height="pageSize.height" color="#000"
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
-
     <div class="custom-node"
          :style="{ width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
 
-      <img :src="QRCodeSrc  "
+      <img :src="QRCodeSrc"
+           v-if="eleData"
            :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
            alt="" />
     </div>
@@ -19,7 +19,6 @@ import QRCode from 'qrcode';
 import { defineProps } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 
-const QRCodeSrc = ref('');
 const props = defineProps({
   isView: {
     type: Boolean,
@@ -44,15 +43,29 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
+  },
+  pageData: {
+    type: Object,
+    required: true
   }
 });
-onMounted(async () => {
+const QRCodeSrc = ref('');
+const eleData = ref('');
 
-  QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
+const getEleData = async () => {
+  if (props.isView) {
+    eleData.value = props.pageData?.[props.data.options.field] || props.data.options.default || '';
+  } else {
+    eleData.value = props.data.options.default || '1234567890abc';
+  }
+  QRCodeSrc.value = await QRCode.toDataURL(eleData.value, { margin: 0 });
+};
+onMounted(async () => {
+  await getEleData();
 });
 watch(() => JSON.parse(JSON.stringify(props.data.options.default)), async (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
+    await getEleData();
   }
 }, { deep: true, immediate: true });
 </script>
diff --git a/src/views/print/nodes/barCodeNode.vue b/src/views/print/nodes/barCodeNode.vue
index 54d395b..c790d1e 100644
--- a/src/views/print/nodes/barCodeNode.vue
+++ b/src/views/print/nodes/barCodeNode.vue
@@ -1,14 +1,13 @@
 <template>
   <div
     :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-    <NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
                  :max-height="pageSize.height" color="#000"
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
-
     <div class="custom-node"
          :style="{ width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
-
       <img
+        v-if="eleData"
         :width="props.dimensions.width+'px'"
         :height="props.dimensions.height+'px'"
         :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain' }"
@@ -50,21 +49,44 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
+  },
+  pageData: {
+    type: Object,
+    required: false
   }
+
 });
+const eleData = ref('');
+const getEleData = () => {
+  if (props.isView) {
+    eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default;
+  } else {
+    eleData.value = props.data.options.default || '1234567890abc';
+  }
+};
 onMounted(() => {
-  JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
-    format: 'CODE128',
-    lineColor: '#000',
-    displayValue: true
+  getEleData();
+  nextTick(() => {
+    if (eleData.value) {
+      JsBarcode('#barcode' + props.id, eleData.value, {
+        format: 'CODE128',
+        lineColor: '#000',
+        displayValue: true
+      });
+    }
   });
 });
 watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
   if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
-      format: 'CODE128',
-      lineColor: '#000',
-      displayValue: true
+    getEleData();
+    nextTick(() => {
+      if (eleData.value) {
+        JsBarcode('#barcode' + props.id, eleData.value, {
+          format: 'CODE128',
+          lineColor: '#000',
+          displayValue: true
+        });
+      }
     });
   }
 }, { deep: true });
diff --git a/src/views/print/nodes/image.vue b/src/views/print/nodes/image.vue
index 957e1ed..0d01b23 100644
--- a/src/views/print/nodes/image.vue
+++ b/src/views/print/nodes/image.vue
@@ -1,13 +1,14 @@
 <template>
   <div
     :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-    <NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
                  :max-height="pageSize.height" color="#000"
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
 
     <div class="custom-node"
          :style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
-      <img :src="image || props.data.options.imageSrc"
+      <img :src="eleData"
+           v-if="eleData"
            :style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
            alt="" />
     </div>
@@ -42,9 +43,29 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
+  },
+  pageData: {
+    type: Object,
+    required: true
   }
 });
 
+const eleData = ref('');
+const getEleData = () => {
+  if (props.isView) {
+    eleData.value = props.pageData?.[props.data.options.field] || props.data.options.imageSrc;
+  } else {
+    eleData.value = props.data.options.imageSrc || image;
+  }
+};
+onMounted(() => {
+  getEleData();
+});
+watch(() => JSON.parse(JSON.stringify(props.data.options.imageSrc)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    getEleData();
+  }
+}, { deep: true });
 </script>
 <style scoped>
 .custom-node {
diff --git a/src/views/print/nodes/selectNode.vue b/src/views/print/nodes/selectNode.vue
new file mode 100644
index 0000000..2f21ab3
--- /dev/null
+++ b/src/views/print/nodes/selectNode.vue
@@ -0,0 +1,81 @@
+<template>
+  <div
+    :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
+                 :max-height="pageSize.height" color="#000"
+                 v-if="!props.isView && !props.isHideHandle && props.selected" />
+    <div class="custom-node"
+         :style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'auto'}">
+      <el-select
+        v-model="value"
+        style="width: 100%;height: 100%"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+    </div>
+  </div>
+</template>
+<script setup>
+import { defineProps } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+
+const props = defineProps({
+  isView: {
+    type: Boolean,
+    required: false
+  },
+  isHideHandle: {
+    type: Boolean,
+    required: false
+  },
+  selected: {
+    type: Boolean,
+    required: false
+  },
+  data: {
+    type: Object,
+    required: true
+  },
+  dimensions: {
+    type: Object,
+    required: true
+  },
+  pageSize: {
+    type: Object,
+    required: true
+  },
+  pageData: {
+    type: Object,
+    required: true
+  }
+});
+const value = ref('');
+const options = ref([]);
+const getEleData = () => {
+  if (props.isView) {
+    options.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.selectOptions;
+  } else {
+    options.value = props.data.options.selectOptions || [];
+  }
+};
+onMounted(() => {
+  getEleData();
+});
+watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    getEleData();
+  }
+}, { deep: true });
+
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+
diff --git a/src/views/print/nodes/textNode.vue b/src/views/print/nodes/textNode.vue
index 6d714c2..697862f 100644
--- a/src/views/print/nodes/textNode.vue
+++ b/src/views/print/nodes/textNode.vue
@@ -1,15 +1,16 @@
 <template>
   <div
     :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-    <NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
                  :max-height="pageSize.height" color="#000"
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
 
     <div class="custom-node"
          :style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
       <span
+        v-if="eleData"
         :style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">
-        {{ props.data.options.name || '文字' }}
+        {{ eleData }}
       </span>
     </div>
   </div>
@@ -42,8 +43,28 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
+  },
+  pageData: {
+    type: Object,
+    required: true
   }
 });
+const eleData = ref('');
+const getEleData = () => {
+  if (props.isView) {
+    eleData.value = props.data.options.field ? props.pageData?.[props.data.options.field] : props.data.options.default;
+  } else {
+    eleData.value = props.data.options.default || '文字';
+  }
+};
+onMounted(() => {
+  getEleData();
+});
+watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    getEleData();
+  }
+}, { deep: true });
 
 </script>
 <style scoped>
diff --git a/src/views/print/nodes/timeNode.vue b/src/views/print/nodes/timeNode.vue
index be5d7ec..06614e6 100644
--- a/src/views/print/nodes/timeNode.vue
+++ b/src/views/print/nodes/timeNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
-    <NodeResizer :min-width="96 / 2.54" :min-height="96 / 2.54" :max-width="pageSize.width"
+    <NodeResizer :min-width="96 / 2.54/2" :min-height="96 / 2.54/2" :max-width="pageSize.width"
                  :max-height="pageSize.height" color="#000"
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
 
@@ -9,7 +9,7 @@
          :style="{textAlign:props.data.options.align,width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
       <span
         :style="{color:props.data.options.color,fontSize:12+'px'}">
-        {{ props.data.options.name || dayjs().format('YYYY-MM-DD HH:mm:ss') }}
+        {{ eleData }}
       </span>
     </div>
   </div>
@@ -43,8 +43,28 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
+  },
+  pageData: {
+    type: Object,
+    required: true
   }
 });
+const eleData = ref('');
+const getEleData = () => {
+  if (props.isView) {
+    eleData.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
+  } else {
+    eleData.value = dayjs().format('YYYY-MM-DD HH:mm:ss');
+  }
+};
+onMounted(() => {
+  getEleData();
+});
+watch(() => JSON.parse(JSON.stringify(props.data.options.dateTimeType)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    getEleData();
+  }
+}, { deep: true });
 
 </script>
 <style scoped>
diff --git a/src/views/print/tool.js b/src/views/print/tool.js
index f546178..916f788 100644
--- a/src/views/print/tool.js
+++ b/src/views/print/tool.js
@@ -14,13 +14,17 @@ const cmToPx = (cm) => {
 
 const getOption = (e) => {
   if (e === 'text') {
-    return { name: '', field: '', default: '' };
+    return { field: '', default: '' };
   } else if (e === 'image') {
-    return { name: '', field: '', imageSrc: '', imageType: '' };
+    return { field: '', imageSrc: '', imageType: '' };
   } else if (e === 'barCode') {
     return { field: '', default: '' };
   } else if (e === 'QRCode') {
     return { field: '', default: '' };
+  } else if (e === 'dateTime') {
+    return { field: '', dateTimeType: '' };
+  } else if (e === 'select') {
+    return { field: '', default: '', selectOptions: [] };
   } else {
     return {};
   }
@@ -34,6 +38,8 @@ const getNodeSize = (e) => {
     return { width: cmToPx(5), height: cmToPx(2) };
   } else if (e === 'QRCode') {
     return { width: cmToPx(5), height: cmToPx(5) };
+  } else if (e === 'dateTime') {
+    return { width: cmToPx(8), height: cmToPx(1) };
   } else {
     return { width: cmToPx(5), height: cmToPx(2) };
   }
diff --git a/src/views/print/view.vue b/src/views/print/view.vue
index 531ca42..91e0120 100644
--- a/src/views/print/view.vue
+++ b/src/views/print/view.vue
@@ -4,22 +4,27 @@
     <div v-for="i in nodes" class="node" :style="{left:i.position?.x+'px',top: i.position?.y+'px'}">
       <template v-if="i.type === 'text'">
         <TextNode v-bind="i" :isView="true"
+                  :pageData="pageData"
                   :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
       </template>
       <template v-if="i.type === 'image'">
-        <ImageNode v-bind="i"
+        <ImageNode v-bind="i" :isView="true"
+                   :pageData="pageData"
                    :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
       </template>
       <template v-if="i.type === 'barCode'">
-        <BarCodeNode v-bind="i"
+        <BarCodeNode v-bind="i" :isView="true"
+                     :pageData="pageData"
                      :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
       </template>
       <template v-if="i.type === 'QRCode'">
-        <QRCodeNode v-bind="i"
+        <QRCodeNode v-bind="i" :isView="true"
+                    :pageData="pageData"
                     :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
       </template>
       <template v-if="i.type === 'dateTime'">
-        <TimeNode v-bind="i"
+        <TimeNode v-bind="i" :isView="true"
+                  :pageData="pageData"
                   :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
       </template>
 
@@ -36,6 +41,7 @@ import TimeNode from './nodes/timeNode.vue';
 
 const pageWidth = ref(21);
 const pageHeight = ref(29.7);
+const pageData = ref({});
 const { cmToPx } = options;
 const nodes = ref([]);
 onMounted(() => {