元素识别添加搜索

src/views/exctab/ElementIdentification/index.vue

@@ -13,7 +13,19 @@
             style="fontSize:18px; font-weight: 900;"
             class="marbottom5"
           >元素识别</div>
+
           <div style="height:98%;overflow: auto;width:auto;">
+            <div class="flex">
+              <el-input
+                size="small"
+                placeholder="输入关键字搜索"
+                clearable
+                @clear="allTreeShow = false"
+                v-model="filterText">
+              </el-input>
+              <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
+            </div>
+
             <el-tree
               :data="treeData"
               :props="treeProps"
@@ -21,7 +33,22 @@
               :load="loadNode"
               :expand-on-click-node="false"
               lazy
+              v-show="!allTreeShow"
             ></el-tree>
+
+            <el-tree
+              style="width:100%;"
+              ref="treeall"
+              v-loading="treeloading"
+              :data="allTreeData"
+              :props="treeProps"
+              @node-click="nodeClick"
+              node-key="id"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              v-show="allTreeShow"
+            >
+            </el-tree>
           </div>
         </el-col>
         <el-col
@@ -277,7 +304,7 @@
   </div>
 </template>
 <script>
-import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation,saveRelation,searchNodeTables } from "@/api/exctab/excelmodel";
+import { tabLazytree, getExcelHtmlCol, excelType, submitExcelRelationWbsTreeAndElement, getWbsTypeList, getLazytree,cancelRelation,saveRelation,searchNodeTables,tabLazytreeAll} from "@/api/exctab/excelmodel";
 import { dictionarydataType } from "@/api/exctab/editelement";
 import { getColByTabId } from "@/api/manager/AdjustForm";
 import { selectByNodeTable } from "@/api/manager/wbstree";
@@ -300,6 +327,9 @@ export default {
       },
       tableData: [],//外层table
       dataType: [],
+      filterText:"",//搜索关键字
+      allTreeShow:false,//是否显示整棵树
+      treeloading:false,
       AssociatedPublicTap: false,
       //#region 弹框属性
       GLExcelFrom: {
@@ -308,6 +338,7 @@ export default {
         search: '',//搜素框舒服的值
       },
       GLExcelData: [],//
+      allTreeData:[],
       GLExcelProps: {
         label: 'title',
         children: 'children',
@@ -338,11 +369,39 @@ export default {
       //#endregion
 
       ownerTypeList: [],
-      
+
       activeName:'link',
     }
   },
   methods: {
+
+    //搜索树
+    treeFilter(){
+      if(this.filterText){
+        this.allTreeShow = true;
+        if(!this.allTreeData.length){
+          this.treeloading = true;
+          tabLazytreeAll({
+            modeId: this.$route.params.id,
+            name:'',
+          }).then((res)=>{
+            this.treeloading = false;
+            this.allTreeData = res.data.data;
+            this.$nextTick(()=>{
+              this.$refs.treeall.filter(this.filterText);
+            })
+          })
+        }else{
+          this.$refs.treeall.filter(this.filterText);
+        }
+      }else{
+        this.allTreeShow = false;
+      }
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
     //#region
     handleNodeClick (data) {//树节点点击事件
       console.log(data);
@@ -570,7 +629,7 @@ export default {
         }).finally(()=>{
           row.loading = false;
         })
-        
+
       } else {
         cancelRelation({
           id:row.id,
@@ -586,7 +645,7 @@ export default {
     saveElementMD () {//保存按钮
       if (this.addElementForm.wbsId) {
         if (this.activeName == 'link') {
-          
+
           this.submitExcelRelationWbsTreeAndElement({
             excelTabId:this.from.id,
             elementList: this.tableData,