Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9404.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
相关推荐
-
3.5.2.2 构建View的Template
我们在很多时候需要自定义模型的管理页面，而不是直接使用默认页面，比如字段的展示与隐藏，Action是否在这个页面上出现，搜索条件自定义等等，那么本章节带您一起学习如何自定义View的Template。 自定义View的Template 在使用默认layout的情况下，我们来做几个自定义视图Template,并把文件放到指定目录下。 图3-5-2-14 自定义View的Template 第一个Tabel Step1 自定义PetTalent的列表 我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\’demo.PetTalent\’，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表格（type = TABLE）】的记录，查看template字段。 图3-5-2-15 base_view表查看template字段 <view name="tableView" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id"/> <field data="writeUid" label="更新人id"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-16 base_view表查看template字段 对比view的template定义与页面差异，从页面上看跟view的定义少了，创建人id和更新人id。因为这两个字段元数据定义里invisible属性。 a. 当XML里面没有配置，则用元数据覆盖了。 b. 当XML里面配置了，则不会用元数据覆盖了。 在下一步中我们只要view的DSL中给这两个字段加上invisible="false"就可以展示出来了 图3-5-2-17 查看列表展示 图3-5-2-18 invisible属性 新建pet_talent_table.xml文件放到对应的pamirs/views/demo_core/template目录下，内容如下 a. 对比默认视图，在自定义视图时需要额外增加属性model="demo.PetTalent" b. name设置为"tableView"，系统重启后会替换掉base_view表中model为"demo.PetTalent"，name为"tableView"，type为"TABLE"的数据记录。 ⅰ. name不同的但type相同，且viewAction没有指定时，根据优先级priority进行选择。小伙伴可以尝试修改name="tableView1"，并设置priority为1，默认生成的优先级为10，越小越优先。 ccreateUid和writeUid字段，增加invisible="false"的属性定义 <view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id" invisible="false"/> <field data="writeUid" label="更新人id" invisible="false"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-19 增加invisible=”false”的属性定义 Step2 重启应用看效果 图3-5-2-20 示例效果 第一个Form Step1 自定义PetTalent的编辑页…
-
自定义组件
1. 定义组件介绍 平台提供了大多数的通用组件，面对企业个性话需求、复杂的业务场景，我们也提供了自定义组件的能力，帮助企业更快实施业务需求。 自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。 1.1 组件与元件 在介绍如何自定义组件前，需要先了解以下概念： 组件：页面设计的组件库中看到的是组件。每个组件都有自己的属性面板，通过属性、字段决定组件逻辑，而自定义组件就是需要构建出组件自身的属性信息，再结合业务配置组件的属性、使用组件。 一个组件在不同的业务类型、视图类型、单值/多值，其属性面板是不同的，不同业务类型、视图类型、单值/多值的组合我们成为元件，多种组合即为多个元件，所以一个组件包括多个元件。 元件：一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型，在画布中切换元件时，会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。 此处切换的也是元件。 示例：创建一个“下拉选”的组件，其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时，设置单值时使用“下拉单选”元件，设置多值时使用“下拉多选”元件。 2. 组件管理 2.1 组件创建 在组件画廊页面，点击添加组件，在弹窗中完善信息创建组件。 2.2 组件操作 自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。 搜索：默认搜索可见组件，可切换“全部、可用、废弃”搜索组件，也可使用组件名称搜索。 删除：若组件未被引用，则可以直接删除。 作废：组件作废后，不可在画布中展示，不可在组件切换时使用，但已使用的数据不影响。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。 管理元件：点击进入元件的管理页面。 编辑：可修改组件名称、组件图表、组件描述。 低无一体：比较复杂，在第5章中单独讲解。 排序：进入排序页，可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。 3. 元件管理 3.1 元件创建 在元件画廊页面，点击添加元件，在弹窗中完善信息创建一个元件。 3.2 元件操作 元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。 删除：若元件未被引用，则可以直接删除。 作废：元件作废后，不影响原来已使用的元件，无法新添加、使用该元件。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。 编辑：可修改元件名称、支持视图类型、元件描述。 设计元件属性：比较复杂，将在第4章中单独讲解。 4. 设计元件属性 元件属性设计页面主要操作集中在这三部分，分别是①视图切换②属性面板设计区③复制功能 视图切换：元件创建时选择的支持视图类型，在①区域平铺可切换对应视图的属性面板进行设计。 属性面板设计区：可将组件拖入属性面板设计区进行设计，设计的是自定义组件的属性面板，左侧组件库和页面设计的组件库相同，仍然支持创建字段或使用模型字段，右侧进行元数据面板、属性面板设置。 复制功能：可将已设置好的属性面板复制到其他视图，提高设计效率。 5. 低无一体 低无一体简单讲就是组件代码上传，通过载入代码使组件在设计页面和实现页面可见和交互。 系统内置的属性不满足需求时，要用低无一体写代码，定制属性，比如从模型中拖拽设计就是内置的属性，从组件库中设置，就要配合低无一体，否则无效。 首次进入组件设计或组件中的元件变更时需要生成SDK。 生成结束后展示SDK生成时间，并且“下载模版工程”按钮可用。 点击下载模版工程，会自动下载模板工程。 在模版工程中编写前端代码。 根据实际需求上传JS、CSS文件后提交即可。
-
高级组件
本篇主要结合业务场景介绍高级组件的使用方法。 级联选择/树选择 级联选择与树选择是同一类业务场景、不同的交互体验，在这里我们一起说明。 业务场景 行业分类、产品类目/分类等自关联场景，案例以行业分类说明。 操作步骤 Step1：搭建模型 搭建行业模型，在行业模型中创建多对一字段“上级行业”，指多个子行业对应一个上级行业。如下图： Step2：界面设计 创建行业的表格视图，绑定菜单，并且在此视图中增加“跳转动作 – 新增行业”； 创建新增行业表单，将“上级行业”拖进画布中，组件切换为“级联选择”，属性面板配置“选项字段、搜索字段、透出字段”，平台低代码为每个模型自动生成了名称、编码字段，如果不使用平台提供的名称、自建名称时，需要配置这三个字段； 为“上级行业”设置联动关系，自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。 配置后发布表格、表单视图，即可获得级联选择效果。 表单视图中将“上级行业”切换为“树选择”组件，在发布后，即可获得树选择效果。 Step3：效果展示 级联选择 树选择
-
合作伙伴中心
合作伙伴中心包含“公司、个人、部门、岗位、员工”五个菜单。其中公司、个人为合作伙伴，是创建组织架构的前置条件；部门、岗位、员工为组织架构，是选择的公司下的内部架构。 合作伙伴 公司页面中包含常规的增删改查和查看详情。 公司的创建页面如下： 个人暂不支持创建。 组织架构 同样菜单中包含常规的增删改查和查看详情。 组织架构可以依次创建部门、岗位、员工。对应关系为，一个部门下有多个岗位，一个员工可以归属于多个部门和多个岗位。 部门创建页面如下： 岗位创建页面如下： 员工创建页面如下： 合作伙伴中心创建的员工会自动生成可登录的用户并进行绑定。 在用户中心创建的用户仅为可登录用户无法操作管理员工、关联部门。 流程设计器中可选到的操作人分类为“员工、部门、角色”。
-
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 云数据分类呈现
