修改打印设置

src/views/print/index.vue

@@ -540,7 +540,7 @@ const nodeChange = () => {
   updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false });
 };
 const imp = () =>{
-let json ='[{"id":"text_e0ed2e33_b370_493f_9e85_179277939055","type":"text","dimensions":{"width":189,"height":76},"computedPosition":{"x":283.4645669291338,"y":0,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":0},"data":{"options":{"field":"planDetailId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":true,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent"},{"id":"text_af484d4b_42c0_463f_b0f7_eb0f716fbc5a","type":"text","dimensions":{"width":189,"height":19},"computedPosition":{"x":283.4645669291338,"y":94.48818897637794,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":94.48818897637794},"data":{"options":{"default":"planId","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent","style":{"width":"189px","height":"18.89763779527559px"}},{"id":"barCode_1dd4465e_928c_49f2_867b_061fc5f96843","type":"barCode","dimensions":{"width":189,"height":76},"computedPosition":{"x":0,"y":188.97637795275588,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":0,"y":188.97637795275588},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"barCode","extent":"parent"},{"id":"QRCode_9ad0beba_b555_45ac_a1c6_23f23a6c9e9a","type":"QRCode","dimensions":{"width":189,"height":189},"computedPosition":{"x":529.1338582677165,"y":151.1811023622047,"z":1000},"handleBounds":{"source":null,"target":null},"selected":true,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":529.1338582677165,"y":151.1811023622047},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"QRCode","extent":"parent"}]'
+  let json = '[{"id":"text_e0ed2e33_b370_493f_9e85_179277939055","type":"text","dimensions":{"width":189,"height":76},"computedPosition":{"x":283.4645669291338,"y":0,"z":1000},"handleBounds":{"source":null,"target":null},"selected":true,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":0},"data":{"options":{"field":"planDetailId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":true,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent"},{"id":"barCode_1dd4465e_928c_49f2_867b_061fc5f96843","type":"barCode","dimensions":{"width":189,"height":76},"computedPosition":{"x":0,"y":188.97637795275588,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":0,"y":188.97637795275588},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"barCode","extent":"parent"},{"id":"QRCode_9ad0beba_b555_45ac_a1c6_23f23a6c9e9a","type":"QRCode","dimensions":{"width":189,"height":189},"computedPosition":{"x":529.1338582677165,"y":151.1811023622047,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":529.1338582677165,"y":151.1811023622047},"data":{"options":{"field":"returnBarcode","default":""},"outputData":{}},"events":{},"name":"QRCode","extent":"parent"},{"id":"text_1d36c573_734e_4b05_bbc5_4a048ed19e7f","type":"text","dimensions":{"width":189,"height":19},"computedPosition":{"x":283.4645669291338,"y":94.48818897637794,"z":0},"handleBounds":{"source":null,"target":null},"selected":false,"dragging":false,"resizing":false,"initialized":false,"isParent":false,"position":{"x":283.4645669291338,"y":94.48818897637794},"data":{"options":{"field":"planId","default":"","border":[{"type":"top","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"right","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"bottom","isShow":false,"width":1,"color":"#000","borderType":"solid"},{"type":"left","isShow":false,"width":1,"color":"#000","borderType":"solid"}]},"outputData":{}},"events":{},"name":"text","extent":"parent","style":{"width":"189px","height":"19px"}}]';
   nodes.value = JSON.parse(json);
   pid.value = nodes.value.find(e => e.name === 'area')?.id;
 }

src/views/print/nodes/barCodeNode.vue

@@ -11,7 +11,7 @@
         :width="props.dimensions.width+'px'"
         :height="props.dimensions.height+'px'"
         :style="{ width:props.dimensions.width+'px',height:props.dimensions.height+'px',objectFit:'contain' }"
-        :id="'barcode'+props.id" />
+        :id="'barcode'+props.id+props.index" />
     </div>
   </div>
 </template>
@@ -26,6 +26,10 @@ const props = defineProps({
     type: String,
     required: false
   },
+  index: {
+    type: Number,
+    required: false
+  },
   isView: {
     type: Boolean,
     required: false
@@ -68,7 +72,7 @@ onMounted(() => {
   getEleData();
   nextTick(() => {
     if (eleData.value) {
-      JsBarcode('#barcode' + props.id, eleData.value, {
+      JsBarcode('#barcode' + props.id + props.index, eleData.value, {
         format: 'CODE128',
         lineColor: '#000',
         displayValue: true
@@ -81,7 +85,7 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2)
     getEleData();
     nextTick(() => {
       if (eleData.value) {
-        JsBarcode('#barcode' + props.id, eleData.value, {
+        JsBarcode('#barcode' + props.id + props.index, eleData.value, {
           format: 'CODE128',
           lineColor: '#000',
           displayValue: true

src/views/print/view.vue

@@ -2,7 +2,7 @@
 
   <el-dialog v-model="isView" title="预览" :close-on-press-escape="false" :show-close="false">
     <div id="printInfo" ref="printRef">
-      <div class="content" v-for=" pageData in pageDatas"
+      <div class="content" v-for=" (pageData,index) in pageDatas"
            :style="{pageBreakAfter: 'always',width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px',marginBottom:'4px'}">
         <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'">
@@ -14,7 +14,7 @@
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
           </template>
           <template v-if="i.type === 'barCode'">
-            <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
+            <BarCodeNode :index="index" v-bind="i" :isView="true" :isPrint="isPrint" :pageData="pageData"
                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
           </template>
           <template v-if="i.type === 'QRCode'">