Foshan4A4.0/src/components/msgTree/index.vue

<!--
 * @Author: zk
 * @Date: 2022-02-09 15:47:09
 * @LastEditTime: 2022-04-11 16:05:37
 * @LastEditors: your name
 * @Description: 用户组树
-->
<template>
  <div class="userGroupTree">
    <div class="head">
      <p>{{ title }}</p>
    </div>
    <div :class="type ? 'radioBg':''" class="content">
      <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
        <el-tree ref="tree" :data="data" show-checkbox :default-props="defaultProps" :default-expanded-keys="defaultExpandedKeys" node-key="GroupId" highlight-current @check="currentChange">
          <span slot-scope="{ data }" :title="data.GroupName" class="custom-tree-node">
            {{ data.GroupName }}
          </span>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { GetGroupTree } from '@/api/AccountGroup'
import { translateDataToTreeAll } from '@/utils/validate'
export default {
  name: 'UserGroupTree',
  props: {
    title: {
      // 标题
      type: String,
      default: ''
    },
    checkedKeys: {
      // 已选中
      type: Array,
      default: () => []
    },
    type: {
      type: Boolean,
      default: false
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: 'children',
        label: 'GroupName'
      })
    },
    checkDisabled: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      data: [], // tree数据
      checkedList: [], // 已选中数据
      pageIndex: 1,
      pageSize: 20,
      defaultExpandedKeys: [-1],
      getExpandedKeysStep: [false, false],
      userGroupList: [],
    }
  },
  watch: {
    checkedKeys: {
      handler (val) {
        this.checkedList = val
        this.$refs.tree.setCheckedKeys(val)
        this.getExpandedKeysStep.splice(0, 1, true)
      },
      deep: true
    },
    getExpandedKeysStep: {
      handler (val) {
        if (val.every(v => v)) {
          this.defaultExpandedKeys = [-1]
          this.checkedKeys.forEach(key => {
            if (key !== -1) {
              const group = this.userGroupList.find(item => item.GroupId == key)
              const GroupUpid = group.GroupUpid
              if (!this.defaultExpandedKeys.includes(GroupUpid)) {
                this.defaultExpandedKeys.push(GroupUpid)
              }
            }
          })
        }
      },
      deep: true
    }
  },
  created () {
    this.getGroupTree()
  },
  methods: {
    // 复选框选中
    currentChange (data, isChecked) {
      if (this.type) {
        const { GroupId } = data
        this.$emit('getTreeData', this.$refs.tree.getCheckedNodes())
        if (isChecked) {
          const checked = [GroupId]
          this.$refs.tree.setCheckedKeys(checked)
        }
      } else {
        const arr = this.$refs.tree.getCheckedNodes()
        this.$emit('getTreeData', arr)
      }
    },
    async getGroupTree () {
      const result = await GetGroupTree({
        QueryName: '',
        PageIndex: this.pageIndex,
        PageSize: this.pageSize
      })
      const datas = result.returnData
      this.userGroupList = datas
      this.getExpandedKeysStep.splice(1, 1, true)
      const tree = translateDataToTreeAll(datas, 'GroupUpid', 'GroupId')
      const setDisabled = (tree, key) => {
        if (key) {
          tree.find(node => {
            if (node.GroupId === key) {
              node.disabled = true
              node.children?.length && setDisabled(node.children)
              return true
            } else if (node.children?.length) {
              setDisabled(node.children, key)
            }
          })
        } else {
          tree.forEach(node => {
            node.disabled = true
            node.children?.length && setDisabled(node.children)
          })
        }
      }
      this.checkDisabled && setDisabled(tree, this.checkDisabled)
      const obj = {
        AuthCount: 0,
        GroupId: -1,
        GroupName: this.accountGroupType,
        GroupUpid: 0,
        QueryTarget: 0,
        Status: 0,
        UserCount: 0,
        disabled: true,
        children: tree
      }
      this.data = [obj]
    }
  }
}
</script>

<style lang="scss" scoped>
.userGroupTree {
  width: 100%;
  height: 100%;
  background: #ffffff;
  -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
  box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
  border-radius: 16px;
  padding: 0 32px 0 32px;
  .head {
    width: 100%;
    height: 90px;
    display: flex;
    align-items: center;
    p {
      margin: 0;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #303133;
    }
  }
  ::v-deep .content {
    width: 100%;
    height: calc(100% - 112px);
    box-sizing: border-box;

    .custom-tree-node {
      margin-left: 10px;
      font-size: 14px;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-family: Microsoft YaHei;
    }
  }
  ::v-deep .radioBg {
    .el-checkbox__inner {
      border-radius: 50%;
      &::after {
        width: 5px;
        height: 5px;
        background: #ffffff;
        border-radius: 50%;
        top: 3px;
        left: 3px;
      }
    }
  }
}
</style>