9.1. 公共业务组件
9.1.1. 字段钻取组件(DrillComponent
)
简介
钻取组件用于业务对象查找与当前对象关联的字段信息的组件,可以通过参数控制向上还或向下查找关联字段,并且可以通过关系字段继续查找与之关联的字段信息。
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 自定义弹窗标题 | string 或 ReactElement | - |
renderer | 组件自定义渲染 | `Function: (arg: { drillText: string }) => string | ReactElement` |
onOk | 弹窗关闭回调,自己去写前端回写的逻辑 | Function: (params) => void; | - |
onClear | 弹窗关闭回调 | Function: () => void; | - |
initValue | 后端返回的初始值 | - | |
isWriteBack | 是否需要回写 | boolean | true |
curFieldCode | 当前字段的code,用于排除当前字段(不可选)取 businessObjectFieldCode | string | - |
readOnly | 是否只读(默认false) | boolean | false |
getInitRes | 初始化获取字段信息 | Function: (res) => void; | - |
drillMainKeyType | 是否钻取主键 | 枚举类型 EDrillMainKeyType,可选择 none 不钻取主键;all 全部钻取主键;exclude_first 除了第一层外其余均钻取主键 | none |
drillSet | 是否开始钻取集合 默认不开启钻取单值或对象 | boolean | false |
drillDownFlag | 控制是否向下钻取 默认是false | boolean | false |
componentTypeList | 前端自定义钻取参数 拼接到drill接口路径后 | - | |
initDrillParams | 初始化时钻取接口需要添加的查询参数 拼接在接口后 | [propName: string]: any; | - |
getReferenceInfo | 初始化掉解析接口reference-info后的回调 参数为解析接口返回值 | - | |
selectObjectCheckFlag | 选择对象后,是否需要校验下一个框有没有选择 默认不校验可以只选对象保存 | boolean | false |
onChange | 选中下拉选项的回调 | Function: (res) => void; | - |
showTooltip | 是否展示悬浮提示 | boolean | true |
drillPublishType | 是否钻取已发布字段 | none : 不钻取拟定态(只钻取发布态)all : 全部钻取拟定态exclude_first : 第一层不钻取,其余钻取only_first : 第一层钻取拟定态和发布态,其余钻取发布态 | none |
excludeComponentTypeList | 下拉选项中需要排除显示的字段的类型 (componentType) | string[] | [] |
placeholder | 提示文字 | string | 请选择 |
excludeFieldList | 排除的字段(code)集合 拼接到drill接口路径后 | string[] | [] |
excludeFieldListLevel | 需要排除字段(code)集合的层级 不传默认所有层级 | `undefined | number |
使用
import React, {useMemo, useState} from 'react';
import {Header, Content} from 'components/Page';
import {Button, DataSet, Form, Output} from 'choerodon-ui/pro';
import {FieldType} from 'choerodon-ui/pro/lib/data-set/enum';
import {DataSetProps} from 'choerodon-ui/pro/lib/data-set/DataSet';
import DrillComponent from '@apaas/businessComponents/DrillComponent';
import {ButtonColor} from 'choerodon-ui/pro/lib/button/enum';
const demo = () => {
const [value, setValue] = useState('');
const drillRenderer = () => {
return (
<DrillComponent
onOk={handleOk}
text={value}
businessObjectCode="=xCdh0kUeLzhOhEHxu_zUD0t6woOxZImbQ5QnzCkPyLI=="
/>
);
};
const demoDs = useMemo(() => {
return new DataSet({
autoCreate: true,
fields: [
{
name: 'drill-1',
type: FieldType.string,
label: '钻取 - 自定义渲染',
},
{
name: 'drill',
type: FieldType.string,
label: '钻取 - 初始',
},
],
} as DataSetProps);
}, []);
/**
* 弹窗关闭回调
* @param dataSet 当前钻取组件的dataSet
*/
const handleOk = (dataSet) => {
// demo测试的log
console.log(
'字段选择的数据',
dataSet?.current?.toData(),
'获取某个字段的下拉框options',
dataSet?.current?.getField('1')?.options?.toData()
);
// 设置前端显示的值
setValue('前端显示的值');
demoDs?.current?.set('drill', '传给后端的值');
};
const handleSave = () => {
console.log('传给后端的值', demoDs?.current?.toData());
};
return (
<>
<Header title="钻取">
<Button onClick={handleSave} color={ButtonColor.primary}>保存</Button>
</Header>
<Content>
<Form dataSet={demoDs} labelWidth={200} columns={3}>
<Output name='drill' renderer={drillRenderer} />
</Form>
</Content>
</>
);
};
export default demo;
页面效果
此组件维护者:
9.1.2. 关系透视图组件(RelationalPivot
)
简介
关系透视图公用组件用于统一展示关系透视图的样式,包括透视图的标题、Tabs 、弹框样式等。通过定义不同模板组件的形式进行交叉引用。
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
modules | 需要展示的模板 | Record<RelationalModule.KEY, ModuleProps>[] | - |
modal(可选) | 弹框传入的实例 | modalChildrenProps | - |
otherProps(可选) | 需要传入到每个子模板的参数 | any | - |
navs(可选) | 渲染面包屑 | string[] | - |
使用
Modal.open({
children: (
<RelationalPivot
modules={[
{
[RelationalModule.SCRIPT_EVENT]: {
targetKey: "123",
}, // 引用脚本事件的模板
},
]}
otherProps={{name: 'aPaaS'}}
navs={["业务对象-XXX对象", "业务对象-XXX字段"]}
/>
),
});
弹框样式
弹框样式分为默认属性
(可被外部 modal 传参覆盖)和共用属性
(不可覆盖)。一般情况下 modal 参数只需要传 title
和 children
即可。
默认属性
参数 | 类型 | 默认值 |
---|---|---|
title | string | 依赖查询 |
bodyStyle | React.CSSProperties | { height: 600 } |
style | React.CSSProperties | { width: 957 } |
共用属性
参数 | 类型 | 默认值 |
---|---|---|
closable | boolean | true |
cancelText | string | 关闭 |
destroyOnClose | boolean | true |
footer | (okBtn, cancelBtn, modal) => ReactNode | (_, cancelBtn) => {cancelBtn} |
提示
如果需要修改共用属性
,请提出需求后再统一修改。
新增一个模板流程
- 维护模块的 key 值,在
constants/code.ts
下RelationalModule
变量新增一个 key。 - 维护模块的名称,在
constants/code.ts
下RelationalModuleMeans
变量新增一个对应 key 的名称。 - 维护模块组件所需的类型, 在
types/relationPivot.ts
新增模块组件的类型。 - 把新增模块类型,维护进
RelationalPivot
组件的modules
类型中。 - 新增一个模块组件,强制要求
模块组件的 Props 类型继承自上面新增模块的类型
。
此组件维护者:
9.1.3. 用户指引组件(Intro
)
简介
基于 intro.js
封装的用户指引组件,用于引导用户操作。
基础指引演示
Intro
组件必须接收一个 introJs.Step
类型的数组,数组中的每一项都是一个指引步骤。
待指引元素需要和 steps
中的 element
对应,element
可以是一个 string
类型的选择器,也可以是一个 HTMLElement
类型的元素。
实时编辑器
结果
Loading...
参数
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
steps | 指引步骤 | introJs.Step[] | - |
onExit | 监听指引退出 | Function | - |
options(可选) | 指引配置项 | introJs.Options | - |
initialStep(可选) | 初始化时的所在步骤 | number | 0 |
onBeforeExit(可选) | 监听指引退出前,返回 false 阻止指引弹窗关闭 | () => boolean ⎮ void | - |
onChange(可选) | 监听每次步骤变化 | (element: HTMLElement) => any | - |
onBeforeChange(可选) | 监听每次步骤变化前 | (element: HTMLElement) => any | - |
onAfterChange(可选) | 监听每次步骤变化后 | (element: HTMLElement) => any | - |
onComplete(可选) | 监听步骤完成后 | Function | - |
此组件维护者: