# 仿钉钉人员选择器

# 样例:

cover

# 安装命令

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 点击取消按钮 清空右侧列表选中 -