【新增】打印组件
This commit is contained in:
@@ -356,7 +356,7 @@ table.hiprint-printElement-tableTarget {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10pt 10pt;
|
||||
border: 1pt solid #000;
|
||||
border: 2pt solid #000;
|
||||
}
|
||||
|
||||
.temuBarCode-code {
|
||||
@@ -364,19 +364,19 @@ table.hiprint-printElement-tableTarget {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.temuBarCode-code svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.temuBarCode-top,
|
||||
.temuBarCode-bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 90%;
|
||||
width: 93%;
|
||||
}
|
||||
|
||||
.temuBarCode-middle {
|
||||
width: 80%;
|
||||
width: 85%;
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
.temuBarCode-code svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="print">
|
||||
<div class="print-wrapper">
|
||||
<div class="print-wrapper" v-if="!isPrint">
|
||||
<div class="left">
|
||||
<div class="left-wrapper">
|
||||
<div class="title">基础元素</div>
|
||||
@@ -126,7 +126,6 @@
|
||||
<script>
|
||||
import { hiprint, defaultElementTypeProvider, disAutoConnect } from 'vue-plugin-hiprint'
|
||||
import { newHiprintPrintTemplate } from '@/utils/template-helper'
|
||||
import printData from './printData'
|
||||
import { customProvider } from './customProvider'
|
||||
|
||||
disAutoConnect()
|
||||
@@ -138,6 +137,41 @@
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
printData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
template: {
|
||||
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": {}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
isPrint: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
@@ -209,8 +243,14 @@
|
||||
providers: [defaultElementTypeProvider(), customProvider({})]
|
||||
})
|
||||
|
||||
this.buildLeftElement()
|
||||
this.buildDesigner()
|
||||
if (this.isPrint) {
|
||||
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
|
||||
template: this.template
|
||||
})
|
||||
} else {
|
||||
this.buildLeftElement()
|
||||
this.buildDesigner()
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -280,7 +320,7 @@
|
||||
// eslint-disable-next-line no-undef
|
||||
$('#hiprint-printTemplate').empty()
|
||||
this.hiprintTemplate = newHiprintPrintTemplate('temulables', {
|
||||
template: {},
|
||||
template: this.template,
|
||||
settingContainer: '#PrintElementOptionSetting',
|
||||
onImageChooseClick: (target) => {
|
||||
let input = document.createElement('input')
|
||||
@@ -302,26 +342,11 @@
|
||||
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.hiprintTemplate.design('#hiprint-printTemplate', {
|
||||
!this.isPrint && this.hiprintTemplate.design('#hiprint-printTemplate', {
|
||||
grid: true
|
||||
})
|
||||
|
||||
this.panel = this.hiprintTemplate.printPanels[0]
|
||||
console.log(this.hiprintTemplate.printPanels[0])
|
||||
// this.hiprintTemplate.printPanels[0].addPrintText({
|
||||
// type: 'text',
|
||||
// data: 'XS888888888',
|
||||
// options: {
|
||||
// field: 'barcode',
|
||||
// testData: 'XS888888888',
|
||||
// height: 32,
|
||||
// fontSize: 12,
|
||||
// lineHeight: 18,
|
||||
// textAlign: 'left',
|
||||
// textType: 'barcode',
|
||||
// hideTitle: true
|
||||
// }
|
||||
// })
|
||||
// this.panel = this.hiprintTemplate.printPanels[0]
|
||||
})
|
||||
},
|
||||
|
||||
@@ -348,16 +373,12 @@
|
||||
},
|
||||
|
||||
print() {
|
||||
let options = { leftOffset: 0, topOffset: 0 }
|
||||
let ext = {
|
||||
callback: () => {
|
||||
console.log('浏览器打印窗口已打开')
|
||||
},
|
||||
this.hiprintTemplate.print(this.printData)
|
||||
},
|
||||
|
||||
styleHandler: () => {
|
||||
return '<style></style>'
|
||||
}
|
||||
}
|
||||
// js打印(不显示设计界面)
|
||||
toPrint (template, printData) {
|
||||
this.hiprintTemplate.update(template)
|
||||
this.hiprintTemplate.print(printData)
|
||||
},
|
||||
|
||||
@@ -373,13 +394,13 @@
|
||||
},
|
||||
|
||||
savePdf() {
|
||||
this.hiprintTemplate.toPdf(printData, '测试导出pdf').then(v => {
|
||||
this.hiprintTemplate.toPdf(this.printData, '测试导出pdf',{scale:2 }).then(v => {
|
||||
console.log(v)
|
||||
})
|
||||
},
|
||||
|
||||
getHtml() {
|
||||
this.html = this.elementToString(this.hiprintTemplate.getHtml(printData))
|
||||
this.html = this.elementToString(this.hiprintTemplate.getHtml(this.printData))
|
||||
this.isShowPreview = true
|
||||
},
|
||||
|
||||
|
||||
@@ -6,26 +6,8 @@ export default {
|
||||
"height": 200,
|
||||
"width": 200,
|
||||
"paperHeader": 0,
|
||||
"paperFooter": 566.9291338582677,
|
||||
"paperFooter": 547,
|
||||
"printElements": [
|
||||
{
|
||||
"options": {
|
||||
"left": 188,
|
||||
"top": 36,
|
||||
"height": 40,
|
||||
"width": 9,
|
||||
"right": 219,
|
||||
"bottom": 144.75,
|
||||
"vCenter": 214.5,
|
||||
"hCenter": 99.75,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "竖线",
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 253.5,
|
||||
@@ -44,6 +26,24 @@ export default {
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 188,
|
||||
"top": 36,
|
||||
"height": 40,
|
||||
"width": 9,
|
||||
"right": 219,
|
||||
"bottom": 144.75,
|
||||
"vCenter": 214.5,
|
||||
"hCenter": 99.75,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "竖线",
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 370.5,
|
||||
@@ -143,11 +143,11 @@ export default {
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 187.5,
|
||||
"left": 253.5,
|
||||
"top": 37,
|
||||
"height": 18,
|
||||
"width": 66,
|
||||
"title": "Date:",
|
||||
"width": 117,
|
||||
"title": "Dec1,2023",
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
@@ -167,11 +167,11 @@ export default {
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 253.5,
|
||||
"left": 187.5,
|
||||
"top": 37,
|
||||
"height": 18,
|
||||
"width": 117,
|
||||
"title": "Dec1,2023",
|
||||
"width": 66,
|
||||
"title": "Date:",
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
@@ -527,6 +527,30 @@ export default {
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 13.5,
|
||||
"top": 74.5,
|
||||
"height": 20,
|
||||
"width": 103.5,
|
||||
"title": "Manufacturer:",
|
||||
"right": 116.25,
|
||||
"bottom": 112.5,
|
||||
"vCenter": 64.5,
|
||||
"hCenter": 103.5,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
"fontWeight": "700",
|
||||
"textContentVerticalAlign": "middle",
|
||||
"contentPaddingLeft": 3.75,
|
||||
"qrCodeLevel": 0
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "文本",
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 279,
|
||||
@@ -545,6 +569,24 @@ export default {
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 370.5,
|
||||
"top": 74.5,
|
||||
"height": 21,
|
||||
"width": 9,
|
||||
"right": 379.9921875,
|
||||
"bottom": 114.75,
|
||||
"vCenter": 375.4921875,
|
||||
"hCenter": 104.25,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "竖线",
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 13.5,
|
||||
@@ -564,48 +606,6 @@ export default {
|
||||
"type": "hline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 370.5,
|
||||
"top": 74.5,
|
||||
"height": 21,
|
||||
"width": 9,
|
||||
"right": 379.9921875,
|
||||
"bottom": 114.75,
|
||||
"vCenter": 375.4921875,
|
||||
"hCenter": 104.25,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "竖线",
|
||||
"type": "vline"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 13.5,
|
||||
"top": 74.5,
|
||||
"height": 20,
|
||||
"width": 103.5,
|
||||
"title": "Manufacturer:",
|
||||
"right": 116.25,
|
||||
"bottom": 112.5,
|
||||
"vCenter": 64.5,
|
||||
"hCenter": 103.5,
|
||||
"coordinateSync": false,
|
||||
"widthHeightSync": false,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
"fontWeight": "700",
|
||||
"textContentVerticalAlign": "middle",
|
||||
"contentPaddingLeft": 3.75,
|
||||
"qrCodeLevel": 0
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "文本",
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 117,
|
||||
@@ -1050,16 +1050,12 @@ export default {
|
||||
},
|
||||
{
|
||||
"options": {
|
||||
"left": 24,
|
||||
"top": 384,
|
||||
"left": 21,
|
||||
"top": 387,
|
||||
"height": 120,
|
||||
"width": 292.5,
|
||||
"elId": "barCode-1729657391988",
|
||||
"formatter": "function (data, options, templateData) {\n console.log(data, options, templateData);\n const elId = options.elId || 'barCode-' + new Date().getTime();\n const codeWidth = parseInt((options.width - 22) * 0.85);\n options.elId = `${elId}`;\n\n // eslint-disable-next-line no-undef\n $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n </div>`);\n // eslint-disable-next-line no-undef\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n\n // eslint-disable-next-line no-undef\n const codeHtml = $(`#codewrapper-${elId}`).html();\n // eslint-disable-next-line no-undef\n $(`body>#codewrapper-${elId}`).remove();\n // eslint-disable-next-line no-undef\n const resizeObserver = new ResizeObserver(() => {\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n });\n setTimeout(() => {\n const node = document.getElementById(`temuBarCode-${elId}`);\n if (node) {\n resizeObserver.observe(node);\n }\n }, 0);\n var html = `\n <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n <div class=\"temuBarCode-top\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">(AA+AAA)*20PCS</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">AA 20PCS+AAA 20PCS</div>\n </div>\n <div class=\"temuBarCode-middle\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n ${codeHtml}\n </div>\n </div>\n <div class=\"temuBarCode-bottom\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">1034130097</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n </div>\n </div>\n `;\n return html;\n }",
|
||||
"right": 289.5,
|
||||
"bottom": 504,
|
||||
"vCenter": 156.75,
|
||||
"hCenter": 444
|
||||
"width": 316,
|
||||
"elId": "barCode-1729837262980",
|
||||
"formatter": "function (data, options, templateData) {\n console.log(data, options, templateData);\n const elId = options.elId || 'barCode-' + new Date().getTime();\n const codeWidth = parseInt((options.width - 22) * 0.85);\n options.elId = `${elId}`;\n\n // eslint-disable-next-line no-undef\n $('body').append(`<div id=\"codewrapper-${elId}\" style=\"width: ${codeWidth}pt\">\n <svg id=\"${elId}\" width=\"100%\" display=\"block\" height=\"100%\" class=\"hibarcode_imgcode\" preserveAspectRatio=\"none slice\"></svg>\n </div>`);\n // eslint-disable-next-line no-undef\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n\n // eslint-disable-next-line no-undef\n const codeHtml = $(`#codewrapper-${elId}`).html();\n // eslint-disable-next-line no-undef\n $(`body>#codewrapper-${elId}`).remove();\n // eslint-disable-next-line no-undef\n const resizeObserver = new ResizeObserver(() => {\n JsBarcode('#' + elId, '96778555251', {\n format: \"CODE128B\",\n width: 2,\n height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,\n margin: 0,\n displayValue: false\n });\n });\n setTimeout(() => {\n const node = document.getElementById(`temuBarCode-${elId}`);\n if (node) {\n resizeObserver.observe(node);\n }\n }, 0);\n var html = `\n <div class=\"temuBarCode\" id=\"temuBarCode-${elId}\">\n <div class=\"temuBarCode-top\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">(AA+AAA)*20PCS</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">AA 20PCS+AAA 20PCS</div>\n </div>\n <div class=\"temuBarCode-middle\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code\" style=\"width: 100%\">\n ${codeHtml}\n </div>\n </div>\n <div class=\"temuBarCode-bottom\">\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">1034130097</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">Made in China</div>\n </div>\n </div>\n `;\n return html;\n }"
|
||||
},
|
||||
"printElementType": {
|
||||
"title": "temu条码",
|
||||
@@ -1067,11 +1063,12 @@ export default {
|
||||
}
|
||||
}
|
||||
],
|
||||
"paperNumberLeft": 0,
|
||||
"paperNumberTop": 520,
|
||||
"paperNumberLeft": 500,
|
||||
"paperNumberTop": 530,
|
||||
"paperNumberDisabled": true,
|
||||
"paperNumberContinue": true,
|
||||
"fontFamily": "Microsoft YaHei",
|
||||
"scale": 1,
|
||||
"watermarkOptions": {}
|
||||
}
|
||||
]
|
||||
|
||||
@@ -1,13 +1,15 @@
|
||||
<template>
|
||||
<AiDetail class="add-label">
|
||||
<template #title>
|
||||
<ai-title title="添加标签" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
|
||||
<ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
|
||||
<template #rightBtn>
|
||||
<label>模板名称:</label>
|
||||
<el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px; margin-right: 300px;"></el-input>
|
||||
<el-button @click="preview" size="small" type="danger">预览</el-button>
|
||||
<el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
|
||||
<el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
|
||||
<el-button @click="print" size="small">打印</el-button>
|
||||
<el-button @click="clearPaper" size="small" type="danger">清空纸张</el-button>
|
||||
<el-button @click="saveTemplate" size="small" type="primary">保存</el-button>
|
||||
</template>
|
||||
</ai-title>
|
||||
</template>
|
||||
@@ -15,7 +17,7 @@
|
||||
<ai-card title="标签模板" class="card" :hideTitle="true">
|
||||
<template #content>
|
||||
<div class="add-label__wrapper">
|
||||
<Print ref="printRef" :labels="labels"></Print>
|
||||
<Print ref="printRef" :template="template" :isPrint="false"></Print>
|
||||
</div>
|
||||
</template>
|
||||
</ai-card>
|
||||
@@ -25,6 +27,7 @@
|
||||
|
||||
<script>
|
||||
import Print from '@/components/print/Print'
|
||||
import template from '@/components/print/template'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -33,7 +36,8 @@
|
||||
|
||||
data () {
|
||||
return {
|
||||
labels: []
|
||||
name: '',
|
||||
template: template
|
||||
}
|
||||
},
|
||||
|
||||
@@ -55,6 +59,10 @@
|
||||
},
|
||||
|
||||
saveTemplate () {
|
||||
if (!this.name) {
|
||||
return this.$message.error('模板名称不能为空')
|
||||
}
|
||||
|
||||
const json = this.$refs.printRef.exportJson()
|
||||
console.log(json)
|
||||
},
|
||||
|
||||
@@ -2,45 +2,98 @@
|
||||
<ai-list class="Learning">
|
||||
<ai-title
|
||||
slot="title"
|
||||
title="新手园地"
|
||||
title="标签打印"
|
||||
isShowBottomBorder>
|
||||
</ai-title>
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-radio-group v-model="search.categoryId" @change="onChange">
|
||||
<el-radio-button label="">全部</el-radio-button>
|
||||
<el-radio-button label="isFavorite">我的收藏</el-radio-button>
|
||||
<el-radio-button :label="item.id" :key="item.id" v-for="item in cateList">{{ item.name }}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
<template #right>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<div class="search-item__wrapper">
|
||||
<div class="left">
|
||||
<div class="search-item">
|
||||
<label>添加方式:</label>
|
||||
<el-radio-group v-model="type" size="small" @change="onSearchRest">
|
||||
<el-radio-button label="1">按备货单打印</el-radio-button>
|
||||
<el-radio-button label="2">按SKC打印</el-radio-button>
|
||||
<el-radio-button label="3">按SKU打印</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>店铺:</label>
|
||||
<el-select v-model="search.mallId" placeholder="请选择店铺" size="small">
|
||||
<el-option
|
||||
v-for="item in $store.state.mallList"
|
||||
:key="item.mallId"
|
||||
:label="item.mallName"
|
||||
:value="item.mallId">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<div class="search-item__wrapper">
|
||||
<div class="left">
|
||||
<div class="search-item" v-show="addType === '1'">
|
||||
<label>备货单:</label>
|
||||
<el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
<div class="search-item" v-show="addType === '2'">
|
||||
<label>SKC:</label>
|
||||
<el-input
|
||||
v-model="search.SKC"
|
||||
style="width: 250px"
|
||||
size="small"
|
||||
placeholder="多个查询请用户逗号分割"
|
||||
clearable
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
<div class="search-item" v-show="addType === '3'">
|
||||
<label>SKU:</label>
|
||||
<el-input
|
||||
v-if="addType === '3'"
|
||||
v-model="search.SKU"
|
||||
style="width: 250px"
|
||||
size="small"
|
||||
clearable
|
||||
placeholder="多个查询请用户逗号分割"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:current.sync="search.current"
|
||||
:size.sync="search.size"
|
||||
style="margin-top: 8px;"
|
||||
:isShowPagination="false"
|
||||
@getList="getList">
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
|
||||
<template v-slot="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="collection(row.id, row.isFavorite)">{{ row.isFavorite === '0' ? '收藏' : '取消收藏' }}</el-button>
|
||||
<el-button type="text">打印</el-button>
|
||||
<el-button type="text" @click="toDetail(row.url)">详情</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<Print ref="printRef" :isPrint="true"></Print>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Print from '@/components/print/Print'
|
||||
|
||||
export default {
|
||||
name: 'Learning',
|
||||
name: 'PrintPage',
|
||||
|
||||
components: {
|
||||
Print
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
@@ -49,83 +102,27 @@
|
||||
{ prop: 'createTime', label: '发布时间', align: 'center' },
|
||||
],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
categoryId: ''
|
||||
mallId: '',
|
||||
SKC: '',
|
||||
SKU: ''
|
||||
},
|
||||
cateList: [],
|
||||
isFavorite: 0
|
||||
type: '1',
|
||||
isLoading: false
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
this.$store.dispatch('getUserInfo').then(e => {
|
||||
console.log(e)
|
||||
})
|
||||
this.getCateList()
|
||||
this.getList()
|
||||
},
|
||||
|
||||
methods: {
|
||||
toDetail (url) {
|
||||
window.open(url)
|
||||
},
|
||||
|
||||
onChange (e) {
|
||||
if (e === 'isFavorite') {
|
||||
this.$http.post('/api/learning/favoritePage', null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
|
||||
collection (id, isFavorite) {
|
||||
this.$confirm(isFavorite === '0' ? '确定收藏该文章?' : '确定取消收藏?', '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
callback: action => {
|
||||
if (action === 'confirm') {
|
||||
this.$http.post(isFavorite === '0' ? `/api/learning/addFavorite?id=${id}` : `/api/learning/delFavorite?id=${id}`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.$message.success(isFavorite === '0' ? '收藏成功' : '取消成功')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getCateList () {
|
||||
this.$http.post('/api/learningCategory/page?size=50').then(res => {
|
||||
if (res.code === 0) {
|
||||
this.cateList = res.data.records
|
||||
}
|
||||
})
|
||||
toPrint (template, printData) {
|
||||
this.$refs.printData.print(template, printData)
|
||||
},
|
||||
|
||||
getList () {
|
||||
this.$http.post('/api/learning/pluginPage', null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,13 +10,15 @@
|
||||
<template slot="content">
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button type="primary" size="small" @click="isShow = true">添加</el-button>
|
||||
<el-button type="primary" size="small" @click="chooseSkuList = [], isShow = true">添加</el-button>
|
||||
<el-button type="warning" size="small" @click="toAdd(row.url)">导入</el-button>
|
||||
<el-button type="danger" size="small" @click="toAdd(row.url)">导出</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table
|
||||
:tableData="tableData"
|
||||
:tableData="skuList"
|
||||
:col-configs="colConfigs"
|
||||
:total="total"
|
||||
:current.sync="search.current"
|
||||
@@ -32,7 +34,7 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
|
||||
<el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
|
||||
<template v-slot="{ row }">
|
||||
<div class="table-options">
|
||||
<el-button type="text" @click="toAdd(row.url)">编辑</el-button>
|
||||
@@ -58,7 +60,7 @@
|
||||
</div>
|
||||
<div class="search-item">
|
||||
<label>店铺:</label>
|
||||
<el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small">
|
||||
<el-select v-model="lableSearch.mallId" placeholder="请选择店铺" size="small">
|
||||
<el-option
|
||||
v-for="item in $store.state.mallList"
|
||||
:key="item.mallId"
|
||||
@@ -84,7 +86,7 @@
|
||||
collapse-tags
|
||||
clearable>
|
||||
</el-cascader>
|
||||
<el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
<el-button style="margin-left: 10px;" @click="onCateChange" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
<div class="search-item" v-show="addType === '2'">
|
||||
<label>SKC:</label>
|
||||
@@ -98,7 +100,7 @@
|
||||
@clear="getSkuList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
<div class="search-item" v-show="addType === '3'">
|
||||
<label>SKU:</label>
|
||||
@@ -113,22 +115,23 @@
|
||||
@clear="getSkuList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!skuSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!lableSearch.mallId" :loading="isLoading">查询</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ai-table
|
||||
height="370"
|
||||
:tableData="skuList"
|
||||
:tableData="lableList"
|
||||
:col-configs="colConfigs"
|
||||
:total="skuTotal"
|
||||
:current.sync="skuSearch.current"
|
||||
:size.sync="skuSearch.size"
|
||||
:total="lableTotal"
|
||||
:current.sync="lableSearch.current"
|
||||
:size.sync="lableSearch.size"
|
||||
style="margin-top: 8px;"
|
||||
@getList="getSkuList"
|
||||
:pageSizes="[10, 20, 50, 100, 500, 1000]"
|
||||
v-loading="isLoading"
|
||||
:isShowPagination="false">
|
||||
:isShowPagination="false"
|
||||
@getList="() => {}"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column slot="productName" width="300px" :show-overflow-tooltip="true" label="商品名称" fixed="left">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
@@ -162,19 +165,18 @@
|
||||
{ prop: 'skuExtCode', label: 'SKU货号', align: 'center' },
|
||||
{ prop: 'skuSpecName', label: '次销售属性', align: 'center' }
|
||||
],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
search: {
|
||||
current: 1,
|
||||
size: 100
|
||||
},
|
||||
skuSearch: {
|
||||
lableSearch: {
|
||||
current: 1,
|
||||
size: 100,
|
||||
mallId: ''
|
||||
},
|
||||
skuTotal: 0,
|
||||
skuList: [],
|
||||
lableTotal: 0,
|
||||
lableList: [],
|
||||
isShow: false,
|
||||
skuReqParams: {
|
||||
page: 1,
|
||||
@@ -209,7 +211,9 @@
|
||||
})
|
||||
}
|
||||
},
|
||||
targetCatId: []
|
||||
targetCatId: [],
|
||||
skuList: [],
|
||||
chooseSkuList: []
|
||||
}
|
||||
},
|
||||
|
||||
@@ -219,7 +223,7 @@
|
||||
return {}
|
||||
}
|
||||
|
||||
return this.$store.state.mallList.filter(v => v.mallId === this.skuSearch.mallId)[0]
|
||||
return this.$store.state.mallList.filter(v => v.mallId === this.lableSearch.mallId)[0]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -239,6 +243,7 @@
|
||||
|
||||
handleSelectionChange(e) {
|
||||
console.log(e)
|
||||
this.chooseSkuList = e
|
||||
},
|
||||
|
||||
getSKCList(catIds, page) {
|
||||
@@ -246,7 +251,7 @@
|
||||
sendChromeAPIMessage({
|
||||
url: 'bg-visage-mms/product/skc/pageQuery',
|
||||
needMallId: true,
|
||||
mallId: this.skuSearch.mallId,
|
||||
mallId: this.lableSearch.mallId,
|
||||
anti: true,
|
||||
data: {
|
||||
page: 1,
|
||||
@@ -269,35 +274,42 @@
|
||||
},
|
||||
|
||||
async onCateChange() {
|
||||
let page = 1
|
||||
let list = []
|
||||
let isHasNext = true
|
||||
this.isLoading = true
|
||||
while (isHasNext) {
|
||||
const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
|
||||
page = page + 1
|
||||
isHasNext = result.isHasNext ? true : false
|
||||
list.push(...result.list)
|
||||
this.$userCheck(this.lableSearch.mallId).then(async () => {
|
||||
let page = 1
|
||||
let list = []
|
||||
let isHasNext = true
|
||||
this.lableList = []
|
||||
this.isLoading = true
|
||||
while (isHasNext) {
|
||||
const result = await this.getSKCList([].concat(this.targetCatId.flat()), page)
|
||||
page = page + 1
|
||||
isHasNext = result.isHasNext ? true : false
|
||||
list.push(...result.list)
|
||||
|
||||
await this.$sleepSync(5000)
|
||||
}
|
||||
await this.$sleepSync(5000)
|
||||
}
|
||||
|
||||
const skcList = [...new Set(list)]
|
||||
const len = Math.ceil(skcList.length / 100)
|
||||
for (let i = 0; i < len; i++) {
|
||||
this.skuReqParams.page = 1
|
||||
this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
|
||||
await this.requestSKUList()
|
||||
await this.$sleepSync(2000)
|
||||
}
|
||||
const skcList = [...new Set(list)]
|
||||
const len = Math.ceil(skcList.length / 100)
|
||||
for (let i = 0; i < len; i++) {
|
||||
this.skuReqParams.page = 1
|
||||
this.skuReqParams.SKC = [...new Set(list)].slice(i * 100, i * 100 + 100).join(',')
|
||||
await this.requestSKUList(true)
|
||||
await this.$sleepSync(2000)
|
||||
}
|
||||
|
||||
console.log(111)
|
||||
this.isLoading = false
|
||||
}).catch(() => {
|
||||
this.lableSearch.mallId = ''
|
||||
})
|
||||
},
|
||||
|
||||
requestSKUList() {
|
||||
this.isLoading = true
|
||||
requestSKUList(flag) {
|
||||
return sendChromeAPIMessage({
|
||||
url: 'bg-visage-mms/labelcode/pageQuery',
|
||||
needMallId: true,
|
||||
mallId: this.skuSearch.mallId,
|
||||
mallId: this.lableSearch.mallId,
|
||||
anti: true,
|
||||
data: {
|
||||
page: this.skuReqParams.page,
|
||||
@@ -309,7 +321,7 @@
|
||||
if (res.errorCode == 1000000) {
|
||||
const list = res.result.pageItems.map(v => {
|
||||
return {
|
||||
mallId: this.skuSearch.mallId,
|
||||
mallId: this.lableSearch.mallId,
|
||||
mallName: this.currMall.mallName,
|
||||
productName: v.productName,
|
||||
productSkuId: v.labelCodeVO.productSkuId,
|
||||
@@ -320,33 +332,32 @@
|
||||
}).join(',')
|
||||
}
|
||||
})
|
||||
this.skuTotal = res.result.total
|
||||
this.skuList.push(...list)
|
||||
this.lableTotal = res.result.total
|
||||
this.lableList.push(...list)
|
||||
|
||||
if (res.result.total > this.skuList.length) {
|
||||
if (res.result.total > this.lableList.length) {
|
||||
this.skuReqParams.page++
|
||||
await this.$sleepSync(5000)
|
||||
await this.requestSKUList()
|
||||
} else {
|
||||
this.isLoading = false
|
||||
!flag && (this.isLoading = false)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
getSkuList () {
|
||||
if (!this.skuSearch.mallId) {
|
||||
if (!this.lableSearch.mallId) {
|
||||
return this.$message.error('请选择店铺')
|
||||
}
|
||||
|
||||
this.$userCheck(this.skuSearch.mallId).then(() => {
|
||||
this.skuList = []
|
||||
this.$userCheck(this.lableSearch.mallId).then(() => {
|
||||
this.lableList = []
|
||||
this.skuReqParams.page = 1
|
||||
this.isLoading = true
|
||||
|
||||
this.requestSKUList()
|
||||
}).catch(() => {
|
||||
this.skuSearch.mallId = ''
|
||||
this.lableSearch.mallId = ''
|
||||
})
|
||||
},
|
||||
|
||||
@@ -364,7 +375,8 @@
|
||||
},
|
||||
|
||||
onConfirm () {
|
||||
|
||||
this.skuList = this.chooseSkuList
|
||||
this.isShow = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user