kd-aiot-frontend-eam/src/components/CommomSelect/dept-select.vue

<!-- 部门树形选择下拉框 -->
<template>
  <ele-tree-select
    clearable
    filterable
    :value="value || ''"
    :data="treeData"
    label-key="name"
    value-key="id"
    ref="treeSelect"
    default-expand-all
    size="medium"
    :placeholder="placeholder"
    @input="updateValue"
    v-on="$listeners"
    v-bind="$attrs"
    @change="changeChoose"
  />
</template>

<script>
  import { listOrganizations } from '@/api/system/organization';
  export default {
    props: {
      // 选中的数据(v-model)
      value: [Number, String],
      // 提示信息
      placeholder: {
        type: String,
        default: '请选择'
      }
    },
    data() {
      return {
        treeData: []
      };
    },
    created() {
      this.getData();
    },
    methods: {
      async getData(parmas = {}) {
        const data = await listOrganizations(parmas);
        this.treeData = this.$util.toTreeData({
          data: data || [],
          idField: 'id',
          parentIdField: 'parentId'
        });
      },
      /* 更新选中数据 */
      updateValue(value) {
        this.$emit('input', value);
      },

      changeChoose(val) {
        this.$emit(
          'changeGroup',
          val,
          this.$refs.treeSelect.getNodeByValue(val)
        );
      }
    }
  };
</script>