版本号： 6.1.0 版本发布日期：2025.04.18更新要点：新增AI设计器、虚拟字段 6.1.0 版本 20250424升级内容 镜像版本升级: 6.1.1 –> 6.1.2.3 前端版本升级 后端版本升级: 6.1.1 –> 6.1.2.3 修复增强模型由于继承计算错误导致无法正常更新的问题 修复应用中心编辑时依赖模块计算错误的问题 修复打印设计器由于字体读取失败导致无法正常打印的问题 修复由于RequestAttribute处理错误导致无法正常同步导出和打印的问题 修复o2m、m2m字段表格默认排序字段没有回填 20250423升级内容 镜像版本升级: 6.1.0 –> 6.1.1 前端版本升级 后端版本升级: 6.1.0.4 –> 6.1.1 修复某些场景下无法正确移除数据的问题 内容类型切换可控制body参数类型是否清空 解决关系字段为枚举时查询条件枚举值问题 开放接口支持HL7-FHIR-JSON 集成接口支持熔断 升级内容（6.1.0） 新增AI设计器 新增虚拟字段 新增界面设计器多对一字段下钻添加子模型字段 自动生成的多对多中间模型所属模块默认使用字段定义模型所在模块（可能出现升级失败） 集成设计器支持HL7-FHIR-JSON协议 低代码模型无代码字段修改cloumn ddl 集成接口&开放接口调用监控统计 开放应用支持IP白名单、支持自定义响应状态码与响应结果 修复跨模块追加函数或模块重载时导致未启动模块元数据丢失的问题 修复登录页面语言与登录后不一致的问题 修复loading位置为屏幕高度一半 添加文件下载、拖拽上传、手写签名三个组件 修复微前端情况下多次初始化富文本编辑器菜单多次注册问题 上传api的回调函数非必填 低无一体生成的模版工程依赖简化 业务工程新增依赖项 <!– 元数据增强版本管理 –> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi.pamirs.framework</groupId> <artifactId>pamirs-framework-meta-enchance</artifactId> <version>${pamirs.meta.enchance.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <!– 虚拟字段 –> <dependency> <groupId>pro.shushi.pamirs.framework</groupId> <artifactId>pamirs-framework-meta-enchance</artifactId> </dependency> 请尽可能保证业务工程前后端服务以及设计器同步升级前端服务仅需重新执行npm run clean && npm install即可自动升级到最新版本 后端版本包信息 Oinone平台部署及依赖说明（v5.3） 未使用到的版本号请忽略，按项目中使用到的进行替换。 <!– 平台基础 –> <oinone.version>6.1.2.3</oinone.version> <!– 低无一体 –> <pamirs.paas.version>6.0.1</pamirs.paas.version> <!– 元数据增强 –> <pamirs.meta.enchance.version>6.0.1</pamirs.meta.enchance.version> <!– 设计器 –> <pamirs.workflow.designer.version>6.1.0</pamirs.workflow.designer.version> <pamirs.model.designer.version>6.1.1</pamirs.model.designer.version> <pamirs.ui.designer.version>6.1.2</pamirs.ui.designer.version> <pamirs.print.designer.version>6.1.0</pamirs.print.designer.version> <pamirs.data.designer.version>6.1.0</pamirs.data.designer.version> <pamirs.dataflow.designer.version>6.1.0</pamirs.dataflow.designer.version> <pamirs.eip.designer.version>6.1.1</pamirs.eip.designer.version> <pamirs.microflow.designer.version>6.1.0</pamirs.microflow.designer.version> <pamirs.ai.designer.version>6.1.0</pamirs.ai.designer.version> <dependencyManagement> <dependencies> <dependency> <groupId>pro.shushi</groupId> <artifactId>oinone-bom</artifactId> <version>${oinone.version}</version> <type>pom</type> <scope>import</scope> </dependency> <dependency> <groupId>pro.shushi.pamirs.paas</groupId> <artifactId>pamirs-paas-code-fuse-lite-core</artifactId> <version>${pamirs.paas.version}</version> </dependency> <dependency> <groupId>pro.shushi.pamirs.framework</groupId> <artifactId>pamirs-framework-meta-enchance</artifactId> <version>${pamirs.meta.enchance.version}</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> oinone-bom详细版本信息 <!– 平台基础 –> <pamirs.middleware.version>6.0.0</pamirs.middleware.version> <pamirs.k2.version>6.1.4</pamirs.k2.version> <pamirs.framework.version>6.1.8</pamirs.framework.version> <pamirs.boot.version>6.1.3</pamirs.boot.version> <pamirs.distribution.version>6.1.1</pamirs.distribution.version> <!– 平台功能 –> <pamirs.metadata.manager>6.1.0</pamirs.metadata.manager> <pamirs.designer.metadata.version>6.1.0</pamirs.designer.metadata.version> <pamirs.core.version>6.1.3</pamirs.core.version> <pamirs.workflow.version>6.1.1</pamirs.workflow.version> <pamirs.workbench.version>6.1.0</pamirs.workbench.version> <pamirs.data.visualization.version>6.1.0</pamirs.data.visualization.version> <!– 设计器 –> <pamirs.designer.common.version>6.1.0</pamirs.designer.common.version> <pamirs.flow.designer.base.version>6.1.0</pamirs.flow.designer.base.version> 前端版本包信息 { "@kunlun/dependencies": "6.1.2", "@kunlun/vue-ui-antd": "6.1.2", "@kunlun/vue-ui-el": "6.1.2", "@kunlun/mobile-dependencies": "6.1.0", "@kunlun/vue-ui-mobile-vant": "6.1.0", "@kunlun/mobile-workbench": "6.1.0", "@kunlun/data-designer-open-pc": "6.1.0", "@kunlun/data-designer-open-mobile": "6.1.0" } 前端详细版本信息 可通过node_modules/@kunlun查看 { "@kunlun/cache": "6.1.1", "@kunlun/dsl": "6.1.1", "@kunlun/environment":…

集成设计器数据流程暴露接口触发 需求：在集成设计器配置的连接器、数据流程链接到外部接口，需要可以有一个管理页面，统一管理这些集成配置。比如对接多个医院的挂号系统，希望可以配置好数据流程之后，能够在已经实现的开放接口上，动态的调用集成平台配置的数据流程。 连接器暴露接口触发 设计连接器资源配置模型。使用业务ID+接口唯一标识+连接器实现连接器资源和业务唯一。 @Model.model(EipConnectorResourceSetting.MODEL_MODEL) @Model(displayName = "连接器资源配置", summary = "连接器资源配置") @Model.Advanced(unique = {"hospitalId, interfaceUnique"}) public class EipConnectorResourceSetting extends IdModel { public static final String MODEL_MODEL = "hr.simple.EipConnectorResourceSetting"; @UxTableSearch.FieldWidget(@UxWidget()) @Field(displayName = "医院", required = true) @Field.Relation(relationFields = {"hospitalId"}, referenceFields = {"id"}) private Hospital hospital; @Field.Integer @Field(displayName = "医院ID", invisible = true) private Long hospitalId; @UxTableSearch.FieldWidget(@UxWidget()) @Field.String @Field(displayName = "接口唯一标识", required = true) private String interfaceUnique; @UxTableSearch.FieldWidget(@UxWidget()) @Field.many2one @Field(displayName = "连接器", required = true) @Field.Relation(relationFields = {"connectorId"}, referenceFields = {"id"}) private EipConnector connector; @Field.Integer @Field(displayName = "连接器ID", invisible = true) private Long connectorId; @UxTableSearch.FieldWidget(@UxWidget()) @Field.many2one @Field(displayName = "连接器接口", required = true) @Field.Relation(relationFields = {"integrationInterfaceId"}, referenceFields = {"id"}, domain = "connectorId==${activeRecord.connector.id}") private EipConnectorResource connectorResource; @Field.Integer @Field(displayName = "连接器接口ID", invisible = true) private Long connectorResourceId; } 开放接口定义，文档参考：https://doc.oinone.top/oio4/9326.html外部平台调用开放接口，实现动态调用连接器资源 @Model.model(HospitalSection.MODEL_MODEL) @Model(displayName = "医院科室", summary = "医院科室") public class HospitalSection extends IdModel { public static final String MODEL_MODEL = "net.example.HospitalSection"; @Field(displayName = "科室Code", required = true) private String deptCode; @Field(displayName = "科室名称", required = true) private String deptName; @Field(displayName = "科室描述") private String deptDesc; } @Slf4j @Fun @Component public class TestOpenService { @Resource private TestCommonService testCommonService;…

问题背景 在 5.x 版本的 oinone 前端架构中，我们开放了部分源码，但是导致以下性能问题： 1.构建耗时增加​​：Webpack 需要编译源码文件 2.​​加载性能下降​​：页面需加载全部编译产物 3.​​冷启动缓慢​​：开发服务器启动时间延长 以下方案通过关闭源码依赖。 操作步骤 1. 添加路径修正脚本 1: 在当前项目工程根目录中的scripts目录添加patch-package-entry.js脚本，内容如下： const fs = require('fs'); const path = require('path'); const targetPackages = [ '@kunlun+vue-admin-base', '@kunlun+vue-admin-layout', '@kunlun+vue-router', '@kunlun+vue-ui', '@kunlun+vue-ui-antd', '@kunlun+vue-ui-common', '@kunlun+vue-ui-el', '@kunlun+vue-widget' ]; // 递归查找目标包的 package.json function findPackageJson(rootDir, pkgName) { const entries = fs.readdirSync(rootDir); for (const entry of entries) { const entryPath = path.join(rootDir, entry); const stat = fs.statSync(entryPath); if (stat.isDirectory()) { if (entry.startsWith(pkgName)) { const [pkGroupName, name] = pkgName.split('+'); const pkgDir = path.join(entryPath, 'node_modules', pkGroupName, name); const pkgJsonPath = path.join(pkgDir, 'package.json'); if (fs.existsSync(pkgJsonPath)) { return pkgJsonPath; } } // 递归查找子目录 const found = findPackageJson(entryPath, pkgName); if (found) return found; } } return null; } // 从 node_modules/.pnpm 开始查找 const pnpmDir = path.join(__dirname, '../', 'node_modules', '.pnpm'); for (const pkgName of targetPackages) { const packageJsonPath = findPackageJson(pnpmDir, pkgName); if (packageJsonPath) { try { const packageJSON = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')); if (packageJSON.main === 'index.ts') { const libName = packageJSON.name.replace('@', '').replace('/', '-'); packageJSON.main = `dist/${libName}.umd.js`; packageJSON.module = `dist/${libName}.umd.js`; const typings = 'dist/types/index.d.ts'; packageJSON.typings = typings; const [pwd] = packageJsonPath.split('package.json'); const typingsUrl = path.resolve(pwd, typings); const dir = fs.existsSync(typingsUrl); if (!dir)…

在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——需不需要自定义请求，不同场景下怎么自定义请求的维度，提供渐进式的自定义请求介绍。 1. 什么场景不需要自定义请求 自定义请求的背后是获取数据，如果数据已经拿到了，就不需要自定义请求了。首先，Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。这意味着，当我们简单替换组件，不需要特殊获取数据的时候，如果需要拿值，不需要自定义请求，直接从props里接就好，例如： 自定义表格 这里继承平台的表格组件，就有了平台表格自动获取数据的能力 import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget: ['table', TABLE_WIDGET] }) ) export class TestWidget extends TableWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 dataSource，就能获取数据 <template> <div class="Test"> {{ dataSource }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['dataSource'] }); </script> 效果如下： 自定义表单 这里继承平台的表单组件，就有了平台表单自动获取数据的能力 import { BaseElementWidget, SPI, FORM_WIDGET, FormWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: ['form', FORM_WIDGET] }) ) export class TestWidget extends FormWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } } 在 vue 中用 props 接一下 formData，就能获取数据 <template> <div class="Test"> {{ formData }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['formData'] }); </script> 效果如下： 自定义字段 这里以单行文本字段为例，继承平台的单行文本字段组件，字段的数据实际上是从表单或表格里拿的，可以通过 value 快捷地拿到字段值。如果是关系型字段，想拿到选项数据而不是字段值，可以参考方法3、方法4。 import { SPI, ViewType, FormStringFieldSingleWidget, BaseFieldWidget, ModelFieldType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class TestWidget extends…

后端实现 代理继承界面设计器视图模型 @Model.model(MyView.MODEL_MODEL) @Model(displayName = "视图代理") @Model.Advanced(type = ModelTypeEnum.PROXY) public class MyView extends UiDesignerViewProxy { public static final String MODEL_MODEL = "hr.simple.MyView"; @Field.Integer @Field(displayName = "页面布局ID") private Long uiDesignerViewLayoutId; } 重写查询接口，返回页面布局ID，重写创建接口，实现创建页面逻辑。 package pro.shushi.pamirs.top.core.action; import org.apache.commons.collections4.CollectionUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.constants.ViewConstants; import pro.shushi.pamirs.boot.base.enmu.ActionTargetEnum; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxAction; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.button.UxRouteButton; import pro.shushi.pamirs.framework.connectors.data.sql.Pops; import pro.shushi.pamirs.framework.connectors.data.sql.query.LambdaQueryWrapper; import pro.shushi.pamirs.meta.annotation.Action; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.api.dto.condition.Pagination; import pro.shushi.pamirs.meta.api.dto.wrapper.IWrapper; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.meta.constant.FunctionConstants; import pro.shushi.pamirs.meta.enmu.*; import pro.shushi.pamirs.top.api.model.MyView; import pro.shushi.pamirs.ui.designer.api.designe.UiDesignerViewLayoutService; import pro.shushi.pamirs.ui.designer.model.UiDesignerViewLayout; import pro.shushi.pamirs.ui.designer.pmodel.UiDesignerViewLayoutProxy; import java.util.List; import java.util.Map; import java.util.stream.Collectors; /** * @author Yexiu at 20:39 on 2025/3/27 */ @Component @Model.model(MyView.MODEL_MODEL) public class MyViewAction { @Autowired private UiDesignerViewLayoutService uiDesignerViewLayoutService; @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "创建", summary = "添加", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public MyView create(MyView data) { UiDesignerViewLayoutProxy uiDesignerViewLayoutProxy = new UiDesignerViewLayoutProxy(); uiDesignerViewLayoutProxy.setBizType(data.getBizType()); uiDesignerViewLayoutProxy.setDesignerActionBarType(data.getDesignerActionBarType()); uiDesignerViewLayoutProxy.setViewType(data.getType()); uiDesignerViewLayoutProxy.setModel(data.getModel()); uiDesignerViewLayoutProxy.setModule(PamirsSession.getServApp()); uiDesignerViewLayoutProxy.setViewTitle(data.getTitle()); uiDesignerViewLayoutProxy.setUsingDefaultView(data.getLoadLayout()); UiDesignerViewLayoutProxy saveUiDesigner = uiDesignerViewLayoutService.create(uiDesignerViewLayoutProxy); data.setDesignerViewId(saveUiDesigner.getId()); return data; } @Function.Advanced(type = FunctionTypeEnum.QUERY, displayName = "查询列表") @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API, FunctionOpenEnum.LOCAL}) public Pagination<MyView> queryPage(Pagination<MyView> page, IWrapper<MyView> queryWrapper) { LambdaQueryWrapper<MyView> wrapper = Pops.<MyView>lambdaQuery().from(MyView.MODEL_MODEL) .eq(MyView::getSys, Boolean.FALSE) .eq(MyView::getSystemSource, SystemSourceEnum.UI); Pagination<MyView> myViewPagination = new MyView().queryPage(page, wrapper); List<MyView> content…

开发过程中，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，这时候我们需要引入微前端作为渐进式重构的手段和策略。为了满足将Oinone无缝接入现有项目，能在现有项目和Oinone之间路由、嵌套、通信等的需求，现整理出了Oinone接入乾坤的模版工程——工程压缩包地址 模版工程启动 工程结构目录介绍 最外层micro-front-end用pnpm工作区来管理多工程仓库，维护统一的安装、运行、清除、构建等的脚本。micro-main是主应用，micro-son是子应用，模拟重构工作量巨大的老应用，ss-front-modules是Oinone应用。micro-front-end/│── packages/│ ├── micro-main/│ │ ├── package.json│ ├── micro-son/│ │ ├── package.json│ ├── ss-front-modules/│ │ ├── packages/│ │ │ ├── ss-admin-widget/│ │ │ ├── ss-boot/│ │ │ ├── ss-oinone/│ │ │ ├── ss-project/│ │ ├── package.json│── package.json 模版工程安装、运行 1. 安装 在micro-front-end目录下 pnpm install 2. 运行 在micro-front-end目录下 pnpm run dev，这里应当能看到启动了三个服务（端口8888～8890），其中http://localhost:8888/是主应用。 3. 效果 进入 http://localhost:8888/主应用 ，可以路由到Oinone应用看效果 接入步骤分析 1. 主应用搭建 微应用注册配置 配置了一个oinone的子应用，name是ss-boot。 export const SUB_APP_CONFIG = { subApps: [ { name: 'micro-son', // 子应用名称，跟package.json一致 entry: '//localhost:8889', // 子应用入口，本地环境下指定端口 container: '#micro-son', // 挂载子应用的dom activeRule: '/app/micro-son', // 路由匹配规则 props: {}, // 主应用与子应用通信传值 sandbox: { strictStyleIsolation: false, // 关闭严格样式隔离 experimentalStyleIsolation: false // 关闭实验性样式隔离 } }, { name: 'ss-boot', // 子应用名称，跟package.json一致 entry: '//localhost:8890', // 子应用入口，本地环境下指定端口 container: '#app-oinone', // 挂载子应用的dom activeRule: '/app/ss-boot', // 路由匹配规则 props: {}, // 主应用与子应用通信传值 sandbox: { strictStyleIsolation: false, // 关闭严格样式隔离 experimentalStyleIsolation: false // 关闭实验性样式隔离 } } ] }; main.ts 执行注册逻辑 import { registerMicroApps } from "qiankun"; function registerApps() { try { // 调用乾坤注册微应用方法，subApps 就是上面的配置 registerMicroApps(subApps, { beforeLoad: [ (app) => { console.log("before load", app); return Promise.resolve(); }, ], beforeMount: [ (app) => { console.log("before mount", app); return Promise.resolve(); }, ], afterUnmount:…

前言：本文主要聚集于 TableWidget和 FormWidget，对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同，TableWidget与 FormWidget有着明确的目的，比如 TableWidget就是作为一个表格视图，这种名称中可以看得出来。其将表格的一系列能力聚拢，如单元格，行列选择排序，翻页等等； TableWidget 我们使用表格到底是在使用什么？ 在我们讲述渲染流程前，我们需要提一个问题，在我们使用表格组件时，我们在使用什么，换而言之，我们对表格组件中关注的是什么？应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题，让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable，如 allowRowClick,rowClickMode等等，这些值会作为 Props 传递给 DefaultTable，DefaultTable则一定意义上充当了一个桥接层，主要做了两件事，处理 Props， 处理 Slot，TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合，创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot，比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后， props与 slot会进一步交给 OioTable进行渲染，OioTable则会进一步聚合处理，比如如果没有 defaultSlot则进行空值的渲染，如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构，而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget，其负责组装 DefaultTableColumn渲染所需要的 props，然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态，不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合， Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后，不可避免的会有数据交互，比如分页，排序，过滤等，这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等，TableWidget会将事件作为 props 向下注入，当事件被调用，TableWidget会进行处理，比如发起请求，或者对内部数据排序等。而除了数据的展示，还有一些动作，即 Action ,Action 被触发时会按照内部的配置进行工作，比如编辑时，将获取 activeRecord，随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样，也是作为一个渲染模块，但是它与 TableWidget不同的是，FormWidget是作为一个表单视图，其将表单的一系列能力聚拢，如表单提交，表单校验，表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别，比如 FormWidget没有提供翻页，排序，过滤等能力，因为这些能力属于表格的能力，而 FormWidget则更关注于表单的能力。提供了数据的存储，提交，校验等能力 Form 在渲染时流程与 Table 大同小异，其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染，不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西，当页面上的控件发生变化，其变更的值会被收集到 FormData 中，并在后续中使用。同时在编辑已有数据场景下，Form 会将数据加载到 FormData，随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出，Table 侧重于数据的查询展示，Form 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

效果图 当前图片中，上方是自定义的视图，下方是动态的表单视图 代码 步骤拆分：1: 通过注册 layout 的方式先自定义视图，把自己的业务逻辑写完2: 在对应的 vue 文件里面定义一个插槽，用来放置动态的表单视图3: 在组件挂在的时候，创建动态视图 1: 注册 layout // registry.ts import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="CustomViewWidget"></element> </view>`, { model: '模型编码', actionName: '动作名称', viewType: ViewType.Form } ); 2: vue 里面定义 slot <!–CustomView.vue –> <template> <div> <h1>这是自定义的视图</h1> <img src="https://pamirs.oss-cn-hangzhou.aliyuncs.com/oinone/static/images/login_bg_left.jpg" height="400" width="2600" alt="" /> <h1>下面设计器配置的动态视图</h1> <slot name="dynamicView"></slot> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ }); </script> 3: 组件挂载的时候，创建动态视图 // CustomViewWidget.ts import { SPI, BaseElementWidget, ViewType, ViewCache, Widget, MetadataViewWidget, BaseView, TableView, FormView, FormWidget } from '@kunlun/dependencies'; import CustomView from './CustomView.vue'; import { delay } from 'lodash-es'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'CustomViewWidget' }) ) export class CustomViewWidgetWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomView); return this; } /** * 定义一个属性，用来存储动态视图 */ private metadataViewWidget: MetadataViewWidget | undefined; /** * 获取动态视图的数据 */ @Widget.Method() private getWidgetData() { const children = this.metadataViewWidget?.getChildrenInstance() as BaseView[]; const child = children[0]; if (child) { return child instanceof TableView ? child.getCurrentDataSource() : child.getCurrentActiveRecords(); } return null; } /** * 触发表单校验 */ @Widget.Method() private async…

在项目开发中，我们可能会遇到自定义登录页，密码需要加密，或者是数据提交的时候，某个数据需要加密，在平台的前端中，提供了默认的全局加密 API 在 oinone 前端工程使用 // pc端工程使用 import { encrypt } from '@kunlun/dependencies'; // 移动端端工程使用 import { encrypt } from '@kunlun/mobile-dependencies'; // 加密后的密码 const password = encrypt('123456'); 其他工程使用 如果是其他工程，前端没有用到 oinone 这一套，比如小程序，或者是其他工程，可以使用下面的代码记得安装 crypto-js import CryptoJS from 'crypto-js'; const key = CryptoJS.enc.Utf8.parse('1234567890abcdefghijklmnopqrstuv'); const iv = CryptoJS.enc.Utf8.parse('1234567890aabbcc'); export const encrypt = (content: string): string => { if (typeof content === 'string' && content) { const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encryptedContent.ciphertext.toString(); } return ''; };