239 lines
7.1 KiB
Vue
239 lines
7.1 KiB
Vue
|
<template>
|
||
|
|
<ai-list class="Template">
|
||
|
|
<ai-title
|
||
|
|
slot="title"
|
||
|
|
title="管理SKU"
|
||
|
|
isShowBack
|
||
|
|
isShowBottomBorder
|
||
|
|
@onBackClick="$router.go(-1)">
|
||
|
|
</ai-title>
|
||
|
|
<template slot="content">
|
||
|
|
<ai-search-bar>
|
||
|
|
<template #left>
|
||
|
|
<el-button type="primary" size="small" @click="isShow = true">添加</el-button>
|
||
|
|
</template>
|
||
|
|
<template #right>
|
||
|
|
</template>
|
||
|
|
</ai-search-bar>
|
||
|
|
<ai-table
|
||
|
|
:tableData="tableData"
|
||
|
|
:col-configs="colConfigs"
|
||
|
|
:total="total"
|
||
|
|
:current.sync="search.current"
|
||
|
|
:size.sync="search.size"
|
||
|
|
style="margin-top: 8px;"
|
||
|
|
@getList="getList">
|
||
|
|
<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>
|
||
|
|
</el-table-column>
|
||
|
|
<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="toAdd(row.url)">编辑</el-button>
|
||
|
|
<el-button type="text" @click="toDetail(row.url)">删除</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</ai-table>
|
||
|
|
<ai-dialog
|
||
|
|
:visible.sync="isShow"
|
||
|
|
title="添加SKU"
|
||
|
|
width="1400px"
|
||
|
|
@confirm="onConfirm">
|
||
|
|
<ai-search-bar>
|
||
|
|
<template #left>
|
||
|
|
<el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small" @change="onMallChange">
|
||
|
|
<el-option
|
||
|
|
v-for="item in $store.state.mallList"
|
||
|
|
:key="item.mallId"
|
||
|
|
:label="item.mallName"
|
||
|
|
:value="item.mallId">
|
||
|
|
</el-option>
|
||
|
|
</el-select>
|
||
|
|
</template>
|
||
|
|
<template #right>
|
||
|
|
</template>
|
||
|
|
</ai-search-bar>
|
||
|
|
<ai-table
|
||
|
|
height="400"
|
||
|
|
:tableData="skuList"
|
||
|
|
:col-configs="colConfigs"
|
||
|
|
:total="skuTotal"
|
||
|
|
:current.sync="skuSearch.current"
|
||
|
|
:size.sync="skuSearch.size"
|
||
|
|
style="margin-top: 8px;"
|
||
|
|
@getList="getSkuList"
|
||
|
|
:pageSizes="[10, 20, 50, 100, 500, 1000]"
|
||
|
|
v-loading="isLoading">
|
||
|
|
<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>
|
||
|
|
</el-table-column>
|
||
|
|
</ai-table>
|
||
|
|
</ai-dialog>
|
||
|
|
</template>
|
||
|
|
</ai-list>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { sendChromeAPIMessage } from '@/api/chromeApi'
|
||
|
|
export default {
|
||
|
|
name: 'Template',
|
||
|
|
|
||
|
|
data () {
|
||
|
|
return {
|
||
|
|
colConfigs: [
|
||
|
|
// { 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' }
|
||
|
|
],
|
||
|
|
tableData: [],
|
||
|
|
total: 0,
|
||
|
|
search: {
|
||
|
|
current: 1,
|
||
|
|
size: 100
|
||
|
|
},
|
||
|
|
skuSearch: {
|
||
|
|
current: 1,
|
||
|
|
size: 100,
|
||
|
|
mallId: ''
|
||
|
|
},
|
||
|
|
skuTotal: 0,
|
||
|
|
skuList: [],
|
||
|
|
isShow: false,
|
||
|
|
skuReqParams: {
|
||
|
|
page: 1,
|
||
|
|
pageSize: 100
|
||
|
|
},
|
||
|
|
isLoading: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
computed: {
|
||
|
|
currMall () {
|
||
|
|
if (!this.$store.state.mallList.length) {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
|
||
|
|
return this.$store.state.mallList.filter(v => v.mallId === this.skuSearch.mallId)[0]
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
created () {
|
||
|
|
this.getList()
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
toAdd () {
|
||
|
|
this.$router.push('/addLabelsTemplate')
|
||
|
|
},
|
||
|
|
|
||
|
|
requestSKUList () {
|
||
|
|
sendChromeAPIMessage({
|
||
|
|
url: 'bg-visage-mms/labelcode/pageQuery',
|
||
|
|
needMallId: true,
|
||
|
|
mallId: this.skuSearch.mallId,
|
||
|
|
anti: true,
|
||
|
|
data: {
|
||
|
|
page: this.skuSearch.size > 100 ? this.skuReqParams.page : this.skuSearch.current,
|
||
|
|
pageSize: this.skuSearch.size > 100 ? 100 : this.skuSearch.size
|
||
|
|
}
|
||
|
|
}).then(async (res) => {
|
||
|
|
if (res.errorCode == 1000000) {
|
||
|
|
const list = res.result.pageItems.map(v => {
|
||
|
|
return {
|
||
|
|
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.skuTotal = res.result.total
|
||
|
|
this.skuList.push(...list)
|
||
|
|
|
||
|
|
if (this.skuSearch.size > 100 && (res.result.total > this.skuList.length)) {
|
||
|
|
this.skuReqParams.page++
|
||
|
|
await this.$sleepSync(5000)
|
||
|
|
this.requestSKUList()
|
||
|
|
} else {
|
||
|
|
this.isLoading = false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
onMallChange (e) {
|
||
|
|
if (!e) {
|
||
|
|
this.skuList = []
|
||
|
|
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$userCheck(this.skuSearch.mallId).then(() => {
|
||
|
|
this.skuList = []
|
||
|
|
this.skuReqParams.page = 1
|
||
|
|
this.isLoading = true
|
||
|
|
this.requestSKUList()
|
||
|
|
}).catch(() => {
|
||
|
|
this.skuSearch.mallId = ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
getSkuList () {
|
||
|
|
if (!this.skuSearch.mallId) {
|
||
|
|
return this.$message.error('请选择店铺')
|
||
|
|
}
|
||
|
|
|
||
|
|
this.$userCheck(this.skuSearch.mallId).then(() => {
|
||
|
|
this.skuList = []
|
||
|
|
this.skuReqParams.page = 1
|
||
|
|
this.isLoading = true
|
||
|
|
|
||
|
|
this.requestSKUList()
|
||
|
|
}).catch(() => {
|
||
|
|
this.skuSearch.mallId = ''
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
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
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
onConfirm () {
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
</style>
|