修改打印配置

添加多张打印

src/views/boardGenerate/index.vue

@@ -242,19 +242,19 @@
         <el-form :model="nodeDataForm" label-width="auto" style="max-width: 600px">
           <el-form-item label="x">
             <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.x" style="width: 100%"
-                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+                             @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
           </el-form-item>
           <el-form-item label="y">
             <el-input-number :precision="0" :step="1" v-model="nodeDataForm.position.y" style="width: 100%"
-                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+                             @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
           </el-form-item>
           <el-form-item label="宽度">
             <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.width" style="width: 100%"
-                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+                             @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
           </el-form-item>
           <el-form-item label="高度">
             <el-input-number :precision="0" :step="1" v-model="nodeDataForm.dimensions.height" style="width: 100%"
-                             @change="updateNode(nodeAttrForm.id,nodeAttrForm,{ replace: true })" />
+                             @change="updateNode(nodeDataForm.id,nodeDataForm,{ replace: true })" />
           </el-form-item>
         </el-form>
       </el-collapse-item>
@@ -437,10 +437,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { v4 as uuidv4 } from 'uuid';
-import { Setting, Check, Close, Plus } from '@element-plus/icons-vue';
+import { Check, Close, Plus, Setting, StarFilled } from '@element-plus/icons-vue';
-import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core';
+import { MarkerType, useVueFlow, VueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
-import { StarFilled } from '@element-plus/icons-vue';
 import LineNode from './nodes/board/lineNode.vue';
 import MultiLinesNode from './nodes/board/multiLinesNode.vue';
 import CurveNode from './nodes/board/curveNode.vue';
@@ -460,7 +459,7 @@ import ImgNode from './nodes/form/imgNode.vue';
 import AreaNode from './nodes/other/areaNode.vue';
 import tool from './tool';
 import { getDataSourceList } from '@/views/boardGenerate/api/dataSource';
-import { editBoardApi, getBoardApi, getBoardListApi } from '@/views/boardGenerate/api/boardList';
+import { editBoardApi, getBoardApi } from '@/views/boardGenerate/api/boardList';
 
 const router = useRouter();
 // 获取自定义的方法

src/views/print/index.vue

@@ -59,6 +59,7 @@
                    @node-click="logEvent('click', $event)"
                    @pane-click="logEvent('paneClick', $event)"
                    @node-drag-start="logEvent('nodeDrag', $event)"
+                   @node-drag-stop="logEvent('nodeDragEnd', $event)"
           >
             <Background variant="lines" :size="0.4" :gap="cmToPx(0.5)" pattern-color="#ddd"
                         style="background-color: #fff" />
@@ -96,6 +97,24 @@
       </div>
       <div class="rightPanel" style="padding: 8px">
         <el-form :model="nodeAttrForm" label-width="auto" style="max-width: 600px">
+          <el-form-item label="组件大小" v-if="Object.keys(nodeData).length>0">
+            <el-input-number :min="1" :controls="false" v-model="nodeData.dimensions.width"
+                             style="width: calc(50% - 12px)"
+                             @change="nodeData.dimensions.width = Math.max(1,nodeData.dimensions.width);nodeChange()" />
+            <div style="display: inline-block;width: 20px;text-align: center">x</div>
+            <el-input-number :min="1" :controls="false" v-model="nodeData.dimensions.height"
+                             style="width: calc(50% - 12px)"
+                             @change="nodeData.dimensions.height = Math.max(1,nodeData.dimensions.height);nodeChange()" />
+          </el-form-item>
+          <el-form-item label="组件位置" v-if="Object.keys(nodeData).length>0">
+            <el-input-number :precision="2" :min="1" :controls="false" v-model="nodeData.position.x"
+                             style="width: calc(50% - 12px)"
+                             @change="nodeData.position.x = Math.max(1,nodeData.position.x);nodeChange()" />
+            <div style="display: inline-block;width: 20px;text-align: center">x</div>
+            <el-input-number :precision="2" :min="1" :controls="false" v-model="nodeData.position.y"
+                             style="width: calc(50% - 12px)"
+                             @change="nodeData.position.y = Math.max(1,nodeData.position.y);nodeChange()" />
+          </el-form-item>
           <el-form-item label="名称" v-if="Object.keys(nodeAttrForm).includes('name')">
             <el-input v-model="nodeAttrForm.name" style="width: 100%" />
           </el-form-item>
@@ -119,32 +138,60 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item v-if="Object.keys(nodeAttrForm).includes('selectOptions')" label="选项集合">
+            <el-input-tag
+              v-model="nodeAttrForm.selectOptions"
+            />
+          </el-form-item>
+          <el-form-item v-if="Object.keys(nodeAttrForm).includes('horizontalAlign')" label="水平对齐">
+            <el-select
+              v-model="nodeAttrForm.horizontalAlign"
+              placeholder="Select"
+            >
+              <el-option
+                label="左对齐"
+                value="left"
+              />
+              <el-option
+                label="居中对齐"
+                value="center"
+              />
+              <el-option
+                label="右对齐"
+                value="right"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="Object.keys(nodeAttrForm).includes('verticalAlign')" label="垂直对齐">
+            <el-select
+              v-model="nodeAttrForm.verticalAlign"
+              placeholder="Select"
+            >
+              <el-option
+                label="顶部对齐"
+                value="start"
+              />
+              <el-option
+                label="居中对齐"
+                value="center"
+              />
+              <el-option
+                label="底部对齐"
+                value="end"
+              />
+            </el-select>
+          </el-form-item>
         </el-form>
       </div>
     </div>
+    <View v-if="isView" v-model:isView="isView" />
   </div>
-  <el-dialog v-model="isView" title="预览">
-    <div id="printInfo" v-if="isView" ref="printRef">
-      <View />
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button type="primary" @click="printFun">打印</el-button>
-        <!--        <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 html2canvas from 'html2canvas';
-import jsPDF from 'jspdf';
 import { v4 as uuidv4 } from 'uuid';
 import { useRouter } from 'vue-router';
-import { VueFlow, useVueFlow } from '@vue-flow/core';
+import { useVueFlow, VueFlow } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
-import { StarFilled } from '@element-plus/icons-vue';
 import tool, { options } from './tool';
 import AreaNode from './nodes/areaNode.vue';
 import TextNode from './nodes/textNode.vue';
@@ -156,13 +203,13 @@ import SelectNode from './nodes/selectNode.vue';
 import View from './view.vue';
 
 const router = useRouter();
+const { updateNode } = useVueFlow();
 // 获取自定义的方法
 const { onDragStart, onDrop, onDragOver } = tool();
 const { cmToPx } = options;
 
-const printRef = ref();
-const isView = ref(false);
 const flowRef = ref();
+const isView = ref(false);
 const isSnapToGrid = ref(true);
 const pageWidth = ref(21);
 const pageHeight = ref(29.7);
@@ -170,21 +217,35 @@ const pageType = ref('A4');
 const zoom = ref(1);
 const zoomInput = ref('100%');
 const nodeAttrForm = ref({});
+const nodeData = ref({});
 const pid = ref(`area_${uuidv4().replaceAll('-', '_')}`);
 
 const logEvent = async (eventname, event) => {
   switch (eventname) {
     case 'paneClick':
       nodeAttrForm.value = {};
+      nodeData.value = {};
       break;
     case 'click':
       nodeAttrForm.value = event.node.data.options;
+      nodeData.value = JSON.parse(JSON.stringify(event.node));
       break;
     case 'nodeDrag': 
       if (event.nodes.length === 1) {
         nodeAttrForm.value = event.node.data.options;
+        nodeData.value = JSON.parse(JSON.stringify(event.node));
       } else {
         nodeAttrForm.value = {};
+        nodeData.value = {};
+      }
+      break;
+    case 'nodeDragEnd':
+      if (event.nodes.length === 1) {
+        nodeAttrForm.value = event.node.data.options;
+        nodeData.value = JSON.parse(JSON.stringify(event.node));
+      } else {
+        nodeAttrForm.value = {};
+        nodeData.value = {};
       }
       break;
   }
@@ -263,37 +324,8 @@ const keyup = () => {
 };
 window.addEventListener('keydown', toggleSnapToGrid);
 window.addEventListener('keyup', keyup);
-// flow内置方法
+const nodeChange = () => {
-const {
+  updateNode(nodeData.value.id, JSON.parse(JSON.stringify(nodeData.value)), { replace: false });
-  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('触发预览的回调');
-  }
-};
-const printFun = () => {
-  const element = printRef.value;
-  html2canvas(element).then(canvas => {
-    const imgData = canvas.toDataURL('image/png');
-    const pdf = new jsPDF();
-    pdf.addImage(imgData, 'PNG', 0, 0);
-    pdf.save(`${new Date().getTime()}.pdf`);
-  });
 };
 </script>
 <style lang="less" scoped>

src/views/print/nodes/image.vue

@@ -3,7 +3,7 @@
     :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" />
+                 v-if="!props.isView && !props.isHideHandle && props.selected&&props.dimensions.width&&props.dimensions.height" />
 
     <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'}">
@@ -46,7 +46,7 @@ const props = defineProps({
   },
   pageData: {
     type: Object,
-    required: true
+    required: false
   }
 });
 

src/views/print/nodes/selectNode.vue

@@ -5,18 +5,26 @@
                  :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'}">
+         :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'}">
-      <el-select
+      <el-dropdown @command="spanChange" style="width: 100%;height: 100%" v-if="!props.isPrint">
-        v-model="value"
+        <div class="dropDiv" :style="{justifyContent: props.data.options.verticalAlign || 'center'}">
-        style="width: 100%;height: 100%"
+          <span class="span" :style="{textAlign: props.data.options.horizontalAlign || 'center'}">
-      >
+          {{ text }}
-        <el-option
+          </span>
-          v-for="item in options"
+        </div>
-          :key="item.value"
+        <template #dropdown>
-          :label="item.label"
+          <el-dropdown-menu>
-          :value="item.value"
+            <el-dropdown-item v-for="i in options" :command="i">{{ i }}</el-dropdown-item>
-        />
+          </el-dropdown-menu>
-      </el-select>
+        </template>
+      </el-dropdown>
+      <div class="printDiv" :style="{justifyContent: props.data.options.verticalAlign || 'center'}"
+           v-if="props.isPrint">
+          <span class="span" :style="{textAlign: props.data.options.horizontalAlign || 'center'}">
+          {{ text }}
+          </span>
+      </div>
+
     </div>
   </div>
 </template>
@@ -29,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     required: false
   },
+  isPrint: {
+    type: Boolean,
+    required: false
+  },
   isHideHandle: {
     type: Boolean,
     required: false
@@ -54,15 +66,18 @@ const props = defineProps({
     required: true
   }
 });
-const value = ref('');
+const text = 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;
+    options.value = props.data.options.selectOptions || [];
   } else {
     options.value = props.data.options.selectOptions || [];
   }
 };
+const spanChange = (val) => {
+  text.value = val;
+};
 onMounted(() => {
   getEleData();
 });
@@ -71,11 +86,45 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1,
     getEleData();
   }
 }, { deep: true });
+watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {
+  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+    text.value = props.data.options.default;
+  }
+}, { deep: true, immediate: true });
 
 </script>
-<style scoped>
+<style scoped lang="less">
 .custom-node {
   position: absolute;
 }
+
+.dropDiv {
+  min-width: 20px;
+  width: 100%;
+  height: 100%;
+  border-bottom: 1px solid #409EFF;
+  //white-space: nowrap;
+  display: flex;
+  flex-direction: column;
+
+  .span {
+    text-align: center;
+    width: 100%;
+  }
+}
+
+.printDiv {
+  min-width: 20px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .span {
+    text-align: center;
+    width: 100%;
+  }
+}
+
 </style>
 

src/views/print/tool.js

@@ -1,5 +1,5 @@
 import { useVueFlow } from '@vue-flow/core';
-import { ref, watch } from 'vue';
+import { ref } from 'vue';
 import { v4 as uuidv4 } from 'uuid';
 
 
@@ -13,18 +13,25 @@ const cmToPx = (cm) => {
 
 
 const getOption = (e) => {
+  let commonOption = { field: '' };
   if (e === 'text') {
-    return { field: '', default: '' };
+    return { ...commonOption, default: '' };
   } else if (e === 'image') {
-    return { field: '', imageSrc: '', imageType: '' };
+    return { ...commonOption, imageSrc: '', imageType: '' };
   } else if (e === 'barCode') {
-    return { field: '', default: '' };
+    return { ...commonOption, default: '' };
   } else if (e === 'QRCode') {
-    return { field: '', default: '' };
+    return { ...commonOption, default: '' };
   } else if (e === 'dateTime') {
-    return { field: '', dateTimeType: '' };
+    return { ...commonOption, dateTimeType: '' };
   } else if (e === 'select') {
-    return { field: '', default: '', selectOptions: [] };
+    return {
+      ...commonOption,
+      default: '',
+      selectOptions: [],
+      horizontalAlign: 'center',
+      verticalAlign: 'center'
+    };
   } else {
     return {};
   }
@@ -40,6 +47,8 @@ const getNodeSize = (e) => {
     return { width: cmToPx(5), height: cmToPx(5) };
   } else if (e === 'dateTime') {
     return { width: cmToPx(8), height: cmToPx(1) };
+  } else if (e === 'select') {
+    return { width: cmToPx(4), height: cmToPx(1) };
   } else {
     return { width: cmToPx(5), height: cmToPx(2) };
   }

src/views/print/view.vue

@@ -1,53 +1,127 @@
 <template>
-  <div class="content"
+
-       :style="{width: cmToPx(pageWidth)+'px',height: cmToPx(pageHeight)+'px'}">
+  <el-dialog v-model="props.isView" title="预览" :close-on-press-escape="false" :show-close="false">
+    <div id="printInfo" ref="printRef">
+      <div class="content" v-for=" i in pageDatas"
+           :style="{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'">
-        <TextNode v-bind="i" :isView="true"
+            <TextNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
-                  :pageData="pageData"
                       :pageSize="{width:  cmToPx(pageWidth) ,height: cmToPx(pageHeight) }"></TextNode>
           </template>
           <template v-if="i.type === 'image'">
-        <ImageNode v-bind="i" :isView="true"
+            <ImageNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
-                   :pageData="pageData"
                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></ImageNode>
           </template>
           <template v-if="i.type === 'barCode'">
-        <BarCodeNode v-bind="i" :isView="true"
+            <BarCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
-                     :pageData="pageData"
                          :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></BarCodeNode>
           </template>
           <template v-if="i.type === 'QRCode'">
-        <QRCodeNode v-bind="i" :isView="true"
+            <QRCodeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
-                    :pageData="pageData"
                         :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></QRCodeNode>
           </template>
           <template v-if="i.type === 'dateTime'">
-        <TimeNode v-bind="i" :isView="true"
+            <TimeNode v-bind="i" :isView="true" :isPrint="isPrint" :pageData="i"
-                  :pageData="pageData"
                       :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"></TimeNode>
           </template>
+          <template v-if="i.type === 'select'">
+            <SelectNode :isView="true" :isPrint="isPrint" :pageData="i"
+                        :pageSize="{width:  cmToPx(pageWidth) ,height:  cmToPx(pageHeight) }"
+                        v-bind="i"></SelectNode>
+          </template>
 
         </div>
       </div>
+    </div>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" @click="printFun">打印</el-button>
+        <!--        <el-button type="primary" v-print="printInfoObj">打印</el-button>-->
+        <el-button @click="closeDialog ">关闭</el-button>
+      </span>
+    </template>
+  </el-dialog>
 </template>
 <script setup>
+
+import html2canvas from 'html2canvas';
+import jsPDF from 'jspdf';
 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';
+import SelectNode from './nodes/selectNode.vue';
 
+
+const props = defineProps({
+  isView: {
+    type: Boolean,
+    required: false
+  }
+});
+const emit = defineEmits(['update:isView']);
+
+
+const isPrint = ref(false);
+const printRef = ref();
 const pageWidth = ref(21);
 const pageHeight = ref(29.7);
-const pageData = ref({});
+const pageDatas = ref([{}, {}, {}, {}, {}, {}]);
 const { cmToPx } = options;
 const nodes = ref([]);
 onMounted(() => {
   nodes.value = JSON.parse(localStorage.getItem('printNodes') || '[]');
   console.log(nodes.value);
 });
+
+const printInfoObj = {
+  id: 'printInfo',
+  preview: false,  // 是否开启预览
+  beforeOpenCallback(vue) {
+    console.log('触发打印工具打开前回调');
+  },
+  openCallback(vue) {
+    console.log('触发打印工具打开的回调');
+  },
+  closeCallback() {
+    console.log('触发关闭打印工具回调');
+  },
+  previewBeforeOpenCallback() {
+    console.log('触发预览前回调');
+  },
+  previewOpenCallback() {
+    console.log('触发预览的回调');
+  }
+};
+const printFun = () => {
+  isPrint.value = true;
+  nextTick(() => {
+    const element = printRef.value;
+    let eles = element.querySelectorAll('.content');
+    const pros = [];
+
+    eles.forEach((ele, index) => {
+      pros.push(
+        html2canvas(ele).then(canvas => {
+          const imgData = canvas.toDataURL('image/png');
+          const pdf = new jsPDF();
+          pdf.addImage(imgData, 'PNG', 0, 0);
+          pdf.save(`${new Date().getTime()}-${index}.pdf`);
+        })
+      );
+    });
+    Promise.all(pros).then((values) => {
+      console.log('PDF');
+      isPrint.value = false;
+    });
+  });
+};
+const closeDialog = () => {
+  emit('update:isView', false);
+};
 </script>
 <style scoped>
 .content {
@@ -55,6 +129,7 @@ onMounted(() => {
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: 100% 100%;
+  border: 1px solid #ccc;
 }
 
 .node {