# 部门人员关联选择器
# 使用场景
与“仿钉钉人员选择器（member-picker）”组件类似，"member-picker"侧重选择人员，"org-member-picker" 侧重同时选择（多个）部门和人员。项目中根据业务需求自行选择。
# 安装命令
npm run widgets org-member-picker
1
执行命令后，工具生成在项目的 ".my/widgets/org-member-picker" 路径下；
生成文件目录如下：
org-tree.vue（部门树组件）person-list.vue（人员列表组件）index.vue
# 代码示例
# 基础用法
常规使用组件
# 部门树懒加载与远程查询
懒加载数据 和 远程查询部门， 使用 远程查询 需要传参“remote-tree-filter="true"”
# 属性参数
# 整体参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| selDeptShowMax | 最大显示选中部门数（仅限制显示，非控制选择数量） | Number | - | 5 |
| selPersonShowMax | 最大显示选中人数（仅限制显示，非控制选择数量） | Number | - | 5 |
| isShowResult | 是否显示结果区域 | Boolean | - | true |
| isShowSubmit | 是否显示确认取消按钮 | Boolean | - | true |
# 部门树专属参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| orgPropMap | 部门数据字段映射 | Object | - | { label: 'label', id: 'id', children: 'children', parentId: 'parentId' } |
| loadOrg | 异步获取初始部门树的函数，返回 输出组织架构树 的 Promise对象 | Function | - | - |
| lazyLoadOrg | 懒加载获取部门数据(见el-tree用法) | Function | - | - |
| orgSelect | 是否选择部门（多选） | Boolean | - | false |
| treeProps | 树组件传参， 其中 lazy, data, load 这几个参数在此定义不起作用。 | Object | - | {} |
| remoteTreeFilter | 开启远程查询部门功能 | Boolean | - | false |
# 人员列表专属参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| personPropMap | 人员数据字段映射 | Object | - | { name: 'name', cardNum: 'cardNum', dept: 'dept', id: 'id' } |
| isMultiPerson | 人员是否多选 | Boolean | - | true |
| autoLoad | 组件初始化是否自动加载人员 | Boolean | - | false |
| tableProps | 表格组件其他传参, 其中 loader, columns,size, fit, auto 在此设置不起作用 | Object | - | - |
| personLoad | 人员加载函数 | Function | - | - |
| listColumn | 人员显示列表 | Array | - | [ { prop: 'name', label: '姓名' }, { prop: 'cardNum', label: '身份证' }, { prop: 'dept', label: '单位' } ] |
# 组件Method
| 参数 | 说明 | 参数 | 输出 |
|---|---|---|---|
| getSelPersons | 获取选中人员 | - | [] |
| getSelDepts | 获取选中部门 | - | [] |
# 组件Event
| 参数 | 说明 | 传参 |
|---|---|---|
| on-submit | 点击提交按钮 获取当前人员和部门 | - |
| on-cancel | 获取选中部门 | - |
| on-remoteQueryChange | 远程树节点查询关键字变化事件 | - |
| on-remoteQueryFilter | 远程树节点查询关键字提交事件 | - |