kubbo/temu-plugin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【新增】晚上打印页面和标签组件

Browse Source
This commit is contained in:
yanran200730
2024-10-26 13:55:47 +08:00
parent a51a0d49bc
commit 05f63c7af5
9 changed files with 1259 additions and 1135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/print-lock.css
View File

@@ -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%;
}

5
public/index.html
View File

@@ -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%;
}
</style>

8
src/components/AiTitle.vue
View File

@@ -7,6 +7,9 @@
<h2>{{ title }}</h2>
<p>{{ tips }}</p>
</div>
<div class="ailist-title__middle">
<slot name="center"/>
</div>
<div class="ailist-title__right">
<div class="aititle-right__btns">
<slot name="rightBtn"/>
@@ -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;

1
src/components/print/Print.vue
View File

@@ -262,7 +262,6 @@
addItemToCanvas(name) {
this.panel.addPrintText({
options: {
left: 200,
field: name,
testData: name,
title: '',

25
src/components/print/customProvider.js
View File

@@ -9,19 +9,28 @@ export const customProvider = function (options) {
title: 'temu条码',
data: 'XS888888888',
type: 'html',
formatter: function (data, options, templateData) {
console.log(data, options, templateData)
formatter: function (data, options, sukData) {
const elId = options.elId || 'barCode-' + new Date().getTime()
const codeWidth = parseInt((options.width - 22) * 0.85)
let printData = {
labelCode: 96778555251,
productSkuId: 6606980005,
skuExtCode: 'AAA1100mWh-orange',
skuSpecName: '8pcs'
}
options.elId = `${elId}`
if (sukData) {
printData = sukData
}
// eslint-disable-next-line no-undef
$('body').append(`<div id="codewrapper-${elId}" style="width: ${codeWidth}pt">
<svg id="${elId}" width="100%" display="block" height="100%" class="hibarcode_imgcode" preserveAspectRatio="none slice"></svg>
</div>`)
// eslint-disable-next-line no-undef
JsBarcode('#'+ elId, '96778555251', {
format: "CODE128B",
JsBarcode('#' + elId, printData.labelCode, {
format: 'CODE128B',
width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
margin: 0,
@@ -34,7 +43,7 @@ export const customProvider = function (options) {
$(`body>#codewrapper-${elId}`).remove()
// eslint-disable-next-line no-undef
const resizeObserver = new ResizeObserver(() => {
JsBarcode('#'+ elId, '96778555251', {
JsBarcode('#'+ elId, printData.labelCode, {
format: "CODE128B",
width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
@@ -52,8 +61,8 @@ export const customProvider = function (options) {
var html = `
<div class="temuBarCode" id="temuBarCode-${elId}">
<div class="temuBarCode-top">
<div class="hiprint-printElement-text-content hiprint-printElement-content">(AA+AAA)*20PCS</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">AA 20PCS+AAA 20PCS</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuExtCode }</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuSpecName }</div>
</div>
<div class="temuBarCode-middle">
<div class="hiprint-printElement-text-content hiprint-printElement-content temuBarCode-code" style="width: 100%">
@@ -61,7 +70,7 @@ export const customProvider = function (options) {
</div>
</div>
<div class="temuBarCode-bottom">
<div class="hiprint-printElement-text-content hiprint-printElement-content">1034130097</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.productSkuId }</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">Made in China</div>
</div>
</div>

10
src/components/print/template.js
View File

@@ -126,7 +126,7 @@ export default {
{
"options": {
"left": 13.5,
"top": 36.5,
"top": 36,
"height": 477,
"width": 9,
"right": 22.5,
@@ -1050,12 +1050,12 @@ export default {
},
{
"options": {
"left": 21,
"top": 387,
"left": 24,
"top": 381,
"height": 120,
"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 }"
"elId": "barCode-1729918784411",
"formatter": "function (data, options, sukData) {\n const elId = options.elId || 'barCode-' + new Date().getTime();\n const codeWidth = parseInt((options.width - 22) * 0.85);\n let printData = {\n labelCode: 96778555251,\n productSkuId: 6606980005,\n skuExtCode: 'AAA1100mWh-orange',\n skuSpecName: '8pcs'\n };\n options.elId = `${elId}`;\n if (sukData) {\n printData = sukData;\n }\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, printData.labelCode, {\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, printData.labelCode, {\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\">${printData.skuExtCode}</div>\n <div class=\"hiprint-printElement-text-content hiprint-printElement-content\">${printData.skuSpecName}</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\">${printData.productSkuId}</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条码",

20
src/view/lables/AddTemplate.vue
View File

@@ -2,9 +2,11 @@
<AiDetail class="add-label">
<template #title>
<ai-title title="添加模板" isShowBack :isShowBottomBorder="true" @onBackClick="cancel">
<template #rightBtn>
<template #center>
<label>模板名称：</label>
<el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px; margin-right: 300px;"></el-input>
<el-input placeholder="请输入模板名称" size="small" v-model="name" style="width: 200px;"></el-input>
</template>
<template #rightBtn>
<el-button @click="preview" size="small" type="danger">预览</el-button>
<el-button @click="savePdf" size="small" type="primary">下载pdf</el-button>
<el-button @click="print" size="small">打印</el-button>
@@ -17,7 +19,7 @@
<ai-card title="标签模板" class="card" :hideTitle="true">
<template #content>
<div class="add-label__wrapper">
<Print ref="printRef" :template="template" :isPrint="false"></Print>
<Print ref="printRef" :template="template" :printData="printData" :isPrint="false"></Print>
</div>
</template>
</ai-card>
@@ -37,7 +39,17 @@
data () {
return {
name: '',
template: template
template: template,
printData: {}
}
},
mounted() {
this.printData = {
labelCode: 96778555251,
productSkuId: 6606980005,
skuExtCode: 'AAA1100mWh-orange',
skuSpecName: '8pcs'
}
},

134
src/view/lables/Print.vue
View File

@@ -1,5 +1,5 @@
<template>
<ai-list class="Learning">
<ai-list class="Print-page">
<ai-title
slot="title"
title="标签打印"
@@ -10,7 +10,7 @@
<div class="left">
<div class="search-item">
<label>添加方式：</label>
<el-radio-group v-model="type" size="small" @change="onSearchRest">
<el-radio-group v-model="addType" size="small">
<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>
@@ -34,7 +34,7 @@
<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>
<el-button style="margin-left: 10px;" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
</div>
<div class="search-item" v-show="addType === '2'">
<label>SKC：</label>
@@ -61,20 +61,20 @@
</el-input>
<el-button style="margin-left: 10px;" @click="getSkuList" size="small" :disabled="!search.mallId" :loading="isLoading">查询</el-button>
</div>
<el-button style="margin-bottom: 10px" type="primary" size="small" :disabled="!skuChoosedList.length" @click="printAll">批量打印</el-button>
</div>
</div>
<ai-table
:tableData="tableData"
:tableData="lableList"
:col-configs="colConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
:isShowPagination="false"
@getList="getList">
:height="height"
@getList="() => {}"
@selection-change="handleSelectionChange">
<el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
<template v-slot="{ row }">
<div class="table-options">
<el-button type="text">打印</el-button>
<el-button type="text" @click="toPrint(row)">打印</el-button>
<el-button type="text" @click="toDetail(row.url)">详情</el-button>
</div>
</template>
@@ -87,6 +87,8 @@
<script>
import Print from '@/components/print/Print'
import template from '@/components/print/template'
import { sendChromeAPIMessage } from '@/api/chromeApi'
export default {
name: 'PrintPage',
@@ -98,35 +100,127 @@
data () {
return {
colConfigs: [
{ prop: 'title', label: '标题', align: 'left' },
{ prop: 'createTime', label: '发布时间', align: 'center' },
{ type: 'selection' },
{ prop: 'mallName', label: '店铺名称', align: 'left' },
{ prop: 'labelCode', label: '条码编码', align: 'center' },
{ prop: 'productSkuId', label: 'SKU', align: 'center' },
{ prop: 'skuExtCode', label: 'SKU货号', align: 'center' },
{ prop: 'skuSpecName', label: '次销售属性', align: 'center' }
],
tableData: [],
search: {
mallId: '',
SKC: '',
SKU: ''
SKU: '',
page: 1
},
cateList: [],
type: '1',
isLoading: false
addType: '1',
isLoading: false,
lableList: [],
height: 600,
skuChoosedList: []
}
},
created () {
this.getList()
computed: {
currMall () {
if (!this.$store.state.mallList.length) {
return {}
}
return this.$store.state.mallList.filter(v => v.mallId === this.search.mallId)[0]
}
},
mounted() {
this.$nextTick(() => {
this.height = document.querySelector('.ai-list__content--right').clientHeight - 140
})
},
methods: {
toPrint (template, printData) {
this.$refs.printData.print(template, printData)
toPrint(row) {
this.$refs.printRef.toPrint(template, row)
},
getList () {
requestSKUList() {
return sendChromeAPIMessage({
url: 'bg-visage-mms/labelcode/pageQuery',
needMallId: true,
mallId: this.search.mallId,
anti: true,
data: {
page: this.search.page,
pageSize: 200,
productSkcIdList: this.search.SKC.split(','),
productSkuIdList: this.addType === '3' ? this.search.SKU.split(',') : []
}
}).then(async (res) => {
if (res.errorCode == 1000000) {
const list = res.result.pageItems.map(v => {
return {
mallId: this.search.mallId,
mallName: this.currMall.mallName,
productName: v.productName,
productSkuId: v.labelCodeVO.productSkuId,
labelCode: v.labelCodeVO.labelCode,
skuExtCode: v.labelCodeVO.skuExtCode,
skuSpecName: v.productSkuSpecList.map(item => {
return item.specName
}).join(',')
}
})
this.lableList.push(...list)
if (res.result.total > this.lableList.length) {
this.search.page++
await this.$sleepSync(5000)
await this.requestSKUList()
} else {
this.isLoading = false
}
}
})
},
printAll() {
this.$refs.printRef.toPrint(template, this.skuChoosedList)
},
getSkuList () {
if (!this.search.mallId) {
return this.$message.error('请选择店铺')
}
this.$userCheck(this.search.mallId).then(() => {
this.lableList = []
this.search.page = 1
this.isLoading = true
this.requestSKUList()
}).catch(() => {
this.search.mallId = ''
this.isLoading = false
})
},
handleSelectionChange(e) {
this.skuChoosedList = e
}
}
}
</script>
<style scoped lang="scss">
.Print-page {
.search-item__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
&>div {
display: flex;
align-items: center;
}
}
}
</style>

2
src/view/lables/Template.vue
View File

@@ -37,7 +37,7 @@
<script>
export default {
name: 'Template',
name: 'PringTemplate',
data () {
return {