修改看版配置

package.json

@@ -31,6 +31,7 @@
     "bpmn-js": "16.4.0",
     "clipboard": "2.0.11",
     "crypto-js": "4.2.0",
+    "dayjs": "^1.11.13",
     "diagram-js": "12.3.0",
     "didi": "9.0.2",
     "echarts": "5.5.0",
@@ -41,9 +42,11 @@
     "image-conversion": "^2.1.1",
     "js-beautify": "1.14.11",
     "js-cookie": "3.0.5",
+    "jsbarcode": "^3.11.6",
     "jsencrypt": "3.3.2",
     "nprogress": "0.2.0",
     "pinia": "2.1.7",
+    "qrcode": "^1.5.4",
     "screenfull": "6.0.2",
     "uuid": "^11.0.5",
     "vform3-builds": "^3.0.10",

src/views/print/index.vue

@@ -63,6 +63,22 @@
               <TextNode v-bind="textNodeProps"
                         :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TextNode>
             </template>
+            <template #node-image="imageNodeProps">
+              <ImageNode v-bind="imageNodeProps"
+                         :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></ImageNode>
+            </template>
+            <template #node-barCode="barCodeNodeProps">
+              <BarCodeNode v-bind="barCodeNodeProps"
+                           :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></BarCodeNode>
+            </template>
+            <template #node-QRCode="QRCodeNodeProps">
+              <QRCodeNode v-bind="QRCodeNodeProps"
+                          :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></QRCodeNode>
+            </template>
+            <template #node-dateTime="dateTimeNodeProps">
+              <TimeNode v-bind="dateTimeNodeProps"
+                        :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></TimeNode>
+            </template>
           </VueFlow>
         </div>
       </div>
@@ -91,6 +107,10 @@ import { StarFilled } from '@element-plus/icons-vue';
 import tool, { options } from './tool';
 import AreaNode from './nodes/areaNode.vue';
 import TextNode from './nodes/textNode.vue';
+import ImageNode from './nodes/image.vue';
+import BarCodeNode from './nodes/barCodeNode.vue';
+import QRCodeNode from './nodes/QRCodeNode.vue';
+import TimeNode from './nodes/timeNode.vue';
 
 const router = useRouter();
 // 获取自定义的方法

src/views/print/nodes/QRCodeNode.vue

@@ -0,0 +1,59 @@
+<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"
+                 :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="QRCodeSrc || props.data.options.imageSrc"
+           :style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
+           alt="" />
+    </div>
+  </div>
+</template>
+<script setup>
+import QRCode from 'qrcode';
+import { defineProps } from 'vue';
+import { NodeResizer } from '@vue-flow/node-resizer';
+
+const QRCodeSrc = ref('');
+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
+  }
+});
+onMounted(async () => {
+
+  QRCodeSrc.value = await QRCode.toDataURL('1234567890abc+-', { margin: 0 });
+});
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

src/views/print/nodes/barCodeNode.vue

@@ -0,0 +1,64 @@
+<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"
+                 :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'}">
+
+      <svg
+        :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px' }"
+        id="barcode"></svg>
+    </div>
+  </div>
+</template>
+<script setup>
+import JsBarcode from 'jsbarcode';
+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
+  }
+});
+onMounted(() => {
+
+  JsBarcode('#barcode', '1234567890abc', {
+    format: 'CODE128',
+    lineColor: '#000',
+    width: 2,
+    height: 40,
+    displayValue: true
+  });
+});
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

src/views/print/nodes/image.vue

@@ -7,12 +7,14 @@
 
     <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="props.data.options.imageSrc"
+      <img :src="image || props.data.options.imageSrc"
-           :style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}" alt="" />
+           :style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
+           alt="" />
     </div>
   </div>
 </template>
 <script setup>
+import image from '../file/img.png';
 import { defineProps } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 
@@ -40,10 +42,6 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
-  },
-  pageData: {
-    type: Object,
-    required: true
   }
 });
 

src/views/print/nodes/textNode.vue

@@ -42,10 +42,6 @@ const props = defineProps({
   pageSize: {
     type: Object,
     required: true
-  },
-  pageData: {
-    type: Object,
-    required: true
   }
 });
 

src/views/print/nodes/timeNode.vue

@@ -0,0 +1,55 @@
+<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"
+                 :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
+        :style="{color:props.data.options.color,fontSize:12+'px'}">
+        {{ props.data.options.name || dayjs().format() }}
+      </span>
+    </div>
+  </div>
+</template>
+<script setup>
+import dayjs from 'dayjs';
+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
+  }
+});
+
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

src/views/print/tool.js

@@ -22,8 +22,14 @@ const getOption = (e) => {
   }
 };
 const getNodeSize = (e) => {
-  if (e === 'line' || e === 'multiLines' || e === 'bar' || e === 'multiBars' || e === 'curve' || e === 'multiCurves' || e === 'customBoard' || e === 'pie') {
+  if (e === 'text') {
     return { width: cmToPx(5), height: cmToPx(2) };
+  } else if (e === 'image') {
+    return { width: cmToPx(5), height: cmToPx(5) };
+  } else if (e === 'barCode') {
+    return { width: cmToPx(5), height: cmToPx(2) };
+  } else if (e === 'QRCode') {
+    return { width: cmToPx(5), height: cmToPx(5) };
   } else {
     return { width: cmToPx(5), height: cmToPx(2) };
   }