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

1

Browse Source
This commit is contained in:
yanran200830
2024-10-28 18:30:26 +08:00
parent 86f4256eb4
commit 8225f21d14
8 changed files with 56416 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,42 +44,18 @@
<span>素材</span>
</div>
<div class="left-item__wrapper">
<el-popover
title="图片素材(点击添加)"
trigger="hover">
<div
class="item"
slot="reference"
style="cursor: pointer;">
<div>图片素材</div>
</div>
<div class="print-images">
<img
:src="item.imgUrl"
v-for="(item, index) in images"
:key="index"
:title="item.remark"
@click="addImage(item.imgUrl)" />
</div>
</el-popover>
<el-popover
title="图片素材(点击添加)"
trigger="hover">
<div
class="item"
slot="reference"
style="cursor: pointer;">
<div>文字素材</div>
</div>
<div class="print-images">
<p
@click="addText(item.contents)"
v-for="(item, index) in contents"
:key="index">
{{ item.contents }}
</p>
</div>
</el-popover>
<div
class="item"
style="cursor: pointer;"
@click="search.type = 1, search.current = 1, isShowImage = true, getConfig()">
<div>图片素材</div>
</div>
<div
class="item"
style="cursor: pointer;"
@click="search.type = 0, search.current = 1, isShowImage = true, getConfig()">
<div>文字素材</div>
</div>
</div>
<div class="title">
<span>动态数据（如日期）</span>
@@ -119,15 +95,6 @@
<el-button slot="reference" size="small" :type="'other' == curPaperType ? 'primary' : ''">自定义纸张</el-button>
</el-popover>
</el-button-group>
<!-- <div class="scale">
<el-button @click="changeScale(false)" size="small">
<el-icon size="18"><ZoomOut /></el-icon>
</el-button>
<div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div>
<el-button @click="changeScale(true)" size="small">
<el-icon size="18"><ZoomIn /></el-icon>
</el-button>
</div> -->
</div>
</div>
<div class="center-wrapper">
@@ -144,6 +111,61 @@
<el-button @click="isShowPreview = false">取消</el-button>
</div>
</ai-dialog>
<ai-dialog :visible.sync="isShowImage" title="图片/文字素材" width="960" customFooter>
<el-select v-model="search.type" placeholder="请选择图片/文字素材" size="small" @change="search.current = 1, getConfig()">
<el-option label="图片素材" :value="1"></el-option>
<el-option label="文字素材" :value="0"></el-option>
</el-select>
<ai-table
v-if="search.type === 1"
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
style="margin-top: 8px;"
height="400"
@getList="getConfig">
<el-table-column slot="image" label="图片" align="left">
<template v-slot="{ row }">
<el-image
v-if="search.type === 1"
style="width: 80px; height: 80px"
:src="row.imgUrl"
:preview-src-list="[row.imgUrl]">
</el-image>
</template>
</el-table-column>
<el-table-column slot="options" label="操作" align="center">
<template v-slot="{ row }">
<div class="table-options">
<el-button type="text" @click="row.type === '1' ? addImage(row.imgUrl) : addText(row.contents), isShowImage = false">添加</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<ai-table
v-if="search.type === 0"
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
:current.sync="search.current"
:size.sync="search.size"
style="margin-top: 8px;"
height="400"
@getList="getConfig">
<el-table-column slot="options" label="操作" align="center">
<template v-slot="{ row }">
<div class="table-options">
<el-button type="text" @click="row.type === '1' ? addImage(row.imgUrl) : addText(row.contents), isShowImage = false">添加</el-button>
</div>
</template>
</el-table-column>
</ai-table>
<div class="dialog-footer" slot="footer">
<el-button @click="isShowImage = false">取消</el-button>
</div>
</ai-dialog>
<ai-dialog
:visible.sync="isShowDynamicForm"
title="动态数据"
@@ -233,29 +255,13 @@
height: 200
},
paperTypes: {
'A3': {
width: 420,
height: 296.6
'1:1': {
width: 200,
height: 200
},
'A4': {
width: 210,
height: 296.6
},
'A5': {
width: 210,
height: 147.6
},
'B3': {
width: 500,
height: 352.6
},
'B4': {
width: 250,
height: 352.6
},
'B5': {
width: 250,
height: 175.6
'1:1.2': {
width: 200,
height: 240
}
},
paperPopVisible: false,
@@ -267,7 +273,15 @@
dynamicFromList: [],
panel: null,
contents: [],
images: []
images: [],
search: {
current: 1,
size: 10,
type: 1
},
isShowImage: false,
tableData: [],
total: 0
}
},
@@ -275,7 +289,6 @@
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}
@@ -302,6 +315,20 @@
}
}
return type
},
colConfigs () {
if (this.search.type === 1) {
return [
{ slot: 'image' },
{ prop: 'remark', label: '描述', align: 'center' }
]
}
return [
{ prop: 'contents', label: '文本', align: 'center' },
{ prop: 'remark', label: '描述', align: 'center' }
]
}
},
@@ -337,10 +364,10 @@
},
getConfig() {
this.$http.post(`/api/material/getPage?page=1&size=-1`).then(res => {
this.$http.post(`/api/material/getPage?current=${this.search.current}&size=${this.search.size}&type=${this.search.type}`).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')
this.tableData = res.data.records
this.total = res.data.total
}
})
},
@@ -352,7 +379,8 @@
left: 70.5,
top: 58.5,
src: src,
widthHeightSync: true
width: 100,
height: 100
}
})
const el = this.hiprintTemplate.printPanels[0].printElements.at(-1)
@@ -372,6 +400,7 @@
width: 140,
height: 20,
coordinateSync: true,
contentPaddingLeft: 5.25,
textContentVerticalAlign: 'middle',
widthHeightSync: true,
hideTitle: true,
@@ -621,6 +650,8 @@
flex-direction: column;
align-items: center;
justify-content: center;
left: 0!important;
top: 0!important;
width: 100px;
margin-bottom: 10px;
margin-right: 10px;

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

@@ -13,10 +13,10 @@ export const customProvider = function (options) {
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'
labelCode: 123456789,
productSkuId: `XXXXXXXXXXXXXX`,
skuExtCode: 'XXXXXXXXXXXXXX',
skuSpecName: 'XXXXX'
}
options.elId = `${elId}`
@@ -32,7 +32,7 @@ export const customProvider = function (options) {
JsBarcode('#' + elId, printData.labelCode, {
format: 'CODE128B',
width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
margin: 0,
displayValue: false
})
@@ -43,10 +43,10 @@ export const customProvider = function (options) {
$(`body>#codewrapper-${elId}`).remove()
// eslint-disable-next-line no-undef
const resizeObserver = new ResizeObserver(() => {
JsBarcode('#'+ elId, printData.labelCode, {
JsBarcode('#' + elId, printData.labelCode, {
format: "CODE128B",
width: 2,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
height: parseInt(hinnn.pt.toPx(options.height - 22).toString()) * 0.6,
margin: 0,
displayValue: false
})
@@ -61,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">${ printData.skuExtCode }</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.skuSpecName }</div>
<div class="hiprint-printElement-text-content hiprint-printElement-content">${printData.skuExtCode || printData.productSkcId}</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%">
@@ -70,7 +70,7 @@ export const customProvider = function (options) {
</div>
</div>
<div class="temuBarCode-bottom">
<div class="hiprint-printElement-text-content hiprint-printElement-content">${ printData.productSkuId }</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>
@@ -85,37 +85,37 @@ export const customProvider = function (options) {
printElementType: {
}
},
{
tid: 'providerModule1.barcode',
title: '条形码',
data: 'XS888888888',
type: 'text',
options: {
field: 'barcode',
testData: 'XS888888888',
height: 32,
fontSize: 12,
lineHeight: 18,
textAlign: 'left',
textType: 'barcode',
hideTitle: false
}
},
{
tid: 'providerModule1.qrcode',
title: '二维码',
data: 'XS888888888',
type: 'text',
options: {
field: '',
testData: '',
height: 32,
fontSize: 12,
lineHeight: 18,
textType: 'qrcode',
hideTitle: false
}
},
// {
// tid: 'providerModule1.barcode',
// title: '条形码',
// data: 'XS888888888',
// type: 'text',
// options: {
// field: 'barcode',
// testData: 'XS888888888',
// height: 32,
// fontSize: 12,
// lineHeight: 18,
// textAlign: 'left',
// textType: 'barcode',
// hideTitle: false
// }
// },
// {
// tid: 'providerModule1.qrcode',
// title: '二维码',
// data: 'XS888888888',
// type: 'text',
// options: {
// field: '',
// testData: '',
// height: 32,
// fontSize: 12,
// lineHeight: 18,
// textType: 'qrcode',
// hideTitle: false
// }
// },
{
tid: 'providerModule1.image',
title: '图片',