3.5.7 前端组件自定义(初级篇)

相关推荐

• 未分类

  用户审批意见回填到审批表单

  需求 将审批同意时填写的审批意见以及图片回填到审批表单中。（填写节点同理） 实现方式一 通过审批后置函数操作流程参数的数据，并将流程参数数据回写到流程中。 流程设计 流程参数中自定义需要传递的字段。 审批节点设计审批后置函数，后置函数由后端定义。 添加更新数据节点，选择需要更新的业务表单字段，并在表达式中选择流程参数中自定义的字段。我这里更新审批意见和图片两个字段。 后置函数定义： /** * 审批后数据处理 * * @param approvalNode 审批节点 * @param context 上下文 * @param dataJson 审批提交数据 * @param result 审批结果 */ @Function(name = "approvalDataProcessFun", openLevel = API) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "审批后数据处理", category = FunctionCategoryEnum.CUSTOM_DESIGNER) public void approvalDataProcessFun(ApprovalNode approvalNode, WorkflowContext context, String dataJson, Boolean result) { List<WorkflowUserTask> workflowUserTasks = Models.origin().queryListByWrapper(Pops.<WorkflowUserTask>lambdaQuery() .from(WorkflowUserTask.MODEL_MODEL) .eq(WorkflowUserTask::getTaskId, context.getLastTaskInstanceId()) ); // 获取审批意见等放入流程参数 for (WorkflowUserTask userTask : workflowUserTasks) { String remark = userTask.getRemark(); List<String> pics = userTask.getPics(); List<PamirsFile> attachments = userTask.getAttachments(); Map<String, Object> paramMap = (Map<String, Object>) context.getContext().getOrDefault(ParamNode.PARAM_PREFIX, new HashMap<String, Object>()); paramMap.put("remark", remark); paramMap.put("pics", pics); } } 实现方式二 通过审批动作（WorkflowUserTaskAction ）扩展点实现 1、扩展点的定义 package pro.shushi.pamirs.work.core.extpoint; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import pro.shushi.pamirs.workflow.app.api.model.WorkflowUserTask; // @see:pro.shushi.pamirs.workflow.app.core.action.WorkflowUserTaskAction /** * Oinone所有的函数都提供了默认的前置扩展点、重载扩展点和后置扩展点， * 其技术名称的规则是所扩展函数的函数编码fun加上“Before”、“Override”和“After”后缀 * * 根据实际情况保留扩展点的接口和实现(可增加、可删减) */ @Ext(WorkflowUserTask.class) public interface WorkflowUserTaskDealExtPoint { // 实际需要几个扩展点根据业务情况自行 增加 和 删除 @ExtPoint(displayName = "审批同意后") WorkflowUserTask approveAgreeAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批撤销后") WorkflowUserTask recallAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审后") WorkflowUserTask approveTrangerAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审前") WorkflowUserTask approveFallbackBefore(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批拒绝后") WorkflowUserTask approveRejustAfter(WorkflowUserTask workflowUserTask); @ExtPoint(displayName = "审批转审后") WorkflowUserTask approveFallbackAfter(WorkflowUserTask workflowUserTask); // ………… } 2、扩展点的实现 package pro.shushi.pamirs.work.core.extpoint; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.Ext; import…

  yexiu

  2026年2月10日

  55000
• 未分类

  设计器基础学习路径

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

  shao

  2024年6月15日

  1.1K000
• 未分类

  Excel导出模块翻译值

  由于目前翻译资源导出只可以导出应用资源，无法导出模块资源，所以暂时提供以下方法导出模块资源。6.2.11、5.7.4.20 之前版本验证 方案一： 导出环境覆盖以下类 package pro.shushi.pamirs.translate.template.imports; import com.alibaba.fastjson.JSON; import com.google.common.collect.Lists; import org.apache.commons.collections4.CollectionUtils; import org.apache.commons.lang3.StringUtils; import org.springframework.stereotype.Component; import pro.shushi.pamirs.file.api.context.ExcelDefinitionContext; import pro.shushi.pamirs.file.api.entity.ExcelExportFetchDataContext; import pro.shushi.pamirs.file.api.extpoint.impl.DefaultExcelExportFetchDataExtPoint; import pro.shushi.pamirs.file.api.model.ExcelExportTask; import pro.shushi.pamirs.framework.connectors.data.sql.Pops; import pro.shushi.pamirs.framework.connectors.data.sql.query.LambdaQueryWrapper; import pro.shushi.pamirs.framework.connectors.data.sql.query.QueryWrapper; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.api.Models; import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper; import pro.shushi.pamirs.meta.common.lambda.LambdaUtil; import pro.shushi.pamirs.meta.common.util.PStringUtils; import pro.shushi.pamirs.meta.constant.SqlConstants; import pro.shushi.pamirs.meta.domain.module.ModuleDefinition; import pro.shushi.pamirs.resource.api.enmu.TranslationApplicationScopeEnum; import pro.shushi.pamirs.resource.api.model.ResourceTranslation; import pro.shushi.pamirs.resource.api.model.ResourceTranslationItem; import pro.shushi.pamirs.translate.constant.TranslateConstants; import pro.shushi.pamirs.translate.proxy.TranslationItemExportProxy; import pro.shushi.pamirs.translate.service.TranslationDslNodeVisitor; import pro.shushi.pamirs.translate.template.TranslateTemplate; import pro.shushi.pamirs.translate.utils.UniversalParser; import java.util.*; import java.util.stream.Collectors; import static pro.shushi.pamirs.translate.constant.TranslateConstants.FIELD_TO_EXCLUDE; /** * @author Adamancy Zhang * @date 2020-11-04 18:09 */ @Slf4j @Component @Ext(ExcelExportTask.class) @SuppressWarnings({"unchecked"}) public class ResourceTranslationExportExtPoint extends DefaultExcelExportFetchDataExtPoint { private String resLangCodeColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getResLangCode)); private String langCodeColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getLangCode)); private String moduleColumn = PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(ResourceTranslationItem::getModule)); @Override @ExtPoint.Implement(expression = "context.name=="" + TranslateTemplate.TEMPLATE_NAME + "" && context.model=="" + ResourceTranslation.MODEL_MODEL + """) public List<Object> fetchExportData(ExcelExportTask exportTask, ExcelDefinitionContext context) { ArrayList<Object> objects = new ArrayList<>(); Map<String, Object> queryData = exportTask.getConditionWrapper().getQueryData(); TranslationItemExportProxy data = JSON.parseObject(JSON.toJSONString(queryData), TranslationItemExportProxy.class); LambdaQueryWrapper<TranslationItemExportProxy> queryWrapper = Pops.<TranslationItemExportProxy>lambdaQuery() .from(TranslationItemExportProxy.MODEL_MODEL) .eq(StringUtils.isNotBlank(data.getModule()), ResourceTranslationItem::getModule, data.getModule()) .eq(ResourceTranslationItem::getResLangCode, TranslateConstants.RES_LANG_CODE) .eq(StringUtils.isNotBlank(data.getLangCode()), ResourceTranslationItem::getLangCode, data.getLangCode()) .eq(data.getState() != null, ResourceTranslationItem::getState, data.getState()) .like(StringUtils.isNotBlank(data.getResLangInclude()), ResourceTranslationItem::getOrigin, data.getResLangInclude()) .like(StringUtils.isNotBlank(data.getTargetInclude()), ResourceTranslationItem::getTarget, data.getResLangInclude()); Map<String, String> moduleNameMap = Models.origin().queryListByWrapper(Pops.<ModuleDefinition>lambdaQuery() .from(ModuleDefinition.MODEL_MODEL) .eq(StringUtils.isNotBlank(data.getModule()), ModuleDefinition::getModule, data.getModule())) .stream() .collect(Collectors.toMap(ModuleDefinition::getModule, ModuleDefinition::getDisplayName, (_a, _b)…

  yexiu

  2025年8月21日

  381000
• 未分类

  新人引导文档

  类型 文档链接 入门参考必看 7天入门到精通 Oinone 初级学习路径 Oinone 初级学习路径 平台部署启动 无代码docker启动说明 低代码启动说明 前端环境和启动前端工程 无代码设计器启动方式 后端无代码设计器Jar包启动方法 平台部署及依赖说明 Oinone平台部署及依赖说明（v5.0） 问题排查方法 问题排查工具使用手册 前后端研发帮助文档 前端文档 后端文档 项目开发实践要点 【前端】项目开发前端知识要点地图 【后端】项目开发后端知识要点地图 版本升级说明 版本更新日志 工具包 【附件一】下载说明 许可证使用说明 pamirs-license 许可证使用常见问题 更多文档新人引导建议，可以下方评论

  shao

  2024年7月15日

  1.5K000
• 未分类

  自定义字段样式

  在日常开发中，我们经常会遇到需要根据业务规则动态展示字段样式的场景，比如表格、表单或详情中的某些字段需要改变文字颜色。本文将通过一个具体的案例，带大家实现这一功能。 以下以 自定义表格字段文字颜色 为例。 实现步骤 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: 页面效果图

  汤乾华

  2025年1月9日

  5.6K000