4.2 前端高级特性

相关推荐

• 组件介绍

  在设计页面时，页面中的所有内容均是由组件组成，每个组件有不同的属性，可以灵活的对每个组件的属性进行设置，以满足业务场景。 组件分为四类，分别是布局、字段、动作、数据 1. 布局 布局类组件主要用于页面的样式排版。 分组：类似一个容器，可以把业务含义相近的内容放在这个分组容器内。 选项卡：类似一个容器，每个选项卡可以添加多个选项页，可以把业务含义相近的内容放在选项卡的选项页容器内。 2. 字段 字段型组件是常用，也是用于支撑页面的主要组件类，每个字段型组件都对应一个模型字段。 单行文本：常用于记录名称、身份证号或其他普通的文字内容。 多行文本：常用于记录字数较多的文字，如意见、复杂备注等。 整数：常用于输入整数的天数、数量等，如果会出现小数，请使用小数组件。 小数：常用于输入金额、单价等，会出现小数的数值。 下拉单选：从多个选项中下拉选择一个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典或布尔型开关。 下拉多选：从多个选项中下拉选择多个数据，作为数据值。选项可以是关联模型的数据，也可以是数据字典。 开关：常用于只有是否两种对立选项的选择。 单选框：常用于在直接展示的选现中单选一个值，例如选择性别。 复选框：常用于在直接展示的选现中多选一个值，例如选择爱好、选择课程等。 富文本编辑器：一种可内嵌于浏览器，所见即所得的文本编辑器，类似于Office Word 的编辑功能，常应用于篇幅较长的说明性文字，支持改变字体样式、插入图片等。 年份：常用于选择出身年份、一项计划的年份等。 日期：常用于选择颗粒度到日期的Date类型字段，例如出生日期、入职日期、入驻日期等。 日期时间：常用于选择颗粒度到时间的DateTime类型的字段，例如下单时间、发货时间、审批时间等。 时间：常用于选择仅时间无日期的Time类型的字段，如设置规章中的上班时间、日志的提交时间等。 颜色选择器：应用于自定义颜色，如设置标签的颜色、设置产品的颜色属性、主题定制时选择色彩等。 文件上传：常用于上传附件、文件，例如Office文档、图片、视频、音频、其他格式的文件等。 图片上传：常用于上传记录的图片，例如上传身份证照片、头像、商品图片等。 标签：可输入保存多值，例如用户的标记标签。 3. 数据 与数据可视化设计器进行联动，可以选择自定义的图表或报表，在页面展示。 图表：可以选择数据可视化设计器中允许被引用的图表，展示在页面中 报表：可以选择数据可视化设计器中允许被引用的报表，展示在页面中

  史, 昂

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

  1.6K000
• Oinone 7天入门到精通

  7.1 设计器总览

  设计器转为非专业研发设计，在Oinone3.0版本中已经完成元数据完整在线化，真正做到低无一体。对于设计器的定位我们开篇就介绍过，它是LCDP的产品化呈现，是冰山露在外面大家看得到的，核心还是在LCDP本身。我们先目睹下设计器的一些产品页面，如您有想体验，可以在Oinone官网注册 模型设计器 Oinone以模型为驱动，当有模型、数据字典、数据编码等设计功能，我们就可以完整地定义产品数据模型，模型设计器整体呈现区别于普通ER图，以当前模型为核心视角展开，可以点击关联模型切换主视角。这样的好处在于突出当前设计，聚焦设计本身。同时模型上预留了几个核心入口如：分类管理、继承拓扑图、页面设计、逻辑设计等。另外我们在体验上区分了专家模式和经典模式，顾名思义，专家模式的功能会更加丰富，对专业知识的要求也会更高。专家模式下一般会增加一些跟业务无关的配置如：索引设置等调优行为 逻辑设计器 从图灵完备的角度上说，要支持功能越完备，使用越复杂。我们优先从图灵完备的角度出发，所以我们第一版逻辑设计器相对比较复杂，第二版本规划中会类似模型设计器推出专家版和经典版。 界面设计器 界面设计器第一版会先支撑后端页面在线自定义，后边将陆续推出前端页面、多端能力。为了支持多端和2C页面的设计，我们对前后端协议做了比较大的改造。目前设计器已经支持完全基于V3的前后端协议。 数据可视化 数据可视化支持从内部系统模型获取数据内容后，根据业务需求自定义图表，目的是为企业提供更高效的数据分析工具。 与市场同类产品相比，我们的数据可视化产品：不需要前置维护数据源、进行数据转换；可智取业务系统模型，系统自动解析选择的模型、接口、表格中的字段后进行数据分析；降低对数据分析人员研发能力要求的同时，也提升了数据分析的效率。 流程设计器 Oinone流程设计器为业务流程和审批流程提供了可自动执行的流程模型：通过定义流转过程中的各个动作、规则，以此实现流程自动化。在Oinone流程设计器中，流程可以跨应用设计，不同应用的模型之间可以通过同一流程执行。

  史, 昂

  2024年5月23日

  1.4K002
• Oinone 7天入门到精通

  6.1 文件与导入导出（改）

  导入导出在一定程度上是企业级软件和效率工具（office工具）的桥梁 文件的上传下载以及业务数据的导入导出是企业级软件一个比较常规的需求，甚至是巨量的需求。业务有管理需要一般都伴随有导入导出需求，导入导出在一定程度上是企业级软件和效率工具（office工具）的桥梁。oinone的文件模块就提供了通用的导入导出实现方案，以简单、一致、可扩展为目标，简单是快速入门，一致是用户操作感知一致、可扩展是满足用户最大化的自定义需求。 下图为文件导入导出的实现示意图，大家可以做一个整体了解 图6-1-1 文件导入导出实现示意图 一、基础能力 准备工作 pamirs-demo-api的pom文件中引入pamirs-file2-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-file2-api</artifactId> </dependency> 图6-1-2 引入pamirs-file2-api包依赖 DemoModule增加对FileModule的依赖 @Module(dependencies = {FileModule.MODULE_MODULE}) 图6-1-3 DemoModule增加对FileModule的依赖 pamirs-demo-boot的pom文件中引入pamirs-file2-core包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-file2-core</artifactId> </dependency> 图6-1-4 启动工程引入pamirs-file2-core包依赖 pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加file，即在启动模块中增加file模块 pamirs: boot: modules: – file 图6-1-5 pamirs-demo-boot的application-dev.yml文件中增加配置 pamirs-demo-boot的application-dev.yml文件中增加oss的配置。更多有关文件相关配置详见4.1.1【模块之yml文件结构详解】一文 cdn: oss: name: 阿里云 type: OSS bucket: demo uploadUrl: #换成自己的oss上传服务地址 downUrl: #换成自己的oss下载服务地址 accessKeyId: #阿里云oss的accessKeyId accessKeySecret: #阿里云oss的accessKeySecret mairDir: upload/demo #换成自己的目录 validTime: 360000 timeout: 60000 active: true referer: www.shushi.pro 图6-1-6 application-dev.yml文件中增加oss的配置 其他文件系统支持 a. 文件系统类型 类型 服务 OSS 阿里云 UPYUN 又拍云 MINIO Minio HUAWEI_OBS 华为云 LOCAL 本地文件存储 表6-1-1 支持的文件系统类型 b. OSS配置示例 ⅰ. 华为云OBS cdn: oss: name: 华为云 type: HUAWEI_OBS bucket: pamirs #(根据实际情况修改) uploadUrl: obs.cn-east-2.myhuaweicloud.com downloadUrl: obs.cn-east-2.myhuaweicloud.com accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000 active: true allowedOrigin: http://192.168.95.31:8888,https://xxxx.xxxxx.com referer: 图6-1-7 OBS的配置说明 ⅱ. MINIO cdn: oss: name: minio type: MINIO bucket: pamirs #(根据实际情况修改) uploadUrl: http://192.168.243.6:32190 #(根据实际情况修改) downloadUrl: http://192.168.243.6:9000 #(根据实际情况修改) accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000 active: true referer: localFolderUrl: 图6-1-8 MINIO的配置说明 ⅲ. 又拍云 cdn: oss: name: 又拍云 type: UPYUN bucket: pamirs #(根据实际情况修改) uploadUrl: v0.api.upyun.com downloadUrl: v0.api.upyun.com accessKeyId: 你的accessKeyId accessKeySecret: 你的accessKeySecret # 根据实际情况修改 mainDir: upload/ validTime: 3600000 timeout: 600000…

  史, 昂

  2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  1.5 Oinone与行业对比

  随着企业数字化转型的推进，软件公司获得了许多机会。尽管竞争日趋激烈，但由于需求旺盛，各种模式仍在不断涌现。因此，当前市场上存在各种各样的数字化转型解决方案，围绕企业的各个方面展开。每种解决方案都有其优点和缺点。本文将从定位、技术和产品等方面简单比较，帮助您从不同的视角了解Oinone的差异。 1.4.1 整体视角对比 一、与对标公司Odoo的对比 Odoo Oinone 定位 一站式全业务链管理平台：赋能企业信息化升级 一站式低代码商业支撑平台：赋能企业数字化升级 需求变化 关注单一企业的管理、流程、效率的提升 关注企业价值链的网络竞争，围绕外部协同、运营、数据、商业展开 技术更替 关注稳定、安全、功能丰富度 除了稳定、安全、功能丰富度以外，更强调需求响应速度、用户体验、系统承载极限与弹性扩展、智能化 表1-1 Oinone与对标公司Odoo的对比 二、与国内低代码或无代码公司对比 低代码或无代码公司 Oinone 定位 低代码开发工具：提供各类系统模版，基于模版快速搭建和个性化配置。但系统模版无法再升级 平台型SaaS：提供各类系统产品，产品安装后客户可以根据需求进行个性化调整，同时产品永远在线可升级 场景差异 只能支持企业内部人员使用，以完成部门级边缘系统为主，一般多为没有专业软件厂商支撑和强临时性特性 从内外部协同的商业场景出发，关注企业核心业务场景，适应【企业业务在线化后，所有的业务变化与创新都需要通过系统来触达上下游】的时代背景，以敏捷响应业务的变化与创新为目标 技术代差 单表支撑100万数据已是业内天花板 支撑单模型数据过亿，无单点瓶颈。封装互联网架构并且做到单体与分布式的灵活部署，为不同大小公司提供不同技术支撑 表1-2 Oinone与国内低代码/无代码公司对比 1.4.2 从技术角度对比 我们不会与其他无代码平台进行比较，因为它们不能解决业务复杂性的问题。相反，我们将重点介绍三种不同的低代码平台模式（如下图1-8所示）。 第一种模式是最基础的低代码平台，也被称为代码生成器。它通过预定义应用程序模板和必要的配置生成代码，简化了工程搭建并提供了一些基础逻辑。虽然在信息化时代内部流程标准化方面较为适合，但在数字化时代外部协同业务在线的情况下就不那么合适了。因为这种模式不能减少研发难度和提高效率，也无法体现敏捷迭代快速创新的优势。 第二种模式是经典的低代码平台，以元数据为基础，以模型为驱动。当无法满足需要时，通过特定方式将代码以插件的形式注入平台，作为低代码平台的内置逻辑，供设计器使用。它的优点在于降低了研发门槛，当无法满足需求时才需要编写代码。它可以实现企业内部的复杂流程和复杂逻辑，但其性能和工程管理存在局限性。性能问题使其不适合处理互联网化的在线业务，而工程管理问题则使其不适合处理快速变化的业务。这也是许多研发人员反对低代码的核心原因之一，因为研发人员变成了辅助角色，而软件工程是一门需要技术能力的学科，让没有技术能力的人主导是违反常理的。对于软件产品公司来说，产品需要迭代规划，需要多人协作，需要工程化管理。 第三种模式是oinone提出的基于互联网架构的低代码平台，它采用低无一体的设计。首先，oinone屏蔽了互联网架构带来的复杂性。其次，同样以元数据为基础，以模型为驱动，但是元数据的生成方式有两种：一种是使用无代码设计器（与经典低代码相同），另一种是通过代码来描述元数据。通过使用代码来描述元数据，可以无缝地与代码衔接，并在不改变研发习惯的情况下降低门槛、提高效率，并进行工程化管理。 最后总结来说：低无一体不仅仅是指两种模式的结合，还包括两种模式的融合应用方式。具体来说，这种融合应用方式可以分为两种情况： 当开发核心产品时，主要采用低代码开发，无代码设计器作为辅助。这种方式可以提高开发效率和代码质量，同时保证产品的快速迭代和升级。 当需要满足个性化或非产品支持的需求时，主要采用无代码设计器，低代码作为辅助。这种方式可以快速地满足客户需求，并且避免对产品的核心代码产生影响。 简单来说，低代码模式适用于产品的迭代升级，而无代码设计器则适用于满足个性化和非产品支撑的额外需求。低代码和无代码模式在整个软件生命周期中都有各自的价值，在不同场景下可以相互融合，发挥最大的优势。 图1-8 代码生成器、低代码平台与Oinone的优缺点对比 1.4.3 从产品角度对比 产品上的对比，从客户、场景满足度、再次销售三个方面来做简易的对比 一、Oinone vs 数字化软件服务商 客户 满足度 销售 Oinone 一站式商业智能软件，更高性价比、用户体验客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 满足企业核心业务需求，并联合伙伴一起满足企业所有需求，无需集成提供统一工作台、数据接口、底层协议，无论基于Oinone的开源框架还是增加其他应用都有很好的扩展性 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 数字化软件服务商 针对成熟的大型企业需投入巨大资源和成本客户范围：100亿～1000亿、1000亿以上 满足企业部分需求，无法输出技术标准，无法解决多供应商一起开发的问题，只能通过集成实现对接 OP模式进行销售，通过设置权限来进行来实现二次销售或无法进行二次销售 表1-3 Oinone vs 数字化软件服务商 二、Oinone vs 低代码或无代码行业 客户 满足度 销售 Oinone 一站式商业智能软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从外部商业场景出发，强业务场景驱动，符合企业从信息化管理到业务创新的数字化转变的趋势。提供统一工作台、数据接口、底层协议，无论基于oinone的开源框架还是增加其他应用都有很好的扩展性 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 低代码或无代码公司 针对小微企业内部信息化管理诉求，以表单流程为主客户范围：5亿以下 满足企业部门级信息化的适应性需求，无法满足企业核心业务管理与业务创新诉求 按应用模块进行收费，新的模块进行二次销售 表1-4 Oinone vs 低代码或无代码行业 三、Oinone vs 国外对标公司Odoo 客户 满足度 销售 Oinone 一站式商业智能软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从外部商业场景出发，强业务场景驱动，符合企业从信息化管理到业务创新的数字化转变的趋势。基线产品覆盖：采购、营销、服务、销售、交易等企业商业领域。主要涉及行业：零售品牌。其他领域或行业靠合作伙伴共建方式进行 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 Odoo 一站式企业管理软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从企业内部管理需求出发，逐渐拥有互联网相关应用组件，但还是属于强内部管理、弱外部场景。基线产品覆盖：业务财务一体化、人财务、进销存。主要涉及行业：建造业。其他领域或行业靠合作伙伴共建方式进行 支持OP+SaaS两种模式，收费方式相同：按用户数+应用模块进行收费新的模块进行二次销售 表1-5 Oinone vs 国外对标公司Odoo

  史, 昂

  2024年5月23日

  1.7K200
• Oinone 7天入门到精通

  3.4.3.2 面向切面-拦截器

  一、拦截器 拦截器为平台满足条件的函数以非侵入方式根据优先级扩展函数执行前和执行后的逻辑。 使用方法上的@Hook注解可以标识方法为拦截器。前置扩展点需要实现HookBefore接口；后置扩展点需要实现HookAfter接口。入参包含当前拦截函数定义与该函数的入参。拦截器可以根据函数定义与入参增加处理逻辑。 拦截器分为前置拦截器和后置拦截器，前者的出入参为所拦截函数的入参，后者的出入参为所拦截函数的出参。可以使用@Hook注解或Hook模型的非必填字段module、model、fun、函数类型、active来筛选出对当前拦截方法所需要生效的拦截器。若未配置任何过滤属性，拦截器将对所有函数生效。 根据拦截器的优先级priority属性可以对拦截器的执行顺序进行调整。priority数字越小，越先执行。 二、前置拦截(举例) 增加一个前置拦截，对PetShop的sayHello函数进行前置拦截，修改函数的入参的shopName属性，在其前面增加"hookbefore:"字符串。并查看效果 Step1 新增PetShopSayHelloHookBefore实现HookBefore接口 为run方法增加@Hook注解 配置module={DemoModule.MODULE_MODULE},这里module代表的是执行模块，该Hook只匹配由DemoModule模块为发起入口的请求 配置model={PetShop.MODEL_MODEL}，该Hook只匹配PetShop模型 配置fun={"sayHello"}，该Hook只匹配函数编码为sayHello的函数 package pro.shushi.pamirs.demo.core.hook; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookBefore; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class PetShopSayHelloHookBefore implements HookBefore { @Override @Hook(module = {DemoModule.MODULE_MODULE},model = {PetShop.MODEL_MODEL},fun = {"sayHello"}) public Object run(Function function, Object… args) { if(args!=null && args[0]!=null){ PetShop arg = (PetShop)args[0]; arg.setShopName("hookbefore:"+ arg.getShopName()); } return args; } } 图3-4-3-5 新增PetShopSayHelloHookBefore实现HookBefore接口 Step2 重启查看效果 用graphQL工具Insomnia查看效果，如果访问提示未登陆，则请先登陆。详见3.4.1【构建第一个Function】一文 用 http://127.0.0.1:8090/pamirs/base 访问，结果我们会发现PetShopSayHelloHookBefore不起作用。是因为本次请求是以base模块作为发起模块，而我们用module={DemoModule.MODULE_MODULE}声明了该Hook只匹配由DemoModule模块为发起入口的请求 图3-4-3-6 示例效果 用 http://127.0.0.1:8090/pamirs/demoCore 访问，前端是以模块名作为访问入口不是模块编码这里大家要注意下 图3-4-3-7 示例效果 用 http://127.0.0.1:8090/pamirs/demoCore 访问，更换到petShop的子模型petShopProxy来访问sayHello函数，结果我们发现是没有效果的。因为配置model={PetShop.MODEL_MODEL}，该Hook只匹配PetShop模型 三、后置拦截(举例) 增加一个后置拦截，对PetShop的sayHello函数进行后置拦截，修改函数的返回结果的shopName属性，在其后面增加"hookAfter:"字符串。并查看效果 Step1 新增PetShopSayHelloHookAfter实现HookAfter接口 为run方法增加@Hook注解 配置model={PetShop.MODEL_MODEL}，该Hook只匹配PetShop模型 配置fun={"sayHello"}，该Hook只匹配函数编码为sayHello的函数 package pro.shushi.pamirs.demo.core.hook; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.model.PetShop; import pro.shushi.pamirs.meta.annotation.Hook; import pro.shushi.pamirs.meta.api.core.faas.HookAfter; import pro.shushi.pamirs.meta.api.dto.fun.Function; @Component public class PetShopSayHelloHookAfter implements HookAfter { @Override @Hook(model = {PetShop.MODEL_MODEL},fun = {"sayHello"}) public Object run(Function function, Object ret) { if (ret == null) { return null; } PetShop result =null; if (ret instanceof Object[]) { Object[] rets = (Object[])((Object[])ret); if (rets.length == 1) { result = (PetShop)rets[0]; } } else { result = (PetShop)ret; } result.setShopName(result.getShopName()+":hookAfter"); return result; } } 3-4-3-8 新增PetShopSayHelloHookAfter实现HookAfter接口 Step2 重启查看效果 用 http://127.0.0.1:8090/pamirs/base 访问，结果我们会发现PetShopSayHelloHookAfter是起作用。PetShopSayHelloHookBefore没有配置模块过滤。 3-4-3-9 示例效果 用访问，结果我们会发现PetShopSayHelloHookAfte和PetShopSayHelloHookBefore同时起作用 3-4-3-10 示例效果 我们会发现HookAfter只对结果做了修改，所以message中可以看到hookbefore，但看不到hookAfter 四、注意点 不管前置拦截器，还是后置拦截器都可以配置多个，根据拦截器的优先级priority属性可以对拦截器的执行顺序进行调整。priority数字越小，越先执行。小伙伴们可以自行尝试 拦截器必须是jar依赖，不然执行会报错。特别是有的小伙伴配置了一个没有过滤条件的拦截器，就要非常小心 模块启动yml文件可以过滤不需要执行的hook，具体配置详见4.1.1【模块之yml文件结构详解】一文 调用入口不是由前端发起而是后端编程中直接调用，默认不会生效，如果要生效请参考4.1.9【函数之元位指令】一文

  史, 昂

  2024年5月23日

  1.2K000