需求申请单组织机构树

src/components/workDeptThree.vue

@@ -1,227 +1,149 @@
 <template>
-  <div class="treebox" v-loading="loading" style="height: 30rem">
-    <el-checkbox-group v-model="userList">
-      <div v-for="(item, index) in treeList" :key="index">
-        <el-checkbox :label="item" @change="checkChange(item)">{{
-          item.loginNameStr
-        }}</el-checkbox>
-      </div>
-    </el-checkbox-group>
-    <!-- <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"-->
-    <!--      :filter-node-method="filterNode"-->
-    <!--    >-->
-    <!--      <span class="custom-tree-node" slot-scope="{ node }" @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>-->
-    <!--        <el-checkbox-->
-    <!--          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" @check-change="handleCheckChange"
+            :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
+            @node-click="handleNodeClick" @node-expand="handleNodeClick" >
+            <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>
+                <el-checkbox 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", "treeList"],
-  data() {
-    return {
-      userList: [],
-      // treeList: [],
-      opt: [],
-      defaultProps: {
-        children: "children",
-        label: "label",
-      },
-      defaultListc: [],
-      loading: false,
-      filterText: "",
-      list: [],
+    export default {
+        props: ["defaultList", "type", "closeList","treeList"],
+        data() {
+            return {
+                treeList: [],
+                opt: [],
+                defaultProps: {
+                    children: "children",
+                    label: "label",
+                },
+                defaultListc: [],
+                loading:false,
+                filterText: '',
+            };
+        },
+        methods: {
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
+            cs(v){
+                // console.log(v)
+            },
+            // 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;
+            //     });
+            // },
+            handleCheckChange(v) {
+                let opt = [];
+                let list = this.$refs.tree.getCheckedNodes();
+                for (let i = 0; i < list.length; i++) {
+                    if (list[i].type == 1) {
+                        opt.push({
+                            receiveNo: list[i].loginNoStr,
+                            receiveName: list[i].label,
+                            deptName: list[i].displayname,
+                            deptCode: list[i].groupId,
+                            id: list[i].id,
+                            type: list[i].type,
+                            label: list[i].label,
+                        });
+                    }
+                }
+                this.$emit("treeCheck", opt);
+            },
+            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;
+                }
+                this.$http({
+                    url: "/sysmgr/sysuserinfo/queryList",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: {
+                        groupId: v.o,
+                    },
+                }).then((res) => {
+                    res.data.forEach((item) => {
+                        v.children.push({
+                            id: item.id,
+                            label: item.loginNameStr,
+                            type: 1,
+                            displayname: v.displayname,
+                            groupId: item.groupId,
+                            loginNoStr: item.loginNoStr,
+                        });
+                    });
+                });
+                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;
+                        return;
+                    }
+                }
+            },
+        },
+        created() {
+            // this.getTree();
+            this.defaultListc = this.defaultList;
+        },
+        watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
+            type() {
+                this.defaultListc = this.defaultList;
+                this.$forceUpdate();
+            },
+            defaultList() {
+                this.$forceUpdate();
+            },
+            closeList() {
+                this.$refs.tree.setCheckedNodes(this.closeList);
+            },
+        },
     };
-  },
-//   watch: {
-//     immediate: true,
-//     treeList: {
-//       handler(oldVal,newVal) {
-//         console.log(oldVal);
-//         console.log(newVal);
-//       },
-//     },
-//   },
-  methods: {
-    checkChange(e) {
-      // console.log(this.userList)
-      // let newList = []
-      // this.userList.map((item) =>{
-      //     let array =    {
-      //         userid:item,
-      //         taskid:e.id_,
-      //         nextid:e.id
-      //     }
-      //     newList.push(array)
-      //     // newList.map((items,i) =>{
-      //     //     if(item !== items.userid){
-      //     //         newList.splice(i,1)
-      //     //     }
-      //     //         })
-      //
-      // })
-      // this.list = newList
-      // this.userList.map((item) =>{
-      //     newList.map((items,i) =>{
-      //         if(item !==items.id){
-      //             newList.splice(i,1)
-      //         }
-      //     })
-      // })
-      // console.log(newList)
-      this.$emit("changeTree", this.userList);
-      this.$emit("changeUserName", e);
-    },
-  },
-};
-// filterNode(value, data) {
-//   if (!value) return true;
-//   return data.label.indexOf(value) !== -1;
-// },
-// cs(v) {
-//   // console.log(v)
-// },
-// getTree(v) {
-//     this.loading = true;
-//     this.$http({
-//         url: "/sysmgr/csysdept/queryAllList",
-//         method: "post",
-//         headers: {
-//             "Content-Type": "application/json",
-//         },
-//         data: {
-//             parentorgid: '00440089000000000000',
-//         },
-//     }).then((res) => {
-//         console.log(res);
-//         // this.treeList = res.data;
-//         // this.loading = false;
-//     });
-// },
-// handleCheckChange(v) {
-//     let opt = [];
-//     let list = this.$refs.tree.getCheckedNodes();
-//     for (let i = 0; i < list.length; i++) {
-//         if (list[i].type == 1) {
-//             opt.push({
-//                 receiveNo: list[i].loginNoStr,
-//                 receiveName: list[i].label,
-//                 deptName: list[i].displayname,
-//                 deptCode: list[i].groupId,
-//                 id: list[i].id,
-//                 type: list[i].type,
-//                 label: list[i].label,
-//             });
-//         }
-//     }
-//     this.$emit("treeCheck", opt);
-// },
-//   handleNodeClick(v) {
-//     console.log(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;
-//     }
-//     this.$http({
-//       url: "/sysmgr/sysuserinfo/queryList",
-//       method: "post",
-//       headers: {
-//         "Content-Type": "application/json",
-//       },
-//       data: {
-//         groupId: v.o,
-//       },
-//     }).then((res) => {
-//       res.data.forEach((item) => {
-//         v.children.push({
-//           id: item.id,
-//           label: item.loginNameStr,
-//           type: 1,
-//           displayname: v.displayname,
-//           groupId: item.groupId,
-//           loginNoStr: item.loginNoStr,
-//         });
-//       });
-//     });
-//     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;
-//         return;
-//       }
-//     }
-//   },
-// },
-//   created() {
-//     console.log(this.treeList);
-//     // this.getTree();
-//     this.defaultListc = this.defaultList;
-//   },
-//   watch: {
-//     filterText(val) {
-//       this.$refs.tree.filter(val);
-//     },
-//     type() {
-//       this.defaultListc = this.defaultList;
-//       this.$forceUpdate();
-//     },
-//     defaultList() {
-//       this.$forceUpdate();
-//     },
-//     closeList() {
-//       this.$refs.tree.setCheckedNodes(this.closeList);
-//     },
-//   },
-// };
 </script>
 
 <style scoped lang="scss">
-.el-icon-caret-right {
-  color: #ccc;
-  margin: 0 5px;
-}
-.treebox {
-  border: 1px solid #ddd;
-}
-::v-deep .el-checkbox-group {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-  /* font-size: 38px; */
-  margin-left: 20px;
-}
+    .el-icon-caret-right{
+        color: #ccc;
+        margin:0 5px;
+    }
+    .treebox {
+        border: 1px solid #ddd;
+    }
 </style>

src/pages/main/leader/components/deptThree.vue

@@ -1,219 +1,149 @@
 <template>
-  <div class="treebox" v-loading="loading" style="height: 30rem">
-      <el-checkbox-group v-model="userList">
-          <div v-for="(item,index) in treeList" :key="index">
-              <el-checkbox :label="item" @change="checkChange(item)">{{item.loginNameStr}}</el-checkbox> </div>
-      </el-checkbox-group>
-    <!-- <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"-->
-<!--      :filter-node-method="filterNode"-->
-<!--    >-->
-<!--      <span class="custom-tree-node" slot-scope="{ node }" @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>-->
-<!--        <el-checkbox-->
-<!--          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" @check-change="handleCheckChange"
+            :data="treeList" node-key="id" :default-checked-keys="defaultListc" :default-expanded-keys="defaultListc"
+            @node-click="handleNodeClick" @node-expand="handleNodeClick" >
+            <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>
+                <el-checkbox 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", "treeList"],
-    data() {
-        return {
-            userList:[],
-            // treeList: [],
-            opt: [],
-            defaultProps: {
-                children: "children",
-                label: "label",
+    export default {
+        props: ["defaultList", "type", "closeList","treeList"],
+        data() {
+            return {
+                treeList: [],
+                opt: [],
+                defaultProps: {
+                    children: "children",
+                    label: "label",
+                },
+                defaultListc: [],
+                loading:false,
+                filterText: '',
+            };
+        },
+        methods: {
+            filterNode(value, data) {
+                if (!value) return true;
+                return data.label.indexOf(value) !== -1;
+            },
+            cs(v){
+                // console.log(v)
+            },
+            // 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;
+            //     });
+            // },
+            handleCheckChange(v) {
+                let opt = [];
+                let list = this.$refs.tree.getCheckedNodes();
+                for (let i = 0; i < list.length; i++) {
+                    if (list[i].type == 1) {
+                        opt.push({
+                            receiveNo: list[i].loginNoStr,
+                            receiveName: list[i].label,
+                            deptName: list[i].displayname,
+                            deptCode: list[i].groupId,
+                            id: list[i].id,
+                            type: list[i].type,
+                            label: list[i].label,
+                        });
+                    }
+                }
+                this.$emit("treeCheck", opt);
+            },
+            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;
+                }
+                this.$http({
+                    url: "/sysmgr/sysuserinfo/queryList",
+                    method: "post",
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                    data: {
+                        groupId: v.o,
+                    },
+                }).then((res) => {
+                    res.data.forEach((item) => {
+                        v.children.push({
+                            id: item.id,
+                            label: item.loginNameStr,
+                            type: 1,
+                            displayname: v.displayname,
+                            groupId: item.groupId,
+                            loginNoStr: item.loginNoStr,
+                        });
+                    });
+                });
+                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;
+                        return;
+                    }
+                }
             },
-            defaultListc: [],
-            loading: false,
-            filterText: "",
-            list:[]
-        };
-    },
-    methods:{
-        checkChange(e){
-  
-  
-            // console.log(this.userList)
-            // let newList = []
-            // this.userList.map((item) =>{
-            //     let array =    {
-            //         userid:item,
-            //         taskid:e.id_,
-            //         nextid:e.id
-            //     }
-            //     newList.push(array)
-            //     // newList.map((items,i) =>{
-            //     //     if(item !== items.userid){
-            //     //         newList.splice(i,1)
-            //     //     }
-            //     //         })
-            //
-            // })
-            // this.list = newList
-            // this.userList.map((item) =>{
-            //     newList.map((items,i) =>{
-            //         if(item !==items.id){
-            //             newList.splice(i,1)
-            //         }
-            //     })
-            // })
-            // console.log(newList)
-            this.$emit('changeTree',this.userList)
-            this.$emit('changeUserName',e)
-
-
         },
-    }
-}
-    // filterNode(value, data) {
-    //   if (!value) return true;
-    //   return data.label.indexOf(value) !== -1;
-    // },
-    // cs(v) {
-    //   // console.log(v)
-    // },
-    // getTree(v) {
-    //     this.loading = true;
-    //     this.$http({
-    //         url: "/sysmgr/csysdept/queryAllList",
-    //         method: "post",
-    //         headers: {
-    //             "Content-Type": "application/json",
-    //         },
-    //         data: {
-    //             parentorgid: '00440089000000000000',
-    //         },
-    //     }).then((res) => {
-    //         console.log(res);
-    //         // this.treeList = res.data;
-    //         // this.loading = false;
-    //     });
-    // },
-    // handleCheckChange(v) {
-    //     let opt = [];
-    //     let list = this.$refs.tree.getCheckedNodes();
-    //     for (let i = 0; i < list.length; i++) {
-    //         if (list[i].type == 1) {
-    //             opt.push({
-    //                 receiveNo: list[i].loginNoStr,
-    //                 receiveName: list[i].label,
-    //                 deptName: list[i].displayname,
-    //                 deptCode: list[i].groupId,
-    //                 id: list[i].id,
-    //                 type: list[i].type,
-    //                 label: list[i].label,
-    //             });
-    //         }
-    //     }
-    //     this.$emit("treeCheck", opt);
-    // },
-  //   handleNodeClick(v) {
-  //     console.log(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;
-  //     }
-  //     this.$http({
-  //       url: "/sysmgr/sysuserinfo/queryList",
-  //       method: "post",
-  //       headers: {
-  //         "Content-Type": "application/json",
-  //       },
-  //       data: {
-  //         groupId: v.o,
-  //       },
-  //     }).then((res) => {
-  //       res.data.forEach((item) => {
-  //         v.children.push({
-  //           id: item.id,
-  //           label: item.loginNameStr,
-  //           type: 1,
-  //           displayname: v.displayname,
-  //           groupId: item.groupId,
-  //           loginNoStr: item.loginNoStr,
-  //         });
-  //       });
-  //     });
-  //     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;
-  //         return;
-  //       }
-  //     }
-  //   },
-  // },
-//   created() {
-//     console.log(this.treeList);
-//     // this.getTree();
-//     this.defaultListc = this.defaultList;
-//   },
-//   watch: {
-//     filterText(val) {
-//       this.$refs.tree.filter(val);
-//     },
-//     type() {
-//       this.defaultListc = this.defaultList;
-//       this.$forceUpdate();
-//     },
-//     defaultList() {
-//       this.$forceUpdate();
-//     },
-//     closeList() {
-//       this.$refs.tree.setCheckedNodes(this.closeList);
-//     },
-//   },
-// };
+        created() {
+            // this.getTree();
+            this.defaultListc = this.defaultList;
+        },
+        watch: {
+            filterText(val) {
+                this.$refs.tree.filter(val);
+            },
+            type() {
+                this.defaultListc = this.defaultList;
+                this.$forceUpdate();
+            },
+            defaultList() {
+                this.$forceUpdate();
+            },
+            closeList() {
+                this.$refs.tree.setCheckedNodes(this.closeList);
+            },
+        },
+    };
 </script>
 
 <style scoped lang="scss">
-.el-icon-caret-right {
-  color: #ccc;
-  margin: 0 5px;
-}
-.treebox {
-  border: 1px solid #ddd;
-}
-    ::v-deep .el-checkbox-group{
-        display: flex;
-        flex-direction: column;
-        align-items: baseline;
-        /* font-size: 38px; */
-        margin-left: 20px;
+    .el-icon-caret-right{
+        color: #ccc;
+        margin:0 5px;
+    }
+    .treebox {
+        border: 1px solid #ddd;
     }
 </style>