controlPc/src/components/tree/agentChanell.vue

<template>
  <div class="tree">
    <a-tree
      v-if="treeData && treeData.length > 0 && type == 'a'"
      :tree-data="treeData"
      :title="'11'"
      :replaceFields="replaceFields"
      @select="onSelect"
      :checkable="checkable"
      @check="onCheck"
      v-model="checkList"
      :auto-expand-parent="autoExpandParent"
      ref="tree"
    >
      <template slot="custom" slot-scope="item">
        <span>{{ item }}</span>
        <!-- <span style="color: #f50">({{ item.num }})</span> -->
      </template>
    </a-tree>
    <a-tree
      v-if="userTreeData && userTreeData.length > 0 && type == 'b'"
      :tree-data="userTreeData"
      :title="'11'"
      :replaceFields="replaceFields"
      @select="onSelect"
      :checkable="checkable"
      @check="onCheck"
      v-model="checkList"
      :auto-expand-parent="autoExpandParent"
      ref="tree"
    >
      <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,
    },
    type: {
      default: true,
    },
    // defaultCheckList: {
    //   default: [],
    // },
  },
  data() {
    return {
      treeData: [],
      userTreeData: [],
      replaceFields: {
        children: "children",
        title: "name",
        key: "id",
      },
      checkList: [],
      autoExpandParent: true,
      expandedKeys: [],
    };
  },

  computed: {
    ...mapState("setting", ["userInfo"]),
  },
  watch: {
    // type(val) {
    //   //
    //   console.log(val);
    // },
  },
  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.findAgentChanellTree({}).then((res) => {
        if (res.data.code === 200) {
          this.$emit("showTab", res.data.data.type);
          this.userTreeData = res.data.data.userList;

          this.treeData = res.data.data.deptList;
        }
      });
    },

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

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