跳到主要内容

9.1. 公共业务组件

9.1.1. 字段钻取组件（DrillComponent）​

简介​

钻取组件用于业务对象查找与当前对象关联的字段信息的组件，可以通过参数控制向上还或向下查找关联字段，并且可以通过关系字段继续查找与之关联的字段信息。

参数​

参数说明类型默认值
title自定义弹窗标题string 或 ReactElement-
renderer组件自定义渲染`Function: (arg: { drillText: string }) => stringReactElement`
onOk弹窗关闭回调，自己去写前端回写的逻辑Function: (params) => void;-
onClear弹窗关闭回调Function: () => void;-
initValue后端返回的初始值-
isWriteBack是否需要回写booleantrue
curFieldCode当前字段的code，用于排除当前字段（不可选）取 businessObjectFieldCodestring-
readOnly是否只读（默认false）booleanfalse
getInitRes初始化获取字段信息Function: (res) => void;-
drillMainKeyType是否钻取主键枚举类型 EDrillMainKeyType,可选择 none不钻取主键；all全部钻取主键；exclude_first除了第一层外其余均钻取主键none
drillSet是否开始钻取集合 默认不开启钻取单值或对象booleanfalse
drillDownFlag控制是否向下钻取 默认是falsebooleanfalse
componentTypeList前端自定义钻取参数 拼接到drill接口路径后-
initDrillParams初始化时钻取接口需要添加的查询参数 拼接在接口后[propName: string]: any;-
getReferenceInfo初始化掉解析接口reference-info后的回调 参数为解析接口返回值-
selectObjectCheckFlag选择对象后，是否需要校验下一个框有没有选择 默认不校验可以只选对象保存booleanfalse
onChange选中下拉选项的回调Function: (res) => void;-
showTooltip是否展示悬浮提示booleantrue
drillPublishType是否钻取已发布字段none: 不钻取拟定态(只钻取发布态)
all: 全部钻取拟定态
exclude_first: 第一层不钻取，其余钻取
only_first: 第一层钻取拟定态和发布态，其余钻取发布态		none
excludeComponentTypeList下拉选项中需要排除显示的字段的类型 (componentType)string[][]
placeholder提示文字string请选择
excludeFieldList排除的字段(code)集合 拼接到drill接口路径后string[][]
excludeFieldListLevel需要排除字段(code)集合的层级 不传默认所有层级`undefinednumber

使用​

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 即可。

默认属性

参数类型默认值
titlestring依赖查询
bodyStyleReact.CSSProperties{ height: 600 }
styleReact.CSSProperties{ width: 957 }

共用属性

参数类型默认值
closablebooleantrue
cancelTextstring关闭
destroyOnClosebooleantrue
footer(okBtn, cancelBtn, modal) => ReactNode(_, cancelBtn) =>
{cancelBtn}
提示

如果需要修改共用属性，请提出需求后再统一修改。

新增一个模板流程​

  1. 维护模块的 key 值，在 constants/code.ts 下 RelationalModule 变量新增一个 key。
  2. 维护模块的名称，在 constants/code.ts 下 RelationalModuleMeans 变量新增一个对应 key 的名称。
  3. 维护模块组件所需的类型， 在 types/relationPivot.ts 新增模块组件的类型。
  4. 把新增模块类型，维护进 RelationalPivot 组件的 modules 类型中。
  5. 新增一个模块组件，强制要求模块组件的 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(可选)初始化时的所在步骤number0
onBeforeExit(可选)监听指引退出前，返回 false 阻止指引弹窗关闭() => boolean ⎮ void-
onChange(可选)监听每次步骤变化(element: HTMLElement) => any-
onBeforeChange(可选)监听每次步骤变化前(element: HTMLElement) => any-
onAfterChange(可选)监听每次步骤变化后(element: HTMLElement) => any-
onComplete(可选)监听步骤完成后Function-
此组件维护者:黄振敏