人员选择

1 适用场景

人员选择组件可以选择Afc平台“机构管理”下的人员；例如设置出差申请人、资产责任人、维护人员等，还可用于流程表单设置审批人时使用；

2 基础功能

拥有设置默认值为当前员工、展示模式、范围选择、滚动加载、做为流程参与者等功能；

补充说明扩展对象

2.1 默认值为当前员工

设置默认值为当前员工有两种方法；

方法1.在默认值后勾选当前员工可以设置默认显示当前员工；

方法2.默认值-》变量-》选择员工Id；

效果如下：

2.2 展示模式

有按钮模式和弹框选择两种；按钮模式点击按钮打开弹框选择人员；搜索选择模式支持下拉树选择和点击右边搜索按钮打开弹框选择人员两种操作。效果如下：

2.3 范围选择

默认所有可选，展示机构主维度的树形模式。可以通过设置"当前用户所在部门"、"指定范围"，"变量"自定义设置可选人员范围；

2.3.1 当前用户所在部门

限定可选的人员是当前用户所在部门；

2.3.2 指定范围

可以通过选择指定的人员、机构、角色、岗位、工作组来设置选择人员范围；效果如下：

2.3.3 变量动态设置范围

可以定义变量，动态限制选择范围或者从人员机构和角色多角度展示；可如下操作：

在表单设置-》高级设置-》变量中添加符合格式的变量(具体格式可参考下方代码块)

变量可从三种模式（机构、数组、角色）添加，以数组形式，可写多个（机构的三种类型只可选其一）：

[
	{id: 'org', label: '机构', rangeMode: 'dimension', rangeData: {dimensionCode: 'def_dimension'}， // 某个维度的机构
    // {id: 'org', label: '机构', rangeMode: 'rootOrgs', rangeData: {ids: '1,2,3'}}，  // 以ids为根节点，展示本机构及子机构下的员工
    // {id: 'org', label: '机构', rangeMode: 'orgs', rangeData: {ids: '1,2,3'}}， // 以ids为父节点，展示本机构下的员工 
    {id: 'role', label: '角色', rangeMode: 'roles', rangeData: {ids: '1,2,3'}}， // 以ids为父节点，展示其下的员工
    {id: 'emp', label: '人员', rangeMode: 'emps', rangeData: {ids: '1,2,3'}} // 展示ids对应的员工
]
// 注：ids为id用英文逗号拼接的字符串

例如：表单设置-》高级设置-》变量=》定义变量v_user，只能选择人员id为1的人员和以id为1、2的机构为父节点，展示本机构下的员工；格式如下：

    [{id: 'emp', label: '人员', rangeMode: 'emps', rangeData: {ids: '1'}},
    {id: 'org', label: '机构', rangeMode: 'rootOrgs', rangeData: {ids: '1,2'}},]

人员选择组件的范围选择设置变量选择定义的v_user;效果如下：

2.4 维度设置

维度用于定义人员选择的组织架构维度，默认使用系统主维度（def_dimension）。在多维度组织架构场景下，可以通过设置不同的维度来限制人员选择的组织范围。

使用场景：

• 多维度组织架构下的人员选择
• 限制特定业务维度内的人员选择
• 跨部门、跨维度的人员权限控制

配置方式： 在高级中设置维度，值为维度编码。如不设置，默认使用def_dimension。

示例：

dimension: 'hr_dimension'  // 人力资源维度
dimension: 'finance_dimension'  // 财务维度
dimension: 'def_dimension'  // 默认主维度

2.5 自定义渲染模板

在高级设置中可以自定义人员组件的渲染模板，根据业务需求修改下拉选项的显示样式和内容展示。

使用场景：

• 自定义人员、机构、角色的显示样式
• 添加额外的业务信息展示（如部门、职位等）
• 统一UI设计风格
• 增强用户体验和界面美观度

配置方式： 在高级设置中启用"自定义渲染模板"，并编写Vue模板代码。

参数说明：

• data: 数据对象，包含当前选项的详细信息
  • data.type: 类型（'emp'人员、'role'角色、'org'机构）
  • data.name: 名称
  • data.code: 编号
  • data.orgId: 机构ID
  • data.orgInfos: 机构信息

示例代码：

<template v-slot:customOption="data">
  <div style="display:flex;" @mouseover.stop>
    <div style="display:flex;">
      <!-- 根据类型显示不同图标 -->
      <img v-if="data.type === 'emp'" src="./components/static/svg/user-tree.svg" />
      <img v-else-if="data.type === 'role'" src="./components/static/svg/role-tree.svg" />
      <img v-else="data.type === 'org'" src="./components/static/svg/org-tree.svg" />
      
      <!-- 显示名称和编号 -->
      <div style="margin-right: 8px">{{data.name}}</div>
      <div>{{(data.code ? ' ( ' + data.code + ' )' : '')}}</div>
    </div>
    
    <!-- 显示所属机构信息 -->
    <span>&nbsp;{{(data.orgInfos ? ' ( ' + data.orgInfos.split(data.orgId + '_')[1] + ' )' : '')}}</span>
  </div>
</template>

2.6 绑定编码

在基础设置中可以绑定人员组件的编码，用于解决数据导入或环境迁移时因ID变化导致的数据关联问题。通过绑定稳定的业务编码，确保人员数据的准确性和一致性。

3 场景

3.1 按钮模式选择多个人，在子表格中回显人员数据

场景：用户通过按钮模式选择多个人，然后在表单子表格中显示选择的人员的数据信息；效果图如下：

步骤1. 建立实体关系1:n

步骤2. 配置选人组件选择，允许多选，展示模式为按钮

步骤3.给子表格赋值；在选人组件右侧配置项-》点击高级-》添加onSelected事件；代码如下：

其中selectedArr为选中的人员数据详情；

console.log(selectedArr, 'selectedArr')
this.formData.userlists = selectedArr.map(item => {
  return {
    code: item.code,
    name: item.name
  }
})

3.2 选择人员Api

this.Api.openSelectUserDialog({
    "multiple": true,  // 允许多选
    "entityModel": [{ // 设置默认值
      "id": "1",
      "name": "testName",
      "code": "testCode"
    }], 
    "selectTypes": [{// 设置选择范围
      "id": "org",
      "label": "机构",
      "rangeMode": "orgs",
      "rangeData": {
        "ids": "1,2,3"
      }
    }], 
    "success":(selectedArr )=> { // 选中回调
      console.log('selectedArr',selectedArr)
    }
  })

场景：子表格上添加自定义按钮选择人员，把人员数据回填到子表格中；效果如下：

步骤1. 建立实体关系1:n

步骤2. 在子表格的绑定的视图添加自定义按钮，给子表格赋值。代码如下：

其中子表格绑定的字段为userlists

//打开选人窗口
  this.Api.openSelectUserDialog({
    "multiple": true,  // 允许多选
    "success":(selectedArr )=> { // 选中回调
      console.log('selectedArr-选人组件',selectedArr,this.parentFormData,'parentFormData')
      this.parentFormData.userlists = selectedArr.map(item => {
        return {
          code: item.code,
          name: item.name
        }
      })
    }
  })