controlPc/src/components/tree/agentTree.vue

<template>
  <div class="tree">
    <a-tree
      v-if="treeData && treeData.length > 0"
      :tree-data="treeData"
      :title="'11'"
      :replaceFields="replaceFields"
      @select="onSelect"
      :checkable="checkable"
      @check="onCheck"
      v-model="checkList"
      :auto-expand-parent="autoExpandParent"
      :expanded-keys="expandedKeys"
      @expand="onExpand"
      ref="tree"
      :load-data="onLoadData"
    >
      <template slot="custom" slot-scope="item">
        <span>{{ item }}</span>
        <!-- <span style="color: #f50">({{ item.num }})</span> -->
      </template>
    </a-tree>
  </div>
</template>
      
      <script>
// import mixin from "../../minins/mixin";
import { mapState } from "vuex";
export default {
  name: "FormRow",
  //   mixins: [mixin],
  props: {
    checkable: {
      default: false,
    },
    // defaultCheckList: {
    //   default: [],
    // },
  },
  data() {
    return {
      treeData: [],
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
      },
      checkList: [],
      autoExpandParent: true,
      expandedKeys: [],
    };
  },
  computed: {
    ...mapState("setting", ["userInfo"]),
  },
  watch: {},
  created() {},
  mounted() {
    this.getUserTree();
  },
  methods: {
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      //expandedKeys
      this.autoExpandParent = true;
    },
    setExpandKys(item) {
      this.$nextTick(() => {
        // this.$refs.tree.expandedKeys = ["99D17"];
        // this.$refs.tree.defaultExpandedKeys = ["99D17"];
        // console.log(this.$refs.tree);
        // this.expandedKeys = ["99D17"];
        // this.checkList = ["99D17"];
        this.$API.sysManage
          .getUserItem({
            userId: item.userId,
          })
          .then((res) => {
            if (res.data.code === 200) {
              this.expandedKeys = res.data.data.deptIds;
              this.checkList = res.data.data.deptIds;
            }
          });
      });
    },
    getUserTree() {
      // console.log(this.userInfo);
      this.$API.business.findNextAgentTree({}).then((res) => {
        if (res.data.code === 200) {
          this.treeData = res.data.data;
        }
      });
    },
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        this.$API.business
          .findNextAgentTree({ pid: treeNode.eventKey })
          .then((res) => {
            if (res.data.code === 200) {
              treeNode.dataRef.children = [...res.data.data];
              //   this.treeData = [];
              this.treeData = [...this.treeData];
              resolve();
            }
          });
      });
    },

    onSelect(keys) {
      this.$emit("getList", keys[0]);
    },
    onCheck(checkedKeys) {
      this.$emit("checkTree", checkedKeys);

      // this.checkedKeys = checkedKeys;
    },
  },
};
</script>
      
    <style lang="less" scoped>
.tree {
  height: 900px;
  overflow-y: auto;
}
</style>