GEAR-OA/gear-ui3/src/components/UserSelect/index.vue

<template>
  <el-tree-select
    :model-value="modelVal"
    :data="treeData"
    style="width: 300px;"
    :props="defaultProps"
    searchable
    clearable
    v-bind="$attrs"
    @update:model-value="updateValue"
    @change="handleChange"
  />
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { listDept } from '@/api/system/dept'
import { listUser } from '@/api/system/user'

defineOptions({
  name: 'UserSelect'
})

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: undefined
  },
  // 是否只选择用户，false 表示部门也可以选择
  userOnly: {
    type: Boolean,
    default: false
  },
  // 是否多选
  multiple: {
    type: Boolean,
    default: false
  }
})

const treeData = ref([])
const defaultProps = {
  value: 'id',
  label: 'label',
  children: 'children'
}

// 加载部门和用户数据
const loadData = async () => {
  try {
    // 获取部门列表
    const { data: deptList } = await listDept()
    // 获取用户列表
    const { rows: userList } = await listUser()

    // 转换部门数据
    const transformedDeptList = deptList.map(dept => ({
      id: `dept_${dept.deptId}`,
      label: dept.deptName,
      parentId: dept.parentId === 0 ? null : `dept_${dept.parentId}`,
      type: 'dept'
    }))

    // 转换用户数据
    const transformedUserList = userList.map(user => ({
      id: `${user.userId}`,
      label: user.nickName || user.userName,
      parentId: `dept_${user.deptId}`,
      type: 'user'
    }))

    // 如果只选择用户，过滤掉部门节点
    let allNodes = props.userOnly 
      ? transformedUserList 
      : [...transformedDeptList, ...transformedUserList]

    // 构建树形结构
    treeData.value = buildTree(allNodes)
  } catch (error) {
    console.error('加载数据失败:', error)
  }
}

// 构建树形结构
const buildTree = (nodes) => {
  const map = {}
  const result = []

  // 创建节点映射
  nodes.forEach(node => {
    map[node.id] = { ...node, children: [] }
  })

  // 构建树形关系
  nodes.forEach(node => {
    const current = map[node.id]
    if (node.parentId) {
      const parent = map[node.parentId]
      if (parent) {
        parent.children.push(current)
      }
    } else {
      result.push(current)
    }
  })

  return result
}

// 使用计算属性处理双向绑定
const modelVal = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})

// 处理值更新
const updateValue = (value) => {
  modelVal.value = value
}

// 处理选择变化
const handleChange = (value) => {
  emit('change', value)
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.el-tree-select {
  width: 100%;
}
</style>