1. Oinone社区Home
  2. Oinone 7天入门到精通

7.3.2 原业务加审批流程

史, 昂 • • Oinone 7天入门到精通 • 1726 views

场景说明

场景描述：全员营销标准产品的功能并未有任务发放的审批流，在实际执行中，当营销专员配置好任务后，需部门领导对整个活动如该任务内容、形式、参与人员进行审批。

业务需求：在发布任务这个流程中增加审批节点。

实战训练

Step1 原业务分析

  1. 点击菜单【任务中心】通过URL上的model参数找到对应模型编码为【gemini.biz.GeminiTaskProxy】

image.png

  1. 进入模型设计器主页面，应用选择【全员营销】、选择【系统模型】、通过搜索关键字【任务】选择【Gemini任务代理】，展示方式从图模式切换到表单模式，对比【模型编码】

image.png

image.png

  1. 但目前模型为代理模型，代理模型是用于代理存储模型的数据管理器能力，同时又可以扩展出非存储数据信息的交互功能的模型。因为在代理模型中新增的字段都是非存储字段，所以如果要增加【审核状态】的字段一定以要在存储模型增加。其父模型的查看有两种方式

    1. 表单模式下可以直接看父模型

    2. 在图模式和表单模式下点击继承关系

image.png

  1. 点击【Gemini任务】，进入【Gemini任务】的模型设计界面，可以看出该模型所在模块为【全员营销核心业务】，从【系统字段】中找到【任务状态】字段，点击查看字段详情，我们可以看到【业务类型】为数据字典，字典类型为【任务状态】。

image.png

  1. 在模型设计器的管理页面上方点击【数字字典】选项卡，模块选择为【全员营销核心业务】，选择【系统字典】就可以查看到【任务状态】数字字典

image.png

image.png

  1. 总结如下：

    1. 给【Gemini任务】模型增加一个【任务审批状态】，记录审批状态

    2. 在任务创建的时候，修改【任务状态】为【关闭】确保任务未审批通过的时，用户无法操作该任务。

    3. 审批通过后，恢复【任务状态】为【初始化】

    4. 我们先来整理下核心流程即：任务审批流程。

7.3.2 原业务加审批流程

Step2 利用模型设计器设计模型

  1. 在模型设计器的管理页面上方点击【数字字典】选项卡，模块选择为【全员营销核心业务】，点击添加【数据字典】按钮，设置对应数据项

    1. 设置【字典名称】为【审批状态】

    2. 设置【字典项类型】为【文本】

    3. 通过【添加数据字典项】按钮增加对应数据字典项，如审核中、审核失败、审核成功

image.png

  1. 在模型设计器的管理页面上方点击【模型】选项卡，模块选择为【全员营销核心业务】，选择【系统模型】、搜索任务选择【Gemini任务】，点击添加字段

image.png

  1. 为模型【Gemini任务】添加字段

    1. 设置【字段名称】为【任务审批状态】

    2. 设置【字段业务类型】为数据字典，并选择关联数据字典为【任务审批状态】

    3. 最后点击【创建】按钮完成操作

image.png

image.png

  1. 回到【Gemini任务】设计区，我们可以看到在模型的【自定义字段】选项卡下方多了一个【任务审批状态】字段

image.png

Step3 利用界面设计器，设计出必要的审核页面

  1. 进入界面设计器，应用选择全员营销，模型选择【Gemini任务】，点击添加页面下的直接创建

  2. 设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表单）后点击确认按钮进入【Gemini任务】表单设计页面

image.png

  1. 进入页面设计器，对【Gemini任务】表单页面进行设计（更多细节介绍，请参考界面设计产品使用手册）

    1. 左侧为物料区：分为组件、模型。

      1. 【组件】选项卡下为通用物料区，我们可以为页面增加对应布局、字段（如同在模型设计器增加字段）、动作、数据、多媒体等等

      2. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作

    2. 中间是设计区域

    3. 右侧为属性面板，在设计区域选择中组件会显示对应组件的可配置参数

  2. 在左侧【组件】选项卡下，拖入布局组件【分组】，并设置组件【标题属性】为基础信息

  3. 在左侧【模型】选项卡下，分别系统字段中的【任务标题】、【任务开始时间】、【任务结束时间】、【视频标题】、【视频风格】、【任务描述】拖入【基础信息】分组，并点击【任务描述】，在右侧属性面板的【交互】分组中设置宽度为1。最后别忘了点击【发布】按钮完成页面的发布

image.png

Step4 通过流程设计器，设计对应业务流程

  1. 进入流程设计器，点击【创建】按钮

注意：流程中需要获取【关系字段】的除关联字段(一般为ID)以外的字段需要通过【数据获取】节点单独获取【关系字段】的对象数据。所以在流程设计中经常会用到【数据获取】节点

image.png

  1. 左上角编辑流程名称为【任务审批流程】，点击第一个【触发】节点，触发方式选择模型触发，模型选择【Gemini任务】，触发场景选择【新增或更新数据时】，【筛选条件】设置为【任务审批状态】为空或【任务审批状态】等于【审核中】，点击该节点的【保存】按钮

image.png

image.png

  1. 点击流程图节点间的【+】图标选择增加【获取数据】节点，或者拖动左侧物料区【获取数据】到特定的【+】图标

image.png

image.png

  1. 点击【获取数据】，在右侧属性面板中设置【获取数据条数】为多条，选择模型为【Gemini用户任务实例】，点击【筛选条件】的【{X}】图标，进行数据获取的条件设置

image.png

  1. 选择条件字段为【任务ID】条件操作符为【等于】，条件为变量的导购字段的ID。当上下文只有一个变量时默认不需要选择，这里默认的是【模型触发：[Gemini任务]】，设置好以后点击确认，回到属性面板设置【未获取到数据时执行方式】为【终止流程】，并点击节点【保持】按钮

image.png

  1. 增加【更新数据】节点，在右侧属性面板中

    1. 【更新模型】选择【模型触发：[Gemini任务]】

    2. 【字段列表】点击【创建】按钮

      1. 字段选择 更新【任务状态】字段

      2. 表达式设置为：【已关闭】。

    3. 【字段列表】点击【创建】按钮

      1. 字段选择 更新【任务审核状态】字段

      2. 表达式设置为：【审核中】。

最终完成的【模型触发：[Gemini任务]】更新设置

a. 【模型触发：[Gemini任务]】的【任务状态】字段等于数字字典的【已关闭】，任务审核状态为【审核中】

b. 最后点击节点【保持】按钮。

image.png

image.png

  1. 再增加【更新数据】节点，在右侧属性面板中

    1. 【更新模型】选择【获取数据[Gemini用户任务实例]】

    2. 【字段列表】点击【创建】按钮

      1. 字段选择 更新【任务状态】字段

      2. 表达式设置为：【已关闭】。

    最终完成的【获取数据[Gemini用户任务实例]】更新设置

    a. 【获取数据[Gemini用户任务实例]】的【任务状态】字段等于数字字典的【已关闭】

    b. 最后点击节点【保持】按钮。

image.png

  1. 增加【审批】节点，在右侧属性面板中

    1. 【审批模型】选择模型为【模型触发：[Gemini任务]】

    2. 【选择视图】选择前面新建的页面【流程中的任务编辑页】

    3. 【审批人】选择角色为【超级管理员】

    4. 【数据】权限全部设置为【查看】

    5. 其他配置项默认，需要了解更多请查看产品使用手册

    6. 最后点击节点【保持】按钮。

image.png

  1. 新增【审核分支】，在【通过】分支中增加两个数据更新节点，跟审核前的两个数据更新节点对应

    1. 【模型触发：[Gemini任务]】的【任务状态】字段等于数字字典的【初始化】，任务审核状态为【审核通过】

    2. 【获取数据[Gemini用户任务实例]】的【任务状态】字段等于数字字典的【初始化】

image.png

image.png

  1. 流程确保保持并发布过，点击右上角【发布流程】完成流程的保存与发布

Step5 检验效果

  1. 创建任务后，任务状态为【关闭】状态，任务列表中的任务状态为多个状态的计算值

  2. 审核通过后，任务状态为【进行中】状态，任务列表中的任务状态为多个状态的计算值

Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9337.html

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

Like (0)
史, 昂's avatar史, 昂数式管理员
0 0
Previous 2024年5月23日 am8:01
Next 2024年5月23日 am8:03

相关推荐

  • 书籍封面 Oinone 7天入门到精通

    书籍封面

    史, 昂's avatar 史, 昂
    2024年5月23日
    3.6K00

  • 数据可视化

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年6月20日
    2.5K00
  • 4.1.23 框架之信息传递 Oinone 7天入门到精通

    4.1.23 框架之信息传递

    在4.1.13【Action之校验】、3.4.1【构建第一个Function】等文章中，都用到PamirsSession.getMessageHub()来设置返回消息，基本上都是在传递后端逻辑判断的异常信息，而且在系统报错时也会通过它来返回错误信息，前端接收到错误信息则会以提示框的方式进行错误提示。其实后端除了可以返回错误信息以外，还可以返回调试、告警、成功、信息等级别的信息给前端。但是默认情况下前端只提示错误信息，可以通过前端的统一配置放开提示级别，有点类似后端的日志级别。 一、不同信息类型的举例 Step1 新建PetTypeAction 借用PetType模型的表格页做为信息传递的测试入口，为PetType模型新增一个ServerAction，在代码中对信息的所有类型进行模拟 package pro.shushi.pamirs.demo.core.action; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.model.PetCatItem; import pro.shushi.pamirs.demo.api.model.PetType; import pro.shushi.pamirs.meta.annotation.Action; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.dto.common.Message; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.enmu.ActionContextTypeEnum; import pro.shushi.pamirs.meta.enmu.InformationLevelEnum; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; @Model.model(PetType.MODEL_MODEL) @Component public class PetTypeAction { @Action(displayName = "消息",bindingType = ViewTypeEnum.TABLE,contextType = ActionContextTypeEnum.CONTEXT_FREE) public PetType message(PetType data){ PamirsSession.getMessageHub().info("info1"); PamirsSession.getMessageHub().info("info2"); PamirsSession.getMessageHub().error("error1"); PamirsSession.getMessageHub().error("error2"); PamirsSession.getMessageHub().msg(new Message().msg("success1").setLevel(InformationLevelEnum.SUCCESS)); PamirsSession.getMessageHub().msg(new Message().msg("success2").setLevel(InformationLevelEnum.SUCCESS)); PamirsSession.getMessageHub().msg(new Message().msg("debug1").setLevel(InformationLevelEnum.DEBUG)); PamirsSession.getMessageHub().msg(new Message().msg("debug2").setLevel(InformationLevelEnum.DEBUG)); PamirsSession.getMessageHub().msg(new Message().msg("warn1").setLevel(InformationLevelEnum.WARN)); PamirsSession.getMessageHub().msg(new Message().msg("warn2").setLevel(InformationLevelEnum.WARN)); return data; } } 图4-1-23-1 为PetType模型新增一个ServerAction Step2 （前端）修改提示级别 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现，修改信息提示的默认级别为【ILevel.SUCCESS】 图4-1-23-2（前端）修改提示级别 const DEFAULT_MESSAGE_LEVEL = ILevel.SUCCESS; 图4-1-23-3（前端）修改提示级别 Step3 重启系统看效果 从页面效果中看到已经不在是只提示错误信息。从协议端看错误级别的信息是在errors下，其他级别的信息是在extensions下。 图4-1-23-4 示例效果 图4-1-23-5 系统提示的返回结果 二、MessageHub的其他说明 是实现上看MessageHub是基于GQL协议，前后端都有配套实现。同时前端还提供了订阅MessageHub的信息功能，以满足前端更多交互要求，前端MessageHub提供的订阅能力使用教程详见4.2.2前端高级特性之【框架之MessageHub】一文。

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.8K00
  • 3.5.7.4 自定义页面 Oinone 7天入门到精通

    3.5.7.4 自定义页面

    页面是什么 在Oinone前端体系中，页面是一个核心概念，它代表着终端用户所看到的当前视图。这个视图可以有多种形式，主要取决于页面是如何定义和构建的。在深入理解页面之前，我们需要了解两个关键的功能：自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能，但在某些情况下，它可能无法完全满足特定的需求。这时，自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充，允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时，自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计，添加特定的交互元素，或者整合复杂的业务逻辑，以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例，展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./view： 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先，我们定义了一个名为 CustomViewWidget 的 TypeScript 组件，并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次，我们创建了对应的 Vue 单文件组件 CustomView.vue，用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来，我们使用 registerLayout 函数注册了一个表格视图布局，并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后，它就可以在表格视图中被使用。在表格视图的布局中，我们通过 标签将自定义视图嵌套在表格中，从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是，registerLayout 函数和自定义布局的规则是一致的，这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则，从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先，我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.8K00
  • 3.5.7.3 自定义布局 Oinone 7天入门到精通

    3.5.7.3 自定义布局

    布局是什么 在系统中，布局决定了母版内的页面元素，一个页面可以由多个组件进行组装，布局可以根据视图类型来替换。 默认布局范围: 图3-5-7-36 默认布局范围 作用场景 系统内置了多个布局组件，这些组件适用于全局、某个应用或某个页面，提供了灵活的布局定制选项。这些组件根据不同类型的视图进行了默认的组装，这也是选择了视图类型后，页面能够呈现的原因。当然，这些默认的组装是可以被覆盖、新增和添加新组件的。 使用registerLayout进行自定义布局 开发者在使用这些布局组件时，应该遵循公司的规范进行统一的调整。自定义布局组件的使用可通过 registerLayout 实现。registerLayout 的第一个参数是代表布局的 XML，第二个参数是不同的选项维度，默认包含以下维度： viewType: 视图类型 module: 视图模型所在模块 moduleName: 视图模型所在模块名称 model: 视图模型编码 modelName: 视图模型名称 viewName: 视图名称 actionName: 动作名称 inline: 是否内嵌视图(子视图特有) ttype: 模型字段类型(子视图特有) relatedTtype: 关联模型字段类型(子视图特有) field: 字段(子视图特有) 需要注意的是，动作可以是A模块下的a模型，这个动作可以打开B模块下的b模型的视图，module、moduleName、model、modelName应该填b模型对应的值，只不过大部分场景我们都是本模型的动作打开本模型的视图，所以这些场景拿动作所在模型填这些值也可以这些纬度也可以通过查看TS的定义查看 全局 在系统中，我们可以通过指定视图类型来决定某一类视图的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table } 时，代表了替换了系统内所有表格的布局样式。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./layout，layout/index.ts更新导出./tableLayout： 图3-5-7-37 全局纬度注册布局工程目录示例 示例代码 import {registerLayout, ViewType} from '@kunlun/dependencies' /** * 把系统内所有表格类型视图的全局动作放入搜索区域 * * 移动actionBar布局至外层 * <element widget="actionBar" slot="actionBar" slotSupport="action"> * <xslot name="actions" slotSupport="action" /> * </element> * */ const registerGlobalTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view>`, { viewType: ViewType.Table }) } registerGlobalTableLayout() 图3-5-7-38 全局纬度注册布局代码示例 效果 图3-5-7-39 全局纬度注册布局效果示例 应用 在系统中，我们可以通过指定视图类型和模块名称来替换某一类视图在特定模块下的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table, moduleName: ‘resource’ } 时，代表了替换了资源应用下所有表格的布局样式，而其他应用仍使用默认布局 import {registerLayout, ViewType} from '@kunlun/dependencies' const registerModuleTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack…

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.5K00

Leave a Reply

Please Login to Comment