门户定制案例-添加组织选择
运行效果
在门户页顶部显示组织选择下拉框，选择某个组织后，给打开的页面发送通知
实现方法
- 定制企业门户应用，参考《门户定制》
- 在门户页 /entry/pcxapp/pcx/index.w 中，渲染顶部工具条方法 headerActionsRender 的 after 扩展点，用代码添加“组织选择”组件，实现组织下拉选择
- 添加“组织选择”组件的 onChange 事件，使用 history.router.emitter.emit 方法给其他页面派发事件
添加扩展点
桌面端门户的扩展点方法写在 /UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.js 文件的 onConfigContextInit 方法中，如果没有 portalConfig.config.pc.js 文件，将 portalConfig.config.js 文件复制为 portalConfig.config.pc.js 文件
添加门户页 /entry/pcxapp/pcx/index.w 渲染顶部工具条方法 headerActionsRender 的 after 扩展点，代码如下
async onConfigContextInit(configContextProcessor) {
let _this = configContextProcessor.page;
let portalConfig = {
"config": {
"/entry": {
"/pcxapp": {
"/pcx": {
"/index.w": {
"headerActionsRender": {
"@after": (result, ...args) => {
return result;
}
}
}
}
}
}
}
};
merge(_this.configContext, portalConfig);
ConfigContextProcessor.enhancePageAdvice(_this);
}
- headerActionsRender 方法已渲染：风格组件、菜单搜索组件、消息通知组件、时间组件、多语言组件（开启多语言有效）等组件
- 使用 after 扩展点，在 headerActionsRender 执行完成后，对返回的数据进行定制，@after 的参数主要有2个
- result 参数：是方法 headerActionsRender 返回的数据
- args 参数：是方法 headerActionsRender 自带的参数
添加“组织选择”组件
在扩展点方法中添加组件，不能直接使用 W 文件中的源码，而需要使用后端编译过，能在 JS 上运行的代码。步骤如下
新建一个空白的页面，添加需要的组件并进行配置。如下图所示
配置完成后，预览页面，在浏览器中通过调试工具，获取该页面的编译内容。通过“文件名.component.js”获取"组织选择"编译后的 JS 代码，通过“文件名.bulid.js”获取“数据集”相关配置信息。具体使用参考完整代码中的说明
添加“组织选择”组件，需要引入
import OrgSelect from "$UI2/comp/antdpro/components/OrgSelect/OrgSelect.react";
添加“数据组件”，需要引入：
import RestData from "$UI2/wxsys/comps/restData/restData";
派发事件
使用事件派发 history.router.emitter.emit 对组件选择的数据进行分发，再使用事件派发接收方法 history.router.emitter.on（该方法可以放在需要组织数据处理页面上，支持跨应用使用），接收并根据业务进行数据处理。接收派发事件是根据“事件名称”进行接收的，例如本例的事件名称为：refreshCustomOrg
在组织选择组件的切换组织事件中派发事件，代码如下
let onChange = (value, node, extra) => {
//事件派发，主要用于在其他页面接收切换的组织信息
history.router.emitter.emit("refreshCustomOrg", { value, node, extra });
}
接收派发事件，代码如下，放在其他需要接收切换组织信息的页面中
history.router.emitter.on("refreshCustomOrg", ({ value, node, extra }) => {
console.log(value);
});
完整代码
/UI2/comp/portalConfig/components/portalConfig/portalConfig.config.pc.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 "$UI2/comp/antdpro/components/OrgTree/css/OrgTree.css";
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);
}
}