Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9332.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
相关推荐
-
7.2 实战训练（积分发放）
前言 当我们碰到一个全新的场景，除了写代码以外也可以通过设计器来完成，大致步骤如下： 分析业务场景，规划对应的模型并通过模型设计器进行配置 通过界面设计器，设计出必要管理页面 通过流程设计器，设计对应业务流程 通过数据可视化，设计相应的数据看板 场景说明 本节通过例子完成一个积分成本分摊的业务场景 积分支出：谁受益谁支出原则+导购手动确认原则，通过门店应用的积分规则，来实现自动化+手动积分形式实现 案例背景 某家具企业经营多种家具类型，不同系列不同品类分事业部经营。 注： 独立门店：只能售卖本事业部下的商品； 融合门店：可以售卖多事业部下的商品； 需求：需要建立一套积分规则，遵循谁受益谁支出原则+导购手动确认原则；通过门店应用的积分规则，来实现自动化+手动积分。 场景一 导购a邀请老客户c通过裂变分享新客户x在独立门店1下单。系统根据独立门店1的积分规则，自动发放积分给老客户c和新客户x，积分由国一事业部承担。 场景二 融合门店1导购b邀请老客户d裂变分享新客户y在融合门店下单。该订单可能涉及多个事业部，由导购b手动选择最大量值的积分规则进行发放 场景三 独立门店1的导购a邀请老客户c裂变分享新客户z在独立门店2下单。系统根据独立门店2的积分规则，来计算积分值，自动发放老客户c和新客户z的积分，积分由国二事业部 实战训练 Step1 分析业务场景规划对应模型 本场景下涉及基础对象模型包括：事业部、门店、导购、会员等 事业部：它是积分成本的载体 门店：类型分为独立门店和融合门店，独立门店必须隶属于一个事业部，同时配置默认积分发放规则，融合门店可能属于多个事业部当发生积分发放时，需要店员手工选择成本事业部和积分发放规则 导购员：导购员必须隶属于一个门店等 会员：消费者需要记录它隶属导购员，以及是由哪个会员推荐过来的等 涉及业务对象模型包括：积分发放规则，积分发放记录，邀请下单记录 积分发放规则：会员积分发放规则，对应邀请老客的积分发放规则等 积分发放记录：本次发放积分、本次发放积分规则、发放对象(会员)、成本事业部、关联门店、关联导购、关联老客（可空）、关联下单记录编码等 邀请下单记录：导购、下单会员、下单门店、商品信息、下单金额等 对应模型如下： 模型 设计器呈现 自定义字段列表 关系字段说明 说明 事业部 事业部负责人(文本) 门店列表(o2m) 与门店建立o2m绑定关系,绑定时选择双向绑定，双向绑定意思是在事业部这边建立o2m到门店的关系字段，在门店那边建立m2o的关系字段 关系字段需要在有对方模型的情况下再建，比如事业部中的门店列表则是再后面追加新增的 门店 导购列表(o2m) 事业部(m2o) 默认积分发规则(m2o) 门店类型(枚举) 分别与事业部、导购、积分发放规则建立m2o、o2m、m2o关系 门店类型：需要先建对应的数据字典 导购 绑定用户(m2o) 门店(m2o) 是否离职(布尔型) 与门店建立m2o关系 1. 绑定用户，用于后续业务流程设计中的填写规则 2. 打马赛克的忽略，其他场景测试用 会员 会员累计积分(浮点数) 推荐客户(m2o) 所属于导购员(m2o) 是否为新客(布尔型) 与导购、会员建立m2o关系 1. 会员m2o的字段是自关联用于存储推荐会员 2. 打马赛克的忽略，其他场景测试用 积分发放规则 推荐客户发放比例(浮点数) 发放倍数(整数) 积分发放记录 最终发放积分(浮点数) 关联积分规则(m2o) 事件编码(文本) 推荐导购员(m2o) 推荐会员(m2o) 关系门店(m2o) 成本事业部(m2o) 会员(m2o) 成本事业部名称（文本） 会员名称（文本） 与积分发放规则、导购员、会员、门店、事业部建立m2o关系 1. 会员有两个m2o，分别用户记录发放会员和发放会员的推荐会员也就是老客 2. 事件编码用户维护触发本次积分发放记录产生的源头单据编码如：邀请下单记录的编码 邀请下单记录 成本事业部(m2o) 选择积分发放规则(m2o) 下单门店(m2o) 购买商品(文本) 下单金额(整数) 会员(m2o) 导购(m2o) 与成本事业部、积分发放规则、下单门店、会员、导购等建立m2o的关系 1. 会员、下单门店、导购属于必要信息 2. 成本事业部、积分发放规则是业务流程中自动计算回填的数据 Step3 利用界面设计器，设计出必要的管理页面 以事业部为例，构建管理页面。其他模型依次按例子建立管理页面 进入界面设计器，应用选择全员营销，模型选择事业部，点击添加页面下的直接创建 设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表单）后点击确认按钮进入事业部表单设计页面 进入页面设计器，对事业部表单页面进行设计（更多细节介绍，请参考界面设计产品使用手册） a. 左侧为物料区：分为组件、模型。 ⅰ. 【组件】选项卡下为通用物料区，我们可以为页面增加对应布局、字段（如同在模型设计器增加字段）、动作、数据、多媒体等等 ⅱ. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作 b. 中间是设计区域 c. 右侧为属性面板，在设计区域选择中组件会显示对应组件的可配置参数 在左侧【组件】选项卡下，拖入布局组件【分组】，并设置组件【标题属性】为基础信息 在左侧【组件】选项卡下，再次拖入布局组件【分组】，并设置组件【标题属性】为门店列表 在左侧【模型】选项卡下，分别把自定义字段中的【事业部负责人】和系统字段中的【名称】拖入【基础信息】分组，把自定义字段中的【门店列表】字段拖入门店列表分组 在设计区域切换【门店列表】展示组件为【表格】 此时【门店列表】展示形式变成了表格形式，选中【门店列表】组件，会发现左侧【模型】选项卡下的当前模型切换成了【门店】，同时我们在右属性面板区置空其【标题属性】 设计区选中【门店列表】的表格组件，分别把自定义字段中的【默认积分发规则】、【门店类型】、【导购列表】和系统字段中的【名称】拖入【门店列表】表格组件的表格字段设计区 设计区选中【门店列表】的表格组件的【创建】按钮，点击【打开弹窗】设计关系字段【门店】的新增页面 11.分别把自定义字段中的【默认积分发规则】、【门店类型】和系统字段中的【名称】拖入门店的新增页面设计区 选中弹出框中【取消】取消按钮，设置其【按钮样式】属性为【次要按钮】 关闭弹出框，回到主设计区 设计区选中【门店列表】的表格组件的【删除】按钮，设置其【按钮样式】属性为【次要按钮】，【二次确认】属性打开 设计区选中【门店列表】的表格组件中操作列的【编辑】按钮，点击【打开弹窗】设计关系字段【门店】的编辑页面， a. 分别把自定义字段中的【默认积分发规则】、【门店类型】和系统字段中的【名称】拖入门店的新增页面设计区。 b. 选中弹出框中【取消】取消按钮，设置其【按钮样式】属性为【次要按钮】 c. 把门店类型展示组件切换为【单选框】 d. 关闭弹出框 设计区选择非【门店列表】组件如基础信息，模型切换为主模型【事业部】，在左侧【模型】选项卡下，把动作分类下的提交类型【创建】动作拖入中间设计区的动作区 选择中展示名为【确定】的创建动作按钮，在右侧属性面板中设置：是否隐藏属性为【条件隐藏】，隐藏条件为【id非空】 在左侧【模型】选项卡下，把动作分类下的提交类型【更新】动作拖入中间设计区的动作区 选择中展示名为【确定】的更新动作按钮，在右侧属性面板中设置：是否隐藏属性为【条件隐藏】，隐藏条件为【id为空】。之所以同时拖入【创建】和【更新】动作并都命名为确认，是期望这个页面同时可以做为新增页面也可以做为编辑页面，只不过要通过条件隐藏来设置按钮的出现规则 在左侧【组件】选项卡下，把动作分类下的【客户端动作】拖入中间设计区的动作区 选择设计区【客户端动作】，在右侧属性面板中设置：动作名称为【返回】，客户端行为为【返回上一个页面】并点击保存 选择设计区【返回】动作，在右侧属性面板中设置：按钮样式为【返回】，【二次确认】属性打开并设置提示文字为【返回页面操作将不被保存】，可以点击预览二次确认看效果 点击【发布】按钮，页面成功发布，每发布一次会有一个例子版本，可以通过历史版本进行恢复 点击右上角历史版本图标，进入历史版本查看页面 在历史版本页面可以选择对应历史版本记录，并通过【恢复此版本】来完成页面的历史版本切换 接下来我们为事业部模型创建表格管理页面，入口同编辑页面。设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表格）后点击确认按钮进入事业部表格设计页面 进入页面设计器，对事业部表格页面进行设计（更多细节介绍，请参考界面设计产品使用手册） 在左侧【模型】选项卡下，分别把自定义字段中的【事业部负责人】和系统字段中的【名称】拖入表格组件的表格字段设计区 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【新增】，数据控制类型为【不进行数据处理】，打开方式为【当前窗口打开】，动作跳转页面为【事业部编辑】页面，并点击保存 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的行内动作区，并在右侧属性面板中设置动作名称为【编辑】，数据控制类型为【处理单条数据】，打开方式为【当前窗口打开】，动作跳转页面为【事业部编辑】页面，并点击保存 在左侧【模型】选项卡下，把动作分类下的【删除】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【删除】，按钮样式为【次要按钮】，【二次确认】属性打开 点击右上角【显示母版】进入页面最终展示形式，点击添加菜单项，并在输入框中输入【事业部管理】 点击菜单右侧设置图标，选择【绑定已有页面】，进行菜单与页面的绑定操作 在绑定页面中，模型选择【事业部】，视图选择【事业部管理】，点击确认按钮提交 拖动【事业部管理】菜单到【积分管理】父菜单下 最后别忘了点击右上角【发布】按钮对【事业部管理】表格页面进行发布，回到界面设计器首页查看刚刚建好的两个页面 以事业部为例分别对门店、导购、会员、积分发放规则、积分发放记录、邀请下单记录等模型进行页面设计，这里不再累赘，请按照自身学习需要，尝试进行界面设计 Step4 通过流程设计器，设计对应业务流程 我们先来整理下核心流程即：邀请下单流程 Step4.1 创建导购邀请下单记录触发流程 进入流程设计器，点击【创建】按钮 注意：流程中需要获取关系类型的字段（如：O2O、O2M、M2O或M2M），这种类型都是复杂的对象字段，除关联字段(一般为ID)以外的字段，需要通过【数据获取】节点单独获取【关系字段】的对象数据。所以在流程设计中经常会用到【数据获取】节点 左上角编辑流程名称为【导购邀请下单触发流程】，点击第一个【触发】节点，触发方式选择模型触发，模型选择【导购邀请下单】，触发场景选择【新增数据时】，点击该节点的【保存】按钮 点击流程图节点间的【+】图标选择增加【获取数据】节点，或者拖动左侧物料区【获取数据】到特定的【+】图标 点击【获取数据】，在右侧属性面板中设置【获取数据条数】为单条，选择模型为【导购】，点击【筛选条件】的【{X}】图标，进行数据获取的条件设置 选择条件字段为【ID】条件操作符为【等于】，条件为变量的导购字段的ID。当上下文只有一个变量时默认不需要选择，这里默认的是【触发[导购邀请下单记录]】，设置好以后点击确认，回到属性面板设置【未获取到数据时执行方式】为【终止流程】，并点击节点【保持】按钮 再增加一个【获取数据】节点，在右侧属性面板中设置 a. 【获取数据条数】为单条，选择模型为【会员】 b. 点击【筛选条件】的【{X}】图标，进行数据获取的条件设置，选择条件字段为【ID】条件操作符为【等于】，条件为变量【导购邀请下单记录】的会员关系字段的ID字段。因为上下文中存在多个变量时需要选择对应变量，跟获取导购数据有点区别，在获取导购数据时，上下文中只有此次【导购邀请下单记录】所以不需要选择对应变量，设置好以后点击【确认】按钮 c. 回到属性面板设置【未获取到数据时执行方式】为【终止流程】 d. 最后点击节点【保持】按钮。…
-
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 自定义字段效果示例
-
3.1 环境搭建
一、基础环境说明 内容 是否必须 说明 后端基础环境 JDK1.8 必须 java的基础运行环境, 要求高于1.8_221以上，低于这个版本需要覆盖jce (原因：https://www.cnblogs.com/jinloooong/p/10619353.html) Mysql 必须 8.0.26 版本以上需要注意点：修改：my.cnf (macOS ) / my.ini (windows)时区、大小写敏感设置lower_case_table_names = 2default-time-zone = ‘+08:00’ Idea 必须 需要注意点：1.禁用Lombok插件2.java Compiler 增加 -parameters(不然java反射获取方法入参名会变成arg*) 指令3.安装oinone插件 DB GUI 非必须 Datagrip、MySQLWorkbench、DBEaver 选其一 Insomnia 非必须 GraphQL测试工具 Git 必须 2.2.0以上 Maven 必须 3.6.3需要注意点：1配置mvn的settings文件下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员2把settings.xml拷贝一份到maven安装目录conf目录下 RocketMQ 必须 4.7.1以上 Redis 必须 5.0.2以上 Zookeeper 必须 3.5.8以上 前端基础环境 nvm 非必须 方便node的版本管理 nodejs 必须 版本要求为12.12.0注意事项：1.npm的源配置为http://nexus.shushi.pro/repository/kunlun/2.源的用户名、密码见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员 vue-cli 必须 vue脚手架工具 表3-1-1基础环境说明 其他：canal和Es的环境搭建见具体学习章节 二、基础知识准备 前端必备知识 vue3、typescript、graphql 后端必备知识 SpringBoot、MybatisPlus 表3-1-2基础知识准备 三、下载快速安装包 Mac版 Windows版 四、学习安装 推荐，虽然慢点对环境有比较深入的了解，对自身能力提升和日后排查问题都有好处。 mac见：3.1.1【环境准备（Mac版）】一文 windows见：3.1.2【环境准备（Windows版）】一文
-
3.4.1 构建第一个Function
Function做为oinone的可管理的执行逻辑单元，是无处不在的 在3.3.3【模型的数据管理器】和3.3.2【模型类型】一文中的代理模型部分，涉及到包括在Action中自定义函数(action背后都对应一个Function)、重写queryPage的函数、以及独立抽取的公共逻辑函数，Function做为oinone的可管理的执行逻辑单元，是无处不在的。这也是为什么说oinone以函数为内在的原因。 一、构建第一个Function 因为数据管理器和数据构造器是oinone为模型自动赋予的Function，是内在数据管理能力。模型其他Function都需要用以下四种方式主动定义 伴随模型新增函数(举例) 它是跟模型的java类定义在一起，复用模型的命名空间。 Step1 为PetShop增加一个名为sayHello的Function package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type=FunctionTypeEnum.QUERY) public PetShop sayHello(PetShop shop){ PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); return shop; } } 图3-4-1-1 代码示例 Step2 重启看效果 用graphQL工具Insomnia查看效果 用Insomnia模拟登陆 a. 创建一个login请求，用于保存login请求，为后续模拟登陆保留快捷方式 图3-4-1-2 创建一个login请求 b. 下面为登陆请求的GraphQL，请在post输入框中输入。如果请求输入框提示错误可以，可以点击schema 的Refresh Schema来刷新文档 mutation { pamirsUserTransientMutation { login(user: {login: "admin", password: "admin"}) { broken errorMsg errorCode errorField } } } 图3-4-1-3 登陆请求的GraphQL c. 点击Send按钮，我们可以看到登陆成功的反馈信息 图3-4-1-4 登陆成功的反馈信息 用Insomnia模拟访问PetShop的sayHello方法，gql的返回中，我们可以看到两个核心返回 a. 一是方法正常返回的shopName b. 二是“PamirsSession.getMessageHub().info("Hello:"+shop.getShopName())”代码执行的结果，在messages中有一个消息返回，更多消息机制详见4.1.23【框架之信息传递】 query{ petShopQuery{ sayHello(shop:{shopName:"cpc"}){ shopName } } } 图3-4-1-5 用Insomnia模拟访问PetShop的sayHello 图3-4-1-6 代码执行结果 用Insomnia模拟访问PetShopProxy的sayHello方法 效果同用Insomnia模拟访问PetShop的sayHello方法，体现Function的继承特性。 独立新增函数绑定到模型(举例) 独立方法定义类，并采用Model.model或Fun注解,但是value都必须是模型的编码，如@Model.model(PetShop.MODEL_MODEL)或@Fun(PetShop.MODEL_MODEL) Step1 提取PetShop的sayHello方法独立到PetShopService中 注释掉PetShop的sayHello方法 package pro.shushi.pamirs.demo.api.model; …… //import @Model.model(PetShop.MODEL_MODEL) @Model(displayName = "宠物店铺",summary="宠物店铺",labelFields ={"shopName"} ) @Model.Code(sequence = "DATE_ORDERLY_SEQ",prefix = "P",size=6,step=1,initial = 10000,format = "yyyyMMdd") public class PetShop extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.PetShop"; …… //省略其他代码 // @Function(openLevel = FunctionOpenEnum.API) // @Function.Advanced(type=FunctionTypeEnum.QUERY) // public PetShop sayHello(PetShop shop){ // PamirsSession.getMessageHub().info("Hello:"+shop.getShopName()); // return shop; // } } 图3-4-1-7 注释掉PetShop的sayHello 新增PetShopService接口类 接口的方法上要加上@Function注解，这样另模块依赖api包的时候，会自动注册远程服务的消费者 package pro.shushi.pamirs.demo.api.service; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Fun; import pro.shushi.pamirs.meta.annotation.Function; @Fun(PetShop.MODEL_MODEL) //@Model.model(PetShop.MODEL_MODEL) public interface…