修改打印配置

src/views/print/index.vue

@@ -59,6 +59,7 @@
                    :panOnDrag="false"
                    fit-view-on-init
                    default-marker-color="#409EFF"
+                   @selectionEnd="logEvent('selectionEnd', $event)"
                    @dragover="onDragOver"
                    @node-click="logEvent('click', $event)"
                    @pane-click="logEvent('paneClick', $event)"
@@ -185,10 +186,189 @@
               />
             </el-select>
           </el-form-item>
+          <el-form-item label="边框设置" v-if="Object.keys(nodeAttrForm).includes('border')">
+            <div class="borderArea">
+              <div class="borderTopLine"
+                   :style="{display:nodeAttrForm.border.find(e=>e.type==='top').isShow?'block':'none'}"></div>
+              <div class="borderTopArea"
+                   @click="nodeAttrForm.border.find(e=>e.type==='top').isShow = !nodeAttrForm.border.find(e=>e.type==='top').isShow"></div>
+              <div class="borderRightLine"
+                   :style="{display:nodeAttrForm.border.find(e=>e.type==='right').isShow?'block':'none'}"></div>
+              <div class="borderRightArea"
+                   @click="nodeAttrForm.border.find(e=>e.type==='right').isShow = !nodeAttrForm.border.find(e=>e.type==='right').isShow"></div>
+              <div class="borderBottomLine"
+                   :style="{display:nodeAttrForm.border.find(e=>e.type==='bottom').isShow?'block':'none'}"></div>
+              <div class="borderBottomArea"
+                   @click="nodeAttrForm.border.find(e=>e.type==='bottom').isShow = !nodeAttrForm.border.find(e=>e.type==='bottom').isShow"></div>
+              <div class="borderLeftLine"
+                   :style="{display:nodeAttrForm.border.find(e=>e.type==='left').isShow?'block':'none'}"></div>
+              <div class="borderLeftArea"
+                   @click="nodeAttrForm.border.find(e=>e.type==='left').isShow = !nodeAttrForm.border.find(e=>e.type==='left').isShow"></div>
+            </div>
+          </el-form-item>
+          <el-form-item label="上框设置"
+                        v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='top').isShow">
+            <el-input
+              v-model="nodeAttrForm.border.find(e=>e.type==='top').width"
+              style=" width: 90px"
+              class="borderOption"
+            >
+              <template #append>px</template>
+            </el-input>
+
+            <el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='top').borderType = e}">
+              <div class="borderType">
+                <div class="borderView"
+                     :style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='top').borderType} #000;`"></div>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="solid">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dashed">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dotted">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <el-color-picker style="margin-left: 8px; "
+                             v-model="nodeAttrForm.border.find(e=>e.type==='top').color"
+                             show-alpha />
+          </el-form-item>
+          <el-form-item label="右框设置"
+                        v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='right').isShow">
+            <el-input
+              v-model="nodeAttrForm.border.find(e=>e.type==='right').width"
+              style=" width: 90px"
+              class="borderOption"
+            >
+              <template #append>px</template>
+            </el-input>
+
+            <el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='right').borderType = e}">
+              <div class="borderType">
+                <div class="borderView"
+                     :style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='right').borderType} #000;`"></div>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="solid">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dashed">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dotted">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <el-color-picker style="margin-left: 8px; "
+                             v-model="nodeAttrForm.border.find(e=>e.type==='right').color"
+                             show-alpha />
+          </el-form-item>
+          <el-form-item label="下框设置"
+                        v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='bottom').isShow">
+            <el-input
+              v-model="nodeAttrForm.border.find(e=>e.type==='bottom').width"
+              style=" width: 90px"
+              class="borderOption"
+            >
+              <template #append>px</template>
+            </el-input>
+
+            <el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='bottom').borderType = e}">
+              <div class="borderType">
+                <div class="borderView"
+                     :style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='bottom').borderType} #000;`"></div>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="solid">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dashed">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dotted">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <el-color-picker style="margin-left: 8px; "
+                             v-model="nodeAttrForm.border.find(e=>e.type==='bottom').color"
+                             show-alpha />
+          </el-form-item>
+          <el-form-item label="左框设置"
+                        v-if="Object.keys(nodeAttrForm).includes('border') && nodeAttrForm.border.find(e=>e.type==='left').isShow">
+            <el-input
+              v-model="nodeAttrForm.border.find(e=>e.type==='left').width"
+              style=" width: 90px"
+              class="borderOption"
+            >
+              <template #append>px</template>
+            </el-input>
+
+            <el-dropdown @command="(e)=>{nodeAttrForm.border.find(v=>v.type==='left').borderType = e}">
+              <div class="borderType">
+                <div class="borderView"
+                     :style="`border-bottom: 2px ${nodeAttrForm.border.find(e=>e.type==='left').borderType} #000;`"></div>
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="solid">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px solid #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dashed">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dashed #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                  <el-dropdown-item command="dotted">
+                    <div style="width: 100%;height: 20px;padding-top: 9px">
+                      <div style="width: 50px;margin: 0 auto;height: 0px;border-bottom: 2px dotted #000"></div>
+                    </div>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+
+            <el-color-picker style="margin-left: 8px; "
+                             v-model="nodeAttrForm.border.find(e=>e.type==='left').color"
+                             show-alpha />
+          </el-form-item>
         </el-form>
       </div>
     </div>
-    <!--    <View v-if="isView" v-model:isView="isView" />-->
   </div>
 </template>
 <script setup lang="ts">
@@ -231,8 +411,13 @@ const logEvent = async (eventname, event) => {
       nodeData.value = {};
       break;
     case 'click':
-      nodeAttrForm.value = event.node.data.options;
+      if (nodes.value.filter(e => e.selected).length === 1) {
-      nodeData.value = JSON.parse(JSON.stringify(event.node));
+        nodeAttrForm.value = event.node.data.options;
+        nodeData.value = JSON.parse(JSON.stringify(event.node));
+      } else {
+        nodeAttrForm.value = {};
+        nodeData.value = {};
+      }
       break;
     case 'nodeDrag':
       if (event.nodes.length === 1) {
@@ -252,6 +437,9 @@ const logEvent = async (eventname, event) => {
         nodeData.value = {};
       }
       break;
+    case 'selectionEnd':
+      console.log(event);
+      break;
   }
 };
 // const nodes = ref([{
@@ -315,7 +503,6 @@ onMounted(() => {
 });
 watch(() => flowRef.value?.viewport, () => {
   if (flowRef.value && (flowRef.value.viewport.x !== 0 || flowRef.value.viewport.y !== 0)) {
-    console.log('重置原点');
     flowRef.value.setTransform({
       x: 0,
       y: 0,
@@ -339,6 +526,12 @@ const nodeChange = () => {
 };
 </script>
 <style lang="less" scoped>
+.borderOption {
+  :deep(.el-input-group__append) {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
 :deep(.vue-flow__node-area) {
   z-index: -1 !important;
   pointer-events: none !important;
@@ -388,5 +581,92 @@ const nodeChange = () => {
 .flowArea {
   border-right: 1px solid #ccc;
 }
+
+.borderArea {
+  width: 200px;
+  height: 200px;
+  position: relative;
+}
+
+.borderTopArea, .borderBottomArea {
+  position: absolute;
+  left: 50px;
+  width: 100px;
+  height: 20px;
+  background: #0000;
+  border: 1px solid #ccc;
+}
+
+.borderTopArea {
+  top: 11px;
+}
+
+.borderBottomArea {
+  bottom: 11px;
+}
+
+.borderRightArea, .borderLeftArea {
+  position: absolute;
+  top: 50px;
+  width: 20px;
+  height: 100px;
+  background: #0000;
+  border: 1px solid #ccc;
+}
+
+.borderRightArea {
+  right: 11px;
+}
+
+.borderLeftArea {
+  left: 11px;
+}
+
+.borderTopLine, .borderBottomLine {
+  position: absolute;
+  left: 30px;
+  width: 140px;
+  height: 2px;
+  background: #000;
+}
+
+.borderTopLine {
+  top: 20px;
+}
+
+.borderBottomLine {
+  bottom: 20px;
+}
+
+.borderRightLine, .borderLeftLine {
+  position: absolute;
+  top: 30px;
+  width: 2px;
+  height: 140px;
+  background: #000;
+}
+
+.borderRightLine {
+  right: 20px;
+}
+
+.borderLeftLine {
+  left: 20px;
+}
+
+.borderType {
+  margin-left: 8px;
+  width: 60px;
+  height: 30px;
+  border: 1px solid #ccc;
+  position: relative;
+
+  .borderView {
+    position: absolute;
+    top: calc(50% - 1px);
+    width: 80%;
+    left: 10%;
+  }
+}
 </style>
 

src/views/print/nodes/selectNode.vue

@@ -5,7 +5,7 @@
                  :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'}">
+         :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'}">
       <el-dropdown @command="spanChange" style="width: 100%;height: 100%" v-if="!props.isPrint">
         <div class="dropDiv" :style="{justifyContent: props.data.options.verticalAlign || 'center'}">
           <span class="span" :style="{textAlign: props.data.options.horizontalAlign || 'center'}">
@@ -92,6 +92,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, obj2)
   }
 }, { deep: true, immediate: 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 lang="less">
 .custom-node {

src/views/print/nodes/textNode.vue

@@ -6,7 +6,7 @@
                  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="{...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',}">
       <span
         v-if="eleData"
         :style="{color:props.data.options.color,fontSize:props.dimensions.height+'px'}">
@@ -65,7 +65,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.default)), (obj1, 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 {

src/views/print/nodes/timeNode.vue

@@ -6,7 +6,7 @@
                  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="{...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'}">
       <span
         :style="{color:props.data.options.color,fontSize:12+'px'}">
         {{ eleData }}
@@ -66,6 +66,28 @@ watch(() => JSON.parse(JSON.stringify(props.data.options.dateTimeType)), (obj1,
   }
 }, { 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 {

src/views/print/tool.js

@@ -15,7 +15,15 @@ const cmToPx = (cm) => {
 const getOption = (e, name) => {
   let commonOption = { field: name };
   if (e === 'text') {
-    return { ...commonOption, default: '' };
+    return {
+      ...commonOption,
+      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'
+      }]
+    };
   } else if (e === 'image') {
     return { ...commonOption, imageSrc: '', imageType: '' };
   } else if (e === 'barCode') {
@@ -23,14 +31,27 @@ const getOption = (e, name) => {
   } else if (e === 'QRCode') {
     return { ...commonOption, default: '' };
   } else if (e === 'dateTime') {
-    return { ...commonOption, dateTimeType: '' };
+    return {
+      ...commonOption,
+      dateTimeType: '',
+      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'
+      }]
+    };
   } else if (e === 'select') {
     return {
       ...commonOption,
       default: '',
       selectOptions: [],
       horizontalAlign: 'center',
-      verticalAlign: 'center'
+      verticalAlign: 'center',
+      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'
+      }]
     };
   } else {
     return {};