重要事情

  • 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
  • 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
  • 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
    如何发布发布可以参考资源开发

组件

一、组件

1.1 组件列子

建议参考 👉 自定义组件 的开发实例

import React, { ForwardRefRenderFunction, forwardRef, useImperativeHandle } from 'react';
// 引入视图组件声明
import { IDynamicComponentsProps } from '@cvte/view-table/dist/types.d';

const TagRender: ForwardRefRenderFunction<{},IProps> = (props, ref) => {
    // 由于虚拟滚动,组件会存在销毁,有计算或者储存的用缓存保存 setCache, getCache
    const { value, configs, onChange, setCache, getCache } = props;
    // 自己的配置会在compConfigs里面,自己本身的配置可以通过视图配置传入,第二部分会讲
  const { record, config: compConfigs, entity, wuliMode, dataIndex } = configs;
    return <>123</>
}
interface IProps extends IDynamicComponentsProps {

}
export default forwardRef(TagRender);

1.2 接口声明

  • 1.2.1入参props声明
参数 说明 类型
configs 组件配置 IConfigs
value 赋给组件的值 any
onChange 改变时回传, 如果有翻译值,需要回传下拉项,下拉项里至少有 key,value,作为值映射,label作为翻译展示 (value: any, configs: { selectedOptions: Record<string, any>[], selectedOptionsMap: Record<string, any> }) => void
parentType 告诉组件当前处于表单还是明细表中 table | form
setCache 在parentType为table时,才有的api,用于组件储存复杂逻辑计算结果 (data: any) => void
getCache 在parentType为table时,才有的api,用于组件获取复杂逻辑计算结果 () => any
onFormat 在parentType为table时,才有的api,用于告诉父类当前翻译值 (configs: { label: string }) => void
  • 1.2.1.1 IConfigs
参数 说明 类型
context 上下文
wuliMode 当前组件状态 edit | view
config 组件配置,有baseConfig和uiConfig,获取当前组件设计器对组件的配置 { baseConfig: Record<string, any>; uiConfig: { attr: Record<string, any> } }
record 在parentType为table时,才有的api,当前行的数据 Record<string, any>
options 如果有批量翻译,在编辑时会传入,key或value作为键值,label作为翻译值 { key: any; value: any; label: string; [code: string]: any}[]
optionsMap 如果有批量翻译,在编辑时会传入,key或value作为键值, options的map Record<string, { key: any; value: any; label: string; [code: string]: any}>
isCreate 给组件判断当前是在创建状态还是编辑状态 boolean
code
relation
  • 1.2.2 批量翻译
    需要导出批量翻译方法
    const batchTranslate = (configs: ITranslatorFnParams) => {
       const { apiConfigMap, fields, baseConfigs  } =  configs;
       return {
          fields: options,
            map: fieldsMap
          noValueFormatter: true
      }
    }
  • ITranslatorFnParams声明
参数 说明 类型
apiConfigMap 平台通用接口参数 Record<string, { method: string;url: string; } >
fields 需要翻译的字段和值,会有层级结构,比如: { table: { age: 1 } },1是需要翻译的值 Record<string, any>
baseConfigs 组件的配置 Record<string, any>
  • 返回声明
参数 说明 类型
fields 根据fields的结构返回对应的options, 比如: { table: { age: [{ key:1, value:1, label: ‘展示’ }] } } Record<string, any>
map 根据fields的结构返回对应的map,比如: { table: { age: { 1: { key:1, value:1, label: ‘展示’ } } } } Record<string, any>
noValueFormatter 不需要列表翻译,组件自身翻译 boolean

二、发布组件

用视图的Tag组件举例子,视图在资源上是 viewTable
导出tag组件命名为:viewTableTag
怎么发布资源参考 资源中心开发说明

作者:黄允桢  创建时间:2022-07-11 11:36
最后编辑:袁子涵  更新时间:2024-12-11 10:09