zuowenwen
/
lodop_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
[li_she] 4 years ago
parent
0d005cda89
commit
bbb3795078
7 changed files with 220 additions and 116 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      package-lock.json
  2. 2
      src/App.vue
  3. 2
      src/components/panel/index.vue
  4. 2
      src/components/panel/layers.vue
  5. 111
      src/components/panel/options/index.vue
  6. 30
      src/components/panel/style.vue
  7. 3
      src/components/viewport/index.vue

186
package-lock.json
View File

@ -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",

2
src/App.vue
View File

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

2
src/components/panel/index.vue
View File

@ -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>

2
src/components/panel/layers.vue
View File

@ -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>

111
src/components/panel/options/index.vue
View File

@ -12,7 +12,7 @@
<el-checkbox-group v-model="item.selectCol">
<el-row>
<el-col v-for="col in item.columnsAttr" :key="col.name" :span="12">
<el-checkbox :label="col.name">{{col.title}}</el-checkbox>
<el-checkbox :label="col.name">{{ col.title }}</el-checkbox>
</el-col>
</el-row>
</el-checkbox-group>
@ -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: {
// 添加组件

30
src/components/panel/style.vue
View File

@ -112,9 +112,9 @@
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="条码类型">
<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>

3
src/components/viewport/index.vue
View File

@ -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', {

Write Preview
Loading…
Cancel
Save