|
@@ -6,17 +6,7 @@
|
|
|
<i-col span="4" style="height:100%">
|
|
|
<div class="station-tree">
|
|
|
<div class="station-tree-body">
|
|
|
- <div class="station-tree-top">
|
|
|
- <Input suffix="ios-search" placeholder="输入关键字查询" clearable search v-model="currentStation" class="common-search" @on-search="iconChange"/>
|
|
|
- </div>
|
|
|
- <div class="station-tree-center">
|
|
|
- <div class="station-tree-left common-scroll" v-show="showTree">
|
|
|
- <tree-list :defaultData="stationData" :currentStaData="currentStaData" :clickAllNode="false" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-list>
|
|
|
- </div>
|
|
|
- <div class="station-tree-left-notree" v-show="!showTree">
|
|
|
- 关键字输入错误!
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <tree-filter :defaultData="stationData" :clickAllNode="false" v-if="stationData && stationData.length>0" @treeChange="treeChange" ref="tree"></tree-filter>
|
|
|
</div>
|
|
|
</div>
|
|
|
</i-col>
|
|
@@ -39,14 +29,9 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- currentStation: '',
|
|
|
- currentStaData: [], // 当前搜索框搜索的站台数组对象,传给子组件,用来判断单选站台名当前选中状态
|
|
|
- showTree: true,// 是否显示树形组件
|
|
|
stationData: [],
|
|
|
levelNum: 0,
|
|
|
currentOrgId: '',
|
|
|
- // data: [],
|
|
|
- // value1: [],
|
|
|
};
|
|
|
},
|
|
|
// watch: {
|
|
@@ -68,7 +53,6 @@ export default {
|
|
|
this.stationData = res.data
|
|
|
if (text == 'update') {
|
|
|
this.stationData = this.getParentIdList(this.stationData,currentOrgId,editText)
|
|
|
- // this.stationData = this.getChangeTree(this.stationData,currentOrgId,editText)
|
|
|
} else {
|
|
|
this.stationData = this.getTree(this.stationData)
|
|
|
}
|
|
@@ -89,7 +73,6 @@ export default {
|
|
|
this.levelNum = v.level
|
|
|
v.selected = true
|
|
|
v.disabled = true
|
|
|
- this.currentStation = v.title
|
|
|
this.currentOrgId = v.nodeId
|
|
|
this.$refs.treeManage.getOrgData(v.nodeId)
|
|
|
}
|
|
@@ -106,7 +89,6 @@ export default {
|
|
|
// this.levelNum = v.level
|
|
|
// v.selected = true
|
|
|
// v.disabled = true
|
|
|
- // this.currentStation = v.title
|
|
|
// this.currentOrgId = v.nodeId
|
|
|
// this.$refs.treeManage.getOrgData(v.nodeId,editText)
|
|
|
// }
|
|
@@ -114,134 +96,112 @@ export default {
|
|
|
// return v;
|
|
|
// });
|
|
|
// },
|
|
|
- iconChange: _.throttle(function() {
|
|
|
- this.currentStaData = []
|
|
|
- this.treeName = []
|
|
|
- if(this.currentStation != ''){
|
|
|
- this.showTree = false
|
|
|
- document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
|
|
|
- } else {
|
|
|
- document.querySelector(".common-scroll").scrollTo(0, 0); // 滚动条回到顶部
|
|
|
- this.showTree = true
|
|
|
- this.stationData = this.getTree(this.stationData)
|
|
|
- return
|
|
|
- }
|
|
|
- if (this.currentStation == this.stationData[0].title) {
|
|
|
- this.showTree = true
|
|
|
- return
|
|
|
- }
|
|
|
- let currentNodeId = this.filterNodeId(this.stationData,this.currentStation)
|
|
|
- if (currentNodeId) {
|
|
|
- this.stationData = this.getParentIdList(this.stationData,currentNodeId)
|
|
|
- }
|
|
|
- // this.getSelectedItem()
|
|
|
- }, 500),
|
|
|
- getSelectedItem () {
|
|
|
- let level = null, currentNodeId = null
|
|
|
- this.stationData.forEach((first, firstIndex,firstArr) => {
|
|
|
- first.expand = false; //expand 是否展开直子节点
|
|
|
- if (this.clickAllNode) {
|
|
|
- first.disabled = false; // disabled 是否禁止选中
|
|
|
- }
|
|
|
- first.selected = false;
|
|
|
- if (first.title == this.currentStation) {
|
|
|
- first.selected = true;
|
|
|
- first.disabled = true; // disabled 是否禁止选中
|
|
|
- first.expand = true;
|
|
|
- level = first.level
|
|
|
- currentNodeId = first.nodeId
|
|
|
- this.showTree = true
|
|
|
- }
|
|
|
- if (first.children) {
|
|
|
- first.children.forEach((second, secondIndex,secondArr) => {
|
|
|
- second.expand = false; //expand 是否展开直子节点
|
|
|
- second.disabled = false; // disabled 是否禁止选中
|
|
|
- second.selected = false;
|
|
|
- if (second.title == this.currentStation) {
|
|
|
- second.selected = true;
|
|
|
- second.disabled = true; // disabled 是否禁止选中
|
|
|
- second.expand = true;
|
|
|
- currentNodeId = second.nodeId
|
|
|
- first.expand = true
|
|
|
- level = second.level
|
|
|
- this.showTree = true
|
|
|
- }
|
|
|
- if (second.children && second.children.length>0) {
|
|
|
- second.children.forEach((thrid,thridIndex,thridArr) => {
|
|
|
- thrid.expand = false; //expand 是否展开直子节点
|
|
|
- thrid.disabled = false;
|
|
|
- thrid.selected = false;
|
|
|
- if (thrid.title == this.currentStation) {
|
|
|
- thrid.selected = true;
|
|
|
- thrid.disabled = true; // disabled 是否禁止选中
|
|
|
- thrid.expand = true;
|
|
|
- second.expand = true
|
|
|
- first.expand = true
|
|
|
- currentNodeId = thrid.nodeId
|
|
|
- level = thrid.level
|
|
|
- this.showTree = true
|
|
|
- }
|
|
|
- if (thrid.children && thrid.children.length>0) {
|
|
|
- thrid.children.forEach((forth) => {
|
|
|
- forth.expand = false; //expand 是否展开直子节点
|
|
|
- forth.disabled = false;
|
|
|
- forth.selected = false;
|
|
|
- if (forth.title == this.currentStation) {
|
|
|
- forth.selected = true;
|
|
|
- forth.disabled = true; // disabled 是否禁止选中
|
|
|
- forth.expand = true;
|
|
|
- second.expand = true
|
|
|
- first.expand = true
|
|
|
- thrid.expand = true;
|
|
|
- currentNodeId = forth.nodeId
|
|
|
- level = forth.level
|
|
|
- this.showTree = true
|
|
|
- }
|
|
|
- if (forth.children && forth.children.length>0) {
|
|
|
- forth.children.forEach((five) => {
|
|
|
- five.expand = false; //expand 是否展开直子节点
|
|
|
- five.disabled = false;
|
|
|
- five.selected = false;
|
|
|
- if (five.title == this.currentStation) {
|
|
|
- five.selected = true;
|
|
|
- five.disabled = true; // disabled 是否禁止选中
|
|
|
- five.expand = true;
|
|
|
- second.expand = true
|
|
|
- first.expand = true
|
|
|
- thrid.expand = true
|
|
|
- forth.expand = true
|
|
|
- currentNodeId = five.nodeId
|
|
|
- level = five.level
|
|
|
- this.showTree = true
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- this.$refs.treeManage.getOrgData(currentNodeId)
|
|
|
- },
|
|
|
- // 根据搜索框的值查到当前nodeId
|
|
|
- filterNodeId(list,val){
|
|
|
- let _this=this
|
|
|
- for (let i = 0; i < list.length; i++) {
|
|
|
- let a=list[i]
|
|
|
- if(a.title=== val){
|
|
|
- return a.nodeId
|
|
|
- }else{
|
|
|
- if(a.children && a.children.length>0){
|
|
|
- let res=_this.filterNodeId(a.children,val)
|
|
|
- if(res){
|
|
|
- return res
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
+ // getSelectedItem () {
|
|
|
+ // let level = null, currentNodeId = null
|
|
|
+ // this.stationData.forEach((first, firstIndex,firstArr) => {
|
|
|
+ // first.expand = false; //expand 是否展开直子节点
|
|
|
+ // if (this.clickAllNode) {
|
|
|
+ // first.disabled = false; // disabled 是否禁止选中
|
|
|
+ // }
|
|
|
+ // first.selected = false;
|
|
|
+ // if (first.title == this.currentStation) {
|
|
|
+ // first.selected = true;
|
|
|
+ // first.disabled = true; // disabled 是否禁止选中
|
|
|
+ // first.expand = true;
|
|
|
+ // level = first.level
|
|
|
+ // currentNodeId = first.nodeId
|
|
|
+ // this.showTree = true
|
|
|
+ // }
|
|
|
+ // if (first.children) {
|
|
|
+ // first.children.forEach((second, secondIndex,secondArr) => {
|
|
|
+ // second.expand = false; //expand 是否展开直子节点
|
|
|
+ // second.disabled = false; // disabled 是否禁止选中
|
|
|
+ // second.selected = false;
|
|
|
+ // if (second.title == this.currentStation) {
|
|
|
+ // second.selected = true;
|
|
|
+ // second.disabled = true; // disabled 是否禁止选中
|
|
|
+ // second.expand = true;
|
|
|
+ // currentNodeId = second.nodeId
|
|
|
+ // first.expand = true
|
|
|
+ // level = second.level
|
|
|
+ // this.showTree = true
|
|
|
+ // }
|
|
|
+ // if (second.children && second.children.length>0) {
|
|
|
+ // second.children.forEach((thrid,thridIndex,thridArr) => {
|
|
|
+ // thrid.expand = false; //expand 是否展开直子节点
|
|
|
+ // thrid.disabled = false;
|
|
|
+ // thrid.selected = false;
|
|
|
+ // if (thrid.title == this.currentStation) {
|
|
|
+ // thrid.selected = true;
|
|
|
+ // thrid.disabled = true; // disabled 是否禁止选中
|
|
|
+ // thrid.expand = true;
|
|
|
+ // second.expand = true
|
|
|
+ // first.expand = true
|
|
|
+ // currentNodeId = thrid.nodeId
|
|
|
+ // level = thrid.level
|
|
|
+ // this.showTree = true
|
|
|
+ // }
|
|
|
+ // if (thrid.children && thrid.children.length>0) {
|
|
|
+ // thrid.children.forEach((forth) => {
|
|
|
+ // forth.expand = false; //expand 是否展开直子节点
|
|
|
+ // forth.disabled = false;
|
|
|
+ // forth.selected = false;
|
|
|
+ // if (forth.title == this.currentStation) {
|
|
|
+ // forth.selected = true;
|
|
|
+ // forth.disabled = true; // disabled 是否禁止选中
|
|
|
+ // forth.expand = true;
|
|
|
+ // second.expand = true
|
|
|
+ // first.expand = true
|
|
|
+ // thrid.expand = true;
|
|
|
+ // currentNodeId = forth.nodeId
|
|
|
+ // level = forth.level
|
|
|
+ // this.showTree = true
|
|
|
+ // }
|
|
|
+ // if (forth.children && forth.children.length>0) {
|
|
|
+ // forth.children.forEach((five) => {
|
|
|
+ // five.expand = false; //expand 是否展开直子节点
|
|
|
+ // five.disabled = false;
|
|
|
+ // five.selected = false;
|
|
|
+ // if (five.title == this.currentStation) {
|
|
|
+ // five.selected = true;
|
|
|
+ // five.disabled = true; // disabled 是否禁止选中
|
|
|
+ // five.expand = true;
|
|
|
+ // second.expand = true
|
|
|
+ // first.expand = true
|
|
|
+ // thrid.expand = true
|
|
|
+ // forth.expand = true
|
|
|
+ // currentNodeId = five.nodeId
|
|
|
+ // level = five.level
|
|
|
+ // this.showTree = true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // this.$refs.treeManage.getOrgData(currentNodeId)
|
|
|
+ // },
|
|
|
+ // // 根据搜索框的值查到当前nodeId
|
|
|
+ // filterNodeId(list,val){
|
|
|
+ // let _this=this
|
|
|
+ // for (let i = 0; i < list.length; i++) {
|
|
|
+ // let a=list[i]
|
|
|
+ // if(a.title=== val){
|
|
|
+ // return a.nodeId
|
|
|
+ // }else{
|
|
|
+ // if(a.children && a.children.length>0){
|
|
|
+ // let res=_this.filterNodeId(a.children,val)
|
|
|
+ // if(res){
|
|
|
+ // return res
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
// 递归循环 根据当前id找到它的所有父节点
|
|
|
getParentIdList(list, id,editText) {
|
|
|
if (!list || !id) {
|
|
@@ -258,14 +218,13 @@ export default {
|
|
|
}
|
|
|
if (node.nodeId === currentdId) {
|
|
|
node.expand = true
|
|
|
- if (node.title == this.currentStation) {
|
|
|
+ if (node.nodeId == id) {
|
|
|
node.expand = true
|
|
|
this.currentOrgId = node.nodeId
|
|
|
node.selected = true
|
|
|
node.disabled = true
|
|
|
- this.showTree = true
|
|
|
this.$refs.treeManage.getOrgData(node.nodeId,editText)
|
|
|
- if( node.children) {
|
|
|
+ if(node.children) {
|
|
|
findParent(node.children, currentdId, node.nodeId);
|
|
|
}
|
|
|
}
|
|
@@ -285,13 +244,16 @@ export default {
|
|
|
}
|
|
|
return findParent(list, id);
|
|
|
},
|
|
|
- treeChange(val,arr,level,currentNodeId) {
|
|
|
+ treeChange(arr,level,currentNodeId) {
|
|
|
this.levelNum = level
|
|
|
- this.currentStation = val
|
|
|
this.$refs.treeManage.getOrgData(currentNodeId)
|
|
|
},
|
|
|
+ // inputChange (nodeId) {
|
|
|
+ // this.getMetroLevel('init')
|
|
|
+ // this.$refs.treeManage.getOrgData(nodeId)
|
|
|
+ // },
|
|
|
changeTree (currentOrgId,editText) {
|
|
|
- this.getMetroLevel('update',currentOrgId,editText)
|
|
|
+ this.getMetroLevel('update',currentOrgId,editText)
|
|
|
}
|
|
|
}
|
|
|
};
|
|
@@ -335,22 +297,22 @@ export default {
|
|
|
height: 100%;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
-.station-tree-center {
|
|
|
- height: calc(100% - 32px);
|
|
|
- padding-top: 10px;
|
|
|
-}
|
|
|
-.station-tree-left {
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
-}
|
|
|
-.station-tree-left-notree {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- fon-size: 14px;
|
|
|
-}
|
|
|
+// .station-tree-center {
|
|
|
+// height: calc(100% - 32px);
|
|
|
+// padding-top: 10px;
|
|
|
+// }
|
|
|
+// .station-tree-left {
|
|
|
+// height: 100%;
|
|
|
+// overflow: auto;
|
|
|
+// }
|
|
|
+// .station-tree-left-notree {
|
|
|
+// height: 100%;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// justify-content: center;
|
|
|
+// color: #fff;
|
|
|
+// fon-size: 14px;
|
|
|
+// }
|
|
|
.right-main {
|
|
|
height: 100%;
|
|
|
padding: 10px 0;
|