<template>
|
<a-modal
|
:width="850"
|
:destroyOnClose="true"
|
:visible="visible"
|
:forceRender="true"
|
title="批量导入"
|
cancelText="取消上传"
|
okText="开始上传"
|
@cancel="handleCancel"
|
@ok="handleSubmit">
|
<a-spin :spinning="confirmLoading">
|
<a-row :span="24">
|
<span>请选择要导入的数据文件（Excel格式）</span>
|
</a-row>
|
<p></p>
|
<a-row>
|
<a-col :span="16">
|
<a-upload-dragger accept=".xlsx,.xls" :multiple="false" :customRequest="customRequest" @change="handleChange" :beforeUpload="beforeUpload">
|
<a-icon style="font-size: 40px;" type="cloud-upload" />
|
</a-upload-dragger>
|
</a-col>
|
<a-col :span="8">
|
<span>导入模式：</span>
|
<a-select
|
style="width: 130px"
|
placeholder="请选择导入模式"
|
v-model="importExcelType">
|
<a-select-option
|
v-for="(item,index) in importExcelTypeData"
|
:key="index"
|
:value="item.code">{{ item.name }}
|
</a-select-option>
|
</a-select>
|
</a-col>
|
</a-row>
|
<a-row :span="24">
|
<a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="!detailed">
|
点击查看文件上传要求
|
</a-button>
|
<span>【</span>
|
<a-button style="width: 90px;text-align: left;" @click="wmsMerchantinfoDownloadExcelTemplate" type="link">下载导入模板</a-button>，填写并上传
|
<span>】</span>
|
<a-button @click="showDemand" style="width: 150px;text-align: left;" type="link" v-show="detailed">
|
收起
|
</a-button>
|
</a-row>
|
<a-row v-show="detailed" style="background: #fef4e8; height: 30px;" :span="24">
|
<a-breadcrumb>
|
<a-breadcrumb-item style="line-height: 30px;color: #faad14;margin-left: 18px;">文件上传要求</a-breadcrumb-item>
|
</a-breadcrumb>
|
</a-row>
|
<pre v-show="detailed">
|
<div v-html="demandText"></div>
|
</pre>
|
<a-table v-show="detailed" :columns="columns" :data-source="dataList" :rowKey="(record) => record.processID" :pagination="false"></a-table>
|
<pre v-show="detailed">
|
<div v-html="columnText"></div>
|
</pre>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import { downloadFile, checkFile, parseExcelFieldText, parseDemandText } from '@/utils/util'
|
import { wmsMerchantinfoFromExcel, wmsMerchantinfoDownloadExcelTemplate} from '@/api/modular/main/WmsMerchantinfoManage'
|
import { sysExcelTemplateGetColumnList } from '@/api/modular/system/excelTemplateManage'
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
visible: false,
|
detailed: false,
|
confirmLoading: false,
|
fileList: [],
|
importExcelTypeData: [],
|
importExcelType: '1',
|
uploadFile: null,
|
columns: [],
|
dataList: [],
|
demandText:'',
|
columnText: ''
|
}
|
},
|
methods: {
|
index() {
|
this.visible = true;
|
this.importExcelTypeData = this.$options.filters['dictData']('import_excel_type')
|
this.demandText = parseDemandText("wmsMerchantinfoDownloadExcelTemplate")
|
window.downloadFile = this.wmsMerchantinfoDownloadExcelTemplate;
|
this.getTable();
|
},
|
showDemand() {
|
this.detailed = !this.detailed;
|
},
|
customRequest(document) {
|
this.uploadFile = document
|
},
|
getTable() {
|
sysExcelTemplateGetColumnList({className: "WmsMerchantinfo"}).then(res =>
|
{
|
if (res.success) {
|
this.columns =[];
|
this.dataList = [{}];
|
res.data.forEach(x => {
|
this.columns.push({
|
dataIndex: x.columnName,
|
key: x.columnName,
|
title: x.columnComment
|
});
|
this.dataList[0][x.columnName] = x.isRequired ? "必填" : "非必填"
|
});
|
this.columnText = parseExcelFieldText(res.data);
|
}
|
});
|
},
|
beforeUpload(fileInfo) {
|
let res = checkFile(fileInfo, 1073741824, ['.xlsx', '.xls']);
|
if (!res.success) {
|
this.$message.warning(res.msg)
|
return false
|
}
|
setTimeout(() => {this.uploadFile.onSuccess(this.uploadFile.file)}, 1000)
|
},
|
handleChange(fileInfo) {
|
if (fileInfo.file.status === 'error') {
|
fileInfo.fileList.splice(0, 1)
|
}
|
if (fileInfo.file.status === 'done') {
|
if (fileInfo.fileList.length > 1) {
|
fileInfo.fileList.splice(0, 1)
|
}
|
this.fileList = fileInfo.file
|
}
|
},
|
handleSubmit() {
|
this.confirmLoading = true
|
const formData = new FormData()
|
formData.append('file', this.uploadFile.file)
|
wmsMerchantinfoFromExcel(formData, {importExcelType: this.importExcelType}).then(res => {
|
this.$message.success('操作成功')
|
this.confirmLoading = false
|
this.$emit('ok', [])
|
this.handleCancel()
|
}).finally((res)=>{this.confirmLoading = false})
|
},
|
handleCancel() {
|
this.visible = false
|
this.detailed = false
|
},
|
wmsMerchantinfoDownloadExcelTemplate() {
|
wmsMerchantinfoDownloadExcelTemplate({version: "v2"}).then((res) => {
|
downloadFile(res);
|
}).catch((err) => {
|
this.$message.error('下载错误：获取文件流错误' + err)
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
::v-deep .ant-upload.ant-upload-drag {
|
position: relative;
|
width: 140px;
|
height: 135px;
|
text-align: center;
|
background: #fafafa;
|
border: 1px dashed #d9d9d9;
|
border-radius: 2px;
|
cursor: pointer;
|
-webkit-transition: border-color 0.3s;
|
transition: border-color 0.3s;
|
}
|
::v-deep .ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
|
color: #ffc53d;
|
border-color: white;
|
}
|
</style>
|
