zy-mpst v2.0.21

移动端选人组件

导出说明

组件导出 BizPersonSelector 和 { PersonSelector }

• BizPersonSelector 默认导出，带能用的交互和数据处理逻辑，需要使用选人组件的标准接口（或者返回标准数据格式的接口）
• PersonSelector 纯组件，不带任何内部逻辑和交互，需要做简单的二次封装，BizPersonSelector 就是基于这个封装的

普通业务可以使用BizPersonSelector，如果交互不一样，可以基于PersonSelector进行二次封装，不满足需求，可以找组件团队提需求

参数说明

BizPersonSelector

export interface IBizPersonSelectorProps {
  visible?: boolean; // 控制组件的显示隐藏
  contactUrl?: string; // 常用联系人接口地址，不传侧不加载常用联系人
  searchUrl?: string; // 搜索人的接口地址，必须要传，不传不能搜人
  value?: IPerson[]; // 选中的人，单选是长度为最大为1的数组，多选测长度不固定
  onChange?: (values: IPerson[]) => void; //受控组件的onChange， 选好人并确定的回调，可以在这里添加业务逻辑，比如不能选自己
  type?: TSelectorType; // multi | single 控制是多选还是单选
  onCancel?: () => void; // 取消，点击取消的回调
  lang?: TLang; // 多语言配置 {cancel, confirm, title}三个地方的值可以通过这个来传入，内置默认值
  blankItem: IBlankItem;
}

PersonSelector

export interface IPersonSelectorProps {
  type?: TSelectorType; // multi | single 控制是多选还是单选
  value?: IPerson[]; // 选中的人，单选是长度为最大为1的数组，多选测长度不固定
  data?: IPerson[]; // 选人组件展示的数据列表
  keyword?: string; // 搜索的关键字
  onChange?: (value: IPerson[]) => void; //受控组件的onChange， 选好人并确定的回调，可以在这里添加业务逻辑，比如不能选自己
  onSearch?: (keyword: string) => void; // 搜索回调，keyword受控，代表搜索框里的值
  onCancel?: () => void; // 点击取消按钮的回调函数
  lang?: TLang; // 多语言配置 {cancel, confirm, title}三个地方的值可以通过这个来传入，内置默认值
}

组件接受的数据格式说明

人员列表

人员列表接受的是 IPerson[] 的数组（PersonSelector的data属性），IPerson的定义如下

export interface IPerson {
  id: string | number; //人的唯一标识
  name: string; // 姓名
  avatar?: string; // 头像地址
  email: string; // 邮箱地址
  hasAvatar: boolean; // 是带头像
  color?: string; // 不带头像的话就显示这个背景色
}

空值

根据交互设计，组件需要提供可选的空值的选项，方便明确标识选择了空值。对于组件来说，空值属于业务需求下的场景，用来表示空值的id也未必一致，所以空值的设置是类似IPersion的 IBlankItem的数据项，并通过一个单独的参数来控制，传递这个参数就显示空值，不传递侧不显示。

IBlankItem的定义如下， 具体使用示例请看examples

export interface IBlankItem {
  id: string | number; // 空值的数据标识
  name: string; //头像上显示的名字
  fullName?: string; //列表上显示的名字，取不到会取name字段
  color?: string; // 头像上显示的背景色
}

选人组件设计/开发过程

• 接口外围，做为基础组件只接受数据，和行为相关的参数，尽可能成为一个纯组件。无任何业务相关逻辑
• 想内置接口的话，再基于基础组件做二次封装，这样基础组件的可复用性会更强
• 先定义组件渲染需要的数据结构，
• 实现基于设计数据的渲染
• 补充交互

一、定义最基础的数据结构

interface IPerson {
  id: string | number;
  name: string;
  avatar: string;
  email: string;
}

万一接口接受到的数据格式不一样怎么办，后面再说

对于选人组件来说，选择的，和展示人员，是个列表，列表应该用数组来表示。所以我们得到了第一个组件的属性 data 是 Person 的数组

interface IPersonSelectorProps {
  data: IPerson[];
}

基于这个数据，我们先把这个列表渲染出来