重要事情
- 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
- 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
- 组件只拿资源中心,所以组件要先发布到资源中心,先了解怎么发布到资源中心
如何发布发布可以参考资源开发
组件
一、组件
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
最后编辑:袁子涵 更新时间:2024-12-11 10:09