站位计划添加按照CA查询

applications/dee-mes/src/views/assemblyPlanManagement/stationPlanMaintenance/stationPlanList.vue

@@ -27,6 +27,12 @@
             </div>
           </div>
           <div class="station-box box">
+            <div class="search-area">
+              <el-input v-model="keyword" placeholder="请输入关键字" class="search-input" clearable>
+              <!-- <el-button slot="append" icon="el-icon-search" @click="searchData" /> -->
+              </el-input>
+              <dee-tools :tools="tools" style="width:42px" mode="dual" />
+            </div>
             <el-tree
               ref="tree"
               v-loading="treeLoading"
@@ -43,9 +49,9 @@
               <span slot-scope="{ node, data }" class="custom-tree-node">
                 <span class="tree-row">
                   <i :class="'tree' + node.level" />
-                  <span v-if="node.level === 1" class="label" :title="data.serialNumber">{{ data.serialNumber }}</span>
-                  <span v-if="node.level === 2">{{ data.serialNumber + '，' + data.name }}</span>
-                  <span v-if="node.level === 3" :class="[data.target.isOk ?'Delivery':'Finish']">{{ data.target.serialNumber + '，' + data.target.name }}</span>
+                  <span v-if="node.level === 1" class="label change-text" :title="data.serialNumber">{{ data.serialNumber }}</span>
+                  <span v-if="node.level === 2" class="change-text">{{ data.serialNumber + '，' + data.name }}</span>
+                  <span v-if="node.level === 3" class="change-text" :class="[data.target.isOk ?'Delivery':'Finish']">{{ data.target.serialNumber + '，' + data.target.name }}</span>
                 </span>
               </span>
             </el-tree>
@@ -86,6 +92,31 @@ export default {
   name: 'StationPlanList',
   data() {
     return {
+      keyword: '',
+      filterTool: {
+        keyword: '',
+        currentIndex: -1,
+        nodes: []
+      },
+      tools: [
+        {
+          name: '下一个',
+          icon: '/icons/c-next.png',
+          handler: {
+            click: () => {
+              this.findNext()
+            }
+          }
+        },
+        {
+          name: '上一个',
+          icon: '/icons/c-last.png',
+          handler: {
+            click: () => {
+              this.findPrev()
+            }
+          }
+        }],
       form: {
         model: null,
         sorties: null
@@ -147,6 +178,12 @@ export default {
         this.$set(this.form, 'sortiesName', (sorties && sorties.label) || '')
         this.getTreeData()
       }
+    },
+    keyword: {
+      handler: function(keyword) {
+        this.filterTool.currentIndex = -1
+        this.highLightTreeNode()
+      }
     }
   },
   created() {
@@ -158,7 +195,130 @@ export default {
     })
   },
   methods: {
-  /**
+    // 高亮匹配的文字
+    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.keyword
+              .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
+          }
+        }
+      })
+    },
+    // 查询下一个
+    findNext() {
+      if (!this.keyword) {
+        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.keyword) {
+        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()
+      })
+    },
+    // 查找所有满足条件的节点，先从服务端装载所有BOM结构
+    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 => {
+        if (node.level === 1) {
+          node.data.label = node.data.serialNumber
+        } else if (node.level === 2) {
+          node.data.label = node.data.serialNumber + ',' + node.data.name
+        } else {
+          node.data.label = node.data.target.serialNumber + ',' + node.data.target.name
+        }
+        return node.data.label.toUpperCase().includes(this.keyword.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.getElementsByClassName('el-tree')[0]
+        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 !== treeEl) {
+          if (offsetParent !== parentNode.offsetParent) {
+            offsetTop += parentNode.offsetTop || 0
+          } else {
+            offsetParent = parentNode.offsetParent
+          }
+          parentNode = parentNode.parentNode
+        }
+        treeEl.scrollTop = offsetTop - treeEl.clientHeight * 0.5 + 10
+      })
+    },
+    /**
    * 获取机型
    */
     getAddModel() {
@@ -461,6 +621,17 @@ export default {
   }
   .station-box {
    height: calc(100% - 190px);
+   .search-area {
+    display: flex;
+    align-items: center;
+    justify-content:flex-start;
+    padding: 6px 0px;
+    .search-input{
+      // width: calc(100% - 150px);
+      // flex:1;
+      margin-right:10px;
+    }
+  }
   }
   .box {
   //  width: 100%;
@@ -471,6 +642,9 @@ export default {
    .plan-tree {
     height: 100%;
     overflow: scroll;
+    .highlight-text{
+      background: yellow;
+    }
     .el-tree-node {
      width: max-content;
      min-width: 100%;