准备工作

yarn add @cvte/cir-form-register

或

在低代码业务渲染模版使用场景下

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

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

使用方式

通过低代码设计器使用

• 按钮事件

触发事件名选择自定义

自定义事件名中输入在渲染端注入的事件名称，比如：handleXXDelete，getXXX

• 编写元数据

import {
  IRegisterEvent,
} from '@cvte/cir-form-register/src';
// 表单的formCode是指设计方案的方案编码
// 注册的时候，可以用所在表单的formCode加事件名称组成code，比如所在表单的formCode是form1，
// 方法名是THIS_METHOD_NAME，所以组成的code是: form1:THIS_METHOD_NAME,
// 也可以直接直接用THIS_METHOD_NAME作为code注册
// 底层会先调用form1:THIS_METHOD_NAME，不存在的话，再调用THIS_METHOD_NAME
const EventMeta: IRegisterEvent = {
  code: 'form1:THIS_METHOD_NAME',
  eventHandler: (ctx) => {
    console.log('Hello World!');
  },
};

ctx为低代码渲染器的回调上下文

interface IEvent {
  data: {
    allData: IExtra['allData'];
    currentData: IExtra['currentData'];
    preData?: IExtra['preData'];
    extraData?: IExtra['extraData'];
  };
  context: IContext;
  utils: { fetch: typeof fetch };
  extra: any;
  btnConfig: IButtonBaseConfigEvent;
}

interface IExtra {
  currentData: Record<string, any>;
  allData: Record<string, any>;
  preData?: any;
  extraData?: Record<string, any> | any[];
  btnCode: string;
  context: IContext;
  runName?: string;
  [key: string]: any;
}

interface IButtonBaseConfigEvent {
  fetchObj?: {
    url: string;
    method: 'get' | 'post' | 'put' | 'delete';
    headers: Record<string, any>;
    params: Record<string, any>;
  };
  runType: 'local' | 'faas' | 'online';
  execLogic?: string;
  /**
   * runType 为 local时必填
   */
  name?: string;
  // 作用区域
  scope?: string[];
  customEventName?: string;
}

interface IContext {
  form: FormInstance;
  config?: IConfigs;
  formItem?: ICompPropsConfigs[];
  compRef?: Record<string, Record<string, Function>>;
  dictionary?:
    | Record<string, { key: string; label: string }[]>
    | Record<string, Record<string, { key: string; label: string }[]>>;
  relations?: Record<string, Record<IRelationActionCode, IRelationGroup[]>>;
  apiConfigMap?: IApiConfigMap;
  configsMapping: Record<string, ICompPropsConfigs>;
}

DEMO:

• 注册

import CSBRegister from '@cvte/cir-form-register';

CSBRegister.inject([
 EventMeta,
]);

通过注册器使用

• 编写元数据

import { CSBDetail,CSBRegister,IRegisterEvent } from '@cvte/cir-csb-common-view';

import { notification } from 'antd';

const EventMeta: IRegisterEvent = {
  //  自定义事件名称，比如设计设置了THIS_METHOD_NAME，这里可以填写THIS_METHOD_NAME 或者 formCode:THIS_METHOD_NAME,
  // formCode是表单的code，这样只有对应表单才会调用到，如果只是写THIS_METHOD_NAME，其他表单也可以调用到，相当于通用方法
  code: 'THIS_METHOD_NAME ',
  eventHandler: (event:IEvent) => {
   //判断当前表单数据是否合法，更多参考文档
    event.context.form.validateFields().then(({success,value}) => {
    // value为当前表单数据
      if(success){
        notification['info'](
          Object.assign(
            {
              message: '操作提醒',
              duration: 3,
            },
            { description: value.TELEPHONE },
          ),
        );
      }
    });
  },
};

// 注入事件
CSBRegister.inject([
  EventMeta,
 ]);

• 注册

import CSBRegister from '@cvte/cir-form-register';

CSBRegister.inject([
 EventMeta,
]);

• 调用

import CSBRegister from '@cvte/cir-form-register';

const { eventHandler } = CSBRegister.get('THIS_METHOD_NAME') || {};
eventHandler?.();

注意事项