spfm-market-front/src/components/workDeptThree.vue

<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>
</template>

<script>
export default {
  props: ["defaultList", "type", "closeList", "treeList"],
  data() {
    return {
      userList: [],
      // treeList: [],
      opt: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultListc: [],
      loading: false,
      filterText: "",
      list: [],
    };
  },
//   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;
}
</style>