相关推荐

• 4.2.1 组件之生命周期

  组件生命周期的意义所在：比如动态创建了「视图、字段」，等它们初始化完成或者发生了修改后要执行业务逻辑，这个时候只能去自定义当前字段或者视图，体验极差，平台应该提供一些列的生命周期，允许其他人调用生命周期的api去执行对应的逻辑。 一、实现原理 图4-2-1-1 实现原理 当用户通过内部API去监听某个生命周期的时候，内部会动态的去创建该生命周期，每个生命周期都有「唯一标识」，内部会根据「唯一标识」去创建对应的「Effect」，Effect会根据生命周期的「唯一标识」实例化一个「lifeCycle」，「lifeCycle」创建完成后，会被存放到「Heart」中，「Heart」是整个生命周期的心脏，当心脏每次跳动的时候（生命周期被监听触发）都会触发对应的生命周期 二、生命周期API API 描述 返回值 View LifeCycle onViewBeforeCreated 视图创建前 ViewWidget onViewCreated 视图创建后 ViewWidget onViewBeforeMount 视图挂载前 ViewWidget onViewMounted 视图挂载后 ViewWidget onViewBeforeUpdate 视图数据发生修改前 ViewWidget onViewUpdated 视图数据修改后 ViewWidget onViewBeforeUnmount 视图销毁前 ViewWidget onViewUnmounted 视图销毁 ViewWidget onViewSubmit 提交数据 ViewWidget onViewSubmitStart 数据开始提交 ViewWidget onViewSubmitSuccess 数据提交成功 ViewWidget onViewSubmitFailed 数据提交失败 ViewWidget onViewSubmitEnd 数据提交结束 ViewWidget onViewValidateStart 视图字段校验 ViewWidget onViewValidateSuccess 校验成功 ViewWidget onViewValidateFailed 校验失败 ViewWidget onViewValidateEnd 校验结束 ViewWidget Field LifeCycle onFieldBeforeCreated 字段创建前 FieldWidget onFieldCreated 字段创建后 FieldWidget onFieldBeforeMount 字段挂载前 FieldWidget onFieldMounted 字段挂载后 FieldWidget onFieldBeforeUpdate 字段数据发生修改前 FieldWidget onFieldUpdated 字段数据修改后 FieldWidget onFieldBeforeUnmount 字段销毁前 FieldWidget onFieldUnmounted 字段销毁 FieldWidget onFieldFocus 字段聚焦 FieldWidget onFieldChange 字段的值发生了变化 FieldWidget onFieldBlur 字段失焦 FieldWidget onFieldValidateStart 字段开始校验 FieldWidget onFieldValidateSuccess 校验成功 FieldWidget onFieldValidateFailed 校验失败 FieldWidget onFieldValidateEnd 校验结束 FieldWidget 表4-2-1-1 生命周期API 上面列出的分别是「视图、字段」的生命周期，目前Action的生命周期还没有，后续再补充。 三、第一个View组件生命周期的监听（举例） Step1 新建registryLifeCycle.ts 新建registryLifeCycle.ts，监听宠物达人的列表页。’宠物达人table_demo_core’为视图名，您需要找后端配合 import { onViewCreated } from '@kunlun/dependencies' function registryLifeCycle(){ onViewCreated('宠物达人table_demo_core', (viewWidget) => { console.log('宠物达人table_demo_core'); console.log(viewWidget); }); } export {registryLifeCycle} 图4-2-1-2 新建registryLifeCycle.ts Step2 修改main.ts 全局注册lifeCycle import { registryLifeCycle } from './registryLifeCycle'; registryLifeCycle(); 图4-2-1-3 修改main.ts Step3 看效果 图4-2-1-4 示例效果 四、第一个Filed组件生命周期的监听（举例） Step1 修改registryLifeCycle.ts 通过onFieldValueChange增加宠物达人搜索视图的name（达人）字段的值变化进行监听。 宠物达人search:name 代表 视图名:字段名 import { onViewCreated , onFieldValueChange} from '@kunlun/dependencies' function registryLifeCycle(){ onViewCreated('宠物达人table_demo_core', (viewWidget) => { console.log('宠物达人table_demo_core'); console.log(viewWidget); }); onFieldValueChange('宠物达人search:name', (filedWidget) => { console.log('宠物达人search:name');…

  史, 昂

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

  971000
• Oinone 7天入门到精通

  应用中心

  在App Finder 中点击应用中心可以进入Oinone的应用中心，可以看到Oinone平台所有应用列表、应用大屏、以及技术可视化。 1. App Finder 平台提供App Finder搜索查找已安装的应用、点击进入应用； 我收藏的应用：在应用中心收藏后会呈现在“我收藏的应用”； 业务应用：与业务相关、用户可操作的应用； 设计器：平台提供五大设计器设计应用，即平台的无代码能力，包括：模型设计器、界面设计器、流程设计器、数据可视化、集成设计器。 2. 应用列表 应用列表管理平台中所有应用，管理应用的生命周期，如安装、升级、卸载，提供搜索、创建、编辑、卸载、收藏、设置首页等功能。 在介绍应用具体操作前，我们先来了解以下概念： 应用类型：分为应用与模块两种类型，两者区别在于在于应用有前台页面，可以在前台页面操作数据，模块没有前台页面、服务于其他应用或模块，大家在创建应用时可根据业务需求创建应用或模块。 依赖：创建新应用时，可依赖已有应用或模块，依赖后使用依赖应用/模块的能力，比如依赖文件应用可使用导入、导出能力，依赖资源应用可使用地址、语言等能力。 图3-2-35 Oinone的应用列表 2.1 创建 创建应用时，需要选择类型、定义应用名称、技术名称，选择依赖模块、所属分类、客户端类型。 每个应用大多数都需要依赖一些基础模块：文件、资源、 应用分类是按照应用所属业务域进行的分类管理，目前是平台提供的分类，后续会开放给用户自行管理。 客户端类型是指应用适用于PC端、移动端，如果只选择PC端，则应用不可在移动端使用。 2.2 编辑 编辑时，不允许编辑类型，技术名称，需要在创建时定义正确。 2.3 安装与卸载 卸载后，应用就不会呈现在App Finder中，不可进入应用、使用应用，可重新安装，安装后继续使用。 2.4 收藏应用 点击应用卡片右上角的星标可收藏、取消收藏应用，收藏的应用在App Finder和工作台中展示在收藏位置，可快捷进入。 2.5 设置首页 定义每个应用的首页，有两种方式： a. 通过绑定菜单，进入绑定菜单的页面； b. 直接绑定视图，选择模型、找到模型下的视图，如果可作为首页的视图不存在，也可以进入设计器创建。 2.6 应用详情 点击了解更多，可进入应用详情，查看应用基础信息。 2.7 设计器快捷入口 设计页面：进入界面设计器； 设计模型：进入模型设计器； 设计流程：进入流程设计器； 3. 应用大屏 应用大屏按照分类展示应用，未设置应用分类的应用，无法在应用大屏中呈现。 图3-2-37 未设置应用类目则无法在应用大屏中呈现。 4. 技术可视化 在技术可视化页面，出展示已经安装模块的元数据，并进行分类呈现。 图3-2-38 云数据分类呈现

  史, 昂

  2024年5月23日

  1.5K000
• Oinone 7天入门到精通

  3.5.7.2 自定义母版

  母版是什么 在业务系统中，母版是一种全局通用的组件，用于包裹每个页面的元素。这个概念类似于 PPT 中的母版，它定义了页面的整体结构、样式和布局，使得系统具有一致的外观和风格。 特点： 全局通用：母版是全局性的，适用于系统中的每个页面，确保一致性的用户体验。 包裹元素：母版包裹每个页面的元素，定义了整体的结构和布局。 外观一致性：通过统一的母版设计，系统达到外观和风格的一致性。 与 PPT 母版的类比： 在母版的概念上，与 PPT 中的母版类似，都是用于定义整体结构和样式，确保每个页面都具有一致的外观。 默认母版范围: 图3-5-7-20 默认母版范围 作用场景 在系统中，我们提供了多个纬度的母版，包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度，以满足不同层次的定制需求。 母版纬度： 全局母版： 覆盖系统中所有页面，确保全局的一致性和统一的用户体验。 定义全局性的结构、样式和布局。 应用母版： 适用于特定应用或模块，定制化程度介于全局和页面之间。 允许在不同应用间实现一定的差异化。 页面母版： 面向具体页面，提供最大的定制化空间。 允许在不同页面中定义不同的结构和样式。 选择纬度： 业务场景决定：根据具体的业务场景和需求选择合适的母版纬度。 定制化需求：如果需要全局一致性，选择全局母版；如果在应用层面有特定需求，选择应用母版；如果需要最大的灵活性和定制化，选择页面母版。 参数说明： 在系统中，使用 registerMask 注册母版时，需要提供两个参数。第一个参数是母版的 XML，第二个参数用于控制母版的注册行为，包括 module、moduleName、model 和 actionName。 母版 XML（第一个参数）： 提供母版的 XML 描述，定义了母版的结构和样式。 控制参数（第二个参数）： module：指定模块的名称。 moduleName：指定模块的显示名称。 model：指定母版所属的模型。 actionName：指定母版的操作名称，可以是字符串或字符串数组。 全局母版 可以使用 registerMask 注册母版。当第二个参数为 {} 时，即代表注册全局母版。 示例工程目录 以下是需关注的工程目录示例，并确保导入导出依赖正确： 图3-5-7-21 全局纬度注册母版工程目录示例 示例代码 以下是一个示例代码： import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时，我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件，公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例 复制这段代码执行下registerGlobalMask()试试看吧 效果 右上角消息、语言切换、用户被移除。 图3-5-7-23 全局纬度注册母版效果示例 应用母版 在系统中，可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时，即注册了 resource（资源）应用的母版。 示例工程目录 以下是需关注的工程目录示例，更新导出./moduleMask： 图3-5-7-24 应用纬度注册母版工程目录示例 示例代码 以下是一个示例代码： /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

  史, 昂

  2024年5月23日

  1.4K000
• Oinone 7天入门到精通

  4.1.19 框架之网关协议-后端占位符

  在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <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="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

  史, 昂

  2024年5月23日

  1.4K000
• Oinone 7天入门到精通

  流程设计

  1.流程设计 进入流程设计页之后可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 1.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 1.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 1.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。

  史, 昂

  2024年6月20日

  1.1K000