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

<!--
 * @Author: zk
 * @Date: 2022-02-09 15:47:09
 * @LastEditTime: 2022-03-02 10:58:29
 * @LastEditors: your name
 * @Description: 用户组树
 * @FilePath: \Foshan4A4.0\src\components\usergrouptree\index.vue
-->
<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 :check-strictly="true" :default-props="defaultProps" :expand-on-click-node="false" node-key="GroupId" highlight-current @check-change="currentChange">
          <span slot-scope="{ data }" 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: Boolean,
      default: false
    }
  },
  data () {
    return {
      data: [], // tree数据
      checkedList: [], // 已选中数据
      pageIndex: 1,
      pageSize: 20
    }
  },
  watch: {
    checkedKeys: {
      handler (val) {
        this.checkedList = val
        this.$refs.tree.setCheckedKeys(val)
      },
      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
      if (this.checkDisabled) {
        datas.forEach(data => {
          data.disabled = true
        })
      }
      const tree = translateDataToTreeAll(datas, 'GroupUpid', 'GroupId')
      const obj = {
        AuthCount: 0,
        GroupId: -1,
        GroupName: '系统用户组',
        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;
    }
  }
  ::v-deep .radioBg {
    .el-checkbox__inner {
      border-radius: 50%;
      &::after {
        width: 5px;
        height: 5px;
        background: #ffffff;
        border-radius: 50%;
        top: 3px;
        left: 3px;
      }
    }
  }
}
</style>