3.5.6.2 视图的配置

相关推荐

• 集成设计器

  史, 昂

  Oinone 7天入门到精通 2024年6月20日

  986000
• Oinone 7天入门到精通

  4.2.2 框架之MessageHub

  一、MessageHub 请求出现异常时，提供”点对点“的通讯能力 二、何时使用 错误提示是用户体验中特别重要的组成部分，大部分的错误体现在整页级别，字段级别，按钮级别。友好的错误提示应该是怎么样的呢？我们假设他是这样的 与用户操作精密契合 当字段输入异常时，错误展示在错误框底部 按钮触发服务时异常，错误展示在按钮底部 区分不同的类型 错误 成功 警告 提示 调试 简洁易懂的错误信息 在oinone平台中，我们怎么做到友好的错误提示呢？接下来介绍我们的MessageHub，它为自定义错误提示提供无限的可能。 三、如何使用 订阅 import { useMessageHub, ILevel } from "@kunlun/dependencies" const messageHub = useMessageHub('当前视图的唯一标识'); /* 订阅错误信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }) /* 订阅成功信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }, ILevel.SUCCESS) 图4-2-2-1 订阅的示例代码 销毁 /** * 在适当的时机销毁它 * 如果页面逻辑运行时都不需要销毁，在页面destroyed是一定要销毁，重要！！！ */ messageHub.unsubscribe() 图4-2-2-2 销毁的示例代码 四、实战 让我们把3.5.7.5【自定义视图-表单】一文中的自定义表单进行改造，加入我们的messageHub，模拟在表单提交时，后端报错信息在字段下方给予提示。 Step1 （后端）重写PetType的创建函数 重写PetType的创建函数，在创建逻辑中通过MessageHub返回错误信息，返回错误信息的同时要设置paths信息方便前端处理 @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "确定", summary = "创建", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public PetType create(PetType data){ List<Object> paths = new ArrayList<>(); paths.add("demo.PetType"); paths.add("kind"); PamirsSession.getMessageHub().msg(new Message().msg("kind error").setPath(paths).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); List<Object> paths2 = new ArrayList<>(); paths2.add("demo.PetType"); paths2.add("name"); PamirsSession.getMessageHub().msg(new Message().msg("name error").setPath(paths2).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); // data.create(); return data; } 图4-2-2-3 （后端）重写PetType的创建函数 Step 2 修改PetForm.vue <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item label="品种种类" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template>- <script lang="ts"> import { defineComponent, reactive…

  史, 昂

  2024年5月23日

  873000
• Oinone 7天入门到精通

  2.1 数字化时代软件业的另一个本质变化

  随着企业从信息化向数字化转变，软件公司提供的产品也由传统的企业管理软件向企业商业支撑软件发展。这一变化带来了许多技术上的挑战和机遇。在之前的章节中，我们提到企业的视角已经从内部管理转向业务在线和生态在线协同，这也带来了一系列新的需求。但是，我们常常会忽视这一变化所带来的对系统要求的变化。在本章中，我们将探讨这些技术上的变化，以及这些变化所带来的机遇和挑战。 图2-1 从信息化到数字化软件本质变化 在信息化时代，企业的业务围绕着内部管理效率展开，借鉴国外优秀的管理经验，企业将其管理流程固化下来，典型的例子是ERP项目。这类项目上线后往往长期稳定，不轻易更改，因此信息化时代软件的技术流派侧重于通过模型对业务进行全面支持。例如，SAP具有丰富的配置能力，将已有企业管理思想抽象到极致。其功能基本上可以通过配置来实现，因此其模型设计特别复杂。但是，我们也应该清楚地了解到，配置是面向已知问题的。在数字化时代，创新和业务迭代速度非常快，这种方法可能就不太适合了。我们知道，模型抽象是在设计时具有前瞻性的，一旦不适合，修改起来就会异常困难。 随着数字化时代的到来，企业主的关注点已经从单一企业内部管理转变为了围绕企业上下游价值链的协同展开。这种变化给企业信息化系统提出了更高的要求，例如业务需求的响应速度、系统性能和用户体验等方面。现在，企业对软件不仅是管理需求的承载，更是业务在线化的承载。传统的重模型设计软件模式已经不再适用，因为业务本身不断创新和变化。因此，数字化时代需要新的软件技术流派，这种流派必须是轻模型加上低代码技术的结合体。通过模型抽象80%的通用场景，剩余的20%个性化需求可以通过技术手段来完成。这样的设计可以让每家企业的研发人员轻松理解模型，而不像ERP模型那样异常复杂，无法进行修改。此外，配合低代码技术可以快速研发和上线。如果说配置化是面向已知问题的，那么低代码就是面向未知问题设计的。虽然低代码的概念可以追溯到上个世纪80年代，当时是为了满足企业内部部门之间有协同需求，但又没有专业软件支撑，定制化开发又不划算的辅助场景。但现在它的核心原因是企业数字化的核心场景不稳定，变化很快，每家企业都有强烈的个性化需求。因此，低代码成为解决这些问题的核心手段，数字化时代的低代码需要具备处理复杂场景的能力，而不仅仅是围绕着内部管理展开。 企业在数字化转型的过程中需要考虑到不仅是成熟的全链路业务解决方案，还要应对数字化场景的快速变化和持续创新的需求。为此，Oinone打造了一站式低代码商业支撑平台，从业务与技术两个维度来帮助企业建立开放、链接、安全的数字化平台。这将在水平和垂直两个维度上全面推动企业数字化转型。 另外，低代码的另一个好处是完成了软件本身的数字化建设。通过基于元数据设计，元数据成为软件中数据、逻辑和交互的数据，软件结合AI可以有更多的创造可能。想象一下，AI了解软件的元数据后可以自我运作，人在极少情况下才需要参与，人机交互也会发生大的改变。未来的软件交互不再需要研发提前预设，而是能够实现用户所需即所呈现的效果。作为一家帮助企业进行数字化转型的软件公司，请问您的数字化转型是否已经完成呢？

  史, 昂

  2024年5月23日

  978000
• Oinone 7天入门到精通

  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. 最后点击节点【保持】按钮。…

  史, 昂

  2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  6.4 国际化之多语言

  多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译（使用） 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块，点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为：菜单模型 源语言选择中文，目标选择English 添加翻译项目： 源术语为：商店 翻译值为：shop 状态为：激活 Step2 查看效果 应用切换到Demo模块，在右上角切换语言至英语 后端翻译（自定义模型的翻译） 在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块，点击新增翻译 切换应用到Demo模块，切换中英文，查看效果 前端翻译 还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action，啥也没干\’)||\’oinone第一个自定义Action，啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点： 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果

  史, 昂

  2024年5月23日

  929200