@dpzj/select-user

Vue 2 + Element UI 人员选择弹窗。支持组织树、分组、单选/多选。

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

monorepo 说明：本包是 UI 实现（Vue2 + Element UI），核心逻辑在 @dpzj/select-user-core。同家族还有 Vue3 + Element Plus / Ant Design Vue 包。

安装

npm install @dpzj/select-user

Peer dependencies（需宿主已安装）：

npm install vue@2 element-ui

快速使用

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

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

export default {
  components: { SelectUser },
  data() {
    return {
      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: () => this.currentUser.deptId
      }
    }
  },
  methods: {
    async pick() {
      const users = await this.$refs.selectUser.open({
        multiple: true,
        deptId: this.currentUser.deptId,
        selected: [],
        sameDeptOnly: false
      })
      if (!users) return
      console.log(users)
    }
  }
}
</script>

全局注册：

import Vue from 'vue'
import SelectUser, { install } from '@dpzj/select-user'

Vue.component(SelectUser.name, SelectUser)
// 或
Vue.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 this.$refs.selectUser.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 this.$refs.selectUser.showthis(
  'once',          // 'once' 单选，其它多选
  deptId,
  '',
  selectedList,
  false            // sameDeptOnly
)

事件

| 事件 | 参数 | |---|---| | 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'

core 工具函数从本包 re-export，业务侧可直接使用。

主题

: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:vue2

License

MIT