自定义的复杂字段配置透出字段

相关推荐

• 低无一体

  如何自定义表格单元格样式

  介绍 OinOne的表格是基于Vxe-Table实现的，我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义，通过设置 cellClassName、headerCellClassName、rowClassName …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 单元格动态样式 行的动态样式、单元格动态样式，表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 示例代码 这里仅演示cellClassName和cellStyle，其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览

  nation

  2024年10月30日

  1.6K000
• 前端

  自定义组件之手动渲染任意视图（v4）

  private metadataViewWidget: MetadataViewWidget | null | undefined; private async renderCustomView(model: string, viewName: string, slotName?: string) { const view = await ViewCache.get(model, viewName); if (!view) { return; } if (this.metadataViewWidget) { this.metadataViewWidget.dispose(); this.metadataViewWidget = null; } const metadataViewWidget = this.createWidget(MetadataViewWidget, slotName, { metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, internal: true, inline: true, automatic: true }); this.metadataViewWidget = metadataViewWidget; metadataViewWidget.initContextByView(view); this.forceUpdate(); }

  张博昊

  2025年3月6日

  1.8K000
• 前端

  文件上传组件前端校验超128长度大小，不清楚怎么配置

  原因是拼上后端返回的文件全路径后超出了字段的存储长度，后端通过注解@Field.String(size=1024)修改字段的存储长度后重新运行一遍服务。

  oinone

  2023年11月1日

  1.9K000
• 前端

  组件SPI机制（v4）

  阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 组件SPI简介 不论是母版、布局还是DSL，所有定义在模板中的标签都是通过组件SPI机制获取到对应Class Component(ts)并继续执行渲染逻辑。 基本概念： 标签：xml中的标签，json中的dslNodeType属性。 Token组件：用于收集一组Class Component(ts)的基础组件。通常该基础组件包含了对应的一组基础能力（属性、函数等） 维度（dsl属性）：用于从Token组件收集的所有Class Component(ts)组件中查找最佳匹配的参数。 组件SPI机制将通过指定维度按照有权重的最长路径匹配算法获取最佳匹配的组件。 组件注册到指定Token组件 以BaseFieldWidget这个SPIToken组件为例，可以用如下方式，注册一个可以被field标签处理的自定义组件： （以下示例仅仅为了体现SPI注册的维度，而并非实际业务中使用的组件代码） 注册一个String类型组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 说明： 该字段组件可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String }) ) export class FormStringFieldWidget extends BaseFieldWidget { …… } 注册一个多值的String类型组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 是否多值：是 说明： 该字段组件可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 并且该字段为多值字段 @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String, multi: true }) ) export class FormStringMultiFieldWidget extends BaseFieldWidget { …… } 注册一个String类型的Hyperlinks组件 维度： 视图类型：表单(FORM) 字段业务类型：String类型 组件名称：Hyperlinks 说明： 该字段组件仅可以在表单(FORM)视图中使用 并且该字段的业务类型是String类型 并且组件名称必须指定为Hyperlinks @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.String, widget: 'Hyperlinks' }) ) export class FormStringHyperlinksFieldWidget extends BaseFieldWidget { …… } 当上述组件全部按顺序注册在BaseFieldWidget这个SPIToken组件中时，将形成一个以BaseFieldWidget为根节点的树： “` mermaidgraph TDBaseFieldWidget —> FormStringFieldWidgetBaseFieldWidget —> FormStringMultiFieldWidgetFormStringFieldWidget —> FormStringHyperlinksFieldWidget“` 树的构建 上述形成的组件树实际并非真实的存储结构，真实的存储结构是通过维度进行存储的，如下图所示： （圆角矩形表示维度上的属性和值，矩形表示对应的组件） “` mermaidgraph TDviewType([viewType: ViewType.Form]) —>ttype([ttype: ModelFieldType.Strng]) —>multi([multi: true]) & widget([widget: &#039;Hyperlinks&#039;]) direction LRttype —> FormStringFieldWidgetmulti —> FormStringMultiFieldWidgetwidget —> FormStringHyperlinksFieldWidget“` 有权重的最长路径匹配 同样以上述BaseFieldWidget组件为例，该组件可用的维度有： viewType：ViewType[Enum] ttype：ModelFieldType[Enum] multi：[Boolean] widget：[String] model：[String] viewName：[String] name：[String] 当field标签被渲染时，我们会组装一个描述当前获取维度的对象： { "viewType": "FORM", "ttype": "STRING", "multi": false, "widget": "", // 在dsl中定义的任意值 "model": "", // 在dsl编译后自动填充 "viewName": "", // 当前视图名称 "name": "" // 字段的name属性，在dsl编译后自动填充 } 当我们需要使用FormStringHyperlinksFieldWidget这个组件时，我们在dsl中会使用如下方式定义： <view type="FORM" title="演示表单" name="演示模型form" model="demo.DemoModel"> <field data="name" widget="Hyperlinks" /> </view> 此时，我们虽然没有在dsl中定义维度中的其他信息，但在dsl返回到前端时，经过了后端编译填充了对应元数据相关属性，我们可以得到如下所示的对象： { "viewType": "FORM", "ttype": "STRING", "multi": false, "widget":…

  oinone

  2023年11月1日

  1.3K001
• 前端

  函数扩展

  oinone 平台内置了一些函数, 如果当前函数不满足，那么可以通过扩展的方式添加函数 后端实现 后端实现 import {Expression} from '@kunlun/dependencies' Expression.getInstance().registerFunction(); registerFunction函数的参数如下 /** @param {string} name 函数名字 @param {unknown[]} argTypes 参数类型 @param {Function} handle 回调函数 */ 函数名需要跟后端的保持一致import {Expression} from '@kunlun/dependencies';Expression.getInstance().registerFunction('FUNCTION_NAME', ['number|string'], (input: number | string) => { // todo});第二个参数要注意下，该参数跟回调函数里面的参数要保持一致 Expression.getInstance().registerFunction('FUNCTION_NAME', ['number'], (input: number ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['string'], (input: string ) => { // todo } ); Expression.getInstance().registerFunction('FUNCTION_NAME', ['array'], (input: any[] ) => { // todo } );

  汤乾华

  2023年11月9日

  2.7K000