<template>
|
<el-container>
|
<!-- 左侧菜单-->
|
<el-aside>
|
<basic-container style="height: 85vh; max-height: 155vh; overflow-y: scroll;">
|
<div>
|
<div style="display: flex;justify-content: space-around">
|
<el-button plain size="small" type="primary" @click="TreeAdd">添加</el-button>
|
<el-button plain size="small" type="primary">修改</el-button>
|
<el-button plain size="small" type="primary" @click="TreeDel">删除</el-button>
|
<el-button plain size="small" type="primary">启用</el-button>
|
</div>
|
<div style="display: flex;justify-content: space-around;margin-top: 5px;margin-bottom: 5px">
|
<el-button plain size="small" type="primary">停用</el-button>
|
<el-button plain size="small" type="primary">导出</el-button>
|
<el-button plain size="small" type="primary">导入</el-button>
|
<el-button plain size="small" type="primary" @click="flushed">刷新</el-button>
|
</div>
|
</div>
|
<!-- 树节点添加对话框-->
|
<el-dialog :title="this.TreeFlag ? '添加分类' :'添加主题库'" :visible.sync="TreeAddFormVisible" append-to-body
|
style="width: 1700px;margin: auto">
|
<el-form :model="TreeAddform">
|
<el-form-item :label="this.TreeFlag ? '分类编号：' :'主题库编号：'" label-width="150px" style="display: inline-block">
|
<el-input v-model="TreeAddform.id" autocomplete="off" style="width: 170px"></el-input>
|
</el-form-item>
|
<el-form-item :label="this.TreeFlag ? '分类名称：' :'主题库名称：'" label-width="100px" style="display: inline-block">
|
<el-input v-model="TreeAddform.name" autocomplete="off" style="width: 170px"></el-input>
|
</el-form-item>
|
<el-form-item label="描述：" label-width="150px">
|
<el-input v-model="TreeAddform.description" autocomplete="off" style="width: 585px"></el-input>
|
</el-form-item>
|
<el-form-item v-show="this.TreeFlag==false" label="存储的业务类型：" label-width="150px">
|
<el-input v-model="TreeAddform.btmtypename" autocomplete="off" style="width: 585px"></el-input>
|
</el-form-item>
|
<el-form-item label="编码规则：" label-width="150px">
|
<el-input v-model="TreeAddform.coderuleoidName" autocomplete="off" style="width: 585px"></el-input>
|
</el-form-item>
|
<el-form-item label="关键属性查询规则：" label-width="150px">
|
<el-input v-model="TreeAddform.codekeyattrrepeatoidName" autocomplete="off"
|
style="width: 585px"></el-input>
|
</el-form-item>
|
<el-form-item label="相似查询规则：" label-width="150px">
|
<el-input v-model="TreeAddform.codeResembleRuleOidName" autocomplete="off"
|
style="width: 585px"></el-input>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="TreeAddFormVisible = false">取 消</el-button>
|
<el-button type="primary" @click="TreeAddHandler">确 定</el-button>
|
</div>
|
</el-dialog>
|
<avue-tree ref="tree" v-model="TreeAvueform" v-loading="loading" :data="Treedata" :option="Treeoption" :defaultExpandAll="false"
|
style="height: 80.5vh;padding-top: 5px;padding-bottom: 30px"
|
@node-click=" nodeClick"
|
@check-change="checkChange"
|
>
|
</avue-tree>
|
</basic-container>
|
</el-aside>
|
<el-main>
|
<basic-container style="height: 85vh; max-height: 155vh; ">
|
<!-- 右侧表格-->
|
<avue-tabs :option="tabOption" @change="handleChange"></avue-tabs>
|
<span v-if="type.prop==='tab1'">
|
<avue-crud v-model="crudForm" :data="this.Formlist" :option="this.crudTreeOption"
|
style="height: 700px"></avue-crud>
|
</span>
|
<span v-else-if="type.prop==='tab2'">
|
<!-- 如果是表格加表单就再次引入这个classifyTreeform组件，里面是表单的内容，没用就删除掉。把上面tab栏也删除了-->
|
<classifyTreeform ref="childForm" :TreeNewForm="TreeList" :nodeList="nodeList"></classifyTreeform>
|
<template-pro></template-pro>
|
</span>
|
</basic-container>
|
</el-main>
|
</el-container>
|
</template>
|
|
<script>
|
//这里声明一些菜单组件用法：首先布局分为左侧菜单右侧表格，可能会有右侧Tab栏加表单的情况。所以另外引入了一个右侧表单的组件"classifyTreeform"。
|
//首先父组件调用子组件菜单，通过provide传递参数。有Treeoption左侧树新增表单项 Treedata左侧树节点配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
|
//其中表格的配置项直接父传子传递过来就行，直接:option=传递的参数名，里面数据显示的内容因为是和左侧联动的，所以重新一个Formlist，通过点击树节点下标来动态渲染右侧表格，下面方法都有具体注释
|
//然后再说右侧的表单，专门定义了一个组件，通过父传子再把表单数据TreeList传递过去，传递前在10deCLi1ck方法里面便了处理也是一个联动的效果，表单的配置项在哪个子组件或者父组件写都可以。
|
import {getAtrrList,TreeSave,TreeDel} from "@/api/template/templateAttr";
|
|
export default {
|
name: "classifyTrees.vue",
|
//使用inject接收参数
|
//Treeoption左侧树新增表单项 Treedata左侧树节点 配置项 crudTreeOption右侧表格配置项 crudTreeData右侧表格显示内容
|
//Treeform右侧表单配置项
|
inject: ['crudTreeOption', "crudTreeData"],
|
data() {
|
return {
|
TreeAddFormVisible: false,
|
//当前点击项
|
nodeClickList: "",
|
// 分类和主题库状态
|
TreeFlag: false,
|
// 树加载
|
loading: false,
|
TreeAddform: {
|
id: "",
|
name: "",
|
description: "",
|
//相似查询规则
|
codeResembleRuleOidName: "",
|
//关键属性查询规则
|
codekeyattrrepeatoidName: "",
|
//编码规则
|
coderuleoidName: "",
|
//存储的业务类型
|
btmtypename: ""
|
},
|
//avue-tree数据，暂时没有作用，里面功能用element写了，只用avue的一个树组件不用内置表单了。
|
TreeAvueform: {},
|
Treedata: [],
|
Treeoption: {
|
addBtn:false,
|
editBtn:false,
|
delBtn:false,
|
defaultExpandAll: false,
|
menu:false,
|
//这个是多选
|
multiple:true,
|
},
|
crudForm: "",
|
//动态切换处理过的表格数据
|
Formlist: [],
|
//tab状态
|
type: {},
|
//Tab配置项
|
tabOption: {
|
column: [{
|
icon: 'el-icon-info',
|
label: '基本信息',
|
prop: 'tab1',
|
}, {
|
icon: 'el-icon-warning',
|
label: '模板管理',
|
prop: 'tab2',
|
}]
|
},
|
//模拟表单假数据
|
Treeform: [
|
{
|
name: "测试1",
|
sex: "男",
|
value: 0
|
},
|
{
|
name: "测试2",
|
sex: "女",
|
value: 1
|
}
|
],
|
//传递给子组件动态渲染的数据
|
TreeList: {}
|
}
|
},
|
//tab栏默认是表格
|
mounted() {
|
this.type = this.tabOption.column[0];
|
this.getAttr();
|
},
|
methods: {
|
//分类树数据处理
|
getAttr() {
|
getAtrrList().then(res => {
|
this.Treedata = res.data;
|
this.Treedata.forEach((item, value) => {
|
for (let i = 0; i < this.Treedata.length; i++) {
|
this.Treedata[i].value = i;
|
}
|
})
|
//调用修改属性名方法
|
this.ModifyProperties(this.Treedata, 'text', 'label');
|
}).catch(res => {
|
console.log(res)
|
})
|
},
|
//定义一个修改对象属性名的方法
|
ModifyProperties(obj, oldName, newName) {
|
for (let key in obj) {
|
if (key === oldName) {
|
obj[newName] = obj[key];
|
delete obj[key];
|
}
|
if (typeof obj[key] === 'object') {
|
this.ModifyProperties(obj[key], oldName, newName);
|
}
|
}
|
},
|
//树节点添加按钮
|
TreeAdd() {
|
this.TreeAddFormVisible = true;
|
// 判断当前是否有点击子项
|
if (this.nodeClickList !== "") {
|
this.TreeFlag = true
|
}
|
},
|
//树节点添加事件
|
TreeAddHandler(){
|
const data=this.TreeAddform
|
this.$set(data,"parentCodeClassifyOid",this.nodeClickList.oid)
|
console.log(data)
|
TreeSave(data).then(res=>{
|
console.log(res)
|
}).catch(res=>{
|
console.log(res)
|
})
|
},
|
//树节点删除按钮
|
TreeDel(){
|
const oid=this.nodeClickList.oid
|
if(this.nodeClickList !==""){
|
this.$confirm('是否删除当前选择的分类，将会把子分类一并删除，如果存在编码数据将不能被删除，是否继续？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'my-messagebox',
|
}).then(() => {
|
if(this.nodeClickList.children.length > 0){
|
this.$confirm('当前数据包含有下级数据，要删除的话会和下级数据一起删除，你确认继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
customClass: 'my-messageboxs',
|
}).then(() => {
|
TreeDel(JSON.parse(oid)).then(()=>{
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
}).catch(res=>{
|
this.$message({
|
type: 'error',
|
message: res
|
});
|
})
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
}else {
|
TreeDel(oid).then(()=>{
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
}).catch(res=>{
|
this.$message({
|
type: 'error',
|
message: res
|
});
|
})
|
}
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消删除'
|
});
|
});
|
}
|
},
|
//树刷新
|
flushed() {
|
this.loading = true
|
this.getAttr()
|
setTimeout(() => {
|
this.loading = false;
|
this.nodeClickList = ""
|
}, 600);
|
},
|
nodeClick(data) {
|
//点击左侧树右侧动态的方法
|
// this.Formlist = this.crudTreeData[data.value].column
|
// this.nodeList=data.value
|
// this.TreeList = this.Treeform.find(item => {
|
// return item.value == data.value
|
// });
|
this.nodeClickList = data
|
console.log(data)
|
},
|
//tab栏切换
|
handleChange(column) {
|
this.type = column
|
},
|
// 左树多选
|
checkChange(val) {
|
console.log(val)
|
},
|
|
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.el-form {
|
display: flex;
|
flex-wrap: wrap; /* 设置可换行，以便在小屏幕设备上使用多行布局 */
|
}
|
|
.el-form-item {
|
flex: 1; /* 设置元素占据1份空间 */
|
margin-right: 1rem; /* 设置元素之间的间距 */
|
}
|
.my-messagebox {
|
width: 700px;
|
}
|
.my-messageboxs {
|
width: 500px;
|
}
|
</style>
|
