审批组件增加搜索框

src/components/deptTreeOnly.vue

@@ -1,7 +1,11 @@
 <template>
     <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">
+            :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>
@@ -26,10 +30,15 @@
                     label: 'label'
                 },
                 defaultListc: [],
-                loading:false
+                loading:false,
+                filterText: '',
             };
         },
         methods: {
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
             getTree(v) {
                 this.loading = true;
                 this.$http({
@@ -110,6 +119,9 @@
             this.defaultListc = this.defaultList;
         },
         watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
             type() {
                 this.defaultListc = this.defaultList;
                 this.$forceUpdate()

src/components/deptTreeUser.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="treebox" v-loading="loading">
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
         <el-tree :highlight-current="true" :check-strictly="true" ref="tree" @check-change="handleCheckChange"
             :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
-            @node-click="handleNodeClick">
+            @node-click="handleNodeClick" :filter-node-method="filterNode">
             <span class="custom-tree-node" slot-scope="{ node, data }" @click="cs(node)">
                 <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>
@@ -25,10 +26,15 @@
                     label: "label",
                 },
                 defaultListc: [],
-                loading:false
+                loading:false,
+                filterText: '',
             };
         },
         methods: {
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
             cs(v){
                 // console.log(v)
             },
@@ -115,6 +121,9 @@
             this.defaultListc = this.defaultList;
         },
         watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
             type() {
                 this.defaultListc = this.defaultList;
                 this.$forceUpdate();

src/components/deptTreeUserNew.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="treebox" v-loading="loading">
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
         <el-tree :highlight-current="true" :check-strictly="true" ref="tree" @check-change="handleCheckChange"
             :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
-            @node-click="handleNodeClick">
+            @node-click="handleNodeClick" :filter-node-method="filterNode">
             <span class="custom-tree-node" slot-scope="{ node, data }" @click="cs(node)">
                 <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>
@@ -12,7 +13,6 @@
         </el-tree>
     </div>
 </template>
-
 <script>
     export default {
         props: ["defaultList", "type", "closeList","fillLists"],
@@ -25,11 +25,15 @@
                     label: "label",
                 },
                 defaultListc: [],
-                loading:false
+                loading:false,
+                filterText: '',
             };
         },
         methods: {
-            
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
             cs(v){
                 // console.log(v)
                 
@@ -130,6 +134,9 @@
             this.defaultListc = this.defaultList;
         },
         watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
             type() {
                 this.defaultListc = this.defaultList;
                 this.$forceUpdate();

src/pages/main/memberFamily/haveInHand.vue

@@ -107,8 +107,10 @@
         </el-dialog>
 
         <el-dialog title="选择负责人" :visible.sync="dialogStatusp" width="50%" :destroy-on-close="true"
-            :modal-append-to-body="false" :close-on-click-modal="false">
+            :modal-append-to-body="false" :close-on-click-modal="false" :before-close="closeDutydia">
+            <el-input placeholder="输入关键字进行过滤" v-model="filterText" @input="dutyNameSearch"></el-input>
             <el-form :model="infolist" ref="infolist" style="height: 50vh;overflow-y: scroll;">
+                
                 <div class="treeUserp">
 					<p v-for="(item,index) in treeListponly" :key="index" @click="chofz(item)" v-if="item.loginNameStr">
 					    {{item.groupName}} -
@@ -187,7 +189,9 @@
                 companyFlag: '',
                 dialogStatusp: false,
                 choone: {},
-                fillLists:[]
+                fillLists:[],
+                filterText: '',
+                filterData: []
             }
         },
         methods: {
@@ -292,6 +296,7 @@
             },
             chofz(v) {
                 this.dialogStatusp = false;
+                this.filterText = "";
                 for (let i = 0; i < this.treeListp.length; i++) {
                     if (this.treeListp[i].o == this.fadept.o) {
                         this.treeListp[i].loginNameStr = v.loginNameStr;
@@ -337,6 +342,8 @@
                        }).then((ress) => {
                           this.treeListponly.push({bumen:item.ou})
                           this.treeListponly=this.treeListponly.concat(ress.data);
+
+                          this.filterData = this.treeListponly;
                        });
                    })
                 });
@@ -403,6 +410,11 @@
             closedia() {
                 this.infolist = {};
                 this.dialogStatus = false;
+                
+            },
+            closeDutydia(){
+                this.dialogStatusp = false;
+                this.filterText = "";
             },
             //搜索数据
             searchInfo(v) {
@@ -622,6 +634,48 @@
                     this.companyFlag = res.data.companyFlag;
                     this.getList({}, 1);
                 });
+            },
+            dutyNameSearch() {
+                console.log(this.filterData);
+
+                if(this.filterText == "" || this.filterText == null){
+                    this.treeListponly = this.filterData;
+                    return;
+                }
+                
+                this.treeListponly.forEach((item)=>{
+                        if(item.groupName !== undefined){
+                            if(item.groupName.indexOf(this.filterText) !== -1){
+                            this.treeListponly = this.treeListponly.filter(m=>{
+                                if(m.groupName)
+                                return m.groupName.indexOf(this.filterText)!=-1;
+                                else
+                                {
+                                    return false;
+                                }
+                            })
+                            }
+                        }
+                        if(item.loginNameStr !== undefined){
+                             
+                            if(item.loginNameStr.indexOf(this.filterText) !== -1){
+                                // console.log(item.loginNameStr);
+                                this.treeListponly = this.treeListponly.filter(n=>{
+                                    // console.log(n.loginNameStr);
+                        //             console.log('2222', item.loginNameStr);
+                                    if(n.loginNameStr)
+                                return n.loginNameStr.indexOf(this.filterText)!=-1;
+                                else
+                                {
+                                    return false;
+                                }
+                                    // return n.loginNameStr == item.loginNameStr;
+                                })
+                            }
+                        }
+                    
+                })
+
             }
         },
         mounted() {