节点动作为触发和结束结点中间的动作，点击节点名称可以进行修改。
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9414.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
相关推荐
-
3.5.4 Ux注解详解
我们默认视图已经基本可以用了，但实际业务中还是会有一些不大不小的自定义需求，写自定义视图又太麻烦，今天我们来学习一种更加轻量的模式即：后端研发可以通过注解来配置视觉交互。该系列注解以Ux开头，例如@UxHomepage、@UxMenu、@UxAction、@UxView、@UxWidget等等。 视图XML的配置优先级大于在代码上的注解，也就是代码上的注解影响的是默认展示逻辑。 一、Ux家族图谱 我们先简单通过家族图谱做个简单了解，脑海里有一个影响当有需要的时候知道能不能做，深入了解还需要大家多多动手去尝试 图3-5-4-1 Ux家族图谱 二、默认视图后端配置举例 在下面的代码片段中UxTable、UxForm、UxDetail、UxTableSearch都有涉及，几个特殊点做些解释其他的留大家自行测试 Group分组的配置逻辑：为了不让一个分组内的字段不断的写Group，所以采取了第一个字段写了Group，到下一个出现的group之间的字段都自动归为一个Group 搜素整体不展示可以用“@UxTable(enableSearch = false)”配置在模型的类上。 字段搜索用“UxTableSearch”配置在模型的字段上，其特殊逻辑是只要你配了一个字段，系统就不自动补充了，例子中表格页的搜索栏只会留下店铺名称和店铺编码 ……其他代码 //@UxTable(enableSearch = false)，整体不支持搜索 public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; @Field(displayName = "店铺编码") @UxForm.FieldWidget(@UxWidget(group = "Form基础数据"))//Form分组 @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 private String code; @Field(displayName = "店铺编码2") @Field.Sequence(sequence = "DATE_ORDERLY_SEQ",prefix = "C",size=6,step=1,initial = 10000,format = "yyyyMMdd") private String codeTwo; @UxTableSearch.FieldWidget(@UxWidget())//支持搜索 @UxTable.FieldWidget(@UxWidget(invisible = "true"))//表格中不展示支持搜索 @Field(displayName = "店铺名称",required = true,immutable=true) private String shopName; @Field(displayName = "一年内新店") @UxForm.FieldWidget(@UxWidget(widget = "Switch",group = "Form基础数据"))//Switch,Checkbox可以切换着看，字段可选widget参考【字段的配置】一文 private Boolean oneYear; @Field(displayName = "开店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time openTime; @Field(displayName = "闭店时间",required = true) @UxDetail.FieldWidget(@UxWidget(invisible = "true"))//详情不展示 private Time closeTime; …… 其他代码 } 图3-5-4-2 默认视图后端配置举例
-
3.5.7.5 自定义动作
动作是什么 动作（action)描述了终端用户的各种操作。这些操作可以涉及多个层面，包括但不限于： 页面间的跳转：用户可以通过动作从一个页面跳转到另一个页面。 业务交互：动作可以触发与后端服务的交互，例如提交表单、请求数据等。 界面操作：动作可以用于打开模态对话框、抽屉（侧边栏）等界面元素。 作用场景 Oinone 平台内置了一系列的基础动作，默认实现了常见的功能，如页面跳转、业务交互和界面操作等。这些内置动作旨在满足大多数标准应用场景的需求，简化开发过程，提高开发效率。以下是一些常见的内置动作示例： 页面跳转：允许用户在不同页面间导航。 业务交互：支持与后端服务的数据交互，如提交表单。 界面操作：提供动态返回上一页、校验表单、关闭弹窗等。 自定义动作的需求场景 尽管内置动作覆盖了许多常规需求，但在某些复杂或特定的业务场景中，可能需要更加个性化的处理。这些场景可能包括： 特殊的业务逻辑：需要执行不同于标准流程的特定业务操作。 个性化的用户界面：标准的 UI 组件无法满足特定的设计要求。 高级交互功能：需要实现复杂的用户交互和数据处理。 扩展和定制动作 为了满足这些特定需求，Oinone 平台支持通过继承和扩展来自定义动作。开发者可以通过以下步骤实现自定义动作： 继承基类：从平台提供的动作基类继承，这为自定义动作提供了基础框架和必要的接口。 实现业务逻辑：在继承的基础上，添加特定的业务逻辑实现。 自定义界面：根据需要调整或完全重写界面组件，以符合特定的UI设计。 集成测试：确保自定义动作在各种情况下的稳定性和性能。 最佳实践 明确需求：在进行扩展之前，清楚地定义业务需求和目标。 重用现有功能：尽可能利用平台的内置功能和组件。 保持一致性：确保自定义动作与平台的整体风格和标准保持一致。 充分测试：进行全面的测试，确保新动作的稳定性和可靠性。 案例分析 假设有一个场景，需要一个特殊的数据提交流程，该流程不仅包括标准的表单提交，还涉及复杂的数据验证和后续处理。在这种情况下，可以创建一个自定义动作，继承基础动作类并实现特定的业务逻辑和用户界面。 自定义动作 自定义跳转动作 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./action，action/index.ts更新导出./custom-viewactioin： 图3-5-7-24 自定义跳转动作工程目录示例 步骤 1: 创建自定义动作类 首先，您创建了一个名为 CustomViewAction 的类，这个类继承自 RouterViewActionWidget。这意味着自定义动作是基于路由视图动作的，这通常涉及页面跳转或导航。 import {ActionWidget, RouterViewActionWidget, SPI} from '@kunlun/dependencies'; import CustomViewActionVue from './CustomViewAction.vue'; @SPI.ClassFactory( ActionWidget.Token({ model: 'resource.ResourceCity', name: 'redirectCreatePage' }) ) export class CustomViewAction extends RouterViewActionWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewActionVue); return this; } } 图3-5-7-24 自定义跳转动作组件(TS)代码示例 @SPI.ClassFactory: 这是一个装饰器，用于向平台注册这个新的动作。 ActionWidget.Token: 通过这个Token，指定了这个动作与特定模型 (resource.ResourceCity) 关联，并给这个动作命名 (redirectCreatePage). 步骤 2: 初始化和设置组件 在 initialize 方法中，调用了父类的初始化方法，并设置了自定义的 Vue 组件。 public initialize(props) { super.initialize(props); this.setComponent(CustomViewActionVue); return this; } 图3-5-7-24 初始化和设置组件 步骤 3: 定义 Vue 组件 在 CustomViewAction.vue 文件中，定义了自定义动作的视觉表示。 <template> <div class="view-action-wrapper"> 自定义挑战跳转动作 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'ViewActionComponent' }) </script> <style lang="scss"> .view-action-wrapper { } </style> 图3-5-7-24 自定义跳转动作组件(Vue)代码示例 步骤 4: 效果如下 图3-5-7-24 自定义跳转动作效果示例 自定义服务器动作 示例工程目录 以下是需关注的工程目录示例，action/index.ts更新导出./custom-serveraction： 图3-5-7-24 自定义服务器动作工程目录示例 步骤 1: 创建自定义动作类 首先, 创建了一个名为 CustomServerAction 的类，这个类继承自 ServerActionWidget。这表明您的自定义动作主要关注服务器端的逻辑。 import {ActionWidget, ServerActionWidget, SPI, Widget} from '@kunlun/dependencies'; import CustomServerActionVue from './CustomServerAction.vue'; @SPI.ClassFactory( ActionWidget.Token({ model: 'resource.ResourceCity', name: 'delete' })…
-
3.4.3.3 SPI机制-扩展点
扩展点结合拦截器的设计，oinone可以点、线、面一体化管理Function 扩展点用于扩展函数逻辑。扩展点类似于SPI机制（Service Provider Interface），是一种服务发现机制。这一机制为函数逻辑的扩展提供了可能。 一、构建第一个扩展点 自定义扩展点（举例） 在我们日常开发中，随着对业务理解的深入，往往还在一些逻辑中会预留扩展点，以便日后应对不同需求时可以灵活替换某一小块逻辑。 在3.3.4【模型的继承】一文中的PetCatItemQueryService,是独立新增函数只作公共逻辑单元。现在我们给它的实现类增加一个扩展点。在PetCatItemQueryServiceImpl的queryPage方法中原本会先查询PetCatType列表，我们这里假设这个逻辑随着业务发展未来会发生变化，我们可以预先预留【查询萌猫类型扩展点】 Step1 新增扩展点定义PetCatItemQueryCatTypeExtpoint 扩展点命名空间：在接口上用@Ext声明扩展点命名空间。会优先在本类查找@Ext，若为空则往接口向上做遍历查找，返回第一个查找到的@Ext.value注解值，使用该值再获取函数的命名空间；如果未找到，则返回扩展点全限定类名。所以我们这里扩展点命名空间为：pro.shushi.pamirs.demo.api.extpoint.PetCatItemQueryCatTypeExtpoint 扩展点技术名称：先取@ExtPoint.name，若为空则取扩展点接口方法名。所以我们这里技术名为queryCatType package pro.shushi.pamirs.demo.api.extpoint; import pro.shushi.pamirs.demo.api.model.PetCatType; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import java.util.List; @Ext public interface PetCatItemQueryCatTypeExtpoint { @ExtPoint(displayName = "查询萌猫类型扩展点") List<PetCatType> queryCatType(); } 图3-4-3-11 新增扩展点定义PetCatItemQueryCatTypeExtpoint Step2 修改PetCatItemQueryServiceImpl（用Ext.run模式调用） 修改queryPage，增加扩展点的使用代码。扩展点的使用有两种方式 方法一，使用命名空间和扩展点名称调用Ext.run(namespace, fun, 参数); 方法二，使用函数式接口调用Ext.run(函数式接口, 参数); 我们这里用了第二种方式 用PetCatItemQueryCatTypeExtpoint的全限定类名作为扩展点的命名空间(namespace) 用queryCatType的方法名作为扩展点的技术名称(name) 根据namespace+name去找到匹配扩展点实现，并根据规则是否匹配，以及优先级唯一确定一个扩展点实现去执行逻辑 package pro.shushi.pamirs.demo.core.service; ……省略依赖包 @Model.model(PetCatItem.MODEL_MODEL) @Component public class PetCatItemAction extends DataStatusBehavior<PetCatItem> { @Override protected PetCatItem fetchData(PetCatItem data) { return data.queryById(); } @Action(displayName = "启用") public PetCatItem dataStatusEnable(PetCatItem data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function.Advanced(displayName = "查询模型数据的默认过滤条件", type = FunctionTypeEnum.QUERY, managed = true) @Function(openLevel = {LOCAL}) public String queryFilters() { StringBuilder sqlWhereCondition = new StringBuilder(); // List<PetCatType> typeList = new PetCatType().queryList(); List<PetCatType> typeList = Ext.run(PetCatItemQueryCatTypeExtpoint::queryCatType, new Object[]{}); if(!CollectionUtils.isEmpty(typeList)){ // sqlWhereCondition.append("type_id"); sqlWhereCondition.append(PStringUtils.fieldName2Column(LambdaUtil.fetchFieldName(PetCatItem::getTypeId))); sqlWhereCondition.append(StringUtils.SPACE).append(SqlConstants.IN).append(CharacterConstants.LEFT_BRACKET); for(PetCatType petCatType: typeList){ sqlWhereCondition.append(petCatType.getId()).append(CharacterConstants.SEPARATOR_COMMA); } sqlWhereCondition.deleteCharAt(sqlWhereCondition.lastIndexOf(CharacterConstants.SEPARATOR_COMMA)); sqlWhereCondition.append(StringUtils.SPACE).append(CharacterConstants.RIGHT_BRACKET); } return sqlWhereCondition.toString(); } ……省略其他函数 } 图3-4-3-12 修改PetCatItemQueryServiceImpl Step3 新增扩展点实现PetCatItemQueryCatTypeExtpointOne 扩展点命名空间要与扩展点定义一致，用@Ext(PetCatItemQueryCatTypeExtpoint.class) @ExtPoint.Implement声明这是在@Ext声明的命名空间下，且技术名为queryCatType的扩展点实现 package pro.shushi.pamirs.demo.core.extpoint; import pro.shushi.pamirs.demo.api.extpoint.PetCatItemQueryCatTypeExtpoint; import pro.shushi.pamirs.demo.api.model.PetCatType; import pro.shushi.pamirs.meta.annotation.Ext; import pro.shushi.pamirs.meta.annotation.ExtPoint; import pro.shushi.pamirs.meta.api.session.PamirsSession; import java.util.List; @Ext(PetCatItemQueryCatTypeExtpoint.class) public class PetCatItemQueryCatTypeExtpointOne implements PetCatItemQueryCatTypeExtpoint { @Override @ExtPoint.Implement(displayName = "查询萌猫类型扩展点的默认实现") public List<PetCatType> queryCatType() { PamirsSession.getMessageHub().info("走的是第一个扩展点"); List<PetCatType> typeList = new PetCatType().queryList(); return typeList; } } 图3-4-3-13 新增扩展点实现PetCatItemQueryCatTypeExtpointOne Step4…
-
3.5.7.6 自定义字段
字段是什么 字段的基本概念 定义：字段通常指的是数据的一个单独项，它可以是一个文本框、下拉菜单、复选框等，用于在用户界面上收集或展示数据。 用途：在表单中，字段用于收集用户输入；在表格或列表中，字段用于显示数据。 类型：字段可以有不同的类型，如文本、数字、日期等，这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中，字段的设计和实现遵循以下原则： 后端模型驱动：前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示，以及如何展示。 减少前后端联调：由于字段的定义和行为是由后端控制的，前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段，而后端则负责数据的逻辑和结构。 灵活性与规范性：虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则，以保持前后端的一致性和减少沟通成本，但它也为高度定制化的前端页面提供了灵活性。 元数据使用：Oinone可能还使用元数据来进一步定义字段的行为，例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时，理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率，而且有助于确保数据的一致性和应用程序的可维护性。同时，对于那些需要特定定制或特殊处理的场景，开发团队能够灵活地适应这些需求，在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中，字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点： 业务组件的核心： Oinone集成了AntdDesignVue的全部UI组件，将它们转化为业务组件。这些业务组件以字段的形式存在，使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面，大大减少了开发工作量。 无代码开发支持： 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面，而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程，提升了开发效率。 个性化定制： 虽然标准的UI组件可以满足大部分需求，但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中，开发者可以根据具体业务需求和公司的UI指南，定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合： Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时，也能保持使用无代码工具的便利性，实现更灵活、更高效的前端开发。 适应多维度业务需求： 由于字段在Oinone中的灵活性和可定制性，它们能够适应多维度的业务需求，无论是从UI设计、用户体验还是业务逻辑的角度，字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./field： 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件： 使用Vue框架创建一个新的组件（例如 CustomStringFieldVue），并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义： 导入必要的模块，如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释： viewType: 指定视图类型，如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型，例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例
