【新增】打印

This commit is contained in:
yanran200730
2024-10-27 18:29:16 +08:00
parent 8900853066
commit 275f5f6abd
8 changed files with 1414 additions and 9602 deletions

View File

@@ -11,8 +11,23 @@
<ai-search-bar>
<template #left>
<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>
<el-upload
action
:limit="1"
:show-file-list="false"
accept=".xls,.xlsx"
:auto-upload="false"
:file-list="fileList"
:on-change="onExcelChange">
<el-button size="small" type="danger">Excel导入</el-button>
</el-upload>
<json-excel
:data="skuList"
:fields="jsonFields"
name="SKU列表.xls"
worksheet="SKU列表">
<el-button size="small" type="warning" :disabled="!skuList.length">Excel导出</el-button>
</json-excel>
</template>
<template #right>
</template>
@@ -25,23 +40,24 @@
:size.sync="search.size"
style="margin-top: 8px;"
@getList="getList"
@selection-change="handleSelectionChange">
<el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称" fixed="left">
<template slot-scope="scope">
<div>
<el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
{{ scope.row.productName }}
</div>
</template>
@selection-change="handleSelectionChange"
v-loading="pageShow">
<el-table-column
v-for="(item, index) in relationList"
:key="index"
:prop="item.field"
:show-overflow-tooltip="true"
:label="item.name"
align="center">
</el-table-column>
<el-table-column slot="options" label="操作" align="center" fixed="right" width="240px">
<!-- <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>
<el-button type="text" @click="toDetail(row.url)">删除</el-button>
</div>
</template>
</el-table-column>
</el-table-column> -->
</ai-table>
<ai-dialog
:visible.sync="isShow"
@@ -94,7 +110,6 @@
v-model="skuReqParams.SKC"
style="width: 250px"
size="small"
v-throttle="() => {getSkuList()}"
placeholder="多个查询请用户逗号分割"
clearable
@clear="getSkuList()"
@@ -109,7 +124,6 @@
v-model="skuReqParams.SKU"
style="width: 250px"
size="small"
v-throttle="() => {getSkuList()}"
placeholder="多个查询请用户逗号分割"
clearable
@clear="getSkuList()"
@@ -148,23 +162,17 @@
<script>
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()
}
})
}
}
}