kd-aiot-frontend/src/components/authSelection/index.vue

<template>
  <div>
    <ele-tree-select
      clearable
      :data="deptTreeList"
      v-model="selectVal"
      valueKey="id"
      labelKey="name"
      :size="size"
      :show-checkbox="true"
      :check-strictly="true"
      multiple
      collapseTags
      filterable
      placeholder="请选择"
      default-expand-all
    />
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';

  export default {
    name: 'index',
    model: {
      prop: 'value',
      event: 'updateVal'
    },
    props: {
      value: {
        type: [String, Array],
        default: ''
      },
      dataType: {
        type: String,
        default: 'String'
      },
      size: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        deptTreeList: []
      };
    },
    computed: {
      ...mapGetters(['user']),
      selectVal: {
        set(val) {
          switch (this.dataType) {
            case 'Array':
              this.$emit('updateVal', val);
              break;
            default:
              this.$emit('updateVal', val.join(','));
          }
        },
        get() {
          switch (this.dataType) {
            case 'Array':
              return this.value || [];
            default:
              return this.value ? this.value.split(',') : [];
          }
        }
      }
    },
    mounted() {
      this.deptTreeList = this.$util.toTreeData({
        data: this.user?.authorityDept?.groupList || [],
        idField: 'id',
        parentIdField: 'parentId'
      });
    }
  };
</script>

<style scoped lang="scss"></style>