修改打印配置

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;
+  pageHeight.value = height || pageHeight.value;
-  pageWidth.value = width;
+  pageWidth.value = width || pageWidth.value;
 };
 
 const zoomChange = (e) => {

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>

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', {
+  getEleData();
-    format: 'CODE128',
+  nextTick(() => {
-    lineColor: '#000',
+    if (eleData.value) {
-    displayValue: true
+      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', {
+    getEleData();
-      format: 'CODE128',
+    nextTick(() => {
-      lineColor: '#000',
+      if (eleData.value) {
-      displayValue: true
+        JsBarcode('#barcode' + props.id, eleData.value, {
+          format: 'CODE128',
+          lineColor: '#000',
+          displayValue: true
+        });
+      }
     });
   }
 }, { deep: true });

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 {

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>
+

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>

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>

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) };
   }

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(() => {