下面整理了目前现有的所有文章，并提供了基本的学习路径。所有使用*标记的文章属于推荐必读文章。
基础篇
展示篇
交互篇
Oinone社区 作者：数式-海波原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/51.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
渲染前的准备 渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。 渲染的起步 OioProvider 方法是整个应用的入口，我们忽略掉一些配置方法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用， 渐入佳境 DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，1:提供 Mask 的渲染2:提供元数据上下文初始化 该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，在初始化后，会将获取到的数据注入到 MetadataViewWidget中， Mask 的渲染 关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中 数据的变更 当上面两件任务完成后，将开始主视图的渲染，上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染， MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新, 主视图的渲染 MultiTabContainerWidget继承自MetadataViewWidget，当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上， 渲染整个页面 当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息， const currentSlots = computed<Slots | undefined>( () => DslRender.fetchVNodeSlots(props.dslDefinition) || (Object.keys(context.slots).length ? context.slots : undefined) ); const renderWidget = createCustomWidget(InternalWidget.View, { …context.attrs, type: props.type || viewType.value, template: props.dslDefinition, metadataHandle: props.metadataHandle || metadataHandle.value, rootHandle: props.rootHandle || rootHandle.value, parentHandle: props.parentHandle || parentHandle.value, slotName: props.slotName, inline: inlineProp } as ViewWidgetProps); 生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数， export function createCustomWidget( widget: string, props: CustomWidgetProps ): RenderWidget | undefined public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]):…
一、抽象模型，需要操作流程的模型继承此模型 定义流程相关的一些信息在模型中；如果直接定义在存储模型中，下面这些字段都是显示的指定为非存储字段。更好的建议：1、如果有多个业务模型有这类需要，则可以把这些字段抽取到抽象模型中2、如果仅有一个业务模型需要，则可以放到代理模型中 /** * 定义流程相关的一些信息在模型中 */ @Model.model(DemoBaseAbstractModel.MODEL_MODEL) @Model(displayName = "抽象模型") @Model.Advanced(type= ModelTypeEnum.ABSTRACT) public abstract class DemoBaseAbstractModel extends IdModel { public static final String MODEL_MODEL = "hr.simple.DemoBaseAbstractModel"; // 流程相关 @Field.Integer @Field(displayName = "工作流用户任务ID", summary = "业务数据列表中审核流程使用", invisible = true, store = NullableBoolEnum.FALSE) private Long workflowUserTaskId; @Field.Integer @Field(displayName = "流程实例ID", summary = "业务数据列表中催办使用", invisible = true, store = NullableBoolEnum.FALSE) private Long instanceId; @Field.String @UxForm.FieldWidget(@UxWidget(invisible = "true")) @UxDetail.FieldWidget(@UxWidget(invisible = "true")) @Field(displayName = "当前流程节点", store = NullableBoolEnum.FALSE) private String currentFlowNode; @Field.Boolean @Field(displayName = "能否催办", invisible = true, defaultValue = "false", store = NullableBoolEnum.FALSE) private Boolean canUrge; // 审批状态控制申请单是否可以被发起流程、能否编辑等控制 @Field.Enum @Field(displayName = "审批状态", defaultValue = "NC") @UxForm.FieldWidget(@UxWidget(invisible = "true")) private ApprovalStatusEnum approvalStatus; } @Dict(dictionary = ApprovalStatusEnum.dictionary, displayName = "审批状态") public enum ApprovalStatusEnum implements IEnum<String> { NC("NC", "待提交", "待提交"), PENDING("PENDING", "已提交", "已提交，待审批"), APPROVED("APPROVED", "已批准", "已批准"), REJECTED("REJECTED", "已拒绝", "已拒绝"); public static final String dictionary = "land.enums.LandApprovalStatusEnum"; private final String value; private final String displayName; private final String help; ApprovalStatusEnum(String value, String displayName, String help) { this.value = value; this.displayName = displayName; this.help = help; } public String getValue() { return value; } public String getDisplayName() { return…
场景描述 用户在自定义接口提供给前端调用时 @Action(displayName = "注册", bindingType = ViewTypeEnum.CUSTOM) public BaseResponse register(UserZhgl data) { //…逻辑 return result; } import java.io.Serializable; public class BaseResponse implements Serializable { private String code; private String msg; public BaseResponse() { } public BaseResponse(String code, String msg) { this.code = code; this.msg = msg; } public String getCode() { return code; } public void setCode(String code) { this.code = code; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } } gql执行时出现报错 { "errors":[ { "message":"Validation error of type SubSelectionNotAllowed: Sub selection not allowed on leaf type Object of field register @ 'zhglMutation/register'", "locations":[ { "line":3, "column":3 } ], "extensions":{ "classification":"ValidationError" } } ] } 解决方案 1.返回对象不为空时，对象必须是模型，否则无法解析返回参数2.前端调用GQL异常时，可以用Insomnia工具对GQL进行测试，根据错误提示对GQL进行修改和排查3.GQL正常情况下，执行以后可根据后端日志进行错误排查
场景描述 在碰到大数据量并且需要全文检索的场景，我们在分布式架构中基本会架设ElasticSearch来作为一个常规解决方案。在oinone体系中增强模型就是应对这类场景，其背后也是整合了ElasticSearch; 使用前你应该 了解ElasticSearch，包括不限于：Index(索引)、分词、Node(节点)、Document(文档)、Shards(分片) & Replicas(副本)。参考官方网站：https://www.elastic.co/cn/ 有一个可用的ElasticSearch环境(本地项目能引用到) 前置约束 增强模型增量依赖数据变更实时消息，因此确保项目的event是开启的，mq配置正确。 项目引入搜索步骤 1、boot工程加入相关依赖包 boot工程需要指定ES客户端包版本，不指定版本会隐性依赖顶层spring-boot依赖管理指定的低版本 boot工程加入pamris-channel的工程依赖 <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId>elasticsearch-rest-client</artifactId> <version>8.4.1</version> </dependency> <dependency> <groupId>jakarta.json</groupId> <artifactId>jakarta.json-api</artifactId> <version>2.1.1</version> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-sql-record-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-channel-core</artifactId> </dependency> 2、api工程加入相关依赖包 在XXX-api中增加入pamirs-channel-api的依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-channel-api</artifactId> </dependency> 3、yml文件配置 在pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加channel，即在启动模块中增加channel模块。同时注意es的配置，是否跟es的服务一致 pamirs: record: sql: #改成自己本地路径(或服务器路径) store: /Users/oinone/record boot: modules: – channel ## 确保也安装了sql_record – sql_record channel: packages: # 增强模型扫描包配置 – com.xxx.xxx elastic: url: 127.0.0.1:9200 4、项目的模块增加模块依赖 XXXModule增加对ChannelModule的依赖 @Module(dependencies = {ChannelModule.MODULE_MODULE}) 5、增加增强模型(举例) package pro.shushi.pamirs.demo.api.enhance; import pro.shushi.pamirs.channel.enmu.IncrementEnum; import pro.shushi.pamirs.channel.meta.Enhance; import pro.shushi.pamirs.channel.meta.EnhanceModel; import pro.shushi.pamirs.demo.api.model.ShardingModel; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; @Model(displayName = "测试EnhanceModel") @Model.model(ShardingModelEnhance.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY, inherited = {EnhanceModel.MODEL_MODEL}) @Enhance(shards = "3", replicas = "1", reAlias = true,increment= IncrementEnum.OPEN) public class ShardingModelEnhance extends ShardingModel { public static final String MODEL_MODEL="demo.ShardingModelEnhance"; } 6、重启系统看效果 1、进入【传输增强模型】应用，访问增强模型列表我们会发现一条记录，并点击【全量同步】初始化ES，并全量dump数据 2、再次回到Demo应用，进入增强模型页面，可以正常访问并进增删改查操作 个性化dump逻辑 通常dump逻辑是有个性化需求，那么我们可以重写模型的synchronize方法，函数重写特性在“面向对象-继承与多态”部分中已经有详细介绍。 重写ShardingModelEnhance模型的synchronize方法 重写后，如果针对老数据记录需要把新增的字段都自动填充，可以进入【传输增强模型】应用，访问增强模型列表，找到对应的记录并点击【全量同步】 package pro.shushi.pamirs.demo.api.enhance; import pro.shushi.pamirs.channel.enmu.IncrementEnum; import pro.shushi.pamirs.channel.meta.Enhance; import pro.shushi.pamirs.channel.meta.EnhanceModel; import pro.shushi.pamirs.demo.api.model.ShardingModel; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import pro.shushi.pamirs.meta.enmu.ModelTypeEnum; import java.util.List; @Model(displayName = "测试EnhanceModel") @Model.model(ShardingModelEnhance.MODEL_MODEL) @Model.Advanced(type = ModelTypeEnum.PROXY, inherited = {EnhanceModel.MODEL_MODEL}) @Enhance(shards = "3", replicas = "1", reAlias = true,increment= IncrementEnum.OPEN) public class ShardingModelEnhance extends ShardingModel { public static final String MODEL_MODEL="demo.ShardingModelEnhance"; @Field(displayName = "nick") private String nick;…
介绍 为满足大家对登录页面不同的展示需求，oinone在登录页面提供了丰富的配置项以支持大家在业务上的个性化需求 配置方式 在manifest.js内新增以下配置选项 manifest.js文件如何配置的参考文档 runtimeConfigResolve({ login: { /** * 登录按钮label */ loginLabel: '登录', /** * 是否显示忘记密码按钮 */ forgetPassword: true, /** * 忘记密码按钮Label */ forgetPasswordLabel: '忘记密码', /** * 是否显示注册按钮 */ register: true, /** * 注册按钮Label */ registerLabel: '注册', /** * 是否显示验证码登录Tab */ codeLogin: true, /** * 账号登录Tab Label */ accountLoginLabel: '账号', /** * 验证码登录Tab Label */ codeLoginLabel: '验证码', /** * 账号登录-账号输入框Placeholder */ accountPlaceholder: '请输入账号', /** * 账号登录-密码输入框Placeholder */ passwordPlaceholder: '前输入密码', /** * 验证码登录-手机号输入框Placeholder */ phonePlaceholder: '请输入手机号', /** * 验证码登录-验证码输入框Placeholder */ codePlaceholder: '请输入验证码', } });
