单架次MBON详情页修改

applications/dee-mes/src/privateComponents/components/MBOMConfig/tree.vue

 <template>
   <div class="TfMomWeb-tree">
+    <div class="search-area">
+      <el-input v-model="inputVal" clearable size="small" class="search-input" placeholder="输入代号，在结构中快速定位" />
+      <dee-tools :tools="tools" style="width:120px" mode="dual" />
+    </div>
     <el-tree
       v-show="AircraftName"
       ref="tree"
@@ -49,6 +53,59 @@ export default {
       ],
       props: {
         label: (data, node) => this.setLabel(data, node)
+      },
+      inputVal: '',
+      tools: [
+        {
+          name: '下一个',
+          icon: '/icons/c-next.png',
+          handler: {
+            click: () => {
+              this.findNext()
+            }
+          }
+        },
+        {
+          name: '上一个',
+          icon: '/icons/c-last.png',
+          handler: {
+            click: () => {
+              this.findPrev()
+            }
+          }
+        },
+        {
+          name: '全部展开',
+          icon: '/icons/b-expansion.png',
+          handler: {
+            click: () => {
+              this.expandAllFun(true)
+            }
+          }
+        },
+        {
+          name: '全部收起',
+          icon: '/icons/b-allpackup.png',
+          handler: {
+            click: () => {
+              this.expandAllFun(false)
+            }
+          }
+        },
+        {
+          name: '刷新',
+          icon: '/icons/b-fresh.png',
+          handler: {
+            click: () => {
+              this.getData()
+            }
+          }
+        }
+      ],
+      filterTool: {
+        keyword: '',
+        currentIndex: -1,
+        nodes: []
       }
     }
   },
@@ -57,8 +114,16 @@ export default {
       return this.initTree(this.viewType, this.postionList)
     }
   },
+  watch: {
+    inputVal: {
+      handler: function(keyword) {
+        this.filterTool.currentIndex = -1
+        this.highLightTreeNode()
+      }
+    }
+  },
   mounted() {
-
+    this.getData()
   },
 
   methods: {
@@ -100,17 +165,20 @@ export default {
       this.$emit('nodeClick', data)
     },
     getData(params) {
-      const items = params.items || params
-      const AircraftType = items.find(r => r.fieldName === 'AircraftType')
-      const AircraftSorties = items.find(r => r.fieldName === 'AircraftSorties')
-      if (AircraftType) {
-        this.AircraftName = AircraftType.value
-      }
-      if (AircraftSorties) {
-        const list = AircraftSorties.value.split('$$')
-        this.AircraftSortiesId = list[0]
-        this.AircraftSortiesName = list[1]
-      }
+      // const items = params.items || params
+      // const AircraftType = items.find(r => r.fieldName === 'AircraftType')
+      // const AircraftSorties = items.find(r => r.fieldName === 'AircraftSorties')
+      // if (AircraftType) {
+      //   this.AircraftName = AircraftType.value
+      // }
+      // if (AircraftSorties) {
+      //   const list = AircraftSorties.value.split('$$')
+      //   this.AircraftSortiesId = list[0]
+      //   this.AircraftSortiesName = list[1]
+      // }
+      this.AircraftName = this.$route.query.aircraftTypeName
+      this.AircraftSortiesId = this.$route.query.aircraftTypeId
+      this.AircraftSortiesName = this.$route.query.sortiesName
       this.getPosition()
     },
     getPosition() {
@@ -151,14 +219,153 @@ export default {
         tree.setCurrentKey(this.currentNode.id)
         this.$emit('nodeClick', this.currentNode)
       })
-    }
+    },
+    // 查询下一个
+    findNext() {
+      if (!this.inputVal) {
+        return
+      }
+      this.findAll().then(() => {
+        if (this.filterTool.nodes.length < 1) {
+          return
+        }
+        if (++this.filterTool.currentIndex >= this.filterTool.nodes.length) {
+          this.filterTool.currentIndex = 0
+        }
+        this.expandToMatchNode()
+      })
+    },
+    // 查询上一个
+    findPrev() {
+      if (!this.inputVal) {
+        return
+      }
+      this.findAll().then(() => {
+        if (this.filterTool.nodes.length < 1) {
+          return
+        }
+        if (--this.filterTool.currentIndex < 0) {
+          this.filterTool.currentIndex = this.filterTool.nodes.length - 1
+        }
+        this.expandToMatchNode()
+      })
+    },
+    findAll() {
+      return new Promise((resolve) => {
+        this.findMatchNodes()
+        resolve()
+      })
+    },
+    findMatchNodes() {
+      let nodeMap = this.$refs.tree.store.nodesMap
+      nodeMap = Object.values(nodeMap)
+      this.filterTool.nodes = nodeMap.filter(node => node.data.serialNumber.toUpperCase().includes(this.inputVal.toUpperCase()))
+    },
+    // 展开匹配的节点
+    expandToMatchNode() {
+      const node = this.filterTool.nodes[this.filterTool.currentIndex]
+      let currentNode = node.parent
+      while (currentNode) {
+        currentNode.expanded = true
+        currentNode = currentNode.parent
+      }
+      this.$refs.tree.setCurrentKey(node.key)
+      this.highLightTreeNode()
+
+      // 保持滚动条内容可见
+      this.$nextTick(() => {
+        const treeEl = document.getElementById('dxStInventoryTree')
+        const el = this.$refs.tree.$el.getElementsByClassName('is-current')[0]
+        let parentNode = el.parentNode
+        let offsetParent = el.offsetParent
+        let offsetTop = el.offsetTop || 0
+
+        while (parentNode && parentNode !== treeEl) {
+          if (offsetParent !== parentNode.offsetParent) {
+            offsetTop += parentNode.offsetTop || 0
+          } else {
+            offsetParent = parentNode.offsetParent
+          }
+          parentNode = parentNode.parentNode
+        }
+
+        treeEl.scrollTop = offsetTop - treeEl.clientHeight * 0.5 + 10
+      })
+    },
+    expandAllFun(bool) {
+      var nodes = this.$refs.tree.store._getAllNodes()
+      this.expandAll = bool
+      this.setNodeExpanded(nodes, bool)
+      this.highLightTreeNode()
+    },
+    setNodeExpanded(nodes, bool) {
+      nodes.forEach(Node => {
+        if (bool) {
+          Node.expand()
+        } else {
+          Node.collapse()
+        }
+      })
+    },
+    // 高亮匹配的文字
+    highLightTreeNode() {
+      this.$nextTick(() => {
+        const treeNode = this.$refs.tree.$el
+        const spans = treeNode.getElementsByClassName('change-text')
 
+        if (spans.length > 0) {
+          for (let i = 0; i < spans.length; i++) {
+            var labelText = spans[i].textContent
+            const reg = this.inputVal
+              .replace(/\(/g, '\\(')
+              .replace(/\)/g, '\\)')
+              .replace(/\./g, '\\.')
+            const allVal = labelText.match(new RegExp(reg, 'ig'))
+            if (allVal) {
+              const newAllVal = [...new Set(allVal)]
+              for (let j = 0; j < newAllVal.length; j++) {
+                if (newAllVal[j]) {
+                  const tp = newAllVal[j]
+                    .replace(/\(/g, '\\(')
+                    .replace(/\)/g, '\\)')
+                    .replace(/\./g, '\\.')
+                  labelText = labelText.replace(
+                    new RegExp(tp, 'g'),
+                    '*' + newAllVal[j] + '*'
+                  )
+                }
+              }
+              for (let k = 0; k < allVal.length; k++) {
+                if (allVal[k]) {
+                  labelText = labelText.replace(
+                    '*' + allVal[k] + '*',
+                    '<span class="highlight-text">' + allVal[k] + '</span>'
+                  )
+                }
+              }
+            }
+            spans[i].innerHTML = labelText
+          }
+        }
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss">
 .TfMomWeb-tree{
+  .search-area {
+    display: flex;
+    align-items: center;
+    justify-content:flex-start;
+    padding: 6px 0px;
+    .search-input{
+      width: calc(100% - 120px);
+      flex:1;
+      margin-right:10px;
+    }
+  }
   .dee-as-tree-node{
       width: 100%;
       &.disable-dee-as-tree-node{