修改打印

src/views/boardGenerate/nodes/form/backgroundNode.vue

@@ -6,9 +6,8 @@
 
     <div class="custom-node"
          :style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
-
       <div style="width: 100%; height: 100%;background-repeat: no-repeat; background-size: 100% 100%;"
-           :style="{backgroundImage:props.data.options.backgroundImage,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}">
+           :style="{backgroundImage:`url(${props.data.options.backgroundImage})`,backgroundColor:props.data.options.backgroundColor,border:props.data.options.isBorder?  ` 1px solid ${props.data.options.borderColor}` :''}">
 
       </div>
     </div>

src/views/print/index.vue

@@ -40,6 +40,8 @@
         </el-tag>
         <el-tag :draggable="true" @dragstart="onDragStart($event, 'inputNode',pid)" class="mx-1" size="large">可输入
         </el-tag>
+        <!--        <el-tag :draggable="true" @dragstart="onDragStart($event, 'box',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">竖线-->
@@ -104,6 +106,10 @@
               <InputNode v-bind="inputNodeProps"
                          :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></InputNode>
             </template>
+            <template #node-box="boxNodeProps">
+              <BoxNode v-bind="boxNodeProps"
+                       :pageSize="{width:zoom * cmToPx(pageWidth) ,height:zoom * cmToPx(pageHeight) }"></BoxNode>
+            </template>
           </VueFlow>
         </div>
       </div>
@@ -136,6 +142,23 @@
           <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('fontSize')">
+            <el-input-number :min="12" :controls="false" v-model="nodeAttrForm.fontSize"
+                             style="width: 100%" />
+          </el-form-item>
+          <el-form-item label="使用字典" v-if="Object.keys(nodeAttrForm).includes('dic')">
+            <el-select
+              v-model="nodeAttrForm.dic"
+              placeholder="Select"
+            >
+              <el-option
+                v-for="i in dics"
+                :key="i"
+                :label="i.dictName"
+                :value="i.dictType"
+              />
+            </el-select>
+          </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>
@@ -373,6 +396,9 @@
                              v-model="nodeAttrForm.border.find(e=>e.type==='left').color"
                              show-alpha />
           </el-form-item>
+          <el-form-item label="自定义脚本">
+            <el-input type="textarea" :rows="2" v-model="nodeAttrForm.JScript" style="width: 100%" />
+          </el-form-item>
         </el-form>
       </div>
     </div>
@@ -392,9 +418,11 @@ import QRCodeNode from './nodes/QRCodeNode.vue';
 import TimeNode from './nodes/timeNode.vue';
 import SelectNode from './nodes/selectNode.vue';
 import InputNode from './nodes/inputNode.vue';
+import BoxNode from './nodes/boxNode.vue';
 import { updatePrintTemplateList } from '@/api/system/printTemplateList';
 import { getPrintTemplateInfo, listPrintTemplateInfo, updatePrintTemplateInfo } from '@/api/system/printTemplateInfo';
 import { getPrintTemplateNode, getSysPrintTemplateNodeList, updateTemplateNode } from '@/api/system/printTemplateNode';
+import { listType } from '@/api/system/dict/type';
 
 const router = useRouter();
 const { updateNode } = useVueFlow();
@@ -403,6 +431,24 @@ const { onDragStart, onDrop, onDragOver } = tool();
 const { cmToPx } = options;
 const internalInstance = getCurrentInstance();
 
+const data = {
+  planCode:'1',
+  cardId:'1',
+  classes:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+  planCode:'1',
+};
+
+const dics = ref([]);
 const flowRef = ref();
 // const isView = ref(false);
 const isSnapToGrid = ref(true);
@@ -538,6 +584,13 @@ const clear = () => {
 };
 
 onMounted(() => {
+  listType({
+    pageNum: 1,
+    pageSize: 9999999
+  }).then(e => {
+    dics.value = e.rows;
+    console.log(dics.value);
+  });
   flowRef.value.onInit(() => {
     flowRef.value.setTransform({
       x: 0,

src/views/print/nodes/boxNode.vue

@@ -0,0 +1,96 @@
+<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="{...border(),textAlign:props.data.options.horizontalAlign,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'}">
+        {{ eleData }}
+      </span>
+    </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 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 });
+const border = () => {
+  let res = {};
+  if (props.data.options.border) {
+    let top = props.data.options.border.find(e => e.type === 'top');
+    let right = props.data.options.border.find(e => e.type === 'right');
+    let bottom = props.data.options.border.find(e => e.type === 'bottom');
+    let left = props.data.options.border.find(e => e.type === 'left');
+    if (top.isShow) {
+      res['borderTop'] = `${top.width}px ${top.borderType} ${top.color}`;
+    }
+    if (right.isShow) {
+      res['borderRight'] = `${right.width}px ${right.borderType} ${right.color}`;
+    }
+    if (bottom.isShow) {
+      res['borderBottom'] = `${bottom.width}px ${bottom.borderType} ${bottom.color}`;
+    }
+    if (left.isShow) {
+      res['borderLeft'] = `${left.width}px ${left.borderType} ${left.color}`;
+    }
+  }
+  return res;
+};
+</script>
+<style scoped>
+.custom-node {
+  position: absolute;
+}
+</style>
+

src/views/print/nodes/inputNode.vue

@@ -57,24 +57,9 @@ const props = defineProps({
 });
 const text = ref('');
 const options = ref([]);
-const getEleData = () => {
-  if (props.isView) {
-    options.value = props.data.options.selectOptions || [];
-  } else {
-    options.value = props.data.options.selectOptions || [];
-  }
-};
 const spanChange = (val) => {
   text.value = val;
 };
-onMounted(() => {
-  getEleData();
-});
-watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
-    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;

src/views/print/nodes/selectNode.vue

@@ -31,6 +31,8 @@
 <script setup>
 import { defineProps } from 'vue';
 import { NodeResizer } from '@vue-flow/node-resizer';
+import { listData } from '@/api/system/dict/data/index';
+import request from '@/utils/request';
 
 const props = defineProps({
   isView: {
@@ -68,11 +70,38 @@ const props = defineProps({
 });
 const text = ref('');
 const options = ref([]);
-const getEleData = () => {
+const getDic = (value) => {
+  listData({
+    pageNum: 1,
+    pageSize: 9999999,
+    dictType: value
+  }).then(e => {
+    options.value = e.rows.map(v => v.dictLabel);
+  })
+    .catch(e => {
+      getDic(value);
+    });
+};
+const getEleData = async () => {
   if (props.isView) {
-    options.value = props.data.options.selectOptions || [];
+    if (props.data.options.JScript) {
+      const fun = () => {
+        return `return async ()=>{
+        ${props.data.options.JScript}
+      }`;
+      };
+      const addFunction = new Function('request', fun());
+      const data = await addFunction(request)();
+      options.value = data;
+    } else if (props.data.options.field) {
+      options.value = options.value = props.pageData?.[props.data.options.field] || [];
+    } else if (props.data.options.dic) {
+      getDic(props.data.options.dic);
+    } else {
+      options.value = props.data.options.selectOptions || [];
+    }
   } else {
-    options.value = props.data.options.selectOptions || [];
+    options.value = props.data.options.field ? (props.pageData?.[props.data.options.field] || []) : props.data.options.selectOptions || [];
   }
 };
 const spanChange = (val) => {
@@ -81,9 +110,13 @@ const spanChange = (val) => {
 onMounted(() => {
   getEleData();
 });
-watch(() => JSON.parse(JSON.stringify(props.data.options.selectOptions)), (obj1, obj2) => {
+let timestep = new Date().getTime();
-  if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+watch(() => [JSON.parse(JSON.stringify(props.data.options.selectOptions)), JSON.parse(JSON.stringify(props.data.options.field)), JSON.parse(JSON.stringify(props.data.options.dic || ''))], (obj1, obj2) => {
-    getEleData();
+  if (new Date().getTime() - timestep > 500) {
+    timestep = new Date().getTime();
+    if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
+      getEleData();
+    }
   }
 }, { deep: true });
 watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2) => {

src/views/print/nodes/textNode.vue

@@ -6,10 +6,11 @@
                  v-if="!props.isView && !props.isHideHandle && props.selected" />
 
     <div class="custom-node"
-         :style="{...border(),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="{...border(),justifyContent:  'center',textAlign:props.data.options.horizontalAlign,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'}">
+        :style="{color:props.data.options.color,fontSize:props.data.options.fontSize+'px'}">
+<!--        :style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">-->
         {{ eleData }}
       </span>
     </div>

src/views/print/tool.js

@@ -16,8 +16,9 @@ const getOption = (e, name) => {
   let commonOption = { field: name || '' };
   if (e === 'text') {
     return {
-      ...commonOption,
+      ...commonOption, horizontalAlign: 'center',
       default: '',
+      fontSize: 14,
       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' }, {
@@ -42,8 +43,9 @@ const getOption = (e, name) => {
     };
   } else if (e === 'select') {
     return {
-      ...commonOption,
+      ...commonOption, dic: '',
       default: '',
+      JScript: '',
       selectOptions: [],
       horizontalAlign: 'center',
       verticalAlign: 'center',
@@ -55,9 +57,7 @@ const getOption = (e, name) => {
     };
   } else if (e === 'inputNode') {
     return {
-      ...commonOption,
       default: '',
-      selectOptions: [],
       horizontalAlign: 'center',
       verticalAlign: 'center',
       border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {