<template>
|
<el-container>
|
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 190px);">
|
<avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span>
|
<icon-show :name="data.icon"></icon-show>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
<div v-if="this.nodeRow && this.nodeRow.label">
|
<el-button v-if="permissionList.addBtn" class="button-custom-icon" size="small" type="primary" @click="addHandler">
|
<icon-show :name="permissionList.addBtn.source"></icon-show>
|
创建
|
</el-button>
|
<el-button v-if="permissionList.editBtn" class="button-custom-icon" plain size="small" type="primary" @click="editHandler">
|
<icon-show :name="permissionList.editBtn.source"></icon-show>
|
修改
|
</el-button>
|
<el-button v-if="permissionList.delBtn" class="button-custom-icon" plain size="small" type="danger" @click="delHandler">
|
<icon-show :name="permissionList.delBtn.source"></icon-show>
|
删除
|
</el-button>
|
<el-button v-if="permissionList.importBtn" class="button-custom-icon" plain size="small" type="primary" @click="upLoadClickHandler">
|
<icon-show :name="permissionList.importBtn.source"></icon-show>
|
导入
|
</el-button>
|
<el-button v-if="permissionList.exportBtn" class="button-custom-icon" plain size="small" type="primary" @click="exportClickHandler">
|
<icon-show :name="permissionList.exportBtn.source"></icon-show>
|
导出
|
</el-button>
|
</div>
|
<avue-crud ref="crud"
|
@selection-change="selectionChange"
|
@row-click="rowClick"
|
:data="crudData" :option="crudOption" :table-loading="tableLoading" style="margin-top: 10px">
|
</avue-crud>
|
<div>
|
<fieldset>
|
<legend> 查询条件 </legend>
|
<form-query-dialog ref="formQuery"
|
style="height: 260px;"
|
:readOnly="true"
|
:queryCondition="queryCondition"
|
:queryTree="queryTree"
|
:levelFlag.sync="levelFlag"
|
></form-query-dialog>
|
</fieldset>
|
</div>
|
<!--添加 修改弹窗-->
|
<form-dialog ref="formRef" @refresh="getTemp"></form-dialog>
|
<!--导入 -->
|
<upload-file ref="upload" :fileType="upFileType" :fileUrl="fileUrl" :tipList="tipList" title="导入"
|
@updata="uploadCallBack"></upload-file>
|
</basic-container>
|
</el-main>
|
|
</el-container>
|
</template>
|
|
<script>
|
import {getBizTypes} from "@/api/modeling/businessType/api";
|
import {deleteLinkTemplate,expBtmQTTemplate,impBtmTemplate} from "@/api/queryTemplate/businessTypeQuery";
|
import {getObjTypeQTs} from "@/api/queryTemplate/queryDefine";
|
import basicOption from "@/util/basic-option";
|
import func from "@/util/func";
|
import {dateFormat} from "@/util/date";
|
import FormDialog from "./formDialog.vue"
|
import formQueryDialog from "@/views/modelingMenu/queryTemplate/linkTypeQuery/formQueryDialog.vue";
|
import {mapGetters} from "vuex";
|
export default {
|
name: "index",
|
components: {FormDialog,formQueryDialog},
|
data() {
|
return {
|
treeOption: {
|
height: 'auto',
|
defaultExpandedKeys: ['topNode'],
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'label',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow: {},
|
treeData: [{
|
label: '业务类型树',
|
oid: 'topNode',
|
children: []
|
}],
|
templateForm: '',
|
templateData: [],
|
form: {
|
name: ''
|
},
|
rules: {
|
name: [
|
{required: true, message: '请输入查询模板名称', trigger: 'blur'}
|
]
|
},
|
title: '',
|
visible: false,
|
tableLoading: false,
|
crudData: [],
|
crudOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: true,
|
menu: false,
|
height: "auto",
|
calcHeight: 305,
|
tip: false,
|
header:false,
|
column: [{
|
label: '查询模板名称',
|
prop: 'qtName'
|
}, {
|
label: '创建人',
|
prop: 'creator'
|
}, {
|
label: '创建时间',
|
prop: 'createTimeText'
|
}]
|
},
|
selectionRow: [],
|
tipList: [
|
"导入仅能上传.vciqtf格式文件"
|
],
|
upFileType: ['vciqtf'],
|
fileUrl: 'api/templateController/impBtmTemplate',
|
//高级查询条件
|
queryTree:{},
|
//普通查询条件
|
queryCondition:[],
|
levelFlag:0
|
}
|
},
|
computed:{
|
...mapGetters(["permission"]),
|
permissionList() {
|
return {
|
addBtn: this.vaildData(this.permission[this.$route.query.id].ADD, false),
|
delBtn: this.vaildData(this.permission[this.$route.query.id].DELETE, false),
|
editBtn: this.vaildData(this.permission[this.$route.query.id].EDIT, false),
|
exportBtn: this.vaildData(this.permission[this.$route.query.id].EXPORT, false),
|
importBtn: this.vaildData(this.permission[this.$route.query.id].IMPORT, false),
|
};
|
},
|
},
|
created() {
|
this.getTreeList();
|
},
|
methods: {
|
//树表查询
|
getTreeList() {
|
const loading = this.$loading({});
|
getBizTypes().then(res => {
|
const data = res.data.data.map(item => {
|
this.processChildren(item); // 处理每个节点
|
item.attributes.label = item.attributes.id;
|
item.attributes.icon = item.attributes.imageName;
|
return item.attributes;
|
});
|
this.treeData[0].children = data;
|
loading.close();
|
}).catch(error=>{
|
loading.close();
|
})
|
},
|
// 处理树形结构
|
processChildren(item) {
|
if (item.children && item.children.length > 0) {
|
item.attributes.children = item.children.map(child => {
|
child.attributes.label = child.attributes.id;
|
child.attributes.icon = child.attributes.imageName;
|
this.processChildren(child); // 递归处理每个子节点
|
return child.attributes; // 只返回子节点的 attributes
|
});
|
}
|
},
|
// 树点击
|
nodeClick(row) {
|
if(row.oid=="topNode"){
|
this.nodeRow = null;
|
this.crudData=[];
|
this.queryCondition=[];
|
this.queryTree={};
|
this.levelFlag=0;
|
}else{
|
this.nodeRow = row;
|
this.tableLoading = true;
|
this.getTemp();
|
}
|
},
|
//模板列表数据
|
getTemp() {
|
getObjTypeQTs(this.nodeRow.label).then(res => {
|
this.crudData = res.data.data;
|
this.tableLoading = false;
|
this.queryCondition=[];
|
this.queryTree={};
|
this.levelFlag=0;
|
})
|
},
|
rowClick(row) {
|
this.$refs.crud.toggleSelection();
|
this.$refs.crud.toggleRowSelection(row); //选中当前行
|
this.selectionRow = [row];
|
|
this.queryCondition=row.queryTemplate.condition;
|
this.queryTree=row.tree;
|
this.levelFlag=row.levelFlag;
|
},
|
selectionChange(list) {
|
this.selectionRow = list;
|
},
|
selectionClear() {
|
this.selectionRow = [];
|
this.$refs.crud.toggleSelection();
|
},
|
//创建
|
addHandler() {
|
this.$refs.formRef.openDialog(this.nodeRow.label,'创建','add',{treeData:this.nodeRow});
|
this.$nextTick(()=>{
|
this.$refs.formRef.formItems[0].disabled = false;
|
this.$refs.formRef.$refs.form.getInit(this.$refs.formRef.formItems)
|
});
|
},
|
//修改
|
editHandler() {
|
if (this.selectionRow.length!=1) {
|
this.$message.error('请选择一条数据');
|
return;
|
}
|
this.$refs.formRef.openDialog(this.nodeRow.label,'修改','edit',{treeData:this.nodeRow,selectData:this.selectionRow[0]});
|
this.$nextTick(()=>{
|
this.$refs.formRef.formItems[0].disabled = true;
|
this.$refs.formRef.$refs.form.getInit(this.$refs.formRef.formItems)
|
});
|
},
|
//删除
|
delHandler() {
|
if (this.selectionRow.length==0) {
|
this.$message.error('请选择数据');
|
return;
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
let names=this.selectionRow.map(item=>{
|
return item.qtName
|
})
|
deleteLinkTemplate({names:names.join(',')}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTemp();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
},
|
//导出
|
exportClickHandler(){
|
if (this.selectionRow.length <= 0) {
|
this.$message.warning('请至少选择一条数据进行导出');
|
return;
|
}
|
|
let qtNames = this.selectionRow.map(item => item.qtName).join(',');
|
expBtmQTTemplate({qtNames: qtNames}).then(res => {
|
func.downloadFileByBlobHandler(res);
|
this.$message.success('导出成功');
|
})
|
},
|
upLoadClickHandler(){
|
this.$refs.upload.visible = true;
|
},
|
uploadCallBack(res){
|
function getText(child){
|
let text=''
|
if(child[0].children && child[0].children.length>0){
|
text=getText(child[0].children)
|
}else{
|
text=child[0].text ||child[0];
|
}
|
return text
|
}
|
if(res.obj) {
|
if (res.obj.children) {
|
this.$message.info(getText(res.obj.children));
|
}
|
}
|
if(res.data){
|
this.crudData = res.data;
|
}
|
//this.getTemp();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
.el-main .avue-crud .avue-crud__body .el-card__body .el-form .el-table--small{
|
min-height: 300px;
|
}
|
}
|
fieldset {
|
padding: 10px 6px;
|
margin: 10px 0 0 0;
|
border: 1px solid #EBEEF5;
|
}
|
</style>
|
