【界面设计器】他表字段

阅读之前

你应该:

概述

他表字段是一种可以从关联关系字段中取出对应字段,并平铺在当前模型中的特殊字段。本质上是具有固定【计算公式】的字段。

其主要用于解决GQL在获取关联关系字段时层级过深的问题(非存储的他表字段),也可以用于解决字段冗余的数据同步问题(存储的他表字段)。

这里需要注意的一点是,他表字段的数据同步能力是在客户端进行处理的。无法完全保证数据同步的一致性。

场景描述

为了方便接下来的描述,我们需要先构建一个基本的业务场景,这个场景中包含【商品】、【商品订单】以及【商品订单明细】三个模型。

创建/编辑【商品订单明细】时使用【商品】,【商品】下拉选项中使用【商品编码】 - 【商品名称】格式展示。

在【商品订单明细】展开的表格中展示【商品编码】和【商品名称】,而不是使用【商品】。

其模型定义如下:

商品(Item)
名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段
ID id 整数 - - - -
编码 code 文本 128 - - -
名称 name 文本 128 - -
商品订单(ItemOrder)
名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段
ID id 整数 128 - -
编码 code 文本 128 - - -
订单明细 details 一对多 - 商品订单明细(ItemOrderDetail) id - orderId
商品订单明细(ItemOrderDetail)
名称 API名称 业务类型 是否多值 长度(单值长度) 关联模型 关联字段
ID id 整数 128 - -
订单 order 多对一 - 商品订单(ItemOrder) orderId - id
订单ID orderId 整数 - - -
商品 item 多对一 - 商品(Item) itemId - id
商品ID itemId 整数 - - -
数量 count 整数 - - -

准备工作

根据模型定义,我们要为【商品】和【商品订单】创建基本的增删改查操作,以此来进行我们接下来的步骤。

(下面仅展示了一些特殊页面,其他页面与基础的增删改查页面没有明显差别)

设计商品订单【表单】视图

将订单明细拖放至页面中,并使用【组件切换】功能将当前的【下拉多选】组件切换至【表格】组件。

image.png

对订单明细所展开的【内嵌表格】进行设计。将【商品】和【数量】两个字段放入表格中。

image.png

设计创建和编辑使用的弹窗视图。(两个按钮都需要设计,这里仅演示创建按钮的设计过程)

image.png

image.png

小贴士:

  • 点击弹窗右上角的X可关闭弹窗设计页面。
  • 左侧【组件库】-【模型】中展示的【当前模型】在选中【订单明细】字段以及它内部的字段或动作时会变为【商品订单明细】关联模型。要想继续设计【商品订单】模型,需要选中任意一个不在【订单明细】字段范围内的组件。在当前视图中可以选中【编码】字段切换至【商品订单】模型。
  • 多模型视图的设计总是需要关注【当前模型】这一信息的。

创建他表字段

目前仅能在界面设计器中通过他表字段组件创建他表字段,在低代码中使用Related定义他表字段。

拖入他表字段,创建【商品编码】字段

image.png

拖入他表字段,创建【商品名称】字段

image.png

隐藏表格中的【商品】字段

image.png

PS:由于他表字段本质上是通过引用的方式取得对象中的值,所以此处不能将该字段直接移除,而是需要隐藏。

在创建/编辑弹窗中添加他表字段并隐藏

image.png

PS:内嵌表格的创建/编辑功能同样会根据元数据进行裁剪,因此要想保证【商品编码】和【商品名称】被正确回填到表格中,这一步骤是必须的。并且为了避免由于使用不同字段导致无法回填的问题,你需要从【组件库】-【模型】中重复使用字段,而不是从【组件】拖入。这并非是他表字段的特性,而是所有内嵌表格都只能通过这种方式进行数据回填。

Oinone社区 作者:oinone原创文章,如若转载,请注明出处:https://doc.oinone.top/designer/60.html

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

(0)
oinone的头像oinone
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 流程设计器的导入导出

    目录 依赖包安装GraphQL的工具登录gql导出生成json文件业务工程中导入示例代码生产环境使用流程设计器 简介 通过调用导出接口,将设计器的设计数据与元数据打包导出到文件中。提供了download/export两类接口。 依赖包 <dependency> <groupId>pro.shushi.pamirs.metadata.manager</groupId> <artifactId>pamirs-metadata-manager</artifactId> </dependency> 安装GraphQL的工具 下载官网地址:https://github.com/Kong/insomnia/releases 登录gql 示例调用代码 mutation { pamirsUserTransientMutation { login(user: { login: "admin", password: "admin" }) { needRedirect broken errorMsg errorCode errorField } } } 导出生成json文件 执行GraphQL,直接返回导出数据。适用于通过浏览器直接下载文件。 指定模块导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { module: "demo_core", fileName: "workflow_meta" }) { jsonUrl } } } 指定流程编码导出 请求示例: mutation { workflowDesignerExportReqMutation { export(data: { workflowCode: "WF0000000000132500", fileName: "workflow_meta" }) { jsonUrl } } } 业务工程中导入示例代码 导入元数据示例代码 @Slf4j @Order(Integer.MAX_VALUE-1) @Component public class DemoModuleAppInstall implements MetaDataEditor, LifecycleCompletedAllInit { //流程设计器导出的页面元数据json private static final String INSTALL_WORKFLOW_META_PATH = "install/workflow_meta.json"; @Override public void edit(AppLifecycleCommand command, Map<String, Meta> metaMap) { if(StringUtils.isBlank(INSTALL_WORKFLOW_META_PATH)) return; log.info("开始安装-元数据"); try { InitializationUtil util = InitializationUtil.get(metaMap, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); if (null != util) { // 设计器的元数据 if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装流程设计器元数据"); DesignerInstallHelper.mateInitialization(util, INSTALL_WORKFLOW_META_PATH, DemoModule.MODULE_MODULE, DemoModule.MODULE_NAME); } } } catch (Exception e) { log.error("初始化流程设计器导入异常", e); } } @Override public void process(AppLifecycleCommand command, Map<String, ModuleDefinition> runModuleMap) { if(StringUtils.isNotBlank(INSTALL_WORKFLOW_META_PATH)) { log.info("开始安装-流程设计器数据"); // 支持远程调用,但是执行的生命周期必须是LifecycleCompletedAllInit或之后. 本地如果安装了设计器,则没有要求 DesignerInstallHelper.bizInitialization(INSTALL_WORKFLOW_META_PATH); } } } 生产环境使用启动设计器 生产环境如无部署设计器docker镜像,可下载我们oinone-op-ds-all-mini-workflow镜像,单独安装流程设计器。由于导入的是流程设计器的数据,需要在流程设计器中编辑流程,合理设置相关的人员和自定义函数

    2024年5月16日
    1.7K00
  • 【工作流】流程扩展自定义函数示例代码汇总

    目录 1. 流程节点审批人函数2. 审批开始前执行函数3. 填写执行前执行函数4. 待办操作提交后执行函数5. 审批操作数据函数6. 自定义通知人函数 1. 流程节点审批人函数 包含转交、抄送、加签、填写、通知人自定义函数当平台默认提供的审批人选择无法满足个性化的业务需求时,我们可以通过自定义函数处理审批人的生成逻辑 1.1 编写自定义审批人函数 @Function(openLevel = {FunctionOpenEnum.API}) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "报销单-证明人-审批", category = CUSTOM_DESIGNER) public List<NodePerson> bizZmrApprovePerson(List<NodePerson> nodePersonList, NodeModel nodeModel, WorkflowContext workflowContext) { List<NodePerson> newNodePersonList = new ArrayList<>(); String nodeModelId = nodeModel.getId(); Object nodeData = workflowContext.get(nodeModelId); BuissModel inputBuissModel = JsonUtils.parseObject(JsonUtils.toJSONString(nodeData), BUISSMODEL_TR); BuissModel buissModel = new BuissModel().setId(inputBuissModel.getId()).queryById(); buissModel.fieldQuery(BuissModel::getZmEmployee); BxEmployee zmEmployee = buissModel.getZmEmployee(); if (zmEmployee == null) { log.error("报销单ID:{},名称:{}, 获取证明人为空", buissModel.getId(), buissModel.getName()); return newNodePersonList; } NodePersonUser personUser = new NodePersonUser(); List<NodePersonUser> nodePersonUsers = new ArrayList<>(); NodePerson person = new NodePerson(); person.setId(zmEmployee.getBindingUserId() + ""); person.setType(NodePersonTypeEnum.USER); personUser.setUserId(zmEmployee.getBindingUserId()); nodePersonUsers.add(personUser); person.setNodePersonUsers(nodePersonUsers); newNodePersonList.add(person); return newNodePersonList; } 1.2 流程设计器的审批节点设置自定义函数 2.审批开始前执行函数 使用场景:在流程执行到审批或填写节点任务初始化后,任务尚未开始,需要在初始化任务做一些自定义逻辑处理时,使用该扩展执行时间:执行节点是在审批或填写待办任务初始化之后,审批或填写结果执行之前,执行该扩展 /** * 审批节点初始化完成,执行前置函数 * @param approvalNode * @param context * @param taskInstance */ @Function(name = "approvalCustomStartFun",openLevel = FunctionOpenEnum.API) @Function.Advanced(type= FunctionTypeEnum.QUERY,displayName = "审批执行前置处理",category = FunctionCategoryEnum.CUSTOM_DESIGNER ) public void approvalCustomStartFun(ApprovalNode approvalNode, WorkflowContext context, WorkflowTaskInstance taskInstance) { // TODO: 2024/2/23 可以根据结果自己处理业务逻辑 } 3.填写执行前执行函数 /** * 填写执行前置处理 */ @Function(name = "writeCustomStartFun", openLevel = FunctionOpenEnum.API) @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "填写执行前置处理", category = FunctionCategoryEnum.CUSTOM_DESIGNER) public void writeCustomStartFun(WorkflowTaskInstance taskInstance, WriteNode writeNode, WorkflowContext context) { System.out.println("填写执行前置处理"); } 4. 待办操作提交后执行函数 使用场景:在审批或填写的待办任务在操作任务时,需要额外执行一些逻辑,比如当前人提交操作以后需要更新更当前人操作相关的数据库记录,执行时间:执行节点是在保存待办任务之后,异步执行审批或填写结果之前,执行该扩展 /** * 转交操作后置函数,再流程设计器中审批和填写节点中…

    2023年12月4日
    1.5K00
  • 工作流动态表单使用说明

    需求背景 为了提高操作效率并简化流程设计过程,应对伙伴们反映的在流程设计器中,即使填写/审批流程相同,不同模型也需重新配置的问题,我们引入了“动态表单”功能。此功能旨在减少重复配置的需求,通过设置节点名称和绑定视图,便可实现审批流程相同而视图不同,从而使得相同的审批流程可以被高效重复利用。 核心功能是:通过自定义函数实现视图的动态渲染,如图所示《动态表单函数》。 自定义动态表单函数 动态表单函数定义规则如下: namespace:强制为 WorkflowFunctionConstant.FUNCTION_NAMESPACE。 fun:强制以 WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX 为前缀。 入参说明: 参数1:节点数据,例如,配合instanceof可以判断当前是填写节点(WriteNode)还是审批节点(ApprovalNode)。 参数2:触发节点的模型数据,如果您的触发节点不确定,可以通过Map接收参数。 参数3:该节点所配置数据来源的数据。 出参说明:视图,如果出参为null,流程终止运行,错误信息提示为“流程节点执行失败,动态表单函数获取视图为空”。 @Slf4j @Component @Fun(WorkflowFunctionConstant.FUNCTION_NAMESPACE) public class DynamicFormCustom { /** * 根据动态表单任务获取视图 * * @param node 节点数据 * @param dynamicFormTask 触发节点数据 * @param dataObj 源数据 */ @Function.fun(WorkflowFunctionConstant.WORKFLOW_CUSTOM_VIEW_FUNCTION_PREFIX + "fetchDynamicFormFunction") @Function.Advanced(displayName = "[内置]获取动态表单函数") @Function(name = "fetchDynamicFormFunction") public View fetchDynamicFormFunction(Node node, DynamicFormTask dynamicFormTask, Map<String, Object> dataObj) { DynamicFormTaskNode dynamicFormTaskNode = fetchDynamicFormTaskNode(node, dynamicFormTask); if (dynamicFormTaskNode == null) { return null; } dynamicFormTaskNode.fieldQuery(DynamicFormTaskNode::getView); return dynamicFormTaskNode.getView(); } private DynamicFormTaskNode fetchDynamicFormTaskNode(Node node, DynamicFormTask dynamicFormTask) { List<DynamicFormTaskNode> dynamicFormTaskNodeList = Models.origin().queryListByWrapper(Pops.<DynamicFormTaskNode>lambdaQuery() .from(DynamicFormTaskNode.MODEL_MODEL) .eq(DynamicFormTaskNode::getNodeName, node.getNodeName()) .eq(DynamicFormTaskNode::getTaskCode, dynamicFormTask.getCode()) ); if (CollectionUtils.isEmpty(dynamicFormTaskNodeList)) { return null; } if (dynamicFormTaskNodeList.size() > 1) { log.error("工作流动态获取表单函数视图匹配多个,{}", JsonUtils.toJSONString(dynamicFormTaskNodeList)); } return dynamicFormTaskNodeList.get(0); } } 相关链接 工作流动态表单最佳实践

    2025年2月7日
    83900
  • 集成接口一键发布生成开放平台接口

    1. 定义集成接口 2. 定义动态参数接口 3. 发布成开放平台接口 3.1 一键勾选多个发布开放平台,可重复发布 3.2 查看开发平台接口列表 3.3 查看开发平台接口详情 3.4 查看开发平台接口详情 4. 创建生成开放平台授权应用 5. postman模拟请求 5.1 获取Oinone开发平台APIKEY和APISecret 在开发接口列表中找到对应授权应用,点击查看密钥,获得APIKEY和APISecret 5.2 请求接口生成accessToken 接口请求 curl –location –request POST 'http://localhost/openapi/get/access-token' \ –header 'appKey: d63cb1d2c2af4e6b95f36b172804e2cc' \ –header 'appSecret: aQ0BwU/vpcLTm5swRaqXW6O5RUdrwOFGJF2nt2I4boIe7luRzul7y8msnKZuPKtvKprmGpw8z29+djBTUkKaV3zBZ4ZPSbaOkiiTB0AQvoPnPBnHxpF6M8xxDlS13hCRy0D01pcc8DbEwWYPetvp7j8WwLL6q3FusJaZPISPLuucT1hxnrCIA2fe72X7UxojROtOfBvYw6+JFv0E8xwrGLfXXX99wbTywuMzhEoqv64dYR2tfNLubua1xJnf/iAhFao+gw7y/44CZ1u3sUpFeIn5T9MnXB3BDVJnanSZTsxnl5wWY9HojrqtSfPJpcd59OKEmehpbHT9++muvDHgdM5zhbS6NhgSXKdH/kOQEP695RcB09AJxHIwcNF6hv4wGBNsAzHFUMx2QTgwHLONmFjx85ZNkp1iD8L3CYn+5kH2FAO+PG9KG/HvJRGoiViF53LyCSzf5FKj0uUY4QCHbTXXNfCE2L04PNlRj1Hj17JKxcTQ6ea1GsslYG5GjiOET2mRWw+DdnxK6S3GGR0pudRD3K22eG+ZLe/IY4sbMmJfAh8daYtOGcDuoiNXXbUUsf9uSgDDBihXy9ajNQUh8qIHb+N5dqbm/o69WLPUYVYvUzWZt23LHCLj1G8iZTTgkPmdhBsXGRcCBtyMpA7Vfci1TuBzuKrLPnB51T2hGhw=' 响应结果 { "access_token": "P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0mssJl/5Bsg095ohzdCQtQu", "success": true, "errorCode": 0, "expires_time": 7200, "errorMsg": "ok" } 5.3 模拟请求钉钉接口 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } } 5.3 模拟动态参数请求钉钉接口 使用postman请求是对应地址openapi/dingtalk/api/v1.0/{oauth}/accessToken需改成openapi/dingtalk/api/v1.0/:oauth/accessToken 接口请求 curl –location 'http://localhost/openapi/dingtalk/api/v1.0/oauth2/accessToken' \ –header 'accessToken: P0ztlcF+cL0RmRwTqjw6+i03NPScjdJptXQu4W98h0k+xvGkaQmOCqCqKFEe5uNE' \ –header 'Content-Type: application/json' \ –data '{ "appKey": "dinguhgmdxva33gs8oaz", "appSecret": "QlxE8g7xoOCmVOZ9nGy-dqMduMstmxRFNGjENCyuwEVHa9jaxy6CioQYjEFkxHAM" }' 响应结果 { "expireIn": 7200, "accessToken": "f87a4ef669ae35879c5b1ee6237a584b", "http": { "headers": { "Content-Type": "application/json" } } }

    2024年3月28日
    85200
  • 弹窗或抽屉表单视图rootRecord获取不到对应的数据

    在平台默认的实现中,rootRecord 代表的是根视图的数据。比如,在表格页面点击按钮打开了弹窗,弹窗里面包含一个表单视图,但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据,需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据: @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'MyCustomFormWidgetFormWidget' }) ) export class MyCustomFormWidgetFormWidget extends FormWidget { @Widget.Reactive() @Widget.Provide() public get rootData(): any[] | undefined { return this.activeRecords; } } 上述代码重写了 rootData,这样就可以确保 rootData 的数据是弹窗的数据。 接下来就是注册: registerLayout( ` <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyCustomFormWidgetFormWidget" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> `, { viewType: ViewType.Form, model: '弹窗模型', viewName: '弹窗视图名称' } )

    2023年11月13日
    1.3K00

Leave a Reply

登录后才能评论