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

<template>
  <div class="treebox" v-loading="loading">
    <!-- <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input> -->
    <el-tree
      :default-expand-all="expandAll"
      :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 {
      expandAll: false,
      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,
            loginNameStr:list[i].loginNameStr,
            loginNoStr: list[i].loginNoStr,
          });
        }
      }
      this.$emit("changeTree", 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();
    // console.log(this.treeList);
    this.defaultListc = this.defaultList;
  },
  watch: {
    treeList(newVal, oldVal) {
      console.log(newVal);
      this.$nextTick(() => {
        if (newVal.length <= 1) {
          this.isexpand = true;

          for (
            var i = 0;
            i < this.$refs.tree.store._getAllNodes().length;
            i++
          ) {

            this.$refs.tree.store._getAllNodes()[i].expanded = true;
          }
        } else {
          for (
            var i = 0;
            i < this.$refs.tree.store._getAllNodes().length;
            i++
          ) {

            this.$refs.tree.store._getAllNodes()[i].expanded =false;
          }
        }
      });
    },
    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">
// ::v-deep .el-tree--highlight-current {
//
// }
::v-deep .el-tree--highlight-current {
  height: 500px;
}
.el-icon-caret-right {
  color: #ccc;
  margin: 0 5px;
}
.treebox {
  border: 1px solid #ddd;
}
</style>