自定义文本,属性,条码 2022-04-20 sxm

package-lock.json

@@ -1687,16 +1687,6 @@
           "integrity": "sha1-4a1IbmxUUBY0xsOXxcEh2qODYHw=",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "big.js": {
           "version": "3.2.0",
           "resolved": "https://registry.npm.taobao.org/big.js/download/big.js-3.2.0.tgz",
@@ -1729,34 +1719,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
         "emojis-list": {
           "version": "2.1.0",
           "resolved": "https://registry.npm.taobao.org/emojis-list/download/emojis-list-2.1.0.tgz",
@@ -1784,13 +1746,6 @@
             "path-exists": "^4.0.0"
           }
         },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
         "html-webpack-plugin": {
           "version": "3.2.0",
           "resolved": "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1603661630264&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz",
@@ -1957,16 +1912,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npm.taobao.org/terser-webpack-plugin/download/terser-webpack-plugin-2.3.8.tgz?cache=0&sync_timestamp=1600532057758&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-2.3.8.tgz",
@@ -1993,56 +1938,6 @@
             "define-properties": "^1.1.2",
             "object.getownpropertydescriptors": "^2.0.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.8.3",
-          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
-          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          },
-          "dependencies": {
-            "big.js": {
-              "version": "5.2.2",
-              "resolved": "https://registry.npmmirror.com/big.js/-/big.js-5.2.2.tgz",
-              "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
-              "dev": true,
-              "optional": true
-            },
-            "emojis-list": {
-              "version": "3.0.0",
-              "resolved": "https://registry.npmmirror.com/emojis-list/-/emojis-list-3.0.0.tgz",
-              "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
-              "dev": true,
-              "optional": true
-            },
-            "json5": {
-              "version": "2.2.0",
-              "resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.0.tgz",
-              "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "minimist": "^1.2.5"
-              }
-            },
-            "loader-utils": {
-              "version": "2.0.2",
-              "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
-              "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "big.js": "^5.2.2",
-                "emojis-list": "^3.0.0",
-                "json5": "^2.1.2"
-              }
-            }
-          }
         }
       }
     },
@@ -11115,6 +11010,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.2.tgz",
+          "integrity": "sha512-TM57VeHptv569d/GKh6TAYdzKblwDNiumOdkFnejjD0XwTH87K90w3O7AiJRqdQoXygvi1VQTJTLGhJl7WqA7A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.8",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.8.tgz",

src/App.vue

@@ -105,7 +105,7 @@ html {
     flex-direction: column;
   }
   .kr-designer-tool {
-    width: 400px;
+    width: 410px;
     height: 100%;
     display: flex;
     flex-direction: column;

src/components/panel/index.vue

@@ -9,7 +9,7 @@
       </el-collapse-item>
       <el-collapse-item name="2">
         <template slot="title">
-          <span>样式</span>
+          <span>属性</span>
         </template>
         <appearance class="pd-l-10" />
       </el-collapse-item>

src/components/panel/layers.vue

@@ -8,7 +8,7 @@
       :type="layer === activeElement?'':'info'"
       @click="(e) => {activeLayer(e, layer)}"
       @close="(e) => {dele(e, layer)}"
-    >{{ layer.title }}</el-tag>
+    >{{ layer.value }}</el-tag>
   </div>
 </template>
 

src/components/panel/options/index.vue

@@ -25,7 +25,8 @@
         size="mini"
         :key="index"
         @click="(e) => {addTempItem(e,item)}"
-      >{{ item.title }}</el-button>
+      >{{ item.title }}
+      </el-button>
     </template>
   </div>
 </template>
@@ -35,12 +36,112 @@ export default {
   data() {
     return {
       tablePopover: false,
+      optionItems: [
+        {
+          columnsAttr: null,
+          defaultValue: "文本",
+          dragable: true,
+          height: 40,
+          id: 335,
+          isEdit: 0,
+          left: 50,
+          lodopStyle: null,
+          name: "",
+          remark: null,
+          resizable: true,
+          site: null,
+          status: null,
+          style: {
+            Alignment: "left",
+            Bold: false,
+            FontColor: "#000000",
+            FontSize: 9,
+            Italic: false,
+            ItemType: 0,
+            Underline: false,
+            zIndex: 0
+          },
+          supplierId: 1,
+          title: "文本",
+          top: 0,
+          type: "braid-txt",
+          value: "文本",
+          width: 120,
+
+        },
+        {
+          columnsAttr: null,
+          defaultValue: "属性",
+          dragable: true,
+          height: 40,
+          id: 335,
+          isEdit: 1,
+          left: 50,
+          lodopStyle: null,
+          name: "",
+          remark: null,
+          resizable: true,
+          site: null,
+          status: null,
+          style: {
+            Alignment: "left",
+            Bold: false,
+            FontColor: "#000000",
+            FontSize: 9,
+            Italic: false,
+            ItemType: 0,
+            Underline: false,
+            zIndex: 0
+          },
+          supplierId: 1,
+          title: "属性",
+          top: 0,
+          type: "braid-txt",
+          value: "属性",
+          width: 120,
+
+        },
+        {
+          columnsAttr:null,
+          defaultValue:"CK-1234567890",
+          dragable:true,
+          height:40,
+          id:338,
+          isEdit:1,
+          left:50,
+          lodopStyle: {
+            id:5,
+            qrCodeErrorlevel:"L",
+            qrCodeVersion:"1",
+            site:null,
+            supplierId:338
+          },
+          name:"条码",
+          remark:null,
+          resizable:true,
+          site:null,
+          status:null,
+          style: {
+            FontSize:9,
+            ItemType:0,
+            ShowBarText:false,
+            codeType:"Code39",
+            zIndex:0
+          },
+          supplierId:1,
+          title:"单号条码",
+          top:0,
+          type:"bar-code",
+          value:"{单号}",
+          width:120
+        }
+      ]
     }
   },
   computed: {
-    optionItems() {
-      return this.$vptd.state.optionItems
-    },
+    // optionItems() {
+    //   return this.$vptd.state.optionItems
+    // },
   },
   methods: {
     // 添加组件

src/components/panel/style.vue

@@ -114,7 +114,7 @@
         <el-col :span="12">
           <el-form-item label="条码类型" >
             <el-select
-              :disabled="activeElement.style.codeType===undefined"
+              :disabled="activeElement.type!=='bar-code'"
               v-model="activeElement.style.codeType"
               class="min-input"
             >
@@ -160,6 +160,18 @@
           </el-form-item>
         </el-col>
       </el-row>
+      <el-row>
+        <el-col :span="12">
+         <el-form-item label="文本内容">
+           <el-input v-model="activeElement.value"></el-input>
+         </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item v-if="activeElement.isEdit==1" label="属性值">
+            <el-input v-model="activeElement.name"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </el-form>
   </div>
 </template>
@@ -184,10 +196,22 @@ export default {
   },
 }
 </script>
-<style lang="scss" scoped>
+<style lang="scss" >
 .mini-form {
   ::v-deep.el-form-item--mini.el-form-item {
     margin-bottom: 10px;
   }
 }
+
+.el-select-dropdown__item {
+  background-color: #ffffff;
+}
+
+.el-scrollbar__view .el-select-dropdown__list{
+  height: 200px;
+}
+
+.el-scrollbar{
+  height: 200px;
+}
 </style>

src/components/viewport/index.vue

@@ -111,6 +111,7 @@ export default {
      * 目标元素获得焦点
      */
     handleSelection(e) {
+
       var target = this.selectTarget(e.target)
       if (target) {
         var uuid = target.getAttribute('data-uuid')
@@ -118,11 +119,13 @@ export default {
         this.$vptd.commit('select', {
           uuid: uuid || -1,
         })
+
         // 绑定移动事件：除背景图以外的元件才能移动
         target = this.$vptd.state.activeElement
         if (target.dragable) {
           this.initmovement(e) // 参见 mixins
         }
+
       } else {
         // 取消选中元素
         this.$vptd.commit('select', {