修改看版配置

package.json

@@ -56,6 +56,7 @@
     "vue-json-pretty": "2.4.0",
     "vue-router": "4.3.2",
     "vue-types": "5.1.1",
+    "vue3-print-nb": "^0.1.4",
     "vue3-seamless-scroll": "^3.0.2",
     "vuedraggable": "4.1.0",
     "vxe-table": "4.5.22"

src/main.ts

@@ -56,6 +56,8 @@ import i18n from '@/lang/index';
 import VXETable from 'vxe-table';
 import 'vxe-table/lib/style.css';
 
+import print from 'vue3-print-nb';
+
 
 VXETable.config({
   zIndex: 999999
@@ -84,6 +86,7 @@ app.provide('$testColor', testColor);
 app.provide('$isJSON', isJSON);
 
 app.use(vue3SeamlessScroll);
+app.use(print);
 app.use(HighLight);
 app.use(ElementIcons);
 app.use(ElementPlus);

src/views/print/index.vue

@@ -97,6 +97,17 @@
       </div>
     </div>
   </div>
+  <el-dialog v-model="isView" title="预览">
+    <div id="printInfo" v-if="isView">
+      <View />
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" v-print="printInfoObj">打印</el-button>
+        <el-button @click="isView = false">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { v4 as uuidv4 } from 'uuid';
@@ -111,12 +122,14 @@ 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 View from './view.vue';
 
 const router = useRouter();
 // 获取自定义的方法
 const { onDragStart, onDrop, onDragOver } = tool();
 const { cmToPx } = options;
 
+const isView = ref(false);
 const flowRef = ref();
 const isSnapToGrid = ref(true);
 const pageWidth = ref(21);
@@ -136,7 +149,6 @@ const logEvent = async (eventname, event) => {
       nodeAttrForm.value = event.node.data.options;
       break;
     case 'nodeDrag':
-      console.log(event.nodes);
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
       } else {
@@ -179,9 +191,12 @@ const zoomChange = (e) => {
 };
 
 const view = () => {
+  localStorage.setItem('printNodes', JSON.stringify(nodes.value));
+  isView.value = true;
 
 };
 const save = () => {
+  localStorage.setItem('printNodes', JSON.stringify(nodes.value));
 };
 const clear = () => {
 };
@@ -220,6 +235,26 @@ window.addEventListener('keyup', keyup);
 const {
   updateNode
 } = useVueFlow();
+const printInfoObj = {
+  id: 'printInfo',
+  preview: false,  // 是否开启预览
+  beforeOpenCallback(vue) {
+    console.log('触发打印工具打开前回调');
+  },
+  openCallback(vue) {
+    console.log('触发打印工具打开的回调');
+  },
+  closeCallback() {
+    console.log('触发关闭打印工具回调');
+  },
+  previewBeforeOpenCallback() {
+    console.log('触发预览前回调');
+  },
+  previewOpenCallback() {
+    console.log('触发预览的回调');
+  }
+};
+
 </script>
 <style lang="less" scoped>
 :deep(.vue-flow__node-area) {

src/views/print/nodes/QRCodeNode.vue

@@ -6,10 +6,10 @@
                  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'}">
+         :style="{ 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"
+      <img :src="QRCodeSrc  "
-           :style="{color:props.data.options.color,width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
+           :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain'}"
            alt="" />
     </div>
   </div>
@@ -48,8 +48,13 @@ const props = defineProps({
 });
 onMounted(async () => {
 
-  QRCodeSrc.value = await QRCode.toDataURL('1234567890abc+-', { margin: 0 });
+  QRCodeSrc.value = await QRCode.toDataURL(props.data.options.default || '1234567890abc+-', { margin: 0 });
 });
+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 });
+  }
+}, { deep: true, immediate: true });
 </script>
 <style scoped>
 .custom-node {

src/views/print/nodes/barCodeNode.vue

@@ -6,11 +6,13 @@
                  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'}">
+         :style="{ width:props.dimensions.width+'px',lineHeight:props.dimensions.height+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
 
-      <svg
+      <img
-        :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px' }"
+        :width="props.dimensions.width+'px'"
-        id="barcode"></svg>
+        :height="props.dimensions.height+'px'"
+        :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain' }"
+        :id="'barcode'+props.id" />
     </div>
   </div>
 </template>
@@ -19,7 +21,12 @@ import JsBarcode from 'jsbarcode';
 import { defineProps } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
 
+
 const props = defineProps({
+  id: {
+    type: String,
+    required: false
+  },
   isView: {
     type: Boolean,
     required: false
@@ -46,15 +53,21 @@ const props = defineProps({
   }
 });
 onMounted(() => {
-
+  JsBarcode('#barcode' + props.id, props.data.options.default || '1234567890abc', {
-  JsBarcode('#barcode', '1234567890abc', {
     format: 'CODE128',
     lineColor: '#000',
-    width: 2,
-    height: 40,
     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
+    });
+  }
+}, { deep: true });
 </script>
 <style scoped>
 .custom-node {

src/views/print/nodes/timeNode.vue

@@ -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() }}
+        {{ props.data.options.name || dayjs().format('YYYY-MM-DD HH:mm:ss') }}
       </span>
     </div>
   </div>

src/views/print/tool.js

@@ -17,6 +17,10 @@ const getOption = (e) => {
     return { name: '', field: '', default: '' };
   } else if (e === 'image') {
     return { name: '', field: '', imageSrc: '', imageType: '' };
+  } else if (e === 'barCode') {
+    return { field: '', default: '' };
+  } else if (e === 'QRCode') {
+    return { field: '', default: '' };
   } else {
     return {};
   }

src/views/print/view.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="content"
+       :style="{width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px'}">
+    <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"
+                  :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
+      </template>
+      <template v-if="i.type === 'image'">
+        <ImageNode v-bind="i"
+                   :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
+      </template>
+      <template v-if="i.type === 'barCode'">
+        <BarCodeNode v-bind="i"
+                     :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
+      </template>
+      <template v-if="i.type === 'QRCode'">
+        <QRCodeNode v-bind="i"
+                    :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
+      </template>
+      <template v-if="i.type === 'dateTime'">
+        <TimeNode v-bind="i"
+                  :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
+      </template>
+
+    </div>
+  </div>
+</template>
+<script setup>
+import { options } from '@/views/print/tool.js';
+import TextNode from '@/views/print/nodes/textNode.vue';
+import ImageNode from '@/views/print/nodes/image.vue';
+import BarCodeNode from './nodes/barCodeNode.vue';
+import QRCodeNode from './nodes/QRCodeNode.vue';
+import TimeNode from './nodes/timeNode.vue';
+
+const pageWidth = ref(21);
+const pageHeight = ref(29.7);
+const { cmToPx } = options;
+const nodes = ref([]);
+onMounted(() => {
+  nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
+  console.log(nodes.value);
+});
+</script>
+<style scoped>
+.content {
+  position: relative;
+  overflow: hidden;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.node {
+  position: absolute;
+}
+</style>