157 lines
5.0 KiB
Vue
157 lines
5.0 KiB
Vue
<template>
|
|
<ai-list class="list" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
|
|
<ai-title
|
|
slot="title"
|
|
title="证书中心"
|
|
isShowBottomBorder>
|
|
</ai-title>
|
|
<template slot="content">
|
|
<ai-card title="待补充证书列表" style="padding-bottom: 40px;">
|
|
<template #right>
|
|
<el-button type="primary" @click="exportToExcel">导出</el-button>
|
|
</template>
|
|
<ai-table
|
|
:isShowPagination="false"
|
|
:tableData="list"
|
|
:col-configs="colConfigs"
|
|
height="600"
|
|
style="margin-top: 8px;"
|
|
@getList="() => {}">
|
|
</ai-table>
|
|
</ai-card>
|
|
</template>
|
|
</ai-list>
|
|
</template>
|
|
|
|
<script>
|
|
import {sendGeiwohuoAPIMessage} from '@/api/chromeApi'
|
|
import {timestampToTime} from '@/utils/date'
|
|
import { Message } from 'element-ui'
|
|
import * as XLSX from 'xlsx'
|
|
import { saveAs } from 'file-saver'
|
|
|
|
export default {
|
|
name: 'CertCenterShein',
|
|
|
|
data () {
|
|
return {
|
|
isLoading: false,
|
|
list: [],
|
|
mallId: '',
|
|
colConfigs: [
|
|
{ prop: 'spu', label: 'SPU', align: 'left' },
|
|
{ prop: 'productName', label: '商品标题', align: 'left' },
|
|
{ prop: 'skc', label: 'SKC ID', align: 'left' },
|
|
{ prop: 'mainAttrName', label: '主规格', align: 'left' },
|
|
{ prop: 'certificateTypeName', label: '证书类型', align: 'left' },
|
|
{ prop: 'mergeSiteName', label: '管控地区', align: 'left' },
|
|
{ prop: 'subSite', label: '管控子站点', align: 'left' },
|
|
{ slot: 'uploadEndTime', label: '上传截止时间', align: 'left' }
|
|
],
|
|
|
|
tableData: [],
|
|
currentPage: 1,
|
|
}
|
|
},
|
|
|
|
mounted () {
|
|
this.isLoading = true
|
|
this.getList()
|
|
},
|
|
|
|
methods: {
|
|
async getList () {
|
|
let res = await sendGeiwohuoAPIMessage({
|
|
url: `spmp-api-prefix/spmp/certificate/get_skc_certificate_miss_list?page_num=${this.currentPage}&page_size=200`,
|
|
method: 'POST',
|
|
data: {}})
|
|
if (res.code == '0') {
|
|
for(let i = 0;i < res.info.data.length; i++) {
|
|
let item = res.info.data[i];
|
|
let mainSite = []
|
|
let subSite = []
|
|
item.merge_site_info_list.map(e => {
|
|
mainSite.push(e.merge_site_name)
|
|
subSite = subSite.concat(e.sub_site_list)
|
|
})
|
|
let data = {spu: item.spu_name,
|
|
productName: item.skc_name_cn,
|
|
skc: item.skc_name,
|
|
mainAttrName: item.main_attribute_name,
|
|
uploadEndTime: item.upload_end_time,
|
|
mergeSiteName: mainSite.join(','),
|
|
certificateTypeName: item.certificate_type_name,
|
|
subSite: subSite.join(',')
|
|
}
|
|
|
|
this.list.push(data)
|
|
}
|
|
if (res.info.data.length == 200 && (res.info.meta.count > 200*this.currentPage)) {
|
|
this.currentPage++
|
|
await this.sleepSync(200)
|
|
await this.getList()
|
|
} else {
|
|
this.isLoading = false
|
|
}
|
|
} else if (res.code == 100004 || res.code == 20302) {
|
|
this.isLoading = false
|
|
this.$store.commit("setSheinAlertShow", true)
|
|
}
|
|
},
|
|
sleepSync(milliseconds) {
|
|
return new Promise(resolve => setTimeout(resolve, milliseconds));
|
|
},
|
|
exportToExcel() {
|
|
// 假设你有一个表格数据的数组
|
|
const data = [
|
|
["SPU", "商品标题", "SKC ID", "主规格", "证书类型", "管控地区", "管控子站点", "上传截止时间"]
|
|
]
|
|
|
|
this.list.map(item => {
|
|
data.push([item.spu, item.productName, item.skc, item.mainAttrName, item.certificateTypeName, item.mergeSiteName, item.subSite, item.uploadEndTime])
|
|
})
|
|
|
|
// 将数据转换为工作表
|
|
const worksheet = XLSX.utils.aoa_to_sheet(data);
|
|
|
|
// 创建工作簿并添加工作表
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
|
|
|
|
// 生成Excel文件
|
|
const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
|
|
|
|
// 使用blob和FileReader创建一个Blob URL
|
|
const dataBlob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
|
|
const blobUrl = window.URL.createObjectURL(dataBlob);
|
|
|
|
// 使用saveAs下载文件
|
|
saveAs(dataBlob, '待补充证书列表.xlsx');
|
|
|
|
// 清理
|
|
window.URL.revokeObjectURL(blobUrl);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.list {
|
|
.title-right {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
& > div:first-child {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
::v-deep.ai-list {
|
|
.ai-list__content--right-wrapper {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
padding: 0!important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|