Oinone在技术方面通过整合互联网架构和低代码技术，实现了三个独特的关键创新点（如图2-5所示）：
独立模块化的个性化定制：每个需求都可以被视为一个独立的模块，从而实现个性化定制，提高软件生产效率。此外，这些独立模块也不会影响产品的迭代和升级，为客户带来无忧的体验。
灵活的部署方式：单体部署和分布式部署的灵活切换，为企业业务的发展提供了便利，同时适用于不同规模的公司，有助于有效地节约企业成本，提升创新效率，并让互联网技术更加亲民。
低代码和无代码的结合：低无一体为不同的IT组织和业务用户提供了有效的协同工作方式，能够快速部署安全、可扩展的应用程序和解决方案，帮助企业/组织更好地管理业务流程并不断优化。
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9219.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
介绍Module相关元数据，以及对应代码注解方式。大家还是可以通读下，以备不时之需 如您还不了解Module的定义，可以先看下2.3【oinone独特之源，元数据与设计原则】一文对Module的描述，本节主要带大家了解Module元数据构成，能让小伙伴非常清楚oinone从哪些维度来描述Module， 一、元数据说明 ModuleDefinition 元素数据构成 含义 对应注解 备注 displayName 显示名称 @Module( displayName=””, name=””, version=””, category=””, summary=””, dependencies={“”,””}, exclusions={“”,””}, priority=1L ) name 技术名称 latestVersion 安装版本 category 分类编码 summary 描述摘要 moduleDependencies 依赖模块编码列表 moduleExclusions 互斥模块编码列表 priority 排序 module 模块编码 @Module.module(“”) dsKey 逻辑数据源名 @Module.Ds(“”) excludeHooks 排除拦截器列表 @Module.Hook(excludes={“”,””}) website 站点 @Module.Advanced( website=”http://www.oinone.top”, author=”oinone”, description=”oinone”, application=false, demo=false, web=false, toBuy=false, selfBuilt=true, license=SoftwareLicenseEnum.PEEL1, maintainer=”oinone”, contributors=”oinone”, url=”http://git.com” ) author module的作者 description 描述 application 是否应用 demo 是否演示应用 web 是否web应用 toBuy 是否需要跳转到website去购买 selfBuilt 自建应用 license 许可证 默认PEEL1 可选范围： GPL2 GPL2ORLATER GPL3 GPL3ORLATER AGPL3 LGPL3 ORTHEROSI PEEL1 PPL1 ORTHERPROPRIETARY maintainer 维护者 contributors 贡献者列表 url 代码库的地址 boot 是否自动安装的引导启动项 @Boot 加上该注解代表： 启动时会自动安装，不管yml文件的modules是否配置 moduleClazz 模块定义所在类 只有用代码编写的模块才有 packagePrefix 包路径，用于扫描该模块下的其他元数据 dependentPackagePrefix 依赖模块列对应的扫描路径 state 状态 系统自动计算，无需配置 metaSource 元数据来源 publishCount 发布总次数 platformVersion 最新平台版本 本地与中心平台的版本对应。做远程更新时会用到 publishedVersion 最新发布版本 表4-1-4-1 ModuleDefinition UeModule 是对ModuleDefinition的继承，并扩展了跟前端交互相关的元数据 元素数据构成 含义 对应注解 备注 homePage Model 跳转模型编码 @UxHomepage(@UxRoute() 对应一个ViewAction，如果UxRoute只配置了模型，则默认到该模型的列表页 homePage Name 视图动作或者链接动作名称 logo 图标 @UxAppLogo(logo=””) 表4-1-4-2 UeModule 二、元数据，代码注解方式 Module Module ├── displayName 显示名称 ├── name 技术名称 ├── version 安装版本 ├── category 分类编码 ├── summary 描述摘要 ├── dependencies 依赖模块编码列表 ├── exclusions 互斥模块编码列表 ├── priority 排序 ├── module 模块编码 │ └── value ├── Ds 逻辑数据源名 │ └── value ├── Hook 排除拦截器列表…
界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！
1. 什么是数据字典 数据字典是一些固定字典项的集合，可作为多选或单选的选项，例如人员性别、员工属相、杭州市下属的行政区等都是数据字典。 选择一个应用/模块下的一个小模块，可以查看其中包含的自定义字典（自建的数据字典）和系统字典。可以通过导入或添加创建自定义字典。 2. 数据字典基本操作 删除：系统字典不支持删除，无法批量删除自定义数据字典，若数据字典已经被字段、页面等引用时，也无法删除这个数据字典。 隐藏/可见：自定义字典、系统字典都可以操作隐藏和可见，隐藏和可见不影响数据字典在字段、页面等处的使用。 查看引用关系：点击查看引用关系，展开弹窗，展示该数据字典和字段、视图的引用关系。 修改：若数据字典已经被引用，无法删除其中的字典项。若无引用关系则可以任意修改。 3. 数据字典导入 点击“导入数据字典”按钮，弹出窗口，可根据图中引导进行数据字典的导入。 在经典模式下，导入数据字典会新建数据字典。 在专家模式下，数据字典导入的模板中包含字段“字典编码”，若导入的字典编码不存在则会新建数据字典，若导入的字典编码已存在则会修改字典编码的设置，新建和修改的动作会校验是否符合规范。 4. 数据字典创建 4.1 专家模式（低代码模式） 字典项类型有“二进制、文本、整数”三种可选，选择二进制时，字典项值需要选择存储在数据库二进制中的第几位。系统根据字典项值去查找字典项名称，因此字典项值不可重复。 数据字典的api名称、代码名称、描述可不填，部分系统会赋默认值。 字典项中字典项名称和字典项值必填，api名称和字典项描述不填系统会赋默认值。 4.2 经典模式（无代码模式） 经典模式下只需要填写字典名称，添加字典项即可。系统会自动将字典项类型设置为“二进制”，并将字典项按照创建的先后顺序设置字典项值的位数。字典项类型、字典项值释义可参照专家模式的解释。
一、MessageHub 请求出现异常时，提供”点对点“的通讯能力 二、何时使用 错误提示是用户体验中特别重要的组成部分，大部分的错误体现在整页级别，字段级别，按钮级别。友好的错误提示应该是怎么样的呢？我们假设他是这样的 与用户操作精密契合 当字段输入异常时，错误展示在错误框底部 按钮触发服务时异常，错误展示在按钮底部 区分不同的类型 错误 成功 警告 提示 调试 简洁易懂的错误信息 在oinone平台中，我们怎么做到友好的错误提示呢？接下来介绍我们的MessageHub，它为自定义错误提示提供无限的可能。 三、如何使用 订阅 import { useMessageHub, ILevel } from "@kunlun/dependencies" const messageHub = useMessageHub('当前视图的唯一标识'); /* 订阅错误信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }) /* 订阅成功信息 */ messageHub.subscribe((errorResult) => { console.log(errorResult) }, ILevel.SUCCESS) 图4-2-2-1 订阅的示例代码 销毁 /** * 在适当的时机销毁它 * 如果页面逻辑运行时都不需要销毁，在页面destroyed是一定要销毁，重要！！！ */ messageHub.unsubscribe() 图4-2-2-2 销毁的示例代码 四、实战 让我们把3.5.7.5【自定义视图-表单】一文中的自定义表单进行改造，加入我们的messageHub，模拟在表单提交时，后端报错信息在字段下方给予提示。 Step1 （后端）重写PetType的创建函数 重写PetType的创建函数，在创建逻辑中通过MessageHub返回错误信息，返回错误信息的同时要设置paths信息方便前端处理 @Action.Advanced(name = FunctionConstants.create, managed = true) @Action(displayName = "确定", summary = "创建", bindingType = ViewTypeEnum.FORM) @Function(name = FunctionConstants.create) @Function.fun(FunctionConstants.create) public PetType create(PetType data){ List<Object> paths = new ArrayList<>(); paths.add("demo.PetType"); paths.add("kind"); PamirsSession.getMessageHub().msg(new Message().msg("kind error").setPath(paths).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); List<Object> paths2 = new ArrayList<>(); paths2.add("demo.PetType"); paths2.add("name"); PamirsSession.getMessageHub().msg(new Message().msg("name error").setPath(paths2).setLevel(InformationLevelEnum.ERROR).setErrorType(ErrorTypeEnum.BIZ_ERROR)); // data.create(); return data; } 图4-2-2-3 （后端）重写PetType的创建函数 Step 2 修改PetForm.vue <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item label="品种种类" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template>- <script lang="ts"> import { defineComponent, reactive…
1. 业务场景 报表不局限于表格的样式，还能以各式各样的图表形式展现各项汇总数据 这有利于管理者更为直观地了解公司的经营情况，便于后续进行分析，提高对公司的管理水平。 2. 操作流程 1）进入数据可视化，进入报表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加报表】，对报表进行编辑设计； 3）创建完成后可以【编辑】报表标题、备注； 4）需要通过【选择图表、创建图表】完善报表内容； 5）完善后可以点击【发布】报表，则报表此时可以被引用； 6）如果报表有更新，则可以点击【更新发布】，使业务系统引用对报表变为最新的报表信息； 7）如果报表数据不再可以公开使用，则需要通过【隐藏】功能将报表的引用权限收起，此时数据大屏、前端业务系统均不可再引用该报表，但不影响已被引用的报表； 8）隐藏后可以【取消隐藏】，报表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-报表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-报表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-报表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无报表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只要分组下没有报表的分组才能直接删除成功 3.4 创建报表 1）操作流程：选择二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a. 报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 3.5 删除报表 1）操作流程：选择报表-删除报表 2）操作路径：数据可视化-报表-二级分组-报表名称-删除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，才展示报表菜单名称后的删除图标 4）删除报表后报表消失 3.6 选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-报表-二级分组-报表名称-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a. 需要选择图表的一级分组后才能选择图表； b. 可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 3.7 创建图表 1）操作流程：选择报表-创建图表 2）操作路径：数据可视化-报表-二级分组-创建图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【创建图表】，弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面，创建图表保存后返回，返回到当前报表页面，新创建的图表展示在报表的第一个位置 3.8 拖拽图表 1）操作流程：选择报表-拖拽图表 2) 操作路径：数据可视化-报表-二级分组-报表名称-拖拽图表 3）所有的报表均可拖拽图表，拖拽时需要选择图表，可以上下左右等比拖动，图表的内容也会根据拖动的比例进行缩放，展示全部的被遮挡图表内容 4）拖拽后实时生效，报表信息保持展示最新效果 3.9 移除图表 1）操作流程：选择报表-移除图表 2）操作路径：数据可视化-报表-二级分组-报表名称-移除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，此时可以针对不需要的图表进行移除 4）选择移除后不展示在报表中，不影响原图表 5）报表移除图表后实时更新，更新发布后，前端可以展示最新的报表信息，如果未发布，则仅数据大屏可展示最新的报表信息，前端仍为最近发布的报表 3.10 设置报表筛选项 1）操作流程：选择报表-设置报表筛选项 2）操作路径：数据可视化-报表-二级分组-报表名称-更多-报表筛选项-添加 3）添加时选择筛选项字段的类型，关联每个图表对应的字段，一个图表只能关联一个 4）关联后可以按关联字段查询图表数据 3.11 发布 1）操作流程：选择报表-发布报表 2）操作路径：数据可视化-图表-二级分组-报表-发布 3）选择单个未发布且没有被隐藏的报表，点击【发布】按钮，报表发布后可以被前端引用，报表状态变为已发布，展示最近发布时间； 4）如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表 3.12 查看最近一次发布的版本 1）操作流程：选择报表-查看最近一次发布的版本 2）操作路径：数据可视化-报表-二级分组-报表名称-查看最近一次发布的版本 3）当报表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版 3.13 更新发布 1）操作流程：选择报表-更新发布报表 2）操作路径：数据可视化-报表-二级分组-报表名称-更新发布报表 3）选择单个已发布且没有被隐藏的报表，并且该报表在上次发布后有所更新，可以点击【更新发布】按钮，将最新的报表内容发布至业务系统，业务系统引用的报表为最新内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的报表仍为最近发布的报表 3.14 隐藏 1）操作流程：选择报表-隐藏报表 2）操作路径：数据可视化-报表-二级分组-报表名称-隐藏报表 3）报表默认不隐藏，可以切换是否隐藏=是 a. 未发布的报表，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的图表，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； c. 隐藏后的报表不可以被引用，但不影响已经被引用的数据 3.15 取消隐藏 1) 操作流程：选择报表-取消隐藏报表 2) 操作路径：数据可视化-报表-二级分组-报表名称-取消隐藏报表 3) 隐藏后的报表可以取消隐藏，切换是否隐藏=否，取消隐藏后，报表恢复隐藏前的状态和功能，可以被引用 3.16 查看引用 1）流程：选择报表-查看被哪些页面引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-查看引用 3）选择具体的报表，查看当前报表被引用的所有信息 3.17 不允许别人编辑 1）流程：选择报表-不允许别人编辑 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人编辑 3）选择自己创建的报表，对报表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑报表 3.18 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人引用 3）选择自己创建的报表，对报表是否允许他人引用进行设置；如果设置为不允许，则其他人无法引用到该报表 3.19 导出图片 1) 操作流程：选择报表-导出图片 2) 操作路径：数据可视化-报表-二级分组-报表名称-导出图片 3) 选择报表后，点击【导出图片】按钮可以将当前报表导出为图片 3.20 导出EXCEL 1）操作流程：选择报表-导出EXCEL 2）操作路径：数据可视化-报表-二级分组-报表名称-报表导出EXCEL 3）选择报表后，点击【导出EXCEL】按钮可以将当前报表导出为EXCEL
