自定义字段样式

在日常开发中,我们经常会遇到需要根据业务规则动态展示字段样式的场景,比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例,带大家实现这一功能。

以下以 自定义表格字段文字颜色 为例。


实现步骤

1. 在界面设计器中添加组件

通过界面设计器,添加一个组件
自定义字段样式


2. 创建元件

以表格的「金额字段」为例,创建对应的元件(可根据自己的业务场景调整)。
自定义字段样式


3. 配置元件属性

进入元件设计页面,从组件库中拖入「单行文本」到设计区域。在右侧属性面板中填写相关配置并保存

自定义字段样式


4. 保存元件

完成配置后,保存元件。


5. 发布元件

将元件发布,供页面设计使用。


6. 切换表格字段

进入页面设计器,将表格中的字段切换为刚刚创建的元件。

自定义字段样式


7. 配置字段颜色

在右侧属性面板中,配置字段的文字颜色:

  • 固定颜色:直接输入颜色值(如 red)。
  • 动态颜色:输入表达式,根据业务逻辑动态展示颜色。例如:当前行的名称等于 1 时显示红色,否则为蓝色。

示例表达式:

activeRecord.name === '1' ? 'red' : 'blue'

自定义字段样式


8: 在代码中,自定义对应的表格字段

import {
  SPI,
  BaseFieldWidget,
  ModelFieldType,
  ViewType,
  TableCurrencyFieldWidget,
  Widget,
  RowContext,
  numberZeroFill,
  numberAddThousandth,
  Expression,
  ExpressionRunParam
} from '@kunlun/dependencies';
import { toString } from 'lodash-es';
import { createVNode, VNode } from 'vue';

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    viewType: [ViewType.Table],
    ttype: [ModelFieldType.Currency],
    widget: 'TableCurrencyColor'
  })
)
export class TableCustomCurrencyFieldWidget extends TableCurrencyFieldWidget {
  computedFieldColor(context: RowContext) {
    const { fieldColor = ' ' } = this.getDsl();

    if (!fieldColor) {
      return null;
    }

    // 如果当前颜色是表达式,则需要计算
    if (Expression.hasKeywords(fieldColor)) {
      const params: ExpressionRunParam = {
        activeRecords: [context.data],
        rootRecord: {},
        openerRecord: {},
        scene: ''
      };

      return Expression.run(params, fieldColor, fieldColor)!;
    }

    return fieldColor;
  }

  @Widget.Method()
  public renderDefaultSlot(context: RowContext): VNode[] | string {
    let value = numberZeroFill(toString(super.compute(context)), this.getPrecision(context));
    if (this.getShowThousandth(context)) {
      value = numberAddThousandth(value);
    }

    return [
      createVNode(
        'div',
        {
          style: {
            color: this.computedFieldColor(context)
          }
        },
        value
      )
    ];
  }
}

9: 页面效果图

自定义字段样式

Oinone社区 作者:汤乾华原创文章,如若转载,请注明出处:https://doc.oinone.top/other/20257.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
汤乾华的头像汤乾华数式员工
上一篇 2025年1月8日 am10:30
下一篇 2025年1月9日 pm5:12

相关推荐

  • 设计器基础学习路径

    模块 内容 目标 doc 链接 模型设计器 模型 1.熟悉模型管理和字段管理 模型 数据字典 熟悉数据字典的创建 数据字典 数据编码 了解数据编码的操作创建 数据编码 界面设计器 了解页面 了解界面设计器中的页面 页面 页面设计 增删改查 【界面设计器】模型增删改查基础 页面设计 左树右表 【界面设计器】左树右表 页面设计 树形表格 【界面设计器】树形表格 页面设计 树下拉 【界面设计器】树下拉/级联 页面设计 自定义组件基础 【界面设计器】自定义字段组件基础 页面设计 熟悉页面设计的操作 页面设计 自定义组件 熟悉如何使用自定义组件 自定义组件 流程设计器 流程组成 了解流程的组成 流程 流程设计 熟悉流程设计内容 流程设计 熟悉流程的触发节点 流程触发 熟悉流程的节点动作与设计使用 节点动作 低代码与无代码结合 示例讲解 Outsourcing相关 低无一体的开发方式、设计数据的导入导出等

    2024年6月15日
    76100
  • 前端 快速查询并替换默认组件

    可以借助vue的调试工具快速找到对应的组件,请参考这篇文章 使用vue调试工具快速找到对应的组件 Mask默认组件 重写Mask组件 重写AppSwitcherWidget import Com from './com.vue' /** * SPI注册条件保持根 AppSwitcherWidget 一致,即可覆盖 */ @SPI.ClassFactory( MaskWidget.Token({ widget: 'app-switcher' }) ) export class CustomAppSwitcherWidget extends AppSwitcherWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 MenuWidget import Com from './com.vue' /** * SPI注册条件保持根 MenuWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'nav-menu' })) export class CustomMenuWidget extends MenuWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 NotificationWidget import Com from './com.vue' /** * SPI注册条件保持根 NotificationWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class CustomNotificationWidget extends NotificationWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 LanguageWidget import Com from './com.vue' /** * SPI注册条件保持根 LanguageWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'language' })) export class CustomLanguageWidget extends LanguageWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props); this.setComponent(Com) return this } } 重写 UserWidget import Com from './com.vue' /** * SPI注册条件保持根 UserWidget 一致,即可覆盖 */ @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class CustomUserWidget extends UserWidget { /** * 如果需要重写vue组件,那么可以通过重写initialize方法来实现,如果是修改数据或者逻辑,那么可以删除这个函数 */ public initialize(props: any) { super.initialize(props);…

    2025年8月14日
    44100
  • 如何实现业务表格跳转页面设计器设计器页面

    后端实现 代理继承界面设计器视图模型 @Model.model(MyView.MODEL_MODEL) @Model(displayName = "视图代理") @Model.Advanced(type = ModelTypeEnum.PROXY) public class MyView extends UiDesignerViewProxy { public static final String MODEL_MODEL = "hr.simple.MyView"; @Field.Integer @Field(displayName = "页面布局ID") private Long uiDesignerViewLayoutId; } 重写查询接口,返回页面布局ID,重写创建接口,实现创建页面逻辑。 package pro.shushi.pamirs.top.core.action; import org.apache.commons.collections4.CollectionUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.constants.ViewConstants; import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxAction; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.button.UxRouteButton; import pro.shushi.pamirs.framework.connectors.data.sql.Pops; import pro.shushi.pamirs.framework.connectors.data.sql.query.LambdaQueryWrapper; import pro.shushi.pamirs.meta.annotation.Action; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.dto.condition.Pagination; import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.constant.FunctionConstants; import pro.shushi.pamirs.meta.enmu.*; import pro.shushi.pamirs.top.api.model.MyView; import pro.shushi.pamirs.ui.designer.api.designe.UiDesignerViewLayoutService; import pro.shushi.pamirs.ui.designer.model.UiDesignerViewLayout; import pro.shushi.pamirs.ui.designer.pmodel.UiDesignerViewLayoutProxy; import java.util.List; import java.util.Map; import java.util.stream.Collectors; /** * @author Yexiu at 20:39 on 2025/3/27 */ @Component @Model.model(MyView.MODEL_MODEL) public class MyViewAction { @Autowired private UiDesignerViewLayoutService uiDesignerViewLayoutService; @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "创建", summary = "添加", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public MyView create(MyView data) { UiDesignerViewLayoutProxy uiDesignerViewLayoutProxy = new UiDesignerViewLayoutProxy(); uiDesignerViewLayoutProxy.setBizType(data.getBizType()); uiDesignerViewLayoutProxy.setDesignerActionBarType(data.getDesignerActionBarType()); uiDesignerViewLayoutProxy.setViewType(data.getType()); uiDesignerViewLayoutProxy.setModel(data.getModel()); uiDesignerViewLayoutProxy.setModule(PamirsSession.getServApp()); uiDesignerViewLayoutProxy.setViewTitle(data.getTitle()); uiDesignerViewLayoutProxy.setUsingDefaultView(data.getLoadLayout()); UiDesignerViewLayoutProxy saveUiDesigner = uiDesignerViewLayoutService.create(uiDesignerViewLayoutProxy); data.setDesignerViewId(saveUiDesigner.getId()); return data; } @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "查询列表") @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API, FunctionOpenEnum.LOCAL}) public Pagination<MyView> queryPage(Pagination<MyView> page, IWrapper<MyView> queryWrapper) { LambdaQueryWrapper<MyView> wrapper = Pops.<MyView>lambdaQuery().from(MyView.MODEL_MODEL) .eq(MyView::getSys, Boolean.FALSE) .eq(MyView::getSystemSource, SystemSourceEnum.UI); Pagination<MyView> myViewPagination = new MyView().queryPage(page, wrapper); List<MyView> content…

    2025年3月31日
    28000
  • 后台嵌入其他系统的界面,设计器:嵌入网页组件

    管理后台如何新增Iframe嵌入其他系统的界面: 1、新建一个模型。模型中有放【url】的字段2、3、切换组件4、点击发布5、测试环境验证下,后端那个字段返回嵌入的【url】就可以展示这个url的内容了6、最后效果如下:

    2024年12月27日
    79700

Leave a Reply

登录后才能评论