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

【新增】打印组件

Browse Source
This commit is contained in:
yanran200830
2024-10-25 15:31:01 +08:00
parent 4d0cc14001
commit a51a0d49bc
6 changed files with 288 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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)
},

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

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

118
src/view/lables/SkuManage.vue
View File

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