VUE:
<el-dialog title="账户数据导入"
append-to-body
:visible.sync="excelBox"
width="555px">
<avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
<template slot="excelTemplate">
<el-button type="primary" @click="handleTemplate()">
点击下载<i class="el-icon-download el-icon--right"></i>
</el-button>
</template>
</avue-form>
</el-dialog>
导入导出按钮定义：
<el-button type="success"
size="small"
plain
v-if="userInfo.role_name.includes('admin')"
icon="el-icon-upload2"
@click="handleImport">导入
</el-button>
<el-button type="warning"
size="small"
plain
v-if="userInfo.role_name.includes('admin')"
icon="el-icon-download"
@click="handleExport">导出
</el-button>
数据导出方法
handleExport() {
this.$confirm("是否导出用户数据?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(() => {
const searchForm = this.$refs.crud.searchForm;
window.open(`/api/blade-basic/employee/export-employee?Blade-Auth=${getToken()}&edrp_id=${searchForm.deptId}`);
});
},
handleImport() {
console.log("handleImport")
this.excelBox = true;
},
uploadAfter(res, done, loading, column) {
window.console.log(column);
this.excelBox = false;
this.refreshChange();
done();
},
模板下载方法：
handleTemplate() {
window.open(`/api/blade-basic/employee/export-template?Blade-Auth=${getToken()}`);
},
引入授权验证
import {getToken} from '@/util/auth';
Data（）中增加如下代码：
excelForm: {},
excelOption: {
submitBtn: false,
emptyBtn: false,
column: [
{
label: '模板上传',
prop: 'excelFile',
type: 'upload',
drag: true,
loadText: '模板上传中，请稍等',
span: 24,
propsHttp: {
res: 'data'
},
tip: '请上传 .xls,.xlsx 标准格式文件',
action: "/api/blade-basic/employee/import-employee"
},
{
label: "数据覆盖",
prop: "isCovered",
type: "switch",
align: "center",
80,
dicData: [
{
label: "否",
value: 0
},
{
label: "是",
value: 1
}
],
value: 0,
slot: true,
rules: [
{
required: true,
message: "请选择是否覆盖",
trigger: "blur"
}
]
},
{
label: '模板下载',
prop: 'excelTemplate',
formslot: true,
span: 24,
}
]
}
监控是否选择了覆盖数据开关：
watch: {
// 'form.tenantId'() {
// if (this.form.tenantId !== '') {
// this.initData(this.form.tenantId);
// }
// },
'excelForm.isCovered'() {
if (this.excelForm.isCovered !== '') {
const column = this.findObject(this.excelOption.column, "excelFile");
column.action = `/api/blade-basic/employee/import-employee?isCovered=${this.excelForm.isCovered}`;
}
}
},
覆盖开关赋值：
在data() retur中定义
excelBox: false,
在mapGetters中加入userInfo
...mapGetters(["userInfo","permission"]),
导入完成后需要刷新一下数据：