<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"
|
:custom-request="customRequest"
|
:file-list="fileList"
|
:before-upload="beforeUpload"
|
:remove="handleRemove">
|
<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="deskFactoryDownloadExcelTemplate" 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,index) => index" :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 { WmsContainerFromExcel, WmsContainerDownloadExcelTemplate} from '@/api/modular/main/WmsContainerManage'
|
import { sysExcelTemplateGetColumnList } from '@/api/modular/system/excelTemplateManage'
|
export default {
|
components: {
|
},
|
data() {
|
return {
|
visible: false,
|
detailed: false,
|
confirmLoading: false,
|
fileList: [],
|
fileContext: {},
|
importExcelTypeData: [],
|
importExcelType: '1',
|
columns: [],
|
dataList: [],
|
demandText:'',
|
columnText: ''
|
}
|
},
|
methods: {
|
index() {
|
this.fileContext = {};
|
this.fileList = [];
|
this.visible = true;
|
this.importExcelTypeData = this.$options.filters['dictData']('import_excel_type')
|
this.demandText = parseDemandText()
|
window.downloadFile = this.deskFactoryDownloadExcelTemplate;
|
this.getTable();
|
},
|
showDemand() {
|
this.detailed = !this.detailed;
|
},
|
getTable() {
|
sysExcelTemplateGetColumnList({className: "DeskFactory"}).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);
|
}
|
});
|
},
|
customRequest(document) {
|
this.fileContext = document
|
},
|
beforeUpload(file) {
|
let res = checkFile(file, 1073741824, ['.xlsx', '.xls']);
|
if (!res.success) {
|
this.$message.warning(res.msg)
|
return false
|
}
|
setTimeout(() => {
|
this.fileContext.onSuccess(this.fileContext.file)
|
this.fileList = [this.fileContext.file]
|
}, 200)
|
},
|
handleRemove (file) {
|
const index = this.fileList.indexOf(file)
|
const newFileList = this.fileList.slice()
|
newFileList.splice(index, 1)
|
this.fileList = newFileList
|
},
|
handleSubmit() {
|
if(this.fileList.length < 1) {
|
this.$message.warning('请先上传文件！')
|
return false
|
}
|
this.confirmLoading = true
|
const formData = new FormData()
|
formData.append('file', this.fileList[0])
|
WmsContainerFromExcel(formData, {importExcelType: this.importExcelType}).then(res => {
|
this.$message.success('操作成功')
|
this.$emit('ok', [])
|
this.handleCancel()
|
}).finally((res)=> {
|
this.confirmLoading = false
|
this.fileList = []
|
})
|
},
|
handleCancel() {
|
this.visible = false
|
this.detailed = false
|
},
|
deskFactoryDownloadExcelTemplate() {
|
WmsContainerDownloadExcelTemplate({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>
|
