From bbb3795078e10d92faccfdc04d710b7c5bc4dbda Mon Sep 17 00:00:00 2001 From: "[li_she]" <[li.she@xujiesoft.com]> Date: Wed, 20 Apr 2022 09:10:54 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=96=87=E6=9C=AC,?= =?UTF-8?q?=E5=B1=9E=E6=80=A7,=E6=9D=A1=E7=A0=81=202022-04-20=20=20sxm?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 186 +++++++++++-------------- src/App.vue | 2 +- src/components/panel/index.vue | 2 +- src/components/panel/layers.vue | 2 +- src/components/panel/options/index.vue | 111 ++++++++++++++- src/components/panel/style.vue | 30 +++- src/components/viewport/index.vue | 3 + 7 files changed, 220 insertions(+), 116 deletions(-) diff --git a/package-lock.json b/package-lock.json index 48cc6fe..dd0ad7b 100644 --- a/package-lock.json +++ b/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", diff --git a/src/App.vue b/src/App.vue index f083cd1..62759c8 100644 --- a/src/App.vue +++ b/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; diff --git a/src/components/panel/index.vue b/src/components/panel/index.vue index 6df6429..52e2cb3 100644 --- a/src/components/panel/index.vue +++ b/src/components/panel/index.vue @@ -9,7 +9,7 @@ diff --git a/src/components/panel/layers.vue b/src/components/panel/layers.vue index 61f7777..b8723ed 100644 --- a/src/components/panel/layers.vue +++ b/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 }} + >{{ layer.value }} diff --git a/src/components/panel/options/index.vue b/src/components/panel/options/index.vue index 730d03e..ffa3371 100644 --- a/src/components/panel/options/index.vue +++ b/src/components/panel/options/index.vue @@ -12,7 +12,7 @@ - {{col.title}} + {{ col.title }} @@ -25,7 +25,8 @@ size="mini" :key="index" @click="(e) => {addTempItem(e,item)}" - >{{ item.title }} + >{{ item.title }} + @@ -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: { // 添加组件 diff --git a/src/components/panel/style.vue b/src/components/panel/style.vue index 9f0f1c2..8408902 100644 --- a/src/components/panel/style.vue +++ b/src/components/panel/style.vue @@ -112,9 +112,9 @@ - + @@ -160,6 +160,18 @@ + + + + + + + + + + + + @@ -184,10 +196,22 @@ export default { }, } - diff --git a/src/components/viewport/index.vue b/src/components/viewport/index.vue index 3d1ccd7..d62d85e 100644 --- a/src/components/viewport/index.vue +++ b/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', {