diff --git a/public/css/print-lock.css b/public/css/print-lock.css index 339163e..7939b80 100644 --- a/public/css/print-lock.css +++ b/public/css/print-lock.css @@ -373,10 +373,11 @@ table.hiprint-printElement-tableTarget { display: flex; align-items: center; justify-content: space-between; - width: 93%; + width: 94%; + font-weight: 700; } .temuBarCode-middle { - width: 85%; + width: 88%; height: 60%; } diff --git a/public/index.html b/public/index.html index 483ff27..4c4839a 100644 --- a/public/index.html +++ b/public/index.html @@ -34,11 +34,12 @@ display: flex; align-items: center; justify-content: space-between; - width: 93%; + width: 94%; + font-weight: 700; } .temuBarCode-middle { - width: 85%; + width: 88%; height: 60%; } diff --git a/src/assets/code.png b/src/assets/code.png new file mode 100644 index 0000000..bfe59cc Binary files /dev/null and b/src/assets/code.png differ diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 037e81b..2c26da9 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -37,6 +37,7 @@ html { body { margin: 0; + overflow: hidden; } h1 { @@ -351,7 +352,7 @@ img { .fade-enter-active, .fade-leave-active { - transition: opacity .3s ease-in-out; + transition: opacity .2s ease-in-out; } .fade-enter, @@ -545,3 +546,34 @@ img { display: flex; justify-content: center; } + + +.print-images { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + width: 420px; + max-height: 400px; + padding: 0 10px; + overflow-y: auto; + + img { + width: 180px; + height: 80px; + margin-bottom: 10px; + cursor: pointer; + object-fit: contain; + } + + p { + width: 100%; + line-height: 1.3; + margin-bottom: 10px; + font-size: 14px; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + cursor: pointer; + } +} diff --git a/src/assets/images/avatar.png b/src/assets/images/avatar.png new file mode 100644 index 0000000..6ffa77f Binary files /dev/null and b/src/assets/images/avatar.png differ diff --git a/src/assets/images/triman1.png b/src/assets/images/triman1.png new file mode 100644 index 0000000..6ebaf44 Binary files /dev/null and b/src/assets/images/triman1.png differ diff --git a/src/assets/tab_middle.png b/src/assets/tab_middle.png new file mode 100644 index 0000000..210b801 Binary files /dev/null and b/src/assets/tab_middle.png differ diff --git a/src/components/AiTitle.vue b/src/components/AiTitle.vue index 7c43154..522dba8 100644 --- a/src/components/AiTitle.vue +++ b/src/components/AiTitle.vue @@ -7,6 +7,9 @@

{{ title }}

{{ tips }}

+
+ +
@@ -75,6 +78,11 @@ justify-content: space-between; height: 48px; + .ailist-title__middle { + display: flex; + align-items: center; + } + .ailist-title__left { display: flex; align-items: center; diff --git a/src/components/LablesMember.vue b/src/components/LablesMember.vue new file mode 100644 index 0000000..83d29ba --- /dev/null +++ b/src/components/LablesMember.vue @@ -0,0 +1,342 @@ + + + + + diff --git a/src/components/print/Print.vue b/src/components/print/Print.vue index ab7f021..08e4375 100644 --- a/src/components/print/Print.vue +++ b/src/components/print/Print.vue @@ -17,10 +17,6 @@ 表格
-
- - html -
辅助元素
@@ -44,6 +40,47 @@
常用元素
+
+ 素材 +
+
+ +
+
图片素材
+
+
+ +
+ + +
+
文字素材
+
+
+

+ {{ item.contents }} +

+
+ +
动态数据（如日期） 添加 @@ -54,8 +91,9 @@ v-for="(item, index) in dynamicFromList" :key="index" style="cursor: pointer;" - @click="addItemToCanvas(item.fieldValue)"> -
{{ item.fieldValue }}
+ @click="addItemToCanvas(item.fieldName)"> +
{{ item.fieldName }}
+
@@ -114,9 +152,9 @@ - + :prop="`field_${dynamicFromList.length > 9 ? dynamicFromList.length + 1 : '0' + (dynamicFromList.length + 1)}`" + :rules="[{ required: true, message: '请输入数据名称', trigger: 'blur' }]"> + @@ -139,6 +177,13 @@ } }, + params: { + type: Array, + default: () => { + return [] + } + }, + printData: { type: Object, default: () => { @@ -151,20 +196,22 @@ type: Object, default: () => { return { - "index": 0, - "name": 1, - "height": 200, - "width": 200, - "paperHeader": 0, - "paperFooter": 547, - "printElements": [], - "paperNumberLeft": 500, - "paperNumberTop": 530, - "paperNumberDisabled": true, - "paperNumberContinue": true, - "fontFamily": "Microsoft YaHei", - "scale": 1, - "watermarkOptions": {} + "panels": [{ + "index": 0, + "name": 1, + "height": 200, + "width": 200, + "paperHeader": 0, + "paperFooter": 547, + "printElements": [], + "paperNumberLeft": 500, + "paperNumberTop": 530, + "paperNumberDisabled": true, + "paperNumberContinue": true, + "fontFamily": "Microsoft YaHei", + "scale": 1, + "watermarkOptions": {} + }] } } }, @@ -216,10 +263,30 @@ paperHeight: 200, isShowDynamicForm: false, dynamicFrom: { - }, dynamicFromList: [], - panel: null + panel: null, + contents: [], + images: [] + } + }, + + watch: { + template: { + handler(value) { + if (value && this.hiprintTemplate && !this.isPrint) { + console.log(value) + const config = value.panels[0] + this.hiprintTemplate.update(value) + this.curPaper = {type: 'other', width: config.width, height: config.height} + this.hiprintTemplate.setPaper(config.width, config.height) + + if (this.params) { + this.dynamicFromList = this.params + } + } + }, + deep: true } }, @@ -239,53 +306,53 @@ }, mounted() { - hiprint.init({ - providers: [defaultElementTypeProvider(), customProvider({})] - }) - if (this.isPrint) { - this.hiprintTemplate = newHiprintPrintTemplate('temulables', { - template: this.template - }) + this.hiprintTemplate = newHiprintPrintTemplate('temulables') } else { + hiprint.init({ + providers: [defaultElementTypeProvider(), customProvider({})] + }) this.buildLeftElement() this.buildDesigner() + this.getConfig() } }, methods: { addField() { - this.$set(this.dynamicFrom, `field${this.dynamicFromList.length}`, '') + const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}` + + if (this.dynamicFromList.length && !this.dynamicFromList.at(-1)[`field_${num}`]) { + } else { + this.$set(this.dynamicFrom, `field_${num}`, '') + } + this.isShowDynamicForm = true + + console.log(this.dynamicFrom) }, - addItemToCanvas(name) { - this.panel.addPrintText({ + removeField(index) { + this.dynamicFromList.splice(index, 1) + }, + + getConfig() { + this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => { + if (res.code === 0) { + this.images = res.data.records.filter(v => v.type === '1') + this.contents = res.data.records.filter(v => v.type === '0') + } + }) + }, + + addImage(src) { + this.panel.addPrintImage({ options: { - left: 200, - field: name, - testData: name, title: '', left: 70.5, top: 58.5, - height: 18, - width: 116, - coordinateSync: false, - widthHeightSync: false, - hideTitle: true, - fontFamily: 'Microsoft YaHei', - fontWeight: '700', - textContentVerticalAlign: 'middle', - contentPaddingLeft: 5.25, - qrCodeLevel: 0, - right: 186.5, - bottom: 73.5, - vCenter: 128.5, - hCenter: 64.5 - }, - printElementType: { - title: '文本', - type: 'text' + src: src, + widthHeightSync: true } }) const el = this.hiprintTemplate.printPanels[0].printElements.at(-1) @@ -294,14 +361,42 @@ el.design(void 0, designPaper) }, + addText(text, isSetField = true) { + this.panel.addPrintText({ + options: { + field: isSetField ? text : '', + testData: isSetField ? text : '', + title: isSetField ? '' : text, + left: 70.5, + top: 58.5, + width: 140, + height: 20, + coordinateSync: true, + textContentVerticalAlign: 'middle', + widthHeightSync: true, + hideTitle: true, + fontFamily: 'Microsoft YaHei', + fontWeight: '700' + } + }) + const el = this.hiprintTemplate.printPanels[0].printElements.at(-1) + const designPaper = this.hiprintTemplate.printPanels[0].designPaper + this.hiprintTemplate.printPanels[0].appendDesignPrintElement(designPaper, el, true) + el.design(void 0, designPaper) + }, + + addItemToCanvas(name) { + this.addText(name) + }, + onConfirm() { this.$refs.form.validate((valid) => { if (valid) { + const num = this.dynamicFromList.length > 9 ? this.dynamicFromList.length + 1 : `0${this.dynamicFromList.length + 1}` this.dynamicFromList.push({ - fieldName: `field${this.dynamicFromList.length}`, - fieldValue: this.dynamicFrom[`field${this.dynamicFromList.length}`] + fieldValue: `field_${num}`, + fieldName: this.dynamicFrom[`field_${num}`] }) - this.isShowDynamicForm = false } }) @@ -342,11 +437,11 @@ this.$nextTick(() => { - !this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', { + this.hiprintTemplate.design('#hiprint-printTemplate', { grid: true }) - // this.panel = this.hiprintTemplate.printPanels[0] + this.panel = this.hiprintTemplate.printPanels[0] }) }, @@ -399,11 +494,26 @@ }) }, - getHtml() { + save() { + const html = this.elementToString(this.hiprintTemplate.getHtml(this.printData)) + const json = this.hiprintTemplate.getJson() + + return { + html, + json, + params: JSON.stringify(this.dynamicFromList) + } + }, + + preview() { this.html = this.elementToString(this.hiprintTemplate.getHtml(this.printData)) this.isShowPreview = true }, + getHtml() { + return this.elementToString(this.hiprintTemplate.getHtml(this.printData)) + }, + clearPaper() { this.hiprintTemplate.clear() }, @@ -414,6 +524,7 @@ } } + diff --git a/src/view/lables/SkuManage.vue b/src/view/lables/SkuManage.vue index b581394..428e0b2 100644 --- a/src/view/lables/SkuManage.vue +++ b/src/view/lables/SkuManage.vue @@ -11,8 +11,23 @@ @@ -25,23 +40,24 @@ :size.sync="search.size" style="margin-top: 8px;" @getList="getList" - @selection-change="handleSelectionChange"> - - + @selection-change="handleSelectionChange" + v-loading="pageShow"> + - + import { sendChromeAPIMessage } from '@/api/chromeApi' + import * as XLSX from 'xlsx' + import JsonExcel from 'vue-json-excel' export default { name: 'SkuManage', + components: { + JsonExcel + }, + data () { return { - colConfigs: [ - { type: 'selection' }, - // { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' }, - // { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' }, - { prop: 'mallName', label: '店铺名称', align: 'left' }, - { prop: 'labelCode', label: '条码编码', align: 'center' }, - // { prop: 'productSkcId', label: 'SKC', align: 'left' }, - { prop: 'productSkuId', label: 'SKU', align: 'center' }, - // { prop: 'extCode', label: 'SKC货号', align: 'left' }, - { prop: 'skuExtCode', label: 'SKU货号', align: 'center' }, - { prop: 'skuSpecName', label: '次销售属性', align: 'center' } - ], total: 0, search: { current: 1, @@ -213,7 +221,11 @@ }, targetCatId: [], skuList: [], - chooseSkuList: [] + chooseSkuList: [], + id: '', + fileList: [], + pageShow: false, + relationList: [] } }, @@ -224,10 +236,45 @@ } return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0] + }, + + colConfigs () { + const arr = this.isShow ? [] : this.relationList.map(v => { + return { + prop: v.field, + label: v.name, + align: 'center' + } + }) + + return [ + { type: 'selection' }, + { prop: 'mallName', label: '店铺名称', align: 'left' }, + { prop: 'productName', label: '商品名称', align: 'center' }, + { prop: 'labelCode', label: '条码编码', align: 'center' }, + { prop: 'productSkcId', label: 'SKC', align: 'center' }, + { prop: 'productSkuId', label: 'SKU', align: 'center' }, + { prop: 'skuExtCode', label: 'SKU货号', align: 'center' }, + { prop: 'skuSpecName', label: '次销售属性', align: 'center' }, + ...arr + ] + }, + + jsonFields () { + const obj = {} + this.colConfigs.filter(v => !!v.prop).forEach(v => { + obj[v.label] = v.prop + }) + + return { + ...obj + } } }, created () { + this.id = this.$route.query.id || '' + this.getRelation() this.getList() }, @@ -236,6 +283,58 @@ this.$router.push('/addLabelsTemplate') }, + getRelation () { + this.$http.post(`/api/templateRelation/getRelation?templateId=${this.$route.query.id}`).then(res => { + if (res.code === 0) { + this.relationList = res.data + + console.log(this.relationList) + } + }) + }, + + readXLSX(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader() + + reader.readAsBinaryString(file) + reader.onload = evt => { + const data = evt.target.result + const workbook = XLSX.read(data, { type: 'binary' }) + const ws = workbook.Sheets[workbook.SheetNames[0]] + const jsonData = XLSX.utils.sheet_to_json(ws) + resolve(jsonData) + + this.fileList = [] + } + }) + }, + + onExcelChange (file) { + this.pageShow = true + this.readXLSX(file.raw).then(res => { + console.log(res) + this.$http.post(`/api/templateSku/updateBatchSku`, res.map(v => { + const result = { + templateId: this.id + } + Object.keys(this.jsonFields).forEach(item => { + result[this.jsonFields[item]] = v[item] + }) + + console.log(result) + return result + })).then(res => { + if (res.code === 0) { + this.$message.success('导入成功') + this.isShow = false + this.getList() + } + this.pageShow = false + }) + }) + }, + onSearchRest() { this.skuReqParams.SKC = '' this.skuReqParams.SKU = '' @@ -324,6 +423,7 @@ mallId: this.lableSearch.mallId, mallName: this.currMall.mallName, productName: v.productName, + productSkcId: v.labelCodeVO.productSkcId, productSkuId: v.labelCodeVO.productSkuId, labelCode: v.labelCodeVO.labelCode, skuExtCode: v.labelCodeVO.skuExtCode, @@ -362,21 +462,31 @@ }, getList () { - this.$http.post('/api/learning/pluginPage', null, { - params: { - ...this.search - } - }).then(res => { + this.$http.post(`/api/templateSku/getPage?size=-1&templateId=${this.id}`).then(res => { if (res.code === 0) { - this.tableData = res.data.records - this.total = res.data.total + this.skuList = res.data.records + // this.total = res.data.total } }) }, onConfirm () { - this.skuList = this.chooseSkuList - this.isShow = false + if (!this.chooseSkuList.length) { + return this.$message.error('请选择SKU') + } + + this.$http.post(`/api/templateSku/addBatchSku`, this.chooseSkuList.map(v => { + return { + ...v, + templateId: this.id + } + })).then(res => { + if (res.code === 0) { + this.$message.success('添加成功') + this.isShow = false + this.getList() + } + }) } } } diff --git a/src/view/lables/Template.vue b/src/view/lables/Template.vue index cb7b096..feceea0 100644 --- a/src/view/lables/Template.vue +++ b/src/view/lables/Template.vue @@ -8,7 +8,7 @@