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

<script lang="ts" setup name="GroupSelector">
import { getGroupView } from '@/api/system/groupApi'
const props = withDefaults(defineProps<{
  modelValue: number
}>(), {
  modelValue: 0,
})
const emit = defineEmits(['update:modelValue'])
interface TreeNode {
  id: number
  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 getGroupView()
  state.dataList = data
  // 初始化第一个给tree
  // emit('update:modelValue', data[0].groupId)
}

const groupId = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  },
})
onMounted(() => {
  getData ()
})
const selectProps = {
  value: 'groupId',
}
</script>

<template>
  <el-tree-select
    v-model="groupId"
    check-strictly
    :props="selectProps"
    :data="state.dataList"
    style="width: 100%"
    filterable
    placeholder="请选择部门"
    default-expand-all
  />
</template>