# 仿钉钉人员选择器
# 样例:
# 安装命令
npm run widgets member-picker
1
执行命令后,工具生成在项目的 ".my/widgets/member-picker"
路径下;
生成文件目录如下:
auto-complete.vue
core.vue
(选择器组件)index.vue
(结合选择器的表单组件)input-area.vue
org-list.vue
MemberPicker 提供两个引用方式:
- 引用 “index.vue” , 结合了表单 和 弹窗 的选择器功能,可以直接使用
- 引用 “core.vue”, 选择器核心功能(弹窗内),可以自行使用
# 代码示例
# 基础用法
引用 “index.vue”
# 表单用法
引用 “index.vue”; 在my-form 使用时,需结合“my-form-custom” 容器, 且手动设置 width="100%"。并监听“change”事件与“my-form”进行数据绑定
# 自定义选中结果
引用 “index.vue”, 自定义选中结果 需要手动调用member-picker的 "openPicker"打开弹窗 和 “selRemove” 删除选中
# 单独pickerCore组件的用法
引用 “core.vue”
# 属性参数
# 表单弹窗参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 用作v-model双向绑定 | array | — | [] |
type | 弹窗的打开方式 | string | dialog / popover | dialog |
fieldPropsMap | 接口返回人员列表字段映射(作用于表单的显示标签中) | object | - | { name: 'name', id: 'id' } |
dialogProps | 弹窗配置参数 | object | - | - |
popProps | popover 配置参数 | object | - | - |
# picker参数
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
submitBtn | 控制是否显示提交、取消按钮 | boolean | — | true |
personPropMap | 接口返回人员列表字段映射 | object | — | { name: 'name', id: 'id', cardNo: 'cardNo' } |
multiple | 是否多选 | boolean | — | true |
showOrgList | 是否结合部门进行查询(显示右侧组织列表) | boolean | — | true |
searchPerson | 通过搜索异步查询人员函数,必传,参数为keyword, 返回输出人员列表的 Promise对象 | function | — | - |
loadOrg | 异步获取初始部门树的函数,必传,返回 输出组织架构树 的 Promise对象 | function | — | - |
loadOrgChildren | 异步获取各个子部门树的函数(用于懒加载),选传,返回 输出 子级部门 的 Promise对象 | function | — | - |
loadUser | 根据部门信息异步获取部门成员的函数,必传,返回 输出 部门成员数组 的 Promise对象 | function | — | - |
orgPropMap | 接口返回部门数据字段映射 | object | — | {name: 'label', id: 'id', children: 'children', parentId: 'parentId'} |
# 其他参数
member-picker 继承 my-tag-input 参数
# API method
# Picker (整体组件)方法
参数 | 说明 | 参数 | 输出 |
---|---|---|---|
openPicker | 打开弹窗(dialog)的函数 | - | - |
selRemove | 删除标签的函数 | index | - |
# PickerCore (选择器组件) 方法
参数 | 说明 | 参数 | 输出 |
---|---|---|---|
getSelctPersons | 获取选中人员 | - | 选中人员数据 |
getSelectDept | 通过API获取选中部门 | - | 选中部门数据 |
# event 事件
参数 | 说明 | 传参 |
---|---|---|
change | 表单数据变化的事件 | 变化的数据 |
submit | 点击提交按钮 获取当前人员和部门 | - |
close | 点击取消按钮 清空右侧列表选中 | - |
← dict 全局字典管理 部门人员关联选择器 →