效果
html:
<el-dialog title="设备台账导入" append-to-body :visible.sync="excelBox" width="555px">
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter" :upload-before="uploadBefore">
</avue-form>
</el-dialog>
js:
excelOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: "文件上传",
prop: "excelFile",
type: "upload",
drag: true,
loadText: "文件上传中,请稍等",
span: 24,
propsHttp: {
res: "data",
},
tip: "请上传 .xls,.xlsx 标准格式文件",
action: "/api/device/import-device",
},
],
},
isCovered:"SKIP",
uploadBefore(file, done) {
handleBeforeUpload(file).then(res => {
if (res.data.code == 200) {
let title = res.data.data
this.$confirm(`检测到您上传的数据,其中【${title}】重复,请选择【跳过】还是【覆盖】该数据?`, '提示', {
confirmButtonText: '覆盖',
cancelButtonText: '跳过',
type: 'warning'
}).then(() => {
// 覆盖
this.isCovered="COVER"
done()
}).catch(() => {
// 跳过
this.isCovered="SKIP"
done()
});
}
})
},
watch: {
isCovered() {
if (this.isCovered !== "") {
const column = this.findObject(this.excelOption.column, "excelFile");
column.action = `/api/device/import-device?importStrategy=${this.isCovered}`;
}
},
},