增加树筛选

src/components/deptTreeOnly.vue

@@ -1,135 +1,166 @@
 <template>
-    <div class="treebox" v-loading="loading">
-        <el-tree :highlight-current="true" :check-strictly="true" ref="tree" :data="treeList" node-key="o"
-            :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc" @node-click="handleNodeClick">
-
-            <span class="custom-tree-node" slot-scope="{ node, data }">
-                <em style="display: inline-block;width: 20px;" v-if="node.data.haveUserFlag == 'N'&& node.data.children.length == 0"></em>
-                <i class="el-icon-caret-right" v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"></i>
-                <el-checkbox @change="handleCheckChange(node)" style="margin-right: 10px;" v-model="node.checked" v-if="node.data.type == 1"></el-checkbox>
-                <span>{{ node.label }}</span>
-            </span>
-
-        </el-tree>
-    </div>
+  <div class="treebox" v-loading="loading">
+    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
+    <el-tree
+      :highlight-current="true"
+      :check-strictly="true"
+      ref="tree"
+      :data="treeList"
+      node-key="o"
+      :default-checked-keys="defaultListc"
+      :default-expanded-keys="defaultListc"
+      @node-click="handleNodeClick"
+      :filter-node-method="filterNode"
+    >
+      <span class="custom-tree-node" slot-scope="{ node, data }">
+        <em
+          style="display: inline-block; width: 20px"
+          v-if="node.data.haveUserFlag == 'N' && node.data.children.length == 0"
+        ></em>
+        <i
+          class="el-icon-caret-right"
+          v-if="node.data.haveUserFlag == 'Y' && node.data.children.length == 0"
+        ></i>
+        <el-checkbox
+          @change="handleCheckChange(node)"
+          style="margin-right: 10px"
+          v-model="node.checked"
+          v-if="node.data.type == 1"
+        ></el-checkbox>
+        <span>{{ node.label }}</span>
+      </span>
+    </el-tree>
+  </div>
 </template>
 
 <script>
-    export default {
-        props: ["defaultList", "type","closeList"],
-        data() {
-            return {
-                treeList: [],
-                opt: [],
-                defaultProps: {
-                    children: 'children',
-                    label: 'label'
-                },
-                defaultListc: [],
-                loading:false
-            };
+export default {
+  props: ["defaultList", "type", "closeList"],
+  data() {
+    return {
+      filterText: "",
+      treeList: [],
+      opt: [],
+      defaultProps: {
+        children: "children",
+        label: "label",
+      },
+      defaultListc: [],
+      loading: false,
+    };
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.label.indexOf(value) !== -1;
+    },
+    getTree(v) {
+      this.loading = true;
+      this.$http({
+        url: "/sysmgr/csysdept/queryAllList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
-        methods: {
-            getTree(v) {
-                this.loading = true;
-                this.$http({
-                    url: "/sysmgr/csysdept/queryAllList",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    data: {
-                        parentorgid: v
-                    },
-                }).then((res) => {
-                    this.treeList = res.data;
-                    this.loading = false;
-                });
-            },
-            handleNodeClick(v) {
-                let s = false;
-                if(v.children && v.children.length == 0){
-                    s = true;
-                }
-                if (v.type) {
-                    return
-                }
-                if (v.children && v.children.length > 0 && v.children[v.children.length - 1].type == 1) {
-                    return
-                }
-                console.log(v)
-                this.$http({
-                    url: "/sysmgr/sysuserinfo/queryList",
-                    method: "post",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    data: {
-                        groupId: v.o
-                    },
-                }).then((res) => {
-                    v.children = v.children?v.children:[];
-                    res.data.forEach(item=>{
-                        v.children.push({
-                            id:item.groupId,
-                            label:item.loginNameStr,
-                            type:1,
-                            displayname:v.displayname,
-                            loginNoStr:item.loginNoStr,
-                            o:item.id,
-                        });
-                    })
-                });
-                for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
-                    if(s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o){
-                        this.$refs.tree.store._getAllNodes()[i].expanded = true;
-                    }
-                }
-            },
-            handleCheckChange(v){
-                console.log(v)
-                let opt = {
-                    leaderAuditNo:v.data.loginNoStr,
-                    leaderAuditName:v.data.label,
-                    displayname:v.data.displayname,
-                    groupId:v.data.o
-                }
-                this.$emit("treeCheck", opt);
-                for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
-                    if(v.data.o == this.$refs.tree.store._getAllNodes()[i].data.o){
-                        this.$refs.tree.store._getAllNodes()[i].checked = true;
-                    }else{
-                        this.$refs.tree.store._getAllNodes()[i].checked = false;
-                    }
-                }
-                this.$forceUpdate()
-            }
+        data: {
+          parentorgid: v,
         },
-        created() {
-            this.getTree();
-            this.defaultListc = this.defaultList;
+      }).then((res) => {
+        this.treeList = res.data;
+        this.loading = false;
+      });
+    },
+    handleNodeClick(v) {
+      let s = false;
+      if (v.children && v.children.length == 0) {
+        s = true;
+      }
+      if (v.type) {
+        return;
+      }
+      if (
+        v.children &&
+        v.children.length > 0 &&
+        v.children[v.children.length - 1].type == 1
+      ) {
+        return;
+      }
+      console.log(v);
+      this.$http({
+        url: "/sysmgr/sysuserinfo/queryList",
+        method: "post",
+        headers: {
+          "Content-Type": "application/json",
         },
-        watch: {
-            type() {
-                this.defaultListc = this.defaultList;
-                this.$forceUpdate()
-            },
-            defaultList() {
-                this.$forceUpdate()
-            },
-            closeList() {
-                this.$refs.tree.setCheckedNodes([]);
-            },
+        data: {
+          groupId: v.o,
+        },
+      }).then((res) => {
+        v.children = v.children ? v.children : [];
+        res.data.forEach((item) => {
+          v.children.push({
+            id: item.groupId,
+            label: item.loginNameStr,
+            type: 1,
+            displayname: v.displayname,
+            loginNoStr: item.loginNoStr,
+            o: item.id,
+          });
+        });
+      });
+      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
+        if (s && v.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
+          this.$refs.tree.store._getAllNodes()[i].expanded = true;
         }
-    };
+      }
+    },
+    handleCheckChange(v) {
+      console.log(v);
+      let opt = {
+        leaderAuditNo: v.data.loginNoStr,
+        leaderAuditName: v.data.label,
+        displayname: v.data.displayname,
+        groupId: v.data.o,
+      };
+      this.$emit("treeCheck", opt);
+      for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
+        if (v.data.o == this.$refs.tree.store._getAllNodes()[i].data.o) {
+          this.$refs.tree.store._getAllNodes()[i].checked = true;
+        } else {
+          this.$refs.tree.store._getAllNodes()[i].checked = false;
+        }
+      }
+      this.$forceUpdate();
+    },
+  },
+  created() {
+    this.getTree();
+    this.defaultListc = this.defaultList;
+  },
+  watch: {
+    type() {
+      this.defaultListc = this.defaultList;
+      this.$forceUpdate();
+    },
+    defaultList() {
+      this.$forceUpdate();
+    },
+    closeList() {
+      this.$refs.tree.setCheckedNodes([]);
+    },
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    .el-icon-caret-right{
-        color: #ccc;
-        margin:0 5px;
-    }
-    .treebox {
-        border: 1px solid #ddd;
-    }
+.el-icon-caret-right {
+  color: #ccc;
+  margin: 0 5px;
+}
+.treebox {
+  border: 1px solid #ddd;
+}
 </style>