7.1 设计器总览

相关推荐

• Oinone 7天入门到精通

  1.1 Oinone的萌芽

  在信息化时代，中国并没有涌现出一家世界知名的软件公司。这是因为像SAP、Oracle、IBM、Salesforce、NetSuite、Odoo等西方巨头所拥有的最佳实践在业务、技术和模式方面，给予了它们在企业信息化建设中高额利润的优势。中国软件业在这个时代的角色是学习和追随者，而最优秀的追随者是金蝶和用友，它们能在国家推行会计电算化的机遇中占据领先地位。但是，追随者始终只是追随者，没有真正的突破。 我自己进入软件行业的经历可以追溯到2015年。当时资本市场非常热门，大家都在创业。我认为这是一个时代的机会，就像国家改革开放一样。于是，我和很多同事一起开始了创业之旅。在数式之前，我加入并创办了三家公司：500mi、数列和端点。整个过程给了我宝贵的经验和启示，帮助我找到了最终想要的方向。 在500mi公司时，我从技术岗位转型为业务经营，起步并不顺利。然而，我从这份经历中获得了一堂重要的课：做自己擅长的事情，有助于渡过创业启动期最艰难的阶段。同时，市场调研为我提供了一个信号：传统企业对于IT的需求正逐渐向互联网靠拢。这个信号像注入了一剂强心剂，激励我继续前行。 2016年，我和三个曾在阿里工作的同事一起创办了一家新公司——数列，我们决定专注于我们最擅长的领域，即软件服务商。在没有任何商务资源的情况下，我们第一年就完成了1000多万的合同，这相较之前是一个非常成功的开端。然而，对于公司未来的发展方向，我们花费了长达大半年的时间进行思考：应该坚持做底层的PaaS还是专注于企业可见的上层应用和业务产品？我倾向于后者。尽管我们持续存在分歧，但凭借着多年的革命友情，最终我们友好地分道扬镳。数列此前的成功让我更加坚信：在数字化时代，软件需求将会有井喷式的增长，数字化软件服务将是未来5-10年的重要方向。而在这个领域，专业的技能将是应对未来不确定性的真正力量。 提到数字化，就不得不提阿里巴巴提出的中台理念。中台理念在15年前被阿里巴巴提出，当时引起了广泛的关注和讨论。企业之所以认同中台理念，是因为他们的核心需求已经从内部转向外部：从关注管理、流程、效率的提升，转向关注外部协同、运营、创新。他们已经不再只担心企业的效率和成本，而是担心自己是否有能力跟上时代的快速变化。现今做生意的渠道已经不再是单一的线下渠道，而是包括淘宝、天猫、京东、拼多多、抖音、快手等多个线上渠道，以及海外市场，这种变化速度非常快。而中台的核心理念是敏捷响应、低成本快速创新，正好解决了企业主的核心焦虑。 企业的视角正在从内部管理向业务在线和生态在线（协同）转变，这种转变带来了一系列新的需求（如下图1-1所示）。这种转变不仅是为了支持现有业务的发展，也为企业未来的业务发展和创新提供了支持，并将变化实时反映到上下游合作伙伴中。 图1-1 企业视角转变带来一系列新的诉求 在2017年下半年，阿里云收购了端点科技，打算重启阿里软件。那个时候，市场上涌现出一批中台厂商，整个行业也比较混乱，很多人对互联网架构本身的理解不够深入，快速学习拿到阿里云认证后就开始做定制化的中台架构开发，但最终的效果无法达到预期。因此，阿里云和端点科技的联姻是为了弥补阿里云没有向外输出上层应用产品能力的缺陷。多年来，软件市场一直被国外厂商掌控，中国一直缺乏一个强大的本土软件公司。阿里收购端点，承载着无数中国人的软件梦想。在这种背景下，我回到了阿里体系，加入了端点科技。后来，我参与了许多中台项目，深刻地认识到搭建中台技术架构和一些基础能力，为上层应用场景落地并不难。但是，当客户接手扩展中台能力和新的上层应用场景时，效果往往不尽如人意，这并不是中台架构理念的问题，而是因为传统企业客户的IT能力大多较弱，这是一个硬伤。许多文章都在讲述中台战略，长篇大论地描述组织中台、技术中台、业务中台、数据中台，我们不去评论这些方法论的对错，从技术角度回到初衷，我们只关注一个问题：技术是为商业服务的，中台如何快速满足企业业务多变的需求？ 我们经历了多个行业的中台建设，每次都向客户强调第一阶段是打好基础，因此需要较长的周期，并且每个项目都需要顶级架构师来把控整体项目。如何找到互联网架构与传统软件良好结合点，降低对组织的要求，实现中台架构的标准化输出？这是我回归阿里后致力于解决的问题。然而，随着阿里云对端点战略发展思路的变化，阿里不再提供SaaS服务，而只愿意做平台被其他企业集成。因此，我离开了端点，并决定把自己的技术思考转化为现实，于是数式科技诞生了。 在数字化时代，无论是业务、技术还是商业模式的最佳实践，都源自中国。中国已经从追随者转变为互联网领域的全面引领者。我们有理由相信，中国一定会崛起一家世界级的软件公司，而Oinone将始终以此为愿景。

  史, 昂

  2024年5月23日

  2.1K000
• 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.5K000

• 产品使用手册（改）

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.5K000
• Oinone 7天入门到精通

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

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

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

  3.5.2.1 整体介绍

  虽然我们有小眼睛可以让用户自定义展示字段和排序喜好，以及通过权限控制行、列展示，但在我们日常业务开发中还是会对页面进行调整，以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑，再带小伙伴一起完成自定义view的Template和Layout，以及整个母版的Template和Layout 页面的构成讲解 页面交互拓扑图 页面交互拓扑图 图3-5-2-1 页面交互拓扑图 注：页面逻辑交互拓扑图说明 模块作为主切换入口 模块决定菜单列表 菜单切换触发点击action 前端根据Mask、View进行渲染， a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版 bMask和View都是有layout定义和template定义合并而成，系统会提供默认母版，以及为每种视图提供默认layout c. layout与template通过插槽进行匹配 Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等 Aciton路由可以指定Mask、视图组件的layout、template a. 当layout没有指定的时候则用系统默认的 b. 当template没有指定的时候，且视图组件相同类型有多条记录时，根据优先级选取 Mask和视图组件的layout优先级（视图组件>视图动作 > 应用 > 全局） 默认母版以及各类视图组件 母版布局 默认母版基础布局base-layout <mask layout="default"> <header slot="header"/> <container slot="main" name="main"> <sidebar slot="sidebar"/> <container slot="content"/> </container> <footer slot="footer"/> </mask> 图3-5-2-2 默认母版基础布局base-layout 母版template <mask layout="default"> <mask name="defaultMask"> <template slot="header"> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </template> <template slot="sidebar"> <element widget="navMenu"/> </template> <template slot="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </template> </mask> 图3-5-2-3 母版template 注： 上例中因为名称为main的插槽不需要设置更多的属性，所以在template中缺省了main插槽的template标签。 最终可执行视图 <mask name="defaultMask"> <header> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </header> <container name="main"> <sidebar name="sidebar"> <element widget="navMenu"/> </sidebar> <container name="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </container> </container> <footer/> </mask> 图3-5-2-4 最终可执行视图 表格视图布局 默认表格视图基础布局base-layout <view type="table"> <view type="search"> <element widget="search" slot="search"> <xslot name="fields" slotSupport="field" /> </element> </view> <pack widget="fieldset"> <element widget="actionBar" slot="actions" slotSupport="action" /> <element widget="table" slot="table"> <xslot name="fields" slotSupport="field" /> <element widget="actionsColumn" slot="actionsColumn"> <xslot name="rowActions" slotSupport="action" /> </element> </element> </pack> </view> 图3-5-2-5 默认表格视图基础布局base-layout 注：table标签的子标签为column组件，如果field填充到元数据插槽fields没有column组件将自动包裹column组件。 表格视图template <view type="table" model="xxx" name="tableViewExample">…

  史, 昂

  2024年5月23日

  1.6K000