选人组件-页签扩展方案

业务背景

随着业务的不断发展和扩展，客户面临着日益增长的个性化需求，特别是在人员选择和组织管理方面。为了更好地适应这些变化，客户需要能够灵活地扩展和自定义选人组件的能力，以满足特定的业务流程和操作需求。

客户场景

客户拥有自己的开发团队，并且希望能够根据自身业务需求，对选人组件进行定制化开发。这种定制化不仅包括界面的调整，还涉及到功能和流程的扩展，以提高工作效率和用户体验。

如何支持？

页签自定义

工作原理

customMenus指定自定义菜单 customTabs指定对应的菜单下的页签 customTabs通过 menu字段（也就是 customeMenus中的 key字段） 关联菜单

操作步骤

STEP-1：引入标准选人组件，自定义菜单

import OrgSelectorInput from '@src/input';

const CustomSelector = () => {
  return (
    <OrgSelectorInput
      options={{
        mode: 'custom_workflow',
        permission: 'ORGANIZATION_ADMIN',
        appointRootIncludeChildren: false,
        includeChildrenSwitch: true,
        selectType: ['MEMBER'],
        tabs: ['department', 'institution', 'post', 'job', 'level', 'team', 'unit_team'],
        // step-1
        customMenus: [
          {
            key: 'senior',
            label: '测试页面',
          },
        ],
        maxCount: 333,
      }}
    \/\>
  );
};

export default CustomSelector;

STEP-2:

import { IMmutableContextType, MutableContextType } from '@src/context';
import OrgSelectorInput from '@src/input';
import { FC } from 'react';

interface ICustomTabProps {
  currentInstitution: MutableContextType['currentInstitution'],
  currentCustomTab: MutableContextType['currentCustomTab'],
  currentSelectedFormula: MutableContextType['currentSelectedFormula'],
  setSelectedSource: IMmutableContextType['setSelectedSource'],
  targetList: MutableContextType['targetList'],
  appendTarget: IMmutableContextType['appendTarget'],
  setCurrentSelectedFormula: IMmutableContextType['setCurrentSelectedFormula'],
  setShowFormulaDescription: IMmutableContextType['setShowFormulaDescription']
}

// 自定义页签组件A
const CustomTabAComponent: FC<ICustomTabProps> = (props) => {
  return 'TAB_A'
}

const CustomSelector = () => {
  return (
    <OrgSelectorInput
      options={{
        mode: 'custom_workflow',
        permission: 'ORGANIZATION_ADMIN',
        appointRootIncludeChildren: false,
        includeChildrenSwitch: true,
        selectType: ['MEMBER'],
        tabs: ['department', 'institution', 'post', 'job', 'level', 'team', 'unit_team'],
        // ...（自定义菜单） 
        // 自定义页签，并与对应菜单关联
        customTabs: [
          {
            id: 'org_select_senior',
            name: 'tab_a',
            component: CustomTabAComponent,
            menu: 'senior',
            wide: true,
            props: {},
          },
        ],
        maxCount: 333,
      }}
    \/\>
  );
};

export default CustomSelector;

STEP-3：修改顺丰环境的选人界面Nacos配置（详询@付山鹏），在对应模式下添加对应的自定义页签名，修改生效后检查localStorage中的currentUser字段信息是否包含自定义页签(如: 上面例子中的 tab_a)

const currentUser = {
  "selectPeopleTabSet": {
    "condition": "variable_condition,department,department_business,department_multi_org,outside_unit,unit_team",
      "workflow": "variable,institution,department,post,job,level,team,role,unit_team,secretary,department_business,department_multi_org,post_multi_org,outside_unit,process_node",
      // 上面的例子中，需要添加 tab_a 页签
      "custom": "tab_a,recent,institution,department,post,job,level,team,department_business,department_multi_org,post_multi_org,outside_unit,role,sp_account,senior,variable,variable_condition,variable_supervise,secretary,unit_team,role,ocip_unit,senior",
      "member": "recent,unit,institution,department,subordinate,post,job,level,team,department_business,department_multi_org,post_multi_org,outside_unit,senior,unit_team",
      "supervise": "variable_supervise,department,post,outside_unit,unit_team,process_node",
      "theme": "NORMAL",
      "authorize": "institution,department,post,job,level,team,role,unit_team,secretary,department_business,department_multi_org,post_multi_org,org_attr_authorize,outside_unit,sp_account"
  }
}

STEP-4: 验证自定义页签是否生效

FAQ 1. 参考资料 ●http://10.255.1.230:9082/-/web/detail/@seeyon/biz-org-selector ●http://10.255.1.230:9082/-/web/detail/@seeyon/mbiz-org-selector

编撰人：zhouyan

快速跳转

• 选人组件-页签扩展方案
  • 业务背景
  • 客户场景
  • 如何支持？
  • 工作原理
  • 操作步骤