@gsp-sys/selectuser

通用选人组件：组织树导航 + 人员/岗位多选 + 按类型选择全员（通配授权）回显。

功能特性

• 组织树导航：懒加载组织树，支持关键字搜索定位、面包屑展示当前组织路径
• 人员/岗位多选：列表分页、关键字搜索、页内全选（跨页保持选择）
• 含子级开关：切换数据范围是否包含下级组织的人员/岗位
• 右侧已选区：岗位 + 人员合并/分类展示、单项删除、一键清空、岗位拖拽排序
• 过滤浮窗：按组织 / 已选人员岗位对当前列表过滤
• 选择全员（通配授权）：一键选择全部人员或全部岗位，返回 selectAll: true，由调用方映射为后端通配授权（如 auths: ['*']），人员/岗位数据量大时推荐
• 类型范围控制：通过 selectType 限定仅人员 / 仅岗位 / 人员+岗位

安装

npm i @gsp-sys/selectuser vue element-plus axios

依赖说明：vue 与 element-plus 是 peerDependencies，需消费方自行安装；axios 随包携带。

引入

import { UserPositionPickerDialog } from "@gsp-sys/selectuser";
import "@gsp-sys/selectuser/style.css";

组件依赖 element-plus，请确保项目已引入其全局样式后再使用。

基本用法

<script setup lang="ts">
import { ref } from "vue";
import { UserPositionPickerDialog } from "@gsp-sys/selectuser";

const showDialog = ref(false);

const handleSuccess = (result: {
  users: { id: string; name: string; code: string; orgId: string; orgName: string }[];
  posts: { id: string; name: string; code: string; orgId: string; orgName: string }[];
  selectAll: boolean;
}) => {
  if (result.selectAll) {
    // 选择全员 → 通配授权（如 auths: ['*']）
  } else {
    // 普通选择 → result.users / result.posts
  }
};
</script>

<template>
  <el-button @click="showDialog = true">选择人员</el-button>
  <UserPositionPickerDialog v-model="showDialog" @success="handleSuccess" />
</template>

Props

| Prop | 类型 | 默认值 | 说明 | |---|---|---|---| | modelValue | boolean | false | 弹窗显隐，配 v-model | | title | string | 选择人员/岗位 | 弹窗标题 | | selectType | 'user' \| 'position' \| 'all' | 'all' | 可选类型范围：'all' 人员+岗位（双页签）/ 'user' 仅人员 / 'position' 仅岗位 | | initialSelectedUsers | Array<{ id; name; code?; orgId?; orgName? }> | [] | 编辑回显：初始已选人员 | | initialSelectedPosts | Array<{ id; name; code?; orgId?; orgName? }> | [] | 编辑回显：初始已选岗位 | | initialSelectAll | boolean | false | 编辑回显：上次保存的是"选择全员"（通配授权） |

组件只在打开弹窗时读取一次 props，回显数据须在打开前准备好。

Events

| Event | 载荷 | 说明 | |---|---|---| | update:modelValue | boolean | 弹窗关闭 | | success | { users, posts, selectAll } | 点"确定"返回勾选结果，见下方返回结构 |

success 返回结构

interface SuccessPayload {
  users: SelectedItem[];   // 已选人员
  posts: SelectedItem[];   // 已选岗位
  selectAll: boolean;      // 是否"选择全员"
}

interface SelectedItem {
  id: string;
  name: string;
  code: string;
  orgId: string;
  orgName: string;
}

• selectAll === true：表示选择全部人员 / 全部岗位，此时 users、posts 均为空数组，应映射为通配授权（如 auths: ['*']）
• selectAll === false：普通勾选，users / posts 为具体已选项；两者都为空表示清空选择
• 无论 selectType 如何，selectAll: true 的返回语义统一，由调用方按自己的业务处理

类型范围（selectType）与全员模式

| selectType | 页签 | footer 按钮 | 确认弹窗文案 | 全员返回 | |---|---|---|---|---| | 'all'（默认） | 人员 + 岗位 | 选择全员（= 全部人员） | 确认将选择全部人员吗? | { users: [], posts: [], selectAll: true } | | 'user' | 仅人员 | 选择全员 | 确认将选择全部人员吗? | 同上 | | 'position' | 仅岗位 | 选择全部岗位 | 确认将选择全部岗位吗? | 同上 |

• 全员模式下，右侧已选区以"已选择全部人员 / 岗位"汇总标签展示，具体勾选被清空，点选具体项会被拦截提示
• 全员模式下"清空"按钮用于退出全员模式
• 弹窗打开过程中动态切换 selectType，组件会自动修正页签并退出与类型不符的全员模式

编辑回显

• 保存的是具体人员/岗位：打开前填 initialSelectedUsers / initialSelectedPosts
• 保存的是通配授权（如 auths: ['*']）：填 initialSelectAll="true"，或传 [{ id: '*', name: '*' }] 通配对象，二者等价；回显类型跟随 selectType（仅岗位模式下回显为"全部岗位"）
• 注意：组件只在打开弹窗时读取一次 props，回显数据须在打开前准备好

数据源

组件通过 organizationService 查询组织树、用户、岗位数据：

• getOrgTree(parentId?, layer?) / searchOrgTree(keyword)：组织树
• getUsers(orgId, page, size, includeChild) / searchUsers(keyword, page, size)：人员
• getPositions(orgId, page, size, includeChild) / searchPositions(keyword, page, size)：岗位

默认请求地址前缀为 /api/runtime/sys/v1.0（可通过 src/services/http.ts 中的 axios 配置调整 baseURL / token / 拦截器）。如对接的后端接口不同，可替换 organizationService 的实现（组件契约不变）。

构建与发布

npm run build:lib   # 产出 dist/(index.mjs | index.cjs | index.d.ts | style.css)
npm publish --access public

发布后消费方安装 @gsp-sys/selectuser 即可（见"安装/引入"章节）。

本地演示

npm install
npm run dev   # 演示页支持切换 selectType 查看三种模式

注意事项

• 组件依赖 element-plus，请在项目入口引入其全局样式后再使用
• withCredentials: true 表示接口携带 Cookie 鉴权，请确保网关/代理允许
• 开发环境需在 vite.config.ts 中配置 /api 代理转发到后端服务