门户V2定制-添加下拉组织选择
场景描述
需要对企业门户V2首页头部工具组件进行定制，新增组织选择下拉组件
实现思路
1.新增“ 门户自定义 ”组件 2.在门户完成组件渲染（"/entry/pcxapp/pcx/index.w/headerActionsRender"）后，使用“@after”配置对返回数据进行定制 3.选用平台自带“组织选择”组件实现组织下拉选择
实现步骤
使用租户管理员登录系统，在“应用/服务管理”企业门户V2，开启门户定制（详细操作步骤可参考 门户V2调试）
进入云端开发后，打开市场组件“门户自定义”，并开启组件定制
在“\UI2\comp\portalConfig\components\portalConfig”组件目录下，对“portalConfig.config.js”（文件命名：组件名+“.config.js”，不能随便定义）进行定制编辑,文件内容如下所示：
import { merge } from "lodash"; import ConfigContextProcessor from 'core/framework/ConfigContextProcessor'; import React from 'react'; import OrgSelect from "$UI2/comp/antdpro/components/OrgSelect/OrgSelect.react"; import RestData from "$UI2/wxsys/comps/restData/restData"; import { _exRun } from "core/utils"; import history from "core/appHistory"; export default { processConfigContext(configContext) { }, async onConfigContextInit(configContextProcessor) { let _this = configContextProcessor.page; let portalConfig = { "config": { "/entry": { "/pcxapp": { "/pcx": { "/index.w": { //组织树选择实例 "headerActionsRender": { "@after": (result, ...args) => { //根据key判断要添加的组织选择组件是否存在，防止加载多个组织选择组件 let dataOrgSearch=result.filter(item=>item.key=="orgSearch"); if(dataOrgSearch&&dataOrgSearch.length==1){ return result; } //创建组织数据集 let orgDataConfig = { "schema": { "limit": 999999, "orderBy": [ { "name": "sequence", "type": 1 } ], "keyItems": "_key", "type": "array", "items": { "type": "object", "key": "_key", "props": { "fid": { "define": "fid", "label": "全路径标识", "type": "string", "extType": "String" }, "fname": { "define": "fname", "label": "全路径名称", "type": "string", "extType": "String" }, "typedID": { "define": "typedID", "label": "类型化标识", "type": "string", "extType": "String" }, "code": { "define": "code", "label": "编码", "type": "string", "extType": "String", "required": { "expr": "true" } }, "level": { "define": "level", "label": "层级", "type": "integer", "extType": "Integer" }, "forgID": { "define": "forgID", "label": "全路径主键", "type": "string", "extType": "String" }, "active": { "define": "active", "label": "状态", "type": "integer", "extType": "Integer" }, "type": { "define": "type", "label": "组织类型", "type": "string", "extType": "String" }, "leaf": { "define": "leaf", "label": "叶子节点", "type": "integer", "extType": "Integer" }, "_key": { "type": "string" }, "orgID": { "define": "orgID", "label": "主键", "type": "string", "extType": "String" }, "parentID": { "define": "parentID", "label": "父节点", "type": "string", "extType": "String" }, "_sys_children_": { "isCal": true, "define": "EXPRESS", "label": "子数据", "type": "recursiveSelf" }, "sequence": { "define": "sequence", "label": "序列号", "type": "string", "extType": "String" }, "name": { "define": "name", "label": "名称", "type": "string", "extType": "String" }, "id": { "define": "id", "label": "标识", "type": "string", "extType": "String" }, "seq": { "define": "seq", "label": "序号", "type": "string", "extType": "String" }, "fcode": { "define": "fcode", "label": "全路径编码", "type": "string", "extType": "String" } } } }, "options": { "calcTotal": "", "distinct": false, "className": "/uaa/orgs", "autoMode": "", "checkRange": "", "tableName": "orgs", "confirmRefreshText": "", "allowEmpty": false, "feature": { "filter": true, "subquery": true, "distinct": true, "paging": true, "sort": true, "join": true, "fields": true, "params": true }, "confirmDeleteText": "", "confirmRefresh": true, "primaryColumns": [ "orgID" ], "isReference": false, "restResource": "class", "isMain": false, "directDelete": true, "serviceName": "uaa", "defSlaves": [ ], "url": "/dbrest", "confirmDelete": true, "treeOption": { "fullPaths": [ { "name": "forgID", "from": "orgID", "separator": "/" }, { "name": "fcode", "from": "code", "separator": "/" }, { "name": "fid", "from": "typedID", "separator": "/" }, { "name": "fname", "from": "name", "separator": "/" }, { "name": "sequence", "from": "seq", "separator": "/" } ], "isTree": true, "parent": "parentID", "leafCol": "leaf", "children": "_sys_children_", "loadAll": false, "fullId": "forgID", "levelcol": "level" }, "enableContextReadonly": true, "checkMode": "", "multiplePrimary": false, "idColumn": "orgID" } } let orgData = _this.comp("orgData"); if (!orgData) { orgData = new RestData(_this, "orgData", orgDataConfig); } let customDataConfig = { "defCols": { "orgId": { "label": "组织名称", "type": "string" }, "id": { "label": "名称", "type": "string" } }, "initData": [ { "orgId": "", "id": "3" } ], "options": { "limit": 20, "autoMode": "new", "idColumn": "id" } } //创建自定义数据集用于绑定到组织选择组件上 let customData = _this.comp("customData"); if (!customData) { customData = new RestData(_this, "customData", customDataConfig); } //切换组织事件 let onChange = (value, node, extra) => { //事件派发，主要用于在其他页面接收切换的组织信息 history.router.emitter.emit("refreshCustomOrg", { value, node, extra }); } //接收派发事件，可以放在其他需要接收切换组织信息页面即可 // history.router.emitter.on("refreshCustomOrg", ({ value, node, extra }) => { // console.log(value); // }); //返回组织数据 let orgSearch = <OrgSelect key="orgSearch" allowClear={true} onChange={onChange} id="orgSelect0" searchMode="server" filterProps="name" includeOrgKind="ogn,dpt,pos" dropdownMatchSelectWidth={false} listHeight={500} optionsLabel="name" optionsValue="fcode" placeholder="请选择..." showSearch={true} treeIcon={true} refDataId="customData" refColumnName="orgId" refRow={((_exRun('customData.current', 'customData'))(customData))} optionsRefDataId="orgData" options={((_exRun('orgData.value', 'orgData'))(orgData))} className={"uix-portal-header-search"} />; //插入数据到指定位置,原组件按照顺序已包含风格组件、菜单搜索组件、消息通知组件、时间组件、多语言组件（开启多语言有效） result.splice(2, 0, orgSearch); return result; } } } } } } } }; merge(_this.configContext, portalConfig); ConfigContextProcessor.enhancePageAdvice(_this); } }上述代码说明： 1.根据定制需求，先找到门户中组件渲染方法“headerActionsRender”，原组件按照先后顺序已包含风格组件、菜单搜索组件、消息通知组件、时间组件、多语言组件（开启多语言有效）
2.使用“@after”配置，在“headerActionsRender”执行完成后对返回的组件数据进行定制,@after配置，参数主要有2个：result参数是方法headerActionsRender返回数据，args参数是方法headerActionsRender自带参数。
3.“组织选择”组件不能直接使用 .w文件上的源码，需要使用后端编译过能在js上运行的代码，建议新建一个空白的页面，添加需要的组件并进行配置。如图所示：
- 其中组织选择需要引入：
- import OrgSelect from "$UI2/comp/antdpro/components/OrgSelect/OrgSelect.react";
- 数据集需要引入：
- import RestData from "$UI2/wxsys/comps/restData/restData";
4.配置完成后通过“预览”访问页面，在浏览器中通过调试工具获取该页面的编译内容。通过“文件名.component.js”获取组织选择编译js，通过“文件名.bulid.js”获取“数据集”相关配置信息。具体使用参考上述js
5.使用事件派发“history.router.emitter.emit”对组件选择返回的数据进行分发，再使用事件派发接收方法“history.router.emitter.on”(该方法可以放在需要组织数据处理页面上，支持跨应用),接收并根据业务进行数据处理。事件名称需要保持一致。
- 其中组织选择需要引入：
“门户自定义”组件定制完成之后，重新发布即可。