树节点筛选，切换树

src/api/manager/wbstree.js

@@ -25,13 +25,15 @@ export const getLazytree = (wbsId,parentId,tenantId,params) => {
   })
 }
 
-export const getAlltree = (tenantId,params) => {
+export const getAlltree = (tenantId,type='',wbsId,params) => {
   return request({
     url: '/api/blade-manager/wbsTree/tree',
     method: 'get',
     params: {
       ...params,
       tenantId,
+      type,
+      wbsId
     }
   })
 }

src/views/manager/wbsinfo/edit.vue

@@ -4,34 +4,61 @@
       <div class="flex1 mg-r-20">
         <p>工程节点信息</p>
         <div class="flex">
-          <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
+          <el-input placeholder="输入关键字进行过滤" v-model="filterText" @input="filterChange"></el-input>
           <el-button type="info" class="mg-l-20">导入划分</el-button>
         </div>
-        <el-tree
-          class="filter-tree" lazy
-          :load="loadNode" @node-click="getNodeDetail"
-          :props="defaultProps" :expand-on-click-node="false"
-           highlight-current node-key="id"
-          :filter-node-method="filterNode"
-          ref="tree">
-          <span class="custom-tree-node" slot-scope="{ node, data }">
-            <span>
-              {{ node.label }}
-              <el-dropdown @click="command=>{setLeftType(command,data)}">
-                <el-button
-                  type="text" icon="el-icon-more" class="normal-black">
-                </el-button>
-                <el-dropdown-menu slot="dropdown">
-                  <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
-                  <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
-                  <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
-                  <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">元素公式</el-dropdown-item>
-                  <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
-                </el-dropdown-menu>
-              </el-dropdown>
+        <div v-loading="treeLoad">
+          <el-tree v-show="!filterText"
+            class="filter-tree" lazy
+            :load="loadNode" @node-click="getNodeDetail"
+            :props="defaultProps" :expand-on-click-node="false"
+            highlight-current node-key="id"
+            ref="tree">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>
+                {{ node.label }}
+                <el-dropdown @click="command=>{setLeftType(command,data)}">
+                  <el-button
+                    type="text" icon="el-icon-more" class="normal-black">
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">元素公式</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </span>
+            </span>
+          </el-tree>
+          <el-tree v-show="filterText"
+            class="filter-tree" 
+            :data="treeData" @node-click="getNodeDetail"
+            :props="defaultProps" :expand-on-click-node="false"
+            highlight-current node-key="id"
+            :filter-node-method="filterNode"
+            ref="treeall">
+            <span class="custom-tree-node" slot-scope="{ node, data }">
+              <span>
+                {{ node.label }}
+                <el-dropdown @click="command=>{setLeftType(command,data)}">
+                  <el-button
+                    type="text" icon="el-icon-more" class="normal-black">
+                  </el-button>
+                  <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item @click.native="setLeftType(1,data,node)" icon="el-icon-circle-plus-outline">新增子级</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(2,data,node)" icon="el-icon-edit">编辑节点</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(3,data,node)" icon="el-icon-document-copy">复制节点</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(4,data,node)" icon="iconfont hcicon-danganziliao-biaogetianxie" class="font-s-12">元素公式</el-dropdown-item>
+                    <el-dropdown-item @click.native="setLeftType(5,data,node)" icon="el-icon-coin">元素设置</el-dropdown-item>
+                  </el-dropdown-menu>
+                </el-dropdown>
+              </span>
             </span>
-          </span>
-        </el-tree>
+          </el-tree>
+        </div>
+
       </div>
       <div class="flex1">
         <template v-if="leftType==2 || leftType==1">
@@ -299,7 +326,7 @@
 </template>
 
 <script>
-  import {getLazytree,getDetail,update,selectByNodeTable,
+  import {getLazytree,getDetail,update,selectByNodeTable,getAlltree,
             saveFormAndElement,selectFormElements,removeTableById} from "@/api/manager/wbstree";
   import {saveElement,remove as removeElement,updateBatchElements} from "@/api/manager/wbsformelement"
   import {getDictionary} from "@/api/system/dict";
@@ -310,6 +337,7 @@
         id:'',
         filterText:'',
         treeData:[],
+        treeLoad:false,
         defaultProps: {
           children: 'children',
           label: 'title',
@@ -648,6 +676,23 @@
         }
       },
 
+      filterChange(){
+        //console.log(this.$refs)
+        //debugger
+        if(this.treeData.length > 0){
+          this.$refs.treeall.filter(this.filterText);
+          return;
+        }
+        this.treeLoad = true;
+        getAlltree(this.userInfo.tenant_id,'',this.id).then((res)=>{
+          this.treeLoad = false;
+          this.treeData = res.data.data;
+          this.$nextTick(()=>{
+            this.$refs.treeall.filter(this.filterText);
+          })
+        })
+      },
+
       getDeptCategorylist(){
         if(this.deptCategorylist.length >1){
           return;
@@ -753,8 +798,9 @@
       },
 
       filterNode(value, data) {
+        //console.log(value)
         if (!value) return true;
-        return data.label.indexOf(value) !== -1;
+        return data.title.indexOf(value) !== -1;
       }
     }
   };