@dpzj/select-user-vue3-element

Vue 3 + Element Plus 人员选择弹窗。API 与 @dpzj/select-user 一致。

组件不内置任何后端接口，通过 adapters 注入数据源。

monorepo 说明：本包是 UI 实现（Vue3 + Element Plus），核心逻辑在 @dpzj/select-user-core。

安装

npm install @dpzj/select-user-vue3-element

Peer dependencies（需宿主已安装）：

npm install vue@3 element-plus @element-plus/icons-vue

宿主需全局或按需注册 Element Plus，并引入样式：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

快速使用

Composition API

<template>
  <div>
    <el-button @click="pick">选择人员</el-button>
    <select-user ref="selectUser" :adapters="adapters" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import SelectUser from '@dpzj/select-user-vue3-element'

const selectUser = ref(null)
const adapters = {
  getOrgTree: async () => {
    const res = await api.getOrgTree()
    return res.data
  },
  getDeptUsers: async ({ deptId, name }) => {
    const res = await api.getDeptUsers({ deptId, name })
    return res.data
  },
  getGroups: async () => {
    const res = await api.getGroups()
    return res.data
  },
  getDefaultDeptId: () => currentUser.deptId
}

async function pick() {
  const users = await selectUser.value.open({
    multiple: true,
    deptId: currentUser.deptId,
    selected: [],
    sameDeptOnly: false
  })
  if (!users) return
  console.log(users)
}
</script>

Options API

<script>
import SelectUser from '@dpzj/select-user-vue3-element'

export default {
  components: { SelectUser },
  data() {
    return {
      adapters: {
        getOrgTree: async () => api.getOrgTree(),
        getDeptUsers: async ({ deptId, name }) => api.getDeptUsers({ deptId, name }),
        getGroups: async () => api.getGroups(),
        getDefaultDeptId: () => this.currentUser.deptId
      }
    }
  },
  methods: {
    async pick() {
      const users = await this.$refs.selectUser.open({
        multiple: true,
        deptId: this.currentUser.deptId,
        selected: []
      })
      if (!users) return
      console.log(users)
    }
  }
}
</script>

全局注册：

import { createApp } from 'vue'
import SelectUser, { install } from '@dpzj/select-user-vue3-element'

const app = createApp(App)
app.component(SelectUser.name, SelectUser)
// 或
app.use({ install })

Adapters

| 方法 | 必填 | 说明 | |---|---|---| | getOrgTree() | 是 | 组织树。节点至少含 id、name，子节点 children | | getDeptUsers({ deptId, name }) | 是 | 部门下人员列表 | | getGroups() | 否 | 个人群组。项可含 groupName、groupUserList | | getDefaultDeptId() | 否 | 打开时默认部门 id |

返回值支持：

• 直接数组
• { data: [] }
• { data: { list: [] } }
• { list: [] }

人员字段

| 标准字段 | 兼容别名 | |---|---| | id / userId | 互相兜底 | | username | userCode | | nickname | userName |

API

open(options)（推荐）

const users = await selectUserRef.open({
  multiple: true,       // 默认 true；false 为单选
  deptId: 'dept-1',     // 初始部门
  userRole: '',         // 岗位过滤（匹配 postIds）
  selected: [],         // 回显已选
  sameDeptOnly: false   // true 时组织树裁剪到当前部门
})
// 确定 => Person[]
// 取消 => null

showthis(type, departId, userRole, personList, isSameDept)（兼容旧项目）

const users = await selectUserRef.showthis(
  'once',
  deptId,
  '',
  selectedList,
  false
)

事件

| 事件 | 参数 | |---|---| | confirm | 已选人员数组 | | cancel | 无 |

Props

| Prop | 类型 | 默认 | 说明 | |---|---|---|---| | title | String | 选择人员 | 弹窗标题 | | adapters | Object | 必填 | 数据适配器，须含 getOrgTree、getDeptUsers |

导出

import SelectUser, {
  install,
  getPersonKey,
  normalizePerson,
  normalizePersonList,
  unwrapList,
  filterTreeByChildId,
  filterPersonsByKeyword,
  filterPersonsByRole,
  mapGroupNodes,
  mapGroupUsers,
  toggleSelectedUsers,
  mergeSelectAll,
  isPersonSelected,
  resolveOpenOptions
} from '@dpzj/select-user-vue3-element'

主题

:root {
  --primary-color: #1765ff;
}

相关包

| 包 | 说明 | |---|---| | @dpzj/select-user | Vue2 + Element UI | | @dpzj/select-user-core | 框架无关核心逻辑 | | @dpzj/select-user-vue3-element | Vue3 + Element Plus（本包） | | @dpzj/select-user-vue3-antd | Vue3 + ant-design-vue |

开发

在 monorepo 根目录：

npm install
npm run build
# 或
npm run build:vue3-element

License

MIT