人员选择器组件

该组件仅适用于私有化 WPS365 版本

1. 组件概述

但凡功能对接涉及到“人”的流转、指定和管理，比如定制审核流程、定制文档权限，企业可以在定制过程中，使用 WPS 封装好的前端组件，快速获得人员选择功能

实现效果

人员选择器示意图：

依赖版本

私有化WPS365版本24-1a（含）以上

依赖系统

支持X86、XC

2. 使用指南

TIP

使用前需确保 mfPlugins 预装插件正确加载

👉 使用场景说明

场景

说明

页面表现

新建团队-邀请成员

以树形结构展示通讯录部门和人员
默认展开根节点下的一级部门，优先展示部门 ——> 成员
点击【关闭】按钮或右上角图标关闭当前弹窗
支持搜索部门/人员
可选择部门&成员类型
可多选成员

团队-添加成员

入口：

团队列表右键菜单「添加成员」——> 从联系人添加
团队列表右键菜单「团队设置」——> 从联系人添加

说明：

Tab包含「通讯录」和「常用」两部分
常用支持添加「自定义组」和管理自定义组
可多选成员，左侧勾选人员后，在右侧已选数据中展示对应的人员列表（按勾选顺序正序排列，越早勾选展示在越前面）及已选数量；
可选择部门，各级部门及其下成员均可勾选

团队-转让团队

入口：团队列表右键菜单「团队设置」——> 转让团队

说明：

Tab包含「本团队」和「通讯录」两部分
默认选中「本团队」Tab
「本团队」列表展示团队内所有成员，不展示当前拥有者；仅可单选。
切换到「通讯录」Tab，组织架构树支持展开至末级成员列表，仅可单选
「通讯录」Tab下，当前团队拥有者为已选择状态，不可取消勾选（Hover禁用状态）

团队根目录-文件权限

入口：团队列表右键菜单「文件权限」——> 从通讯录选择

说明：

根节点展示团队成员
团队成员中有「部门成员」则展示按部门授权
本团队和团队拥有者、已授予权限的成员默认选中且不可取消（Hover置灰）
搜索——仅可搜索到团队内成员
选中的成员，按选中顺序正序排列在左侧已选数据列表中
已选数据旁显示团队权限默认组合（由团队权限传参），可下拉切换

团队文件-文件权限

入口：团队文件列表右键菜单「文件权限」——> 从通讯录选择

说明：

Tab包含「通讯录」和「常用」两部分
「通讯录」Tab下展示企业通讯录组织架构树和团队成员列表
搜索——搜索接口支持搜索关联组织成员和woa群聊。搜索结果按照「部门」——「成员」——「群组」三个版块排序
选中的成员、部门、群组以及自定义组，按选中顺序正序排列在左侧已选数据列表中（越早选的排列在越前面），已选择数量为成员+部门之和；
已选数据旁显示团队权限默认组合（由团队权限传参），可下拉切换；

分享-邀请协作/我的云文档-文件权限

入口：

我的云文档和团队文件右键菜单「分享」——> 从通讯录选择
我的云文档文件列表右键菜单「文件权限」——> 从通讯录选择

说明：

列表展示同「团队-添加成员」，展示组织架构树和团队成员
已选数据旁显示分享权限模板，可下拉切换；
未选择人员/部门时，「确定」按钮置灰不可点击，选择后高亮可点击
搜索——搜索接口支持搜索关联组织成员和woa群聊。搜索结果按照「部门」——「成员」——「群组」三个版块排序

提及组件-AT联系人

入口：WebOffice插件AT，文字、表格、演示、文档内输入@符号唤起通讯录选择器

说明：

列表仅展示通讯录树，可逐层展开，仅可勾选通讯录成员，允许多选
未选择人员时，「确定」按钮置灰不可点击，选择后高亮可点击；点击「确定」，则关闭选择器，并将所选择的成员数据返回给AT插件
仅支持搜索成员，不支持搜索部门和关联组织成员

表格-协作-保护区域（插件）

保护区域添加指定人，需要做成前端插件，入口为「添加成员」，点击，弹出成员选择器面板；

说明：

列表仅展示通讯录树，可逐层展开，仅可勾选通讯录成员，允许多选
未选择人员时，「确定」按钮置灰不可点击，选择后高亮可点击；点击「确定」，则关闭选择器，并将所选择的成员数据返回给AT插件
仅支持搜索成员，不支持搜索部门和关联组织成员

表单设置-仅选中的联系人可填

入口：表单应用——设置——仅选中的联系人可填

说明：

Tab包含「通讯录」和「常用」两部分
常用支持添加「自定义组」和管理自定义组
可多选成员，左侧勾选人员后，在右侧已选数据中展示对应的人员列表（按勾选顺序正序排列，越早勾选展示在越前面）及已选数量；
可选择部门，各级部门及其下成员均可勾选

企业通讯录

入口：个人头像下拉面板 ——> 「通讯录」——> 弹出企业通讯录弹窗

说明：

以树形结构展示通讯录部门和人员
点击【关闭】按钮或右上角图标关闭当前弹窗
支持搜索部门/人员，搜索规则与「团队-添加成员」一致
部门和人员不支持选择

👉 能力

SDK sdk.components.memberSelectorModal

👉 使用方法

typescript

const memberSelector = sdk.components?.memberSelectorModal;
let destory: any;
destory = memberSelector?.render({
  visible: true,
  from: "AddGroupMember", // 默认为 AddGroupMember
  handleClose: () => destory(),
  handleSubmit: (items: any) => console.log(items),
});

👉 传参定义

TIP

注意当选择器类型来源非默认情况下，部分参数为必填以确保正常使用

typescript

export enum MEMBERSELECTOR_TYPE {
  CreateTeamModal = "CreateTeamModal", // 创建团队
  AddGroupMember = "AddGroupMember", // 添加成员
  AddMemberFromGroup = "AddMemberFromGroup", // 从团队范围内添加成员
  AddMemberInCustomGroup = "AddMemberInCustomGroup", // 从团队范围内添加成员-团队自定义组
  AddGroupMemberNoDept = "AddGroupMemberNoDept", // 添加成员但是不能转让给部门
  TransferFile = "TransferFile", // 转让文档所有权
  PermissionModal = "PermissionModal", // 文档权限
  ShareFileModal = "ShareFileModal", // 分享
  AreaPermission = "AreaPermission", // 表格区域权限
  AT = "AT", // 艾特人
  TransferGroup = "TransferGroup", // 转让团队
  UserCenter = "UserCenter", // 用户中心
  AddCustomGroupMember = "AddCustomGroupMember", // 自定义组
}

type ID = string;

interface IExtra {
  width?: number | string; // SDK props
  styles?: React.CSSProperties; // SDK props
  container?: string | HTMLElement; // SDK props
}

// 文件信息
interface IFileInfo {
  id: ID;
  driveId: ID;
  name: string;
  linkId?: string;
  type?: string;
  isShare?: boolean;
}

// 团队信息
export interface IGroupInfo {
  id?: ID;
  driveId?: ID;
  type?: string;
  name?: string;
  isGroup?: boolean;
  userRole?: string;
  isAdminFilePerm?: boolean;
}

// 团队成员
export interface IGroupMember {
  avatar: String;
  id: ID;
  nickName: String;
  corpId?: ID;
  status?: String;
  role?: String;
  newRole?: String;
}

export interface IUser {
  id: ID;
  key?: string;
  type?: string;
  parentId?: ID;
  hasJoined?: boolean;
  idPath?: string;
  absPath?: string;
  loginName?: string;
  accountId?: ID;
  tagId?: ID;
  driveId?: ID;
  selectable?: boolean;
  avatar?: string[] | string;
  nickName?: string;
  name?: string;
  isGroup?: boolean;
  highlight?: object | string;
  disabled?: boolean; // 禁止勾选
  isSelected?: boolean; // 勾选状态
  isLeaf?: boolean; // 树形结构下的叶子结点
  isCustomLoadMoreLeaf?: boolean; // 是否是【加载更多】自定义节点
  departmentPath?: string; // 部门路径
  isNeedAdd?: boolean; // 文档权限搜索到团队外的人需要添加到团队
  isExternalUser?: boolean;
  inVisibility?: boolean;
  nonSelected?: boolean;
  groupType?: string;
  companyId?: ID;
  status?: string;
  children?: IUser[];
  showGroupAvatar?: boolean;
  // 账号身份
  targetType?: string;
}

export interface IChooseItem {
  id: ID;
  type: string;
  key?: string;
  groupType?: string;
}

export interface IShareFileUser {
  userId?: ID;
  companyId?: ID;
  deptId?: ID;
  mType: string;
}

interface ISubjects {
  subjectId: ID;
  subjectName: string;
  subjectType: number;
}

export interface IPermissionUser {
  templateId: number;
  templateName: string;
  subjects: ISubjects[];
}

export interface ICustomMember {
  id: ID;
  name: string;
  avatar: string;
  absPath: string;
}

interface IMemberSelectorProps {
  visible: boolean;
  from?: (typeof MEMBERSELECTOR_TYPE)[keyof typeof MEMBERSELECTOR_TYPE]; // 成员选择器类型来源， 默认AddGroupMember
  extra?: IExtra;
  single?: boolean; // 是否启动单选模式
  mask?: boolean; // 是否使用antd Mask
  maxCount?: number; // 一次可选最大数量
  deptCanSelect?: boolean; // 是否可以选择部门
  file?: IFileInfo;
  group?: IGroupInfo;
  choosedUsers?: IUser[]; // 暂选成员列表，可操作
  selectedRows?: IChooseItem[]; // 已有用户, 禁止选择
  isSearchPartner?: boolean; // 是否可以搜索到关联组织成员
  isSearchWoa?: boolean; // 是否可以搜索到woa群聊
  currentUserdisabled?: boolean; // 是否禁用当前登录用户
  showNoticeCheckbox?: boolean; // 是否展示“消息提醒对方” checkbox
  defaultChecked?: boolean; // '消息提醒对方'checkbox的默认值
  tabList?: Array<{ key: string; label: JSX.Element }>; // tab，可选
  handleTabChange?: (tab: string) => void; // tab切换事件回调，可选
  handleClose: (visible: boolean) => void;
  handleSubmit: (
    items: IUser[] | IShareFileUser[] | IPermissionUser,
    failList?: IGroupMember[]
  ) => void;
  customMemberList?: ICustomMember[]; // 自定义成员列表
  chooseMemberMaxCount?: number; // 限制选择数量
}