如何通过 Oineone 平台自定义视图

相关推荐

• 前端

  在前端视图添加自定义的区域块

  添加自定义区域块 平台提供了一系列默认的视图布局，可以帮助开发人员快速构建出复杂的企业应用系统。当然，我们可以使用自定义区域块来扩展表格、表单、画廊、树形等视图。 自定义区域块概述 平台视图布局都是通过XML配置实现的。在视图布局中，我们可以使用一些特定的元素标签来构建视图的表头、表单、搜索区域等部分。而自定义区域块，就是这些元素标签之外的部分。我们可以通过在视图布局的XML中添加自定义区域块，来扩展页面功能。 视图类型及相关元素 视图类型分为表格（TABLE）、表单（FORM）、画廊（GALLERY）、树形（TREE）等。不同类型的视图布局，包含的元素也有所不同。 下面是几种视图类型及其对应的元素： 表格：搜索区域、表格主体，其中表格主体包含了表格上面的动作、表格区域等部分。 表单：表单区域，包含了表单动作、表单区域等部分。 画廊：动作、卡片详细信息。 在表格页面添加自定义区域块 以下是一个示例，演示如何在表格页面顶部添加自定义区域块。 1. 修改视图布局XML 首先，我们需要修改表格视图的XML布局，添加自定义区域块元素标签。 <view type="TABLE"> <!– 这是搜索区域 –> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <!– 这是表格主体 –> <pack widget="group" slot="tableGroup"> <!– 在这里添加自定义区域块元素标签 –> <element widget="MyCustomElement"></element> <!– 这是表格上面的动作 –> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <!– 这是表格区域 –> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 在上述代码中，我们添加了一个名为MyCustomElement的元素标签。这将作为我们自定义区域块的容器。 2. 创建自定义Vue组件 接下来，我们需要创建一个Vue组件，并将其指定为自定义元素标签MyCustomElement的模板。 <template> <div> <!– 在这里编写自定义区域块的内容 –> <p>Hello, world!</p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ components: { }, props: [], setup(props) { return {}; } }); </script> 在上述代码中，我们定义了一个非常简单的Vue组件，它在页面上显示一个“Hello, world!”的文本信息。 3. 创建自定义Element Widget 为了使自定义Vue组件与XML布局文件关联起来，我们需要创建一个对应的Element Widget。 import { BaseElementWidget, SPI, BaseElementViewWidget, Widget, ViewMode, FormWidget, BaseElementWidgetProps } from '@kunlun/dependencies'; import MyCustomElement from './MyCustomElement.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'MyCustomElementWidget' })) export class MyCustomElementWidget extends BaseElementWidget { public initialize(props: BaseElementWidgetProps): this { super.initialize(props) this.setComponent(MyCustomElement) return this } } 在上述代码中，我们继承了BaseElementWidget类，并在其中指定了Vue组件MyCustomElement。这样，XML布局文件中的元素标签就能够正确地与Vue组件关联起来。 4. 注册视图布局 最后，我们需要将上述代码配置注册。具体而言，我们需要调用registerLayout方法来将XML布局文件、模块名和视图类型进行关联。 import { registerLayout, ViewType } from '@kunlun/dependencies'; registerLayout( `<view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" />…

  oinone

  2023年11月1日

  3.1K000
• 开发实践

  灵活敏捷开发，高效交付项目的6个关键

  项目工程管理 项目工程顶层分层 项目分层设计，划分出 CDM层、 标准业务层 、定制业务层； 沉淀领域业务模型至CDM层； 沉底业内通用功能至标准业务层； 客户定制化功能在定制业务层； 项目内部的层级划分 项目包结构管理及规范 pamirs-demo-api constant【常量的包路径】 enums【枚举类的包路径】 model【该领域核⼼模型的包路径】 pmodel【该领域代理模型的包路径】 tmodel【该领域传输模型的包路径】 service【存放该领域的⾮存储模型如：⽤于传输的临时模型】 utils【工具类】 XXModule【该类是Demo模块的定义】 pamirs-demo-core service【接口实现类】 init【模块初始化⼯作的包路径】 manager 【manager是 service的⼀些公共逻辑，不会定义为独⽴的function的类】 pamirs-demo-view（可选） action【模型对外交互的⾏为的包路径】 项目中模块间依赖 禁止出现api模块依赖core模块的情况，api模块只允许依赖api模块； 根据当前项目结构进行模块划分，避免循环依赖； 规划项目模块 项目阶段，代码开发前，业务架构师需充分的理解需求和蓝图，对系统进行业务域, 功能域的划分；例如：对一个电商系统： 提高系统的可维护性：通过将系统拆分为不同的业务域，每个业务域都有清晰的边界和职责，可以独立开发、测试和维护； 提升开发效率：业务域划分可以使开发团队更加专注于自己负责的业务，减少不必要的沟通和协调，提升开发效率； 促进团队合作：通过业务域划分，每个团队可以负责一个或多个业务域，团队成员之间可以有更高效的合作和协同。 支持系统的扩展和演化：业务域划分可以使系统更加灵活和可扩展。当需要新增一个新的业务功能或调整现有的业务逻辑时，只需要修改对应的业务域，而不需要对整个系统进行改动。 项目文档管理 项目文档管理对于项目的实施,项目进度管理，项目后期维护等都是至关重要的。系统详细的产品文档，测试文档，运维文档，开发文档，项目管理文档等。 协同合作：团队成员可以共享和访问项目文档，促进协同合作和信息共享，避免信息孤岛和重复工作。 知识管理：项目中所获得的知识，对项目的成功和后续的知识积累至关重要。通过良好的文档管理，可以确保项目知识的保存和传承，提高组织的知识管理能力。 问题解决：项目文档中记录了项目的需求、决策、问题和解决方案等信息。当出现问题或需要做决策时，可以通过查阅文档来获取相关信息，加快问题解决的速度，并减少错误和重复。 项目追踪：通过文档管理，可以跟踪项目的进展和状态。可以记录项目的里程碑、任务分配、进度更新等信息，帮助团队了解项目的整体情况，及时发现和解决问题。 知识共享：好的文档管理可以促进知识共享和传播。通过将项目文档进行分类、索引和存档，可以使团队成员更容易找到所需的信息，并从中学习和借鉴经验，提高工作效率和质量。 数据库和事务 多表联合查询 减少需要join的操作出现 用多次查询替代 索引相关 核心业务访问DB的Sql 要命中或者覆盖索引，保存核心业务的响应时间； 控制单表的索引数量，注意联合索引 数据一致性：乐观锁控制，unique�等 事务代码示例 事务相关注意点参考【Oinone如何支持构建分布式项目】：https://doc.oinone.top/kai-fa-shi-jian/5572.html

  shao

  2024年2月20日

  1.5K000
• 开发实践

  GQL GET 请求生成图片文件流 — 技术实现方案

  GQL GET 请求生成图片文件流 — 技术实现方案 基于 Oinone/Pamirs GQL GET 文件流机制，参考 FileAction#downloadFormData（查询型）与 ExcelExportTaskAction#createExportTask（同步写流），实现「按业务 ID 动态生成图片并输出文件流」的通用指南。 1. 背景与目标 1.1 需求 在业务场景中，需要根据业务 ID（如订单 ID、模板 ID、单据 ID）在后端动态渲染图片（条码、标签、证书、预览图等），并将结果以文件流形式返回给前端。 1.2 约束 复用 Oinone 既有鉴权、会话、模块路由体系，不新增独立 REST 下载接口。 与 Excel 同步导出保持一致的调用方式：通过 GET 访问 /pamirs/{module}?query=…&variables=…。 前端仅两种消费方式： 页面预览：<img :src="imageUrl" /> 触发下载：window.open(imageUrl, '_blank') 2. 参考实现 2.1 查询型文件流（图片查看应对齐此模式） 图片查看属于只读查询，应使用 query + @Function(type = QUERY)，与 CDN 文件下载一致： // @oinone/kunlun-vue-ui-common/…/UploadService.ts const gql = `query{resourceFileFormQuery{downloadFormData(resourceFileForm:{downloadUrl:"${url}"}){filename}}}`; window.open(UrlHelper.appendBasePath(`/pamirs/file?query=${encodeURIComponent(gql)}`), '_blank'); // pamirs-core/pamirs-file2/…/FileAction.java @Function.Advanced(displayName = "前端下载数据", type = FunctionTypeEnum.QUERY) public ResourceFileForm downloadFormData(ResourceFileForm resourceFileForm) { // 直接写 HttpServletResponse 输出流 response.setContentType("application/octet-stream"); response.setHeader("Content-Disposition", "attachment; filename=" + …); IOUtils.copy(inputStream, response.getOutputStream()); return new ResourceFileForm(); } 图片查看用 GQL.query，不用 GQL.mutation。 2.2 同步写流机制（共用） 无论 query 还是 mutation，文件流输出的底层机制相同：在 Function/Action 执行过程中直接写 HttpServletResponse。 2.2.1 HTTP 网关：RequestController GET /pamirs/{moduleName}?query={gql}&variables={json} POST /pamirs/{moduleName} body: { query, variables } GET 与 POST 走同一执行链路： // pamirs-framework/pamirs-gateways-graph-java/…/RequestController.java @RequestMapping(value = "/pamirs/{moduleName}", method = RequestMethod.GET) public DeferredResult<String> pamirsGet( @PathVariable("moduleName") String moduleName, @RequestParam("query") String gql, @RequestParam(value = "variables", required = false) String variables, …) { PamirsClientRequestParam gqlRequest = new PamirsClientRequestParam(); gqlRequest.setQuery(gql); if (!StringUtils.isBlank(variables)) { gqlRequest.setVariables(JsonUtils.parseMap(variables)); } return pamirsPost(moduleName, gqlRequest, request, response); } variables.path 在 RequestHelper.preparePamirsRequestParam 中经 SessionPrepareApi.prepare 注入会话上下文，与前端 getSessionPath() 对应。 2.2.2 Excel 导出对照：ExcelFileServiceImpl#doExportSync Excel 同步导出使用 mutation（createExportTask），因为会创建导出任务记录；图片查看无此副作用，故用 query。 同步导出的关键：劫持 FileClient.upload，将字节直接写入当前…

  nation

  2026年7月2日

  457000
• 后端

  Oinone环境保护（v5.2.3以上）

  概述 Oinone平台为合作伙伴提供了环境保护功能，以确保在一套环境可以在较为安全前提下修改配置文件，启动多个JVM等部署操作。 本章内容主要介绍与环境保护功能相关的启动参数。 名词解释 本地开发环境：开发人员在本地启动业务工程的环境 公共环境：包含设计器镜像和业务工程的环境 环境保护参数介绍 【注意】参数是加在程序实参 (Program arguments)上，通常可能错误的加在Active Profiles上了 -PenvProtected=${value} 是否启用环境保护，默认为true。 环境保护是通过与最近一次保存在数据库的base_platform_environment表中数据进行比对，并根据每个参数的配置特性进行判断，在启动时将有错误的内容打印在启动日志中，以便于开发者进行问题排查。 除此之外，环境保护功能还提供了一些生产配置的优化建议，开发者可以在启动时关注这些日志，从而对生产环境的配置进行调优。 -PsaveEnvironments=${value} 是否将此次启动的环境参数保存到数据库，默认为true。 在某些特殊情况下，为了避免公共环境中的保护参数发生不必要的变化，我们可以选择不保存此次启动时的配置参数到数据库中，这样就不会影响其他JVM启动时发生校验失败而无法启动的问题。 -PstrictProtected=${value} 是否使用严格校验模式，默认为false 通常我们建议在公共环境启用严格校验模式，这样可以最大程度的保护公共环境的元数据不受其他环境干扰。 PS：在启用严格校验模式时，需避免内外网使用不同连接地址的场景。如无法避免，则无法启用严格校验模式。 常见问题 需要迁移数据库，并更换了数据库连接地址该如何操作？ 将原有数据库迁移到新数据库。 修改配置文件中数据库的连接地址。 在启动脚本中增加-PenvProtected=false关闭环境保护。 启动JVM服务可以看到有错误的日志提示，但不会中断本次启动。 移除启动脚本中的-PenvProtected=false或将值改为true，下次启动时将继续进行环境保护检查。 可查看数据库中base_platform_environment表中对应数据库连接配置已发生修改，此时若其他JVM在启动前未正确修改，则无法启动。 本地开发时需要修改Redis连接地址到本地，但希望不影响公共环境的使用该如何操作？ PS：由于Redis中的元数据缓存是根据数据库差量进行同步的，此操作会导致公共环境在启动时无法正确刷新Redis中的元数据缓存，需要配合pamirs.distribution.session.allMetaRefresh参数进行操作。如无特殊必要，我们不建议使用该形式进行协同开发，多次修改配置会导致出错的概率增加。 本地环境首次启动时，除了修改Redis相关配置外，还需要配置pamirs.distribution.session.allMetaRefresh=true，将本地新连接的Redis进行初始化。 在本地启动时，增加-PenvProtected=false -PsaveEnvironments=false启动参数，以确保本地启动不会修改公共环境的配置，并且可以正常通过环境保护检测。 本地环境成功启动并正常开发功能后，需要发布到公共环境进行测试时，需要先修改公共环境中业务工程配置pamirs.distribution.session.allMetaRefresh=true后，再启动业务工程。 启动一次业务工程后，将配置还原为pamirs.distribution.session.allMetaRefresh=false。

  张博昊

  2024年10月21日

  2.5K000
• 低无一体

  自定义字段组件如何处理vue组件内的表单校验

  介绍 本示例以字符串字段为业务场景，将输入框用element-plus的组件实现了一遍，vue组件内在onMounted生命周期内将ElForm表单实例通过ts组件内提供到props的setFormInstance方法设置到了ts组件的属性formInstance上，这样就可以在ts组件校验方法validator()触发的时候直接调用表单组件实例formInstance的校验方法validate() 适用场景 当前字段存储了动态表单的配置json，vue组件内自行实现了一套表单渲染逻辑，需要在vue组件和ts组件内同时触发校验 参考文档 element-plus表单组件文档 如何编写自定义字段组件的校验逻辑 示例代码 ts组件 import { BaseFieldWidget, FormStringFieldSingleWidget, isValidatorSuccess, ModelFieldType, SPI, ValidatorInfo, ViewType, Widget } from '@kunlun/dependencies'; import { FormInstance } from 'element-plus'; import MyFormStringField from './MyFormStringField.vue'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String, widget: 'Input', model: 'resource.k2.Model0000000109', name: 'code', }) ) export class MyFormStringFieldWidget extends FormStringFieldSingleWidget { public initialize(props) { super.initialize(props); this.setComponent(MyFormStringField); return this; } /** * ElementPlus的表单vue组件实例 * @private */ private formInstance?: FormInstance; @Widget.Method() private setFormInstance(formInstance: FormInstance | undefined) { this.formInstance = formInstance; } /** * 字段校验方法 */ public async validator(): Promise<ValidatorInfo> { const validRes = await this.formInstance?.validate((valid, fields) => {}); console.log('validRes', validRes) if (!validRes) { return this.validatorError('校验失败'); } const res = await super.validator(); if (!isValidatorSuccess(res)) { return res; } if (this.value == null) { return this.validatorSuccess(); } return this.validateLength(this.value); } } vue组件 <template> <ElForm ref="formInstance" :model="model" :rules="rules"> <ElFormItem label="编码" prop="code"> <ElInput v-model="model.code" @input="onValueChange"></ElInput> </ElFormItem> </ElForm> </template> <script lang="ts"> import { defineComponent, reactive, ref, onMounted, watch } from 'vue'; import { ElForm, ElFormItem, ElInput, FormInstance } from 'element-plus'; export default defineComponent({ name: 'MyFormStringField', components: { ElForm, ElFormItem, ElInput }, props: ['value', 'setFormInstance', 'onChange'],…

  nation

  2024年9月6日

  2.5K000