|
<template>
|
<el-dialog v-dialogDrag :visible.sync="currentDialogVisible" :top="common.getDialogTop()" title="批量导出操作" class="dialog-container" width="680px" append-to-body>
|
<el-alert :closable="false" title="点击左侧导出模板导出进行导出数据" type="success" class="alert-msg">
|
</el-alert>
|
<el-row ref="uploadRef" :gutter="20">
|
<el-col :span="10">
|
<ul>
|
<li v-for="(item, index) in vueDataList" :key="index" :class="{active: currentTemplate === item}" class="template-item" @click="selectTemplate(item)">
|
{{ item.label }}
|
</li>
|
</ul>
|
<slot name="export-module-list"></slot>
|
</el-col>
|
<el-col :span="14">
|
<el-scrollbar :noresize="false" :native="false" wrap-class="scrollbar-wrap">
|
<el-tag v-for="(vueInfo, index) in currentTemplate.vueData" :key="index" class="margin-top-10 margin-right-10">{{ vueInfo.cnName }}
|
<span v-if="vueInfo.aliasName" class="sub-title">别名：{{ vueInfo.aliasName }}</span>
|
<span v-if="vueInfo.colExpression" class="sub-title">表达式：{{ vueInfo.colExpression }}</span>
|
</el-tag>
|
</el-scrollbar>
|
</el-col>
|
</el-row>
|
<template :slot="'tempExport'">
|
<slot :name="'blank-tempExport'"></slot>
|
</template>
|
<div class="margin-10" v-html="importMsg">{{ importMsg }}</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="currentDialogVisible = false">取 消</el-button>
|
<el-button :loading="isLoading" type="primary" icon="el-icon-yrt-daochu1" @click="startExport">开始导出</el-button>
|
</span>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
visible: {
|
type: Boolean,
|
default: false
|
},
|
// 导出方法
|
exportData: {
|
type: Function,
|
default: () => {
|
return () => {};
|
}
|
},
|
options: {
|
type: Object,
|
default: () => {
|
return {};
|
}
|
}
|
},
|
data() {
|
return {
|
// 当前选中菜单下的导出模板列表
|
vueDataList: [],
|
// 当前选中模板
|
currentTemplate: {},
|
isLoading: false,
|
isInit: false,
|
// 导出消息
|
importMsg: null
|
};
|
},
|
computed: {
|
// 显示窗口
|
currentDialogVisible: {
|
get: function() {
|
return this.visible;
|
},
|
set: function(val) {
|
this.$emit("update:visible", val);
|
}
|
}
|
},
|
watch: {},
|
methods: {
|
// 获得模板
|
getTemplateList() {
|
if (this.isInit) return;
|
this.isInit = true;
|
|
var url = "/api/sys/export/getExportColList";
|
var params = {
|
exportInfo_Id: this.options.exportInfo_Id
|
};
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
// 初始化标准模板
|
var vueData = res.data.map((item, index) => {
|
return {
|
cnName: item.cnName,
|
colExpression: item.colExpression,
|
aliasName: item.aliasName,
|
key: index
|
};
|
});
|
|
this.vueDataList = [
|
{
|
vueData_Id: 0, // 0表示为主模板
|
exportInfo_Id: 0,
|
label: "系统标准模板",
|
vueData: vueData
|
}
|
];
|
this.currentTemplate = this.vueDataList[0];
|
}
|
|
// 加载vueData列表
|
this.loadVueDtaList();
|
},
|
this.$refs.uploadRef
|
);
|
},
|
// 加载VueData列表
|
loadVueDtaList() {
|
this.isLoading = true;
|
var exportInfo_Id = this.options.exportInfo_Id;
|
var url = "/api/sys/export/getExportVueDataList";
|
var params = {
|
exportInfo_Id: exportInfo_Id
|
};
|
|
this.common.ajax(
|
url,
|
params,
|
res => {
|
this.common.showMsg(res);
|
if (res.result) {
|
res.data.forEach(item => {
|
var vueDataItem = JSON.parse(item.vueData);
|
vueDataItem.vueData_Id = item.vueData_Id;
|
this.vueDataList.push(vueDataItem);
|
});
|
}
|
this.isLoading = false;
|
},
|
this.$refs["el-main"]
|
);
|
},
|
// 开始导出
|
startExport() {
|
var exportInfo_Id = this.options.exportInfo_Id;
|
var vueData_Id = this.currentTemplate.vueData_Id;
|
this.exportData(exportInfo_Id, vueData_Id);
|
},
|
// 选中模板
|
selectTemplate(item) {
|
this.currentTemplate = item;
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.dialog-container {
|
::v-deep .el-upload-list {
|
margin-right: 20px;
|
}
|
::v-deep .scrollbar-wrap {
|
max-height: 400px;
|
overflow-x: hidden;
|
padding: 0px;
|
.el-scrollbar__view .el-tag:last-child {
|
margin-bottom: 30px;
|
}
|
}
|
.template-item {
|
margin: 10px 0 0 10px;
|
padding: 10px;
|
background-color: rgb(247, 250, 252);
|
border: 1px solid #c8e3ff;
|
border-radius: 5px;
|
cursor: pointer;
|
&.active {
|
background-color: #409eff;
|
color: #fff;
|
}
|
}
|
.sub-title {
|
color: #999;
|
margin-left: 10px;
|
}
|
}
|
</style>
|
