资料中心类型搜索

src/pages/regulatoryRepository/dataCenter/index.vue

@@ -68,9 +68,9 @@
             <!--              v-model="dataCenterSearch.dataType"-->
             <!--              placeholder="请输入类型"-->
             <!--            ></el-input>-->
-            <el-select ref="treeSelect" class="tree-select" filterable clearable v-model="dataCenterSearch.treeId" @clear="setValueNull" value-key="id" placeholder="请选择类型">
+            <el-select ref="treeSelect" class="tree-select" filterable :filter-method="filterMethod" @focus="onfocus" clearable v-model="dataCenterSearch.treeId" @clear="setValueNull" value-key="id" placeholder="请选择类型">
               <el-option class="tree-select-option" :value="dataCenterSearch.treeId" :label="dataCenterSearch.dataType">
-                <el-tree
+                <el-tree v-if="!fuzzyquery"
                   ref="tree"
                   node-key="id"
                   class="tree-line"
@@ -83,6 +83,21 @@
                   @node-click="selectTreeClick2"
                   :filter-node-method="filterNode">
                 </el-tree>
+                <el-tree v-else
+                  :key="1"
+                  ref="tree"
+                  node-key="id"
+                  class="tree-line"
+                  icon-class="icon-tree"
+                  :indent="0"
+                  :props="props"
+                  :data="treeSearchList"
+                  :default-expanded-keys="['1']"
+                         default-expand-all
+                  highlight-current
+                  @node-click="selectTreeClick2"
+                  :filter-node-method="filterNode">
+                </el-tree>
               </el-option>
             </el-select>
           </el-form-item>
@@ -407,6 +422,7 @@ export default {
   name: "dataCenter",
   data() {
     return {
+      fuzzyquery:false,
       filterText: '', // 国内法规过滤
       props: {
         label: 'name',
@@ -480,6 +496,56 @@ export default {
     }
   },
   methods: {
+    onfocus(){
+      this.fuzzyquery = false
+    },
+    filterMethod(val){
+      if(val === ''){
+        this.fuzzyquery = false
+      }else{
+        this.fuzzyquery = true
+        this.treeSearchList = this.fuzzyQuery(this.treeList,val)
+      }
+    },
+    fuzzyQuery(list,keyWord){
+      let newTree = []
+      list.forEach(element => {
+        if(element.children && element.children.length>0){
+          const ab = this.fuzzyQuery(element.children,keyWord);
+          const obj = {
+            ...element,
+            children: ab
+          };
+          if (ab && ab.length) {
+            newTree.push(obj);
+          }
+        }else{
+          if (element.name.indexOf(keyWord) > -1) {
+            newTree.push(element);
+          }
+        }
+      })
+      return newTree
+    },
+    // fuzzyQuery(list, keyWord) {
+    //   let newArr = [],newTreeList =[];
+    //   function moreToOne(arr){
+    //     for(let i=0;i<arr.length;i++){
+    //       if(arr[i].children.length>0){
+    //         moreToOne(arr[i].children);
+    //       }else{
+    //         newArr.push(arr[i]);
+    //       }
+    //     }
+    //   }
+    //   moreToOne(list) //多维转一维
+    //   newArr.forEach(item=>{
+    //       if (item.name.indexOf(keyWord) > -1) {
+    //         newTreeList.push(item);
+    //       }
+    //   })
+    //   this.treeSearchList = newTreeList
+    // },
     // 左右拖动事件
     dragControllerLR: function () {
       var resize = document.getElementById("resize");