4.2 前端高级特性

相关推荐

• Oinone 7天入门到精通

  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的编辑页…

  史, 昂

  2024年5月23日

  1.0K000
• Oinone 7天入门到精通

  7.4 Oinone的低无一体

  基础介绍 前面我们学习了基于低代码开发平台进行快速开发，以及通过oinone的设计器进行零代码开发两种模式。当然低无一体不是简单地说两种模式还指：低无两种模式可以融合。 在做核心产品的时候以低代码开发为主，以无代码为辅助。见低代码开发的基础入门篇中设计器的结合一文 在做实施或临时性需求则是以无代码为主，以低代码为辅助 本文主要介绍第二种模式，它是www.oinone.top官网在SaaS模式下的专有特性。满足客户安装标品后通过设计器进行适应性修改后，但对于一些特殊场景还是需要通过代码进行完善或开发 在该模式下，我们提供了jar模式和代码托管两种模式，客户只要选择需要进行代码开发的模块，点击生产SDK，下载扩展工程模版，按Oinone低代码开发平台规范进行研发，后上传扩展工程即可。 操作手册 低无一体这个模块是连接无代码设计器的桥梁，可以为一个模块或应用设计低代码的逻辑，可以在界面设计器或流程设计器中使用低代码的逻辑。 1.选择模块 首先需要在下拉单选中选择需要低代码的模块或应用。 下拉选中只展示在「应用中心」中已安装的模块或应用，可前往「应用中心」安装后继续低代码操作。 选择模块中不展示系统的基础模块或应用，因为这些模块或应用无法自定义模型。 2.模块信息 模块信息展示的是选择模块的基础信息：模块名称、模块编码、模块作者、模块版本、包的前缀、工程模板下载地址，下载地址仅在上传jar包模式时候用到。 3.低无一体操作 低无一体支持了两种使用模式：上传jar包模式、源码托管模式。 上传控制工程或创建研发分支动作完成会生成一条数据，可以对单条数据进行部署、卸载、修改、删除。 3.1 上传jar包模式 在这个模式下，需要做四步动作。 生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。 下载扩展工程模板，点击按钮之后，会将SDK包和工程模板生成一个下载链接，复制模块信息中的卸载地址打开即可下载。 技术人员在工程模板的基础上写低代码逻辑。 上传扩展工程，点击按钮展开弹窗，在弹窗中设置标签、备注，并将最终的jar包上传，完成上传之后表格中就会新增一条数据。 上传jar包模式下，模板工程中代码需要注意的点参考下图： 3.2 源码托管模式 在这个模式下，需要做三步动作。 生成SDK，点击按钮之后，会把模块的当前模型状态打成一个SDK包，SDK最新生成时间更新。当模型变更但未生成SDK时，使用低无一体就会出错，请重新生成SDK并修改扩展工程。生成SDK通常需要1分钟左右，若第一次使用低无一体模块，可能需要更长时间，请耐心等待。 创建研发分支，点击按钮展开弹窗。首次创建时需要设置git账号名称、git账号邮箱来创建一个账号，另外在弹窗中设置分支名称、标签、备注，完成创建后表格中就会新增一条数据。 通过表格中的Gitlab地址，技术人员写低代码逻辑。 3.3 行内操作 部署：工程状态为未部署、部署失败、已卸载时展示行内的部署按钮，点击之后进行部署，工程状态变为部署中。部署过程大致需要5-10分钟，请耐心等待。部署完成之后，会生成一个新的模块：“原模块名称”扩展工程。 卸载：工程状态为已部署时展示行内的卸载按钮，点击之后会卸载这个已部署的工程，工程状态变为已卸载。同一模块只能有一个已部署的工程（与选择的模式无关），若需要使用新的工程请先卸载已部署的工程。 修改：行内操作修改按钮始终展示，只允许修改标签、备注。 删除：工程状态为未部署、部署失败、已卸载时展示行内的删除按钮，点击之后删除这一条工程记录。 3.4 部署效果 低无一体部署成功之后，可以进入对应模块的模型页面中使用提交动作来使用低代码逻辑，也可以在流程设计器中的引用逻辑节点中使用低代码逻辑。

  史, 昂

  2024年5月23日

  2.1K000
• Oinone 7天入门到精通

  3.5.7.9 自定义多Tab

  在业务中，可能会遇到需要对多tab的交互或UI做全新设计的需求，这个时候可以自定义多tab组件支持。 首先继承平台的MultiTabsWidget组件，将自己vue文件设置到component处 import { MultiTabsWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import Component from './CustomMultiTabs.vue'; @SPI.ClassFactory( ViewWidget.Token({ // 这里的tagName跟平台的组件一样，这样才能覆盖平台的组件 tagName: ['multi-tabs', 'MultiTabs'] }) ) export class CustomMultiTabsWidget extends MultiTabsWidget{ public initialize(props) { super.initialize(props); // 设置自定义的vue组件 this.setComponent(Component); return this; } } vue文件中继承平台的props，编写自定义页面代码 export const MultiTabsProps = { /** * 组件是否可见 */ invisible: { type: Boolean }, /** * tab列表数据 */ tabs: { type: Array as PropType<MultiTab[]> }, /** * 当前激活的tab */ activeTab: { type: Object as PropType<MultiTab> }, /** * 鼠标悬浮所在的tab */ hoverTab: { type: Object as PropType<MultiTab> }, /** * 鼠标经过tab事件回调 */ onMouseenterTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 鼠标离开tab事件回调 */ onMouseleaveTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 点击tab */ onClickTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 刷新当前tab */ onRefreshCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab */ onCloseCurrentTab: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭除当前tab外的其他所有tab */ onCloseOtherTabs: { type: Function as PropType<(tab: MultiTab) => void> }, /** * 关闭当前tab左侧的所有tab */ onCloseLeftTabs: { type: Function as…

  史, 昂

  2024年5月23日

  1.1K000
• Oinone 7天入门到精通

  特别说明

  教材进度 目前还在编写整改中，特别是目录上带（改）字样的 本版本教材针对4.0，相对3.0增加的特性有： 通用能力部分：比如权限、审计、国际化、系统配置、集成可视化等 新版权限：交互优化，同时支持子管理员 新版审计，支持在线配置审计规则 系统配置，提供多种风格，让伙伴基础风格不在需要自定义主题和组件 新增集成设计器，通过连接器让应用api和数据库集成资产化管理，通过数据流进行接口逻辑编排，并提供统一的开放平台 设计器部分： 加强界面设计器部分对移动端、主题、自定义组件等支持，同时完善对数据管理操作、增加各类常用业务组件，加强对树形与及联的支持，表格视图搜索优化 流程设计器增加：审批员选择自定义逻辑、转交人选择自定义逻辑，支持手工触发、支持数据事务、支持调用模型函数 可视化设计器：增加自定义图表功能、增强下钻能力 模块管理：增加新增、多端配置等支持 内核机制： 性能优化：通过gql层面解决业务研发过程中1+N性能问题，权限性能优化，分布式缓存性能优化，整体性能提升2倍以上 针对多租户应用无状态的支持，低无一体支持本地调试 5.0的核心新特性预告，特性会在开发过程中陆续推出供大家体验，但完整体验时间为2024年6月份 新增打印设计功能 导出的默认交互增强以及导入导出模版设计 默认导入导出在交互时可以指定字段 导入导出模版可图形化设计 多模型AI集成设计器器 自定义组件、自定义图表交互友好性增强 自定义组件，属性面板设计模版化，解决设计组件属性面板的时候不知道有哪些默认属性。 增强组件与动作的结合灵活性 组件增加是否有子组件的通用属性，有子组件的组件具备组件拖拽区 增强UX注解能力，原本只有设计器支持的，后端UX注解也进行对应支持 后端低无一体功能开放（原本该功能只在saas版本上提供），方便咱们做应急和简单应用的时，以无代码为主，低代码为辅的模式。通过低无一体可以通过低代码的方式来解决无代码无法支撑的功能。 工作流增强 增加循环审批节点 增加分支汇集节点增强并行流程能力，比如分支汇集节点可以设置：所有并行节点处理完或只要一条处理完就继续执行。

  史, 昂

  2024年5月23日

  1.9K001

• 3.5.5.1 设计器数据导出

  简介 通过调用导出接口，将设计器的设计数据与运动数据打包导出到文件中。 提供了download/export两类接口。 export 导出到OSS。导出的文件会上传到文件服务，通过返回的url下载导出文件。 请求示例： mutation { uiDesignerExportReqMutation { export( data: { module: "gemini_core", fileName: "meta", moduleBasics: true } ) { jsonUrl } } } 响应示例： { "data": { "uiDesignerExportReqMutation": { "export": { "jsonUrl": "https://xxx/meta.json" } } }, "errors": [], "extensions": {} } download 直接返回导出数据。适用于通过浏览器直接下载文件。 请求示例： mutation { uiDesignerExportReqMutation { download( data: { module: "gemini_core", fileName: "meta", moduleBasics: true } ) { jsonUrl } } } 如何构造url protocol :// hostname[:port] / path ? query=URLEncode(GraphQL) 例： http://127.0.0.1:8080/pamirs/base?query=mutation%20%7B%0A%09uiDesignerExportReqMutation%20%7B%0A%09%09download(%0A%09%09%09data%3A%20%7B%20module%3A%20%22gemini_core%22%2C%20fileName%3A%20%22meta%22%2C%20moduleBasics%3A%20true%20%7D%0A%09%09)%20%7B%0A%09%09%09jsonUrl%0A%09%09%7D%0A%09%7D%0A%7D 在浏览器中访问构造后的url，可直接下载文件 接口列表 模型设计器 指定模块导出 query { modelMetaDataExporterQuery { export/download(query: { module: "模块编码" }) { module url } } } module参数：指定导出的模块编码 url返回结果：export方式导出的文件url 页面设计器 导出页面 指定模块导出 mmutation { uiDesignerExportReqMutation { download/export( data: { module: "gemini_core", fileName: "meta", moduleBasics: false } ) { jsonUrl } } } module参数：模块编码 fileName参数：指定生成的json文件名称 moduleBasics参数：指定是否只导出模块基础数据，如果为true，只导出内置布局、模块菜单、菜单关联的动作。 如果为false，还会导出模块内的所有页面，以及页面关联的动作元数据、页面设计数据 等等。 默认值为false。 指定菜单导出 mutation { uiDesignerExportReqMutation { download/export( data: { menu: { name: "uiMenu0000000000048001" } fileName: "meta" relationViews: true } ) { jsonUrl } } } menu参数：菜单对象，指定菜单的name。只会导出该菜单及其绑定页面，不会递归查询子菜单 fileName参数：指定生成的json文件名称 relationViews参数：指定是否导出关联页面，默认为false，只导出菜单关联的页面。如果为true，还会导出该页面通过跳转动作关联的自定义页面。 指定页面导出 mutation { uiDesignerExportReqMutation { download/export( data: { view: { name: "xx_TABLE_0000000000119001" model: "ui.designer.TestUiDesigner" } fileName: "meta" relationViews: true } ) { jsonUrl } } }…

  史, 昂

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

  1.7K000