相关推荐

• 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…

  史, 昂

  2024年5月23日

  1.9K000
• Oinone 7天入门到精通

  2.4.3 Oinone独特性之低无一体

  当今企业软件开发行业，低代码和无代码已经成为热门话题。它们的优势很明显：加速软件开发周期、减少代码开发时间、降低开发成本、易于维护等等。而 Oinone 作为一个低无一体的开发平台，更是在这些优势上做出了巨大的创新。 技术亮点 低代码-在不改变研发习惯的前提下，提升效率降低难度（如下图2-15所示） 一、提高专业开发人员效率 低代码开发模式大大降低了繁琐、重复的工作，模型定义完后，数据 API、数据管理器、基础管理的界面都不需要再进行开发。同时，低代码模式让分布式微服务架构的系统开发变得简单，研发人员不需要考虑分布式部署能力和大数据能力，也不需要去关心一些业务无关的通用能力，如权限、导入导出、国际化翻译、消息、审计等。这样，开发人员可以专注于业务研发，从而大幅提高开发效率。 二、提升系统扩展性 在研发标品的时候，低代码模式让开发人员不再需要关心系统的扩展性。与传统模式不同，低代码模式更加注重元数据的管理，这样就可以更好地保障系统扩展性。 三、保留研发人员习惯 Oinone 平台非常开放，满足开发人员的各种习惯，比如原有的 IDE 环境、熟悉的 Spring Boot 工程结构等。而且在 Oinone 的低代码模式下，研发人员还可以通过无代码方式，在线可视化地修改应用。这样，即使在使用低代码模式的情况下，开发人员也可以保留原有的习惯，提升开发效率。 四、提供更加开放的解决方案 Oinone 提供了非常开放的解决方案，让开发人员可以自由定制和组合各种功能。当行业出现特殊的功能需求时，开发人员可以整合成平台组件，并集成到应用中。Oinone的低代码模式具有高度的开放性和灵活性，这使得它在与其他低代码平台的比较中具有明显的优势。相比其他低代码平台，Oinone不会在无法满足特定需求的情况下限制开发人员的创造力（如下图2-16所示）。 图2-15 Oinone低代码特性介绍 图2-16 Oinone低代码的被集成特性示意图 无代码-五大设计器覆盖研发方方面面，让业务、实施也能参与 它是LCDP的产品化呈现，是冰山露在外面大家看得到的，核心还是在LCDP本身。这部分实时在演进迭代，如您有想体验最新版本，可以在Oinone官网：https://www.oinone.top注册。 设计器 说明 产品展示 模型设计器 1.以模型为驱动，当有模型、数据字典、数据编码等设计功能，我们就可以完整地定义产品数据模型，模型设计器默认整体呈现区别于普通ER图，以当前模型为核心视角展开，可以点击关联模型切换主视角。2.多种模式可切换：专家与经典切换，图与表模式的切换 界面设计器 1.界面设计器旨在帮助用户快速搭建页面；2.所见即所得和根据不同视图类型设计契合的搭建交互就变得尤为重要；3.多端页面设计能力。 流程设计器 1.为业务流程和审批流程提供可自动执行的流程模型，通过定义流转过程中的各个动作、规则，以此实现流程自动化；2.流程可以跨应用设计，不同应用的模型之间可以通过同一流程执行。 逻辑设计器 1.组件化、可视化逻辑编排，逻辑动态变更、动态管理，实施验证。 数据可视化 1.从内部系统模型获取数据内容后，根据业务需求自定义图表，目的是为企业提供更高效的数据分析工具；2.可以智取业务系统模型，系统自动解析选择的模型、接口、表格中的字段后进行数据分析；3.降低对数据分析人员的研发能力要求，提升数据分析的效率 表2-3 Oinone无代码-五大设计器简述 真正的低无一体，体现在一体化的融合能力上 在开发核心产品时，我们主要采用低代码开发，辅以无代码的开发方式。你可以参考我们的低代码开发基础入门教程中3.5.5【设计器的结合】的文章。 而在实施或者处理临时需求时，我们主要采用无代码的开发方式，低代码作为辅助。这种模式比较特殊，只在SaaS模式下提供。如果你发现某个客户个性化部分无法通过无代码设计器完成，我们提供了一个“低无一体”模块，可以反向生成API代码，生成对应的扩展工程和API依赖包，再由专业研发人员基于扩展工程，利用API包进行开发并上传至平台，可以参考关于7.4【Oinone的低无一体】的文章。 场景 融合形式 具体操作 标准产品以低代码开发为主，以无代码为辅助 标品开发时结合无代码设计器来完成页面开发，可以把设计后的页面元数据装载为标准产品的一部分。详细教程见：3.5.5【设计器的结合】一文 项目交付以无代码为主，以低代码为辅助 当有特殊需求设计器无法支持时，则可以通过低无一体应用的代码模式来完成。支持了两种使用模式：上传jar包模式、源码托管模式。详细教程见：7.4【Oinone的低无一体】一文 表2-4 不同场景适配方式说明 实现原理 本章节我们将从以下三个方面来解读Oinone的低无一体。 一：低无一体的设计原则及好处：真正的低无一体平台应该确保标准产品迭代与个性化保持独立，让软件企业具备为客户提供在线化的快速响应、个性化定制、持续更新等服务的能力，让企业客户能够真正自主做到敏捷响应和快速创新。所以Oinone的元数据融合方案跟其他平台有所区别（如下图2-17所示）。 图2-17 Oinone与其他平台的元数据融合对比图 二：低无一体中低与无的关系：无代码是低代码平台的图形化呈现，是低代码的一个子集，它将无限接近低代码的能力，同时也将成为低代码平台的必备特征，是通过低代码开发的标准产品的二开配套工具。 三：低无一体中低与无的定位：通过表2-3可以看出，低代码和无代码在Oinone的体系中相互融合，共同构成了一个完整的低无一体模式，提供更加开放、灵活和可扩展的解决方案，让用户能够更加轻松地完成开发和实施。 低代码模式 无代码模式 用户群体 专业研发 产品经理、需求分析师、直接业务人员 支撑场景 企业全场景软件以及二开 企业全场景软件以及二开，专业化场景比较高的则需低代码支持 核心能力 不改变研发习惯，提升研发效率 可视化编程无需专业编程语言知识 核心定位 开发标准模块 标准模块的二开无标品支撑场景的新模块开发 表2-3 Oinone低代码开发平台的两种开发模式对比

  史, 昂

  2024年5月23日

  2.5K000
• Oinone 7天入门到精通

  第7章 Oinone的设计器们（改）

  史, 昂

  2024年5月23日

  2.7K001
• Oinone 7天入门到精通

  4.2.8 自定义组件与设计器结合（新）

  界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

  文件

  文件应用下包含“导入/导出模版、导入任务、导出任务”三个菜单。其中导入/导出任务菜单比较常用。 导入/导出模版 当前版本会为租户的表格视图自动创建导出模版，此处可进行编辑、查看详情的操作。 导入任务 导入任务可以下载导入文档，点击详情可以查看该条记录的导入结果，任务信息分组中可以查看错误信息。 导出任务 和导入任务一致，导出任务菜单中可以下载导出文档，点击详情可以查看该条记录的导出结果，任务信息分组中可以查看错误信息。

  史, 昂

  2024年6月20日

  1.4K000