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

<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"
      :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 {
      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",
        },
        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();
    },
  },
  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;
}
</style>