Oinone社区 作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/backend/14878.html/attachment/2024091107313515
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
相关推荐
-
6.4 国际化之多语言
多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译 准备工作 pamirs-demo-boot的pom文件中引入pamirs-translate包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-translate</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块 pamirs: boot: modules: – translate 后端翻译（使用） 这里通过对菜单的翻译来带大家了解翻译模块 Step1 新增翻译记录 切换应用到translate模块，点击新增翻译。 选择新增翻译生效模块 选择翻译的模型为：菜单模型 源语言选择中文，目标选择English 添加翻译项目： 源术语为：商店 翻译值为：shop 状态为：激活 Step2 查看效果 应用切换到Demo模块，在右上角切换语言至英语 后端翻译（自定义模型的翻译） 在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。 Step1 为PetType模型的name字段增加翻译注解 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名" , translate = true) private String name; @Field(displayName = "宠物分类") private String kind; } Step2 重启应用查看效果 切换应用到translate模块，点击新增翻译 切换应用到Demo模块，切换中英文，查看效果 前端翻译 还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。 Step1 修改前端DoNothingActionWidget.ts import translateValueByKey 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\’oinone第一个自定义Action，啥也没干\’)||\’oinone第一个自定义Action，啥也没干\’); 前端更多翻译工具请见前端高级特性-框架之翻译工具 import { Action, ActionContextType, ActionWidget, executeConfirm, IClientAction, SPI, ViewType, Widget, translateValueByKey } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' })) export class DoNothingActionWidget extends ActionWidget { @Widget.Method() public async clickAction() { const confirmRs = executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干'); } } //定义动作元数据 Action.registerAction('*', { displayName: '啥也没干', name: 'demo.doNothing', id: 'demo.doNothing', contextType: ActionContextType.ContextFree, bindingType: [ViewType.Table] } as IClientAction); Step2 新增翻译记录 前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点： 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失 Step3 刷新远程资源生成前端语言文件 Step4 新增或修改.env 前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。 yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/ 租户/translate/模块/语言文件 前端会自动根据上下文组织 # 后端api配置 # API_BASE_URL=http://127.0.0.1:8090 # 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo Step5 重启前端应用看效果 对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果
-
如何自定义表格单元格样式
介绍 OinOne的表格是基于Vxe-Table实现的，我们将Vxe-table内置的关于单元格样式的方法、属性开放到了表格组件TableWidget上 Vxe-Table相关文档 vxe-table的单元格样式 vxe-table的单元格动态样式 单元格样式 行的样式、单元格样式，表头的样式、表尾的样式、全部都可以完全自定义，通过设置 cellClassName、headerCellClassName、rowClassName …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 单元格动态样式 行的动态样式、单元格动态样式，表头的动态样式、表尾的动态样式、可以通过设置 cellStyle、headerCellStyle、rowStyle …等参数 （注：当自定义样式之后可能会覆盖表格的样式，比如选中行..等，记得自行处理好相关样式） 示例代码 这里仅演示cellClassName和cellStyle，其他方法的出入参数请参考上面的Vxe-Table文档 import { BaseElementWidget, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(BaseElementWidget.Token({ viewType: ViewType.Table, widget: 'CustomStyleTableWidget', })) export class CustomStyleTableWidget extends TableWidget { @Widget.Method() protected cellClassName({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return `demo-cell-${column.field}`; } return ''; } @Widget.Method() protected cellStyle({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex }) { if (column.field === 'field00019') { return { backgroundColor: '#f60', color: '#ffffff' }; } return ''; } } 效果预览
-
oinone内置模块介绍
基础模块 base 基础模块，用于自动生成模块、模型、字段、动作、视图、布局等元数据，构建 gql 等框架基础能力 sequence 序列生成器，用于生成 id、编码等需要自动序列的场景，算法参考美团的 id 生成器，参考文档: Leaf：美团分布式 ID 生成服务开源 expression 表达式模块，用于设计器内各种查询条件、条件隐藏、条件必填、计算公式等选择表达式场景 translate 多语言模块，提供翻译多国语言的能力 timezone 时区 international 国际化，提供文字、货币、时区等国际化配置方案 sql_record sql 记录器，sql 变动记录，可用于自动同步变动数据到搜索引擎和工作流的数据变动 trigger 触发器，用于任务触发，数据触发 业务模块 common 业务公共模块，提供缓存、任务、数据解析、类加载、初始化等基础工具能力 user 用户模块，提供基础账号能力 business 合作伙伴模块，提供公司、组织架构、员工等能力 channel 传输增强模型，提供 es 搜索引擎增强能力 resource 资源模块，提供行政区划、货币、语言、样式主题、基础配置等能力 message 消息模块，提供站内信、邮件、手机短信等能力 apps 应用中心，支持查看、管理应用，特别是无代码创建模块/应用的能力 file 文件模块，提供文件的上传下载、excel 的导入导出等能力 auth 权限门口，提供角色、权限组、权限资源等实现的功能权限、数据权限能力 sys_setting 系统设置，提供企业标识（名称、浏览器图标、标题、备案号）设置等能力 my_center 个人中心，提供修改个人信息的能力 workflow 工作流模块，提供工作流运行时能力，如：审批、转发、加签 eip 集成平台，提供企业集成门户的相关功能，如请求外部接口使用的【集成接口】和对外开放被其他系统请求调用的【开放接口】功能。在请求外部接口时，还支持了多个接口调用（路由定义）、分页控制（paging）、增量控制（incremental）等功能。 workbench 工作台，提供工作流的各种首页 data_audit 数据审计，在业务应用中我们经常需要为一些核心数据的变更做审计追踪，记录字段的前后变化、操作 IP、操作人、操作地址等等。数据审计模块为此提供了支撑和统一管理。 设计器模块 designer_common 设计器公共模块 workflow_designer_base 流程设计器公用，流程设计器和集成设计器的数据流程功能公用 模型设计器 model_designer 模型设计器，提供无代码创建模型、字段、数据字典等能力 界面设计器 ui_designer 界面设计器，提供无代码创建页面、组件的能力 ui_designer_data_widget 界面设计器元数据，安装设计器产生的元数据用 ui_designer_biz_widget 界面设计器业务数据，安装设计器业务数据用 流程设计器 workflow_designer 流程设计器，提供设计流程的能力 集成设计器 eip_designer 集成设计器，提供无代码集成外部接口、开放内部接口、流程流程的能力 数据可视化 data_designer 数据可视化，提供图表、报表、数据大屏能力 datavi 数据可视化运行时模块 常用业务场景依赖介绍 如何添加数据可视化运行时依赖 如何添加工作流运行时依赖
