背景

目前针对业务端组件不满足业务需求，由业务自己开发接入

接入方式

业务端系统执行如下安装：

yarn add @cvte/cir-csb-common-view@1.1.12-0

新增业务组件:

// 引入react相关依赖
import React, { useImperativeHandle, ForwardRefRenderFunction, forwardRef } from 'react';
// 引入二开接口说明
import {
  IFormGeneratorComponentProps,
  IFormGeneratorComponentRef,
  IFormGeneratorSearchConfigs,
  IFormGeneratorSearchAndSetValue,
} from '@cvte/cir-csb-common-view/src/interface/formGenerator';
// 可以继承后自己增加
interface IRef extends IFormGeneratorComponentRef {};
interface IProps extends IFormGeneratorComponentProps {};
// 定义组件
const Test: ForwardRefRenderFunction<IRef, IProps> = (props, ref) => {
  const { onChange } = props;
  // 校验自定义内容
  const validate = async () => {
    return true;
  };
  // 清除校验状态
  const clearState = () => {
  };
  // 获取自定义组件内部的数据字典
  const getDictionary = () => {
    const { __attrCode } = props.configs.config.baseConfig;
    // 返回数据字典需要的key，label
    return { [__attrCode]: [{ key: 'test', label: 'test' }]};
  };
  useImperativeHandle(ref, () => ({
    validate,
    getDictionary,
    clearState,
    onSearchAnsSetValue: handleSearchAnsSetValue,
    onSearch: handleSearch
  }));
  // 联动调起搜索
  const handleSearch = async (value: string | undefined, configs: IFormGeneratorSearchConfigs) => {
      // code 用于精确查询
    const { formCode, attrCode, code } = configs;
    // ....
  };
  // 联动调起搜索并设置
  const handleSearchAnsSetValue = async (data: IFormGeneratorSearchAndSetValue) => {
      const { attrCode, formCode, extMapData, index, id } = data;
    const resp = await handleSearch(undefined, { attrCode, formCode, index, id });
    // ...
  };

  const handleChange = (value) => {
    const { config, code } = props.configs;
    onChange?.(value, { onSearch: handleSearch, onSearchAnsSetValue: handleSearchAnsSetValue });
  };
  return <div onChange={handleChange}>123</div>;
};

export default forwardRef(Test)

注入组件

在项目入口注入组件

import { CSBRegister } from '@cvte/cir-csb-common-view';
import Test from './test';

CSBRegister.inject({
  code: 'TEST',
  name: '测试',
  config: { type: 'CUSTOM_FIELD', outputType: 'string' },
  renderConfig: {
    type: 'custom',
    render: Test,
  },
});

组件暴露能力

参数名称

configs.configs

可能用到的入参

const { onChange, onSelect, value, configs } = props;
const { context, eventCenter, relation } = configs;
// context 是上下文
// eventCenter.runEvent 发起事件
// relation.emit 触发联动，前提要先配置好联动配置