From 9b51b2a07769ee049937e16dd45d8c36c87dcc3c Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期五, 08 十二月 2023 17:13:01 +0800
Subject: [PATCH] 主数据 枚举配置模板配置 参照配置表格显示问题处理
---
Source/UBCS-WEB/src/components/Master/MasterTree.vue | 82 ++++++++++++++++++++++++++++++----------
1 files changed, 61 insertions(+), 21 deletions(-)
diff --git a/Source/UBCS-WEB/src/components/Master/MasterTree.vue b/Source/UBCS-WEB/src/components/Master/MasterTree.vue
index a14ba8d..a2a076d 100644
--- a/Source/UBCS-WEB/src/components/Master/MasterTree.vue
+++ b/Source/UBCS-WEB/src/components/Master/MasterTree.vue
@@ -1,11 +1,14 @@
<template>
- <div class="app" style="display: flex;">
- <avue-tree ref="tree" v-model="CloneTreeAvueform" v-loading="loading" :data="Treedata" :defaultExpandAll="false" :option="Treeoption" @node-click="nodeClick" style="width: fit-content;">
+ <div class="app" style="position: relative;">
+ <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 style="display: inline-block;">{{ node.label }}</span>
+ <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 style="position: absolute; right: 0px; top: -1px;">
+ <el-link class="refresh-icon" icon="el-icon-refresh" @click="getTreeLists"></el-link>
+ </div>
</div>
</template>
@@ -31,8 +34,9 @@
},
data() {
return {
- TreeValue:'',
+ TreeValue: '',
idData: '',
+ referTreeId: '',
masterVrBtnList: [],
tableHeadFindData: [],
tableHeadDataFateher: [],
@@ -55,15 +59,20 @@
// console.log(node)
// console.log(resolve)
// }
- treeLoad: function (node, resolve) {
+ treeLoad: (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 => {
+ const parentBtmName = node.data.attributes.btmname;
+ getTreeList({
+ parentOid: parentId,
+ parentBtmName: parentBtmName,
+ 'conditionMap[btmTypeId]': this.referTreeId
+ }).then(res => {
resolve(res.data.map(item => {
return {
...item,
- label: item.text
+ label: `<span style="color:#409EFF">${item.count}</span> ${item.text}`,
+ count: item.count
}
}))
})
@@ -75,7 +84,19 @@
created() {
this.getTreeLists()
},
- computed: {},
+ 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() {
@@ -84,17 +105,26 @@
this.idData = result
// console.log(this.$route)
getTreeList({'conditionMap[id]': this.idData}).then(res => {
- if(res){
- if(res.data.length === 0){
+ if (res) {
+ if (res.data.length === 0) {
this.$message.error("涓绘暟鎹垎绫绘煡璇负绌猴紒");
- }else{
+ } else {
this.Treedata = res.data;
+
const [firstProperty] = res.data;
this.ModifyProperties(this.Treedata, 'text', 'label');
+ this.referTreeId = firstProperty.attributes.btmTypeId;
+ // console.log(this.referTreeId)
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 => {
@@ -117,12 +147,17 @@
},
//琛ㄦ牸鍒锋柊
TableRend() {
+ this.loading = true;
+ this.$emit('loading', this.loading)
TableData({
templateOid: this.templateOids,
codeClassifyOid: this.nodeClickList.oid,
page: this.currentPage,
limit: this.pageSize,
}).then(res => {
+ // console.log('tab',res)
+ this.loading = false;
+ this.$emit('loading', this.loading)
this.tableDataArray = res.data.data;
this.$emit('tableDataArray', this.tableDataArray)
this.$emit('total', res.data.total)
@@ -132,6 +167,7 @@
TableHeadRend() {
const index = this.$route.query.id.indexOf('@');
const result = this.$route.query.id.substring(0, index);
+ // console.log(this.$route)
return new Promise((resolve, reject) => {
MasterTable({
codeClassifyOid: this.nodeClickList.oid,
@@ -150,7 +186,7 @@
List.forEach(item => {
let columnItem = {
label: item.title,
- prop: item.queryField,
+ prop: item.field,
// type: this.columnType[item.type],
sortable: item.sort,
width: item.minWidth
@@ -170,16 +206,17 @@
async nodeClick(data) {
try {
// console.log(data)
- this.TreeValue=data.label.split(" ")[0].trim();
+ this.TreeValue = data.label.split("</span>")[1].trim();
// console.log('TreeValue',this.TreeValue)
- this.$emit('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('nodeClickTemplateOids', this.templateOids)
this.$emit("codeClassifyOid", this.nodeClickList.oid)
+ this.$emit("nodeClickList", this.nodeClickList)
} catch (error) {
// 澶勭悊閿欒
this.$message.error(error)
@@ -190,23 +227,26 @@
</script>
<style lang="scss" scoped>
-.app{
+.app {
overflow: auto;
height: calc(100vh - 150px);
}
- .app::-webkit-scrollbar {
- height: 15px ; // 绾靛悜婊氬姩鏉� 蹇呭啓
+
+.app::-webkit-scrollbar {
+ height: 15px; // 绾靛悜婊氬姩鏉� 蹇呭啓
background: white;
border: white;
width: 10px;
}
+
// 婊氬姩鏉＄殑婊戝潡
- .app::-webkit-scrollbar-thumb {
+.app::-webkit-scrollbar-thumb {
background-color: #ececec;
border-radius: 20px;
border: #ececec;
}
+
.refresh-icon {
color: #409EFF;
margin-top: 8px;
--
Gitblit v1.9.3