xps-web-v5/src/components/GroupSelector/index.vue

<script lang="ts" setup name="GroupSelector">
import { getGroupByList } from '@/api/system/groupApi'
import { packageTreeData } from '@/utils/tool'

const emit = defineEmits(['update:modelValue'])
interface TreeNode {
  label: string
  groupId: number
  children?: TreeNode[]
}

const state = reactive({
  loading: false,
  groupId: 0,
  dataList: [] as TreeNode[],
})

const getData = async () => {
  state.loading = true
  const { data } = await getGroupByList()

  state.dataList = packageTreeData({
    data,
    id: 'groupId',
  })
}

watch(() => state.groupId, (newValue) => {
  emit('update:modelValue', newValue)
})

onMounted(() => {
  getData ()
})
</script>

<template>
  <el-tree-select
    v-model="state.groupId"
    :data="state.dataList"
    style="width: 100%"
    filterable
    placeholder="请选择部门"
    :render-after-expand="false"
  />
</template>