|
@@ -1,17 +1,30 @@
|
|
|
<template>
|
|
|
- <vxe-modal v-model="show" id="importExcelFailModel" width="600" height="300" title="B2C订单导入" @hide="hide" resize transfer show-footer v-loading="load">
|
|
|
+ <vxe-modal v-model="show" id="importExcelFailModel" width="800" height="600" title="B2C订单导入" @hide="hide" resize
|
|
|
+ transfer show-footer v-loading="load">
|
|
|
<div class="upload" v-if="!uploadRes">
|
|
|
<div class="upload-name">{{ value.name }}</div>
|
|
|
- <div class="upload-btn" @click="importOrder">{{value.name?'重新上传':'上传'}}</div>
|
|
|
+ <div class="upload-btn" @click="importOrder">{{ value.name ? '重新上传' : '上传' }}</div>
|
|
|
</div>
|
|
|
<div class="upload-module" v-if="!uploadRes" @click="loadDownExcel">下载excel模版</div>
|
|
|
<div class="shop-result" v-if="uploadRes">
|
|
|
- <div class="success">成功:{{uploadRes.successCount}}</div>
|
|
|
+ <div class="success">成功:{{ uploadRes.successCount }}</div>
|
|
|
<div class="err">异常:{{ uploadRes.failureCount }}</div>
|
|
|
</div>
|
|
|
+ <div v-if="uploadRes && uploadRes.failureCount > 0">
|
|
|
+ <el-table :data="tableData" border style="width: 100%">
|
|
|
+ <el-table-column type="index" width="50" />
|
|
|
+ <el-table-column v-for="(val, key) in tableData[0]" v-if="key === '订单编号' || key === '是否成功' || key === '操作信息'"
|
|
|
+ :key="key" :prop="key" :label="key === '操作信息' ? '异常原因' : key" show-overflow-tooltip
|
|
|
+ :width="key === '操作信息' ? '' : '120'" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination @current-change="handleCurrentChange" v-model:current-page="currentPage" :page-size="pageSize"
|
|
|
+ :total="total" layout="prev, pager, next, jumper" style="margin-top: 20px; text-align: right" />
|
|
|
+ </div>
|
|
|
<template #footer>
|
|
|
<div class="btn">
|
|
|
- <el-button type="primary" size="small" @click="uploadErr" v-if="uploadRes && uploadRes.failureCount > 0">下载异常数据</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="uploadErr"
|
|
|
+ v-if="uploadRes && uploadRes.failureCount > 0">下载异常数据</el-button>
|
|
|
<el-button type="primary" size="small" @click="btn" v-if="!uploadRes">完成上传</el-button>
|
|
|
<el-button plain size="small" @click="show = false">关闭</el-button>
|
|
|
</div>
|
|
@@ -21,27 +34,31 @@
|
|
|
|
|
|
<script lang="ts">
|
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
|
-import { importB2cOrder,loadDownModule } from '@/api/omsOrder'
|
|
|
+import { importB2cOrder, loadDownModule } from '@/api/omsOrder'
|
|
|
import ExcelHelper from '@/benyun/utils/excelHelper'
|
|
|
-@Component({components:{}})
|
|
|
+@Component({ components: {} })
|
|
|
export default class ImportExcelFailModel extends Vue {
|
|
|
- show:boolean = false;
|
|
|
- value:any = {}
|
|
|
- load:boolean = false;
|
|
|
- uploadRes:any = null
|
|
|
- setShow(v:boolean){
|
|
|
+ show: boolean = false;
|
|
|
+ value: any = {}
|
|
|
+ load: boolean = false;
|
|
|
+ uploadRes: any = null;
|
|
|
+ tableData: any = [];
|
|
|
+ currentPage = 1;
|
|
|
+ pageSize = 10;
|
|
|
+ total = this.tableData.length;
|
|
|
+ setShow(v: boolean) {
|
|
|
this.show = v;
|
|
|
}
|
|
|
- hide(){
|
|
|
- if(this.uploadRes && this.uploadRes.successCount > 0){
|
|
|
+ hide() {
|
|
|
+ if (this.uploadRes && this.uploadRes.successCount > 0) {
|
|
|
this.$emit('handleSuccess')
|
|
|
}
|
|
|
this.value = {};
|
|
|
this.uploadRes = null;
|
|
|
}
|
|
|
//下载模版
|
|
|
- loadDownExcel(){
|
|
|
- loadDownModule().then((res:any) => {
|
|
|
+ loadDownExcel() {
|
|
|
+ loadDownModule().then((res: any) => {
|
|
|
let url = window.URL.createObjectURL(new Blob([res]));
|
|
|
let link = document.createElement("a");
|
|
|
link.style.display = "none";
|
|
@@ -50,7 +67,7 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
document.body.appendChild(link);
|
|
|
link.click();
|
|
|
document.body.removeChild(link);
|
|
|
-
|
|
|
+
|
|
|
this.$message({
|
|
|
message: '下载成功!',
|
|
|
type: 'success'
|
|
@@ -66,12 +83,12 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
input.accept = accept
|
|
|
document.body.appendChild(input);
|
|
|
const that = this;
|
|
|
- input.addEventListener('change', function (e:any) {
|
|
|
+ input.addEventListener('change', function (e: any) {
|
|
|
let txt = e.target.files[0];
|
|
|
let s = txt.name.split('.');
|
|
|
let suffix = '.' + s[s.length - 1];
|
|
|
- if(accept.indexOf(suffix) == -1){
|
|
|
- that.$message({message:'不支持该类型文件上传!'})
|
|
|
+ if (accept.indexOf(suffix) == -1) {
|
|
|
+ that.$message({ message: '不支持该类型文件上传!' })
|
|
|
return
|
|
|
}
|
|
|
that.value = txt;
|
|
@@ -79,48 +96,72 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
input.click();
|
|
|
document.body.removeChild(input);
|
|
|
}
|
|
|
- btn(){
|
|
|
- if(!this.value.name){
|
|
|
+ btn() {
|
|
|
+ if (!this.value.name) {
|
|
|
this.$message('请选择文件!');
|
|
|
return
|
|
|
}
|
|
|
let data = new FormData();
|
|
|
- data.append('file' , this.value);
|
|
|
+ data.append('file', this.value);
|
|
|
this.load = true;
|
|
|
importB2cOrder(data).then(res => {
|
|
|
this.uploadRes = res.data;
|
|
|
+ this.tableData = this.transformFailureList(res.data.failureList);
|
|
|
+ this.total = this.tableData.length;
|
|
|
+ this.currentPage = 1;
|
|
|
+ this.tableData = this.pagedData()
|
|
|
this.load = false;
|
|
|
}).catch(err => {
|
|
|
this.load = false;
|
|
|
- if(err && err.msg) {
|
|
|
+ if (err && err.msg) {
|
|
|
this.$message({
|
|
|
showClose: true,
|
|
|
- message:err.msg,
|
|
|
- type:'error'
|
|
|
+ message: err.msg,
|
|
|
+ type: 'error'
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
- uploadErr(){
|
|
|
- let ExcelHead:Array<any> = [];
|
|
|
- let data:Array<any>=[]
|
|
|
+ pagedData() {
|
|
|
+ const start = (this.currentPage - 1) * this.pageSize;
|
|
|
+ this.tableData = this.transformFailureList(this.uploadRes.failureList);
|
|
|
+ return this.tableData.slice(start, start + this.pageSize);
|
|
|
+ }
|
|
|
+ handleCurrentChange(val: number) {
|
|
|
+ this.currentPage = val;
|
|
|
+ this.tableData = this.pagedData();
|
|
|
+ }
|
|
|
+ transformFailureList(failureList) {
|
|
|
+ if (!failureList || failureList.length < 2) return [];
|
|
|
+ const headers = failureList[0];
|
|
|
+ return failureList.slice(1).map(row => {
|
|
|
+ const obj = {};
|
|
|
+ headers.forEach((h, i) => {
|
|
|
+ obj[h] = row[i];
|
|
|
+ });
|
|
|
+ return obj;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ uploadErr() {
|
|
|
+ let ExcelHead: Array<any> = [];
|
|
|
+ let data: Array<any> = []
|
|
|
// let arr=['orderCode','plantTime','sProvince','sCity','sCounty','address','sName','sTel','orderDate','buyId','orderRmk','lineRmk','productCode','productType','mProductCode','mProductName','mTypeCode','isGift','num','basePrice','price','rmk','isSuccess','info']
|
|
|
|
|
|
- this.uploadRes.failureList.forEach((item:any,index:any) => {
|
|
|
- let obj:any={}
|
|
|
- item.forEach((ele:any,dex:any) => {
|
|
|
- if(index === 0) {
|
|
|
+ this.uploadRes.failureList.forEach((item: any, index: any) => {
|
|
|
+ let obj: any = {}
|
|
|
+ item.forEach((ele: any, dex: any) => {
|
|
|
+ if (index === 0) {
|
|
|
let excelHeadConfig = {
|
|
|
text: ele,
|
|
|
value: 'a' + dex,
|
|
|
width: '200'
|
|
|
}
|
|
|
ExcelHead.push(excelHeadConfig)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
obj['a' + dex] = ele;
|
|
|
}
|
|
|
});
|
|
|
- if(index !== 0){
|
|
|
+ if (index !== 0) {
|
|
|
data.push(obj)
|
|
|
}
|
|
|
});
|
|
@@ -136,15 +177,15 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
excelHelper.toExcel({
|
|
|
fileName: 'B2C异常数据(仅供参考,请误上传).xlsx',
|
|
|
data: data,
|
|
|
- otherData: {ExcelHead}
|
|
|
+ otherData: { ExcelHead }
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.upload{
|
|
|
+.upload {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
height: 40px;
|
|
@@ -153,7 +194,8 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
justify-content: center;
|
|
|
margin-top: 32px;
|
|
|
margin-bottom: 8px;
|
|
|
- .upload-name{
|
|
|
+
|
|
|
+ .upload-name {
|
|
|
height: 32px;
|
|
|
width: 400px;
|
|
|
border-radius: 5px;
|
|
@@ -164,7 +206,8 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
color: #333;
|
|
|
line-height: 32px;
|
|
|
}
|
|
|
- .upload-btn{
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
height: 32px;
|
|
|
width: 70px;
|
|
|
background-color: #0581FF;
|
|
@@ -178,25 +221,29 @@ export default class ImportExcelFailModel extends Vue {
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
-.upload-module{
|
|
|
+
|
|
|
+.upload-module {
|
|
|
color: #0581FF;
|
|
|
font-size: 14px;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
-.shop-result{
|
|
|
+
|
|
|
+.shop-result {
|
|
|
width: 100%;
|
|
|
padding-top: 40px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
font-size: 28px;
|
|
|
- .success{
|
|
|
+
|
|
|
+ .success {
|
|
|
color: #0581FF;
|
|
|
padding-right: 24px;
|
|
|
}
|
|
|
- .err{
|
|
|
+
|
|
|
+ .err {
|
|
|
color: #F00;
|
|
|
padding-left: 24px;
|
|
|
}
|