<template>
|
<el-container>
|
<el-aside>
|
<basic-container>
|
<div ref="TreeBox" style="height: calc(100vh - 154px);!important;">
|
<div class="headerCon" style="display: flex;justify-content: center">
|
<avue-radio v-model="radioForm" :dic="radioDic" style="margin: 10px 0 5px"></avue-radio>
|
</div>
|
<!-- 左侧树 -->
|
<div style="height: calc(100vh - 230px);">
|
<avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick">
|
<span slot-scope="{ node, data }" class="el-tree-node__label">
|
<span style="font-size: 15px">
|
<i class="el-icon-s-promotion"></i>
|
{{ (node || {}).label }}
|
</span>
|
</span>
|
</avue-tree>
|
</div>
|
</div>
|
</basic-container>
|
</el-aside>
|
|
<el-main>
|
<basic-container>
|
模板列表：<avue-select v-model="templateForm" placeholder="请选择模板" type="tree" :dic="templateData" @change="changeTemp" style="width:300px;"></avue-select>
|
<h3>查询属性</h3>
|
<avue-crud ref="queryCrud"
|
:data="attrData" :option="attrOption" :table-loading="tableLoading" style="margin-top: 10px">
|
<template slot="menuLeft" slot-scope="scope">
|
<el-button icon="el-icon-plus" size="small" type="primary" @click="addHandler">创建</el-button>
|
<el-button icon="el-icon-edit" plain size="small" type="primary" @click="editHandler">修改</el-button>
|
<el-button icon="el-icon-delete" plain size="small" type="danger" @click="delHandler">删除</el-button>
|
</template>
|
</avue-crud>
|
</basic-container>
|
</el-main>
|
|
<!-- 新增 && 编辑 -->
|
<el-dialog
|
v-dialogDrag
|
:title="title === 'add' ? '创建' : '修改'"
|
:visible.sync="visible"
|
append-to-body="true"
|
class="avue-dialog"
|
width="75%"
|
@close="addDialogClose">
|
<el-form ref="form" :model="form" :rules="rules" label-width="95px">
|
<el-form-item label="模板名称：" prop="name">
|
<el-input v-model="form.name"></el-input>
|
</el-form-item>
|
</el-form>
|
<avue-crud
|
ref="dialogCrud"
|
:data="attrData"
|
:option="dialogAttrOption"
|
@select="selectHandler">
|
</avue-crud>
|
<span slot="footer" class="dialog-footer">
|
<el-button size="small" type="primary" @click="addDialogSavaHandler">确 定</el-button>
|
<el-button size="small" @click="addDialogClose">取 消</el-button>
|
</span>
|
</el-dialog>
|
</el-container>
|
</template>
|
|
<script>
|
import {getBizTypes, getAllAttributesByBtmId} from "@/api/modeling/businessType/api";
|
import {gridLink,getAllAttributeByLink} from "@/api/modeling/linkType/api";
|
import {gridTemplate,saveTemplate,updateTemplate,deleteTemplate} from "@/api/queryTemplate/queryDefine";
|
import basicOption from "@/util/basic-option";
|
import func from "@/util/func";
|
|
export default {
|
name: "index",
|
data() {
|
return{
|
treeOption: {
|
height: 'auto',
|
defaultExpandAll: false,
|
menu: false,
|
addBtn: false,
|
props: {
|
label: 'label',
|
value: 'oid',
|
children: 'children'
|
}
|
},
|
nodeRow:{},
|
treeData: [],
|
radioForm:0,
|
radioDic:[{
|
label:'业务类型',
|
value:0
|
},{
|
label:'链接类型',
|
value:1
|
}],
|
templateForm:'',
|
templateData:[],
|
form :{
|
abNames:[],
|
linkTypeName: "",//左侧选的链接类型名称
|
btmName:'',//左侧选择的业务类型名称
|
name:''
|
},
|
rules: {
|
name: [
|
{required: true, message: '请输入模板名称', trigger: 'blur'}
|
]
|
},
|
attrData: [],
|
title: '',
|
visible: false,
|
tableLoading: false,
|
attrOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: true,
|
selectable:function (){
|
return false;
|
},
|
menu:false,
|
height: "auto",
|
calcHeight: -40,
|
tip:false,
|
column: [{
|
label: '字段编码',
|
prop: 'id'
|
},
|
{
|
label: '字段名称',
|
prop: 'name'
|
}]
|
},
|
selectionRow:[],
|
dialogAttrOption: {
|
...basicOption,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
selection: true,
|
menu:false,
|
height: "auto",
|
calcHeight: 140,
|
title:'查询属性',
|
tip:false,
|
header:false,
|
column: [{
|
label: '字段编码',
|
prop: 'id'
|
},
|
{
|
label: '字段名称',
|
prop: 'name'
|
}]
|
},
|
dialogSelectionRow:[]
|
}
|
},
|
created() {
|
this.getTreeList();
|
},
|
watch: {
|
radioForm: {
|
handler(newval) {
|
const loading = this.$loading({});
|
if (newval ==0) {
|
getBizTypes().then(res => {
|
const data = res.data.data.map(item => {
|
this.processChildren(item); // 处理每个节点
|
item.attributes.label = item.attributes.id;
|
return item.attributes;
|
});
|
this.treeData = data;
|
loading.close();
|
})
|
}else {
|
gridLink().then(res => {
|
const data = res.data.data.map(item => {
|
item.label=item.name;
|
return item;
|
});
|
this.treeData = data;
|
loading.close();
|
})
|
}
|
}
|
},
|
},
|
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;
|
return item.attributes;
|
});
|
this.treeData = 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;
|
this.processChildren(child); // 递归处理每个子节点
|
return child.attributes; // 只返回子节点的 attributes
|
});
|
}
|
},
|
// 树点击
|
nodeClick(row) {
|
this.nodeRow = row;
|
this.tableLoading = true;
|
if(this.radioForm==1){
|
//链接类型
|
getAllAttributeByLink({name:row.label,linkFlag:true}).then(res => {
|
this.attrData = res.data.data;
|
this.getTemp();
|
})
|
}else {
|
//业务类型
|
getAllAttributesByBtmId({btmId:row.label,linkFlag:false}).then(res => {
|
this.attrData = res.data.data;
|
this.getTemp();
|
})
|
}
|
},
|
getTemp() {
|
gridTemplate({btmName: this.nodeRow.label, linkFlag: this.radioForm == 1}).then(res => {
|
const data = res.data.data.map(item => {
|
item.label = item.name;
|
item.value = item.name;
|
return item;
|
});
|
this.templateData = data;
|
if (res.data.data.length > 0) {
|
this.templateForm = this.templateData[0].value;
|
} else {
|
this.templateForm = '';
|
this.$refs.queryCrud.clearSelection();
|
}
|
this.tableLoading = false;
|
})
|
},
|
selectHandler(selection, row){
|
this.dialogSelectionRow=selection
|
},
|
changeTemp(data) {
|
this.$refs.queryCrud.clearSelection();
|
if (data.value != '') {
|
let abNames = data.item.abNames.join(',').toLowerCase().split(',')
|
this.selectionRow = this.attrData.filter(item => {
|
return abNames.includes(item.id.toLowerCase())
|
})
|
this.$refs.queryCrud.toggleSelection(this.selectionRow);
|
}
|
},
|
//创建
|
addHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请选择要添加的节点');
|
return;
|
}
|
this.title = 'add';
|
this.visible = true;
|
this.$nextTick(()=>{
|
this.$refs.dialogCrud.clearSelection();
|
});
|
},
|
//修改
|
editHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请至少选择一条数据');
|
return;
|
}
|
this.form.name = this.templateForm;
|
this.title = 'edit';
|
this.visible = true;
|
this.$nextTick(()=>{
|
this.dialogSelectionRow=this.selectionRow;
|
this.$refs.dialogCrud.clearSelection();
|
this.$refs.dialogCrud.toggleSelection(this.dialogSelectionRow );
|
});
|
},
|
// 新增编辑保存
|
addDialogSavaHandler() {
|
this.$refs.form.validate((valid) => {
|
const saveFunction = this.title === 'add' ? saveTemplate : updateTemplate;
|
if (valid) {
|
if(this.radioForm == 0){
|
this.form.btmName=this.nodeRow.label;
|
delete this.form.linkTypeName
|
}else {
|
this.form.linkTypeName=this.nodeRow.label;
|
delete this.form.btmName
|
}
|
let abNames=this.dialogSelectionRow.map(item => {
|
return item.id
|
})
|
if(abNames.length==0){
|
this.$message.error('请选择查询属性');
|
return false;
|
}
|
this.form.abNames=abNames;
|
saveFunction(this.form).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
if(this.title === 'edit'){
|
this.templateForm='';
|
}
|
this.getTemp();
|
this.addDialogClose();
|
}
|
})
|
} else {
|
return false;
|
}
|
});
|
},
|
// 新增编辑对话框取消
|
addDialogClose() {
|
this.form = {
|
abNames:[],
|
linkTypeName: "",//左侧选的链接类型名称
|
btmName:'',//左侧选择的业务类型名称
|
name:''
|
};
|
this.$refs.form.clearValidate();
|
this.visible = false;
|
},
|
//删除
|
delHandler(){
|
if (func.isEmptyObject(this.nodeRow)) {
|
this.$message.error('请选择数据');
|
return;
|
}
|
this.$confirm('您确定要删除所选择的数据吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
deleteTemplate({name:this.templateForm}).then(res => {
|
if (res.data.code === 200) {
|
this.$message.success(res.data.obj);
|
this.getTemp();
|
}
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
::v-deep {
|
.el-scrollbar__wrap {
|
overflow: auto !important;
|
}
|
.headerCon{
|
.el-button{
|
width: 82px;
|
}
|
}
|
}
|
|
.headerCon {
|
display: flex;
|
flex-wrap: wrap;
|
margin-bottom: 5px;
|
|
.el-button + .el-button {
|
margin-left: 5px;
|
}
|
|
.el-button {
|
margin-top: 5px;
|
}
|
}
|
|
.headerCon > .el-button:nth-child(4) {
|
margin-left: 0;
|
}
|
|
.headerCon > .el-button:nth-child(7) {
|
margin-left: 0;
|
}
|
|
|
.smallBtn {
|
width: 82px;
|
text-align: center;
|
padding-left: 4.5px;
|
}
|
|
</style>
|
