<template>
|
<div class="app" style="display: flex;">
|
<avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false"
|
:option="Treeoption" style="width: fit-content;" @node-click="nodeClick">
|
<template slot-scope="{ node }">
|
<span v-html="node.label"></span>
|
</template>
|
</avue-tree>
|
<div style="display: inline-block;"><i class="el-icon-refresh refresh-icon" @click="getTreeLists"></i></div>
|
</div>
|
</template>
|
|
<script>
|
import {getTreeList} from "@/api/MasterData/master";
|
import {TableData, MasterTable} from "@/api/GetItem";
|
|
export default {
|
name: "MasterTree",
|
props: {
|
pageSize: {
|
type: String,
|
default: "100"
|
},
|
currentPage: {
|
type: String,
|
default: "1"
|
},
|
templateOid: {
|
type: String,
|
default: ''
|
},
|
},
|
data() {
|
return {
|
TreeValue: '',
|
idData: '',
|
masterVrBtnList: [],
|
tableHeadFindData: [],
|
tableHeadDataFateher: [],
|
templateOids: "",
|
tableDataArray: [],
|
codeClassifyOid: "",
|
coderuleoid: "",
|
CloneTreeAvueform: {},
|
loading: false,
|
Treedata: [],
|
nodeClickList: "",
|
Treeoption: {
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
defaultExpandAll: false,
|
menu: false,
|
lazy: true,
|
// treeLoad:function (node,resolve){
|
// console.log(node)
|
// console.log(resolve)
|
// }
|
treeLoad: function (node, resolve) {
|
if (node.data != false) {
|
const parentId = (node.level === 0) ? 0 : node.data.oid;
|
const parentBtmName = node.data.attributes.btmname
|
getTreeList({parentOid: parentId, parentBtmName: parentBtmName}).then(res => {
|
resolve(res.data.map(item => {
|
return {
|
...item,
|
label: `<span style="color:#409EFF">${item.count}</span> ${item.text}`,
|
count: item.count
|
}
|
}))
|
})
|
}
|
},
|
},
|
}
|
},
|
created() {
|
this.getTreeLists()
|
},
|
mounted() {
|
|
},
|
computed: {
|
formatCount() {
|
return (label) => {
|
const countIndex = label.indexOf('</span>') + '</span>'.length;
|
const count = label.slice(countIndex);
|
const coloredCount = `<span class="count">${count}</span>`;
|
return `${label.slice(0, countIndex)}${coloredCount}`;
|
};
|
},
|
},
|
methods: {
|
//获取数据
|
getTreeLists() {
|
const index = this.$route.query.id.indexOf('@');
|
const result = this.$route.query.id.substring(0, index);
|
this.idData = result
|
// console.log(this.$route)
|
getTreeList({'conditionMap[id]': this.idData}).then(res => {
|
if (res) {
|
if (res.data.length === 0) {
|
this.$message.error("主数据分类查询为空！");
|
} else {
|
this.Treedata = res.data;
|
const [firstProperty] = res.data;
|
this.ModifyProperties(this.Treedata, 'text', 'label');
|
this.codeClassifyOid = firstProperty.oid;
|
this.coderuleoid = firstProperty.attributes.coderuleoid;
|
this.$emit("coderuleoid", this.coderuleoid)
|
this.$emit('Treedata', this.Treedata)
|
this.Treedata.forEach((item, index) => {
|
item.label = `<span style="color:#409EFF">${item.count}</span> ${item.label}`;
|
});
|
this.$emit("coderuleoid", this.coderuleoid)
|
this.$emit('Treedata', this.Treedata)
|
console.log(this.Treedata)
|
}
|
}
|
}).catch(res => {
|
// console.log(res)
|
this.$message.error(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);
|
}
|
}
|
},
|
//表格刷新
|
TableRend() {
|
TableData({
|
templateOid: this.templateOids,
|
codeClassifyOid: this.nodeClickList.oid,
|
page: this.currentPage,
|
limit: this.pageSize,
|
}).then(res => {
|
this.tableDataArray = res.data.data;
|
this.$emit('tableDataArray', this.tableDataArray)
|
this.$emit('total', res.data.total)
|
})
|
},
|
//表格头部
|
TableHeadRend() {
|
const index = this.$route.query.id.indexOf('@');
|
const result = this.$route.query.id.substring(0, index);
|
return new Promise((resolve, reject) => {
|
MasterTable({
|
codeClassifyOid: this.nodeClickList.oid,
|
functionId: result,
|
}).then(res => {
|
const flagsToDeleteBtn = ["CODEIMPORTHISTORY", "CODEEXPORT", "CODEQUERY", "batchApplyCode"];
|
//不同节点显示不同按钮
|
if (!res.data.leaf) {
|
this.masterVrBtnList = res.data.buttons.filter(obj => flagsToDeleteBtn.includes(obj.uniqueFlag));
|
} else {
|
this.masterVrBtnList = res.data.buttons
|
}
|
this.tableHeadDataFateher = res.data;
|
this.templateOids = res.data.tableDefineVO.oid;
|
const [List] = res.data.tableDefineVO.cols;
|
List.forEach(item => {
|
let columnItem = {
|
label: item.title,
|
prop: item.queryField,
|
// type: this.columnType[item.type],
|
sortable: item.sort,
|
width: item.minWidth
|
};
|
this.tableHeadFindData.push(Object.assign(item, columnItem))
|
})
|
this.$emit('tableHeadDataFateher', this.tableHeadDataFateher);
|
this.$emit('tableHeadFindData', this.tableHeadFindData);
|
this.$emit('tableHeadBttoms', this.masterVrBtnList);
|
resolve();
|
}).catch(err => {
|
reject(err)
|
})
|
})
|
},
|
//树点击事件
|
async nodeClick(data) {
|
try {
|
// console.log(data)
|
this.TreeValue = data.label.split(" ")[0].trim();
|
// console.log('TreeValue',this.TreeValue)
|
this.$emit('TreeValue', this.TreeValue)
|
this.nodeClickList = data;
|
this.tableHeadDataFateher = []
|
this.tableHeadFindData = []
|
await this.TableHeadRend(); // 先执行 TableHeadRend()
|
this.TableRend(); // TableHeadRend() 方法完成后再执行 TableRend()
|
this.$emit('nodeClick', this.templateOids)
|
this.$emit("codeClassifyOid", this.nodeClickList.oid)
|
} catch (error) {
|
// 处理错误
|
this.$message.error(error)
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.app {
|
overflow: auto;
|
height: calc(100vh - 150px);
|
}
|
|
.app::-webkit-scrollbar {
|
height: 15px; // 纵向滚动条 必写
|
background: white;
|
border: white;
|
width: 10px;
|
|
}
|
|
// 滚动条的滑块
|
.app::-webkit-scrollbar-thumb {
|
background-color: #ececec;
|
border-radius: 20px;
|
border: #ececec;
|
}
|
|
.refresh-icon {
|
color: #409EFF;
|
margin-top: 8px;
|
margin-left: 6px;
|
font-size: 18px;
|
}
|
</style>
|
