相关推荐

• 流程设计器

  史, 昂

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

  1.2K000
• Oinone 7天入门到精通

  3.5.7.8 自定义菜单栏

  在业务中，可能会遇到需要对菜单栏的交互或UI做全新设计的需求，这个时候可以自定义菜单栏组件支持。 首先继承平台的CustomMenuWidget 组件，将自己vue文件设置到component处 import { NavMenu, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMenu.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的widget跟平台的组件一样，这样才能覆盖平台的组件 widget: 'nav-menu' }) ) export class CustomMenuWidget extends NavMenu { public initialize(props) { super.initialize(props); this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const NavMenuProps = { /** * 当前模块 */ module: { type: Object as PropType<IModule | null> }, /** * 树结构的菜单 */ menus: { type: Array as PropType<IResolvedMenu[]>, default: () => [] }, /** * 菜单类型，现在支持垂直、水平、和内嵌模式三种 */ mode: { type: String as PropType<'vertical' | 'horizontal' | 'inline'>, default: 'inline' }, /** * 菜单栏是否折叠收起 */ collapsed: { type: Boolean, default: false }, /** * 当前展开的 SubMenu 菜单项 key 数组 */ openKeys: { type: Array as PropType<string[]>, default: () => [] }, /** * 当前选中的菜单项 key 数组 */ selectKeys: { type: Array as PropType<string[]>, default: () => [] }, /** * 菜单搜索下拉选中菜单项 */ selectMenuBySearch: { type: Function as PropType<(menuName: String) => void> }, /** * 选中菜单项 */ selectMenu: { type: Function as PropType<(menuName: String) => Promise<void>> }, /** * SubMenu 展开/关闭的回调 */ openChange: { type: Function as PropType<(openKeys: string[]) => void> }, /**…

  史, 昂

  2024年5月23日

  939000
• Oinone 7天入门到精通

  1.2 Oinone的致敬

  占在巨人的肩膀上，天地孤影任我行 1.2.1 数字化时代Oinone接棒Odoo 在数字化时代，中国在互联网化的应用、技术的领先毋庸置疑，但在软件的工程化、产品化输出方面仍有许多改进的空间。这时，我了解到了Odoo——一个国外非常优秀的开源ERP厂商，全球ERP用户数量排名第一，百级别员工服务全球客户。Odoo的工程化能力和商业模式深深吸引了我，它是软件行业典型的产品制胜和长期主义者的胜利之一。 在2019年，也就是数式刚成立的时候，我们跟很多投资人聊起公司的对标是谁，我不是要成为数字化时代的SAP，而是要成为Odoo。然而，当时大部分国内投资人并不了解Odoo，尽管它已经是全球最大的ERP厂商之一，因为当时Odoo还没有明确的估值。直到2021年7月份获得Summit Partners的2.15亿美元投资后，Odoo才正式成为IT独角兽企业。 Odoo对我们提供了极大的启示，因此我们致敬Odoo，同样选择开源，每年对产品进行升级发布。如今，Odoo15已经发布，而Oinone也已推出第三版，恰好相隔12年，这是一个时代的接棒，从信息化升迁至数字化。 1.2.2Oinone与Odoo的不同之处 技术方面的不同 在技术上，Oinone和Odoo有相同之处，也有不同之处。它们都基于元数据驱动的软件系统，但是它们在如何让元数据运作的机制上存在巨大差异。Odoo是企业管理场景的单体应用，而Oinone则致力于企业商业场景的云原生应用。因此，它们在技术栈的选择、前后端协议设计、架构设计等方面存在差异。 场景方面的不同 在场景上，Oinone和Odoo呈现许多差异。相对于SAP这些老牌ERP厂商，Odoo算是西方在企业级软件领域的后起之秀，其软件构建方式、开源模式和管理理念在国外取得了非凡的成就。然而，在国内，Odoo并没有那么成功或者并没有那么知名。国内做Odoo的伙伴普遍认为，Odoo与中国用户的交互风格不符，收费模式设计以及外汇管制使商业活动受到限制，本地化服务不到位，国内生态没有形成合力，伙伴们交流合作都非常少。另外，Odoo在场景方面主要围绕内部流程管理，与国内老牌ERP如用友、金蝶重叠，市场竞争激烈。相比之下，Oinone看准了企业视角由内部管理转向业务在线、生态在线（协同）带来的新变化，聚焦新场景，利用云、端等新技术的发展，从企业内外部协同入手，以业务在线驱动企业管理流程升级。它先立足于国内，做好国内生态服务，再着眼未来的国际化。 无代码设计器的定位 在无代码设计器的定位上，Odoo的无代码设计器是一个非常轻量的辅助工具，因为ERP场景下，一个企业实施完以后基本几年不会变，流程稳定度非常高。相反，Oinone为适应"企业业务在线化后，所有的业务变化与创新都需要通过系统来触达上下游，从而敏捷响应快速创新"的时代背景，重点打造出五大设计器。（如下图1-2所示）。 图1-2 Oinone五大设计器 在数字化时代中国软件将接棒世界，而Oinone也要接棒Odoo，把数字化业务与技术的最佳实践赋能给企业，帮助企业数字化转型不走弯路！

  史, 昂

  2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  3.2.3 应用中心

  在App Finder 中点击应用中心可以进入oinone的应用中心，可以看到oinone平台所有应用列表、应用大屏、以及技术可视化。 一、应用列表 标准版本不支持在线安装，只能通过boot工程的yml文件来配置安装模块。在 www.oinone.top 官方SaaS平台客户可以在线管理应用生命周期如：安装、升级、卸载。同时针对已安装应用可以进行无代码设计（前提安装了设计器），针对应用类的模块则可进行收藏，收藏后会在App Finder中的我收藏的应用中出现。在应用列表中可以看到我们已经安装的应用以及模块，我们oinoneDemo工程也在其中。 图3-2-35 Oinone的应用列表 图3-2-36 应用收藏后会在App Finder的【我收藏的应用】中出现 二、应用大屏 但我们的测试应用没有设置应用类目，则无法在应用大屏中呈现。 图3-2-37 未设置应用类目则无法在应用大屏中呈现 三、技术可视化 在技术可视化页面，出展示已经安装模块的元数据，并进行分类呈现 图3-2-38 云数据分类呈现

  史, 昂

  2024年5月23日

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

  史, 昂

  2024年5月23日

  1.1K000