3.5.2.2 构建View的Template

相关推荐

• Oinone 7天入门到精通

  构件类

  1.构件类 1.1 延时 当下一个节点动作需要一段时间之后再发生时，可以使用延时节点。延时节点包含两种延时方式：1、延至指定日期，2、延时一段时间。 选择延至指定日期时，可以选择延至模型字段的时间或自定义时间，如果模型字段只包含日期则必填指定时辰。如果选择自定义则需要分别指定日期和时辰。 选择延时一段时间时，至少需要填“天、小时、分钟”中的一项。 1.2 条件分支 使不同条件的数据执行不同的分支流程。需要设置分支条件、添加满足条件的动作、也可以增删条件分支。 必须将分支条件填写完整流程才能正常进行。当只有两个分支时点击删除任一分支会删除整个条件分支。 1.3 审批分支 审批分支是一种特殊的条件分支。审批分支只能添加在审批节点下方。因为审批只存在通过和拒绝两种条件，所以无法添加其他条件，并且点击任意条件的叉都会删除整个条件分支。同时若审批节点被删除，审批分支也会同时删除。 1.4 子流程 一些高度重复的流程节点可以创建成子流程，在主流程中引用子流程，减少流程的重复配置。选择子流程时只能选择当前流程中有用到的模型下并且在启用状态的子流程，也可以在创建子流程节点处设置新增子流程。子流程的执行方式有两种：子流程可以和后续节点同时执行，也可以设置子流程执行完后再执行后续节点。 子流程与普通正常流程不同，不包含触发方式，普通流程流转到子流程节点即为子流程的触发条件，添加完节点动作之后发布即可。在不新增数据的情况下，子流程中只能使用该子流程对应模型的字段数据。

  史, 昂

  2024年5月23日

  1.9K000
• Oinone 7天入门到精通

  4.1.6 模型之元数据详解

  介绍Model相关元数据，以及对应代码注解方式。大家还是可以通读并练习每种不同的使用方式，这个是oinone的设计精华所在。当您不知道如何配置模型、字段、模型间的关系、以及枚举都可以到这里找到。 一、模型元数据 安装与更新 使用@Model.model来配置模型的不可变更编码。模型一旦安装，无法在对该模型编码值进行修改，之后的模型配置更新会依据该编码进行查找并更新；如果仍然修改该注解的配置值，则系统会将该模型识别为新模型，存储模型会创建新的数据库表，而原表将会rename为废弃表。 如果模型配置了@Base注解，表明在studio中该模型配置不可变更；如果字段配置了@Base注解，表明在studio中该字段配置不可变更。 注解配置 模型类必需使用@Model注解来标识当前类为模型类。 可以使用@Model.model、@Fun注解模型的模型编码（也表示命名空间），先取@Model.model注解值，若为空则取@Fun注解值，若皆为空则取全限定类名。 模型元信息 模型的priority，当展示模型定义列表时，使用priority配置来对模型进行排序。 模型的ordering，使用ordering属性来配置该模型的数据列表的默认排序。 模型元信息继承形式： 不继承（N） 同编码以子模型为准（C） 同编码以父模型为准（P） 父子需保持一致，子模型可缺省（P=C） 注意：模型上配置的索引和唯一索引不会继承，所以需要在子模型重新定义。数据表的表名、表备注和表编码最终以父模型配置为准；扩展继承父子模型字段编码一致时，数据表字段定义以父模型配置为准。 名称 描述 抽象继承 同表继承 代理继承 多表继承 基本信息 displayName 显示名称 N N N N summary 描述摘要 N N N N label 数据标题 N N N N check 模型校验方法 N N N N rule 模型校验表达式 N N N N 模型编码 model 模型编码 N N N N 高级特性 name 技术名称 N N N N table 逻辑数据表名 N P=C P=C N type 模型类型 N N N N chain 是否是链式模型 N N N N index 索引 N N N N unique 唯一索引 N N N N managed 需要数据管理器 N N N N priority 优先级，默认100 N N N N ordering 模型查询数据排序 N N N N relationship 是否是多对多关系模型 N N N N inherited 多重继承 N N N N unInheritedFields 不从父类继承的字段 N N N N unInheritedFunctions 不从父类继承的函数 N N N N 高级特性-数据源 dsKey 数据源 N P=C P=C N 高级特性-持久化 logicDelete 是否逻辑删除 P P P N logicDeleteColumn 逻辑删除字段 P P P N logicDeleteValue 逻辑删除状态值 P P P N logicNotDeleteValue 非逻辑删除状态值 P P P N underCamel 字段是否驼峰下划线映射 P P P N capitalMode 字段是否大小写映射…

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

  3.5.7.2 自定义母版

  母版是什么 在业务系统中，母版是一种全局通用的组件，用于包裹每个页面的元素。这个概念类似于 PPT 中的母版，它定义了页面的整体结构、样式和布局，使得系统具有一致的外观和风格。 特点： 全局通用：母版是全局性的，适用于系统中的每个页面，确保一致性的用户体验。 包裹元素：母版包裹每个页面的元素，定义了整体的结构和布局。 外观一致性：通过统一的母版设计，系统达到外观和风格的一致性。 与 PPT 母版的类比： 在母版的概念上，与 PPT 中的母版类似，都是用于定义整体结构和样式，确保每个页面都具有一致的外观。 默认母版范围: 图3-5-7-20 默认母版范围 作用场景 在系统中，我们提供了多个纬度的母版，包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度，以满足不同层次的定制需求。 母版纬度： 全局母版： 覆盖系统中所有页面，确保全局的一致性和统一的用户体验。 定义全局性的结构、样式和布局。 应用母版： 适用于特定应用或模块，定制化程度介于全局和页面之间。 允许在不同应用间实现一定的差异化。 页面母版： 面向具体页面，提供最大的定制化空间。 允许在不同页面中定义不同的结构和样式。 选择纬度： 业务场景决定：根据具体的业务场景和需求选择合适的母版纬度。 定制化需求：如果需要全局一致性，选择全局母版；如果在应用层面有特定需求，选择应用母版；如果需要最大的灵活性和定制化，选择页面母版。 参数说明： 在系统中，使用 registerMask 注册母版时，需要提供两个参数。第一个参数是母版的 XML，第二个参数用于控制母版的注册行为，包括 module、moduleName、model 和 actionName。 母版 XML（第一个参数）： 提供母版的 XML 描述，定义了母版的结构和样式。 控制参数（第二个参数）： module：指定模块的名称。 moduleName：指定模块的显示名称。 model：指定母版所属的模型。 actionName：指定母版的操作名称，可以是字符串或字符串数组。 全局母版 可以使用 registerMask 注册母版。当第二个参数为 {} 时，即代表注册全局母版。 示例工程目录 以下是需关注的工程目录示例，并确保导入导出依赖正确： 图3-5-7-21 全局纬度注册母版工程目录示例 示例代码 以下是一个示例代码： import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时，我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件，公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例 复制这段代码执行下registerGlobalMask()试试看吧 效果 右上角消息、语言切换、用户被移除。 图3-5-7-23 全局纬度注册母版效果示例 应用母版 在系统中，可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时，即注册了 resource（资源）应用的母版。 示例工程目录 以下是需关注的工程目录示例，更新导出./moduleMask： 图3-5-7-24 应用纬度注册母版工程目录示例 示例代码 以下是一个示例代码： /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  数据大屏

  1. 业务场景 数据大屏是利用相应的系统来分析数据，通过图形的形式为企业提供客观、直接的数据分析结果，让业务人员和企业决策者直观面对数据背后的信息，实时监测企业数据，给予更直观的决策场景体验，助力企业数字化运营升级。 2. 操作流程 1）进入数据可视化，进入数据大屏tab，维护分组信息； 2）在二级分组名称后点击“+”【添加数据大屏】，对数据大屏进行设计； 3）创建完成后可以【编辑】数据大屏； 4）数据大屏完善后，可以点击【发布】数据大屏，则数据大屏此时可以被显示器引用播放； 5）如果数据大屏有更新，则可以点击【更新发布】； 6）如果数据大屏数据不再可以公开使用，则需要通过【隐藏】功能将数据大屏的引用权限收起，但不影响已被使用的数据大屏； 7）隐藏后可以【取消隐藏】，数据大屏恢复隐藏前的状态和功能，可以被引用 。 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）只能编辑未发布或者已发布但没有被隐藏的数据大屏，且存在三种编辑情况 a. 第一种：点击数据大屏标题后的编辑图标，仅能编辑数据大屏标题； b. 第二种：点击数据大屏中的数据大屏标题、备注后的编辑图标，可以直接编辑数据大屏标题； c. 第三种：点击【编辑】按钮，进入数据大屏设计页面，带出已有的组件内容，编辑时的规则与创建时一致，编辑后可以点击保存进行更新，如果未保存直接返回，则编辑无效； 4）编辑后实时生效，数据大屏信息保持展示最新效果 3.6 删除数据大屏 1）操作流程：选择数据大屏-删除数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-删除数据大屏 3）未发布或者已发布但没有被隐藏的数据大屏，并且没被引用，才展示数据大屏菜单名称后的删除图标 4）删除后数据大屏消失 3.7 复制 1）操作流程：选择数据大屏-复制数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-复制数据大屏 3）点击【复制】按钮，复制成功，名称为copy of 原数据大屏标题，展示在原数据大屏分组的最后一个 3.8 发布 1）操作流程：选择数据大屏-发布数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-发布 3）选择单个未发布且没有被隐藏的数据大屏，点击【发布】按钮，数据大屏状态变为已发布，展示最近发布时间； 4）如果数据大屏发布后有更新内容，会展示的更新类型：更新数据大屏信息/更新数据大屏内容 3.9 查看最近一次发布的版本 1）操作流程：选择数据大屏-查看最近一次发布的版本 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3）当数据大屏发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版本 3.10 更新发布 1）操作流程：选择数据大屏-更新发布数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更新发布数据大屏 3）选择单个已发布且没有被隐藏的数据大屏，并且该数据大屏在上次发布后有所更新，可以点击【更新发布】按钮，将最新的数据大屏内容发布至业务系统，业务系统引用的数据大屏为最新内容； 4）如果更新了内容，但未点击更新发布，则展示的仍是上次发布的数据大屏 3.11 隐藏 1）操作流程：选择数据大屏-隐藏数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-隐藏数据大屏 3）数据大屏默认不隐藏，点击数据大屏左侧的是否隐藏可以切换 a. 未发布的数据大屏，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的数据大屏，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； 4）隐藏后的数据大屏不可以被用于展示在其他大屏上，但不影响已经被引用的数据 3.12 取消隐藏 1）操作流程：选择数据大屏-取消隐藏数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-取消隐藏数据大屏 3）隐藏后的数据大屏可以取消隐藏，切换是否隐藏=否，取消隐藏后，数据大屏恢复隐藏前的状态和功能，可以被引用 3.13 查看引用 1）流程：选择图表-查看被哪些报表/数据大屏/页面引用 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-查看引用 3）选择具体的数据大屏，查看当前数据大屏被引用的所有信息 3.14 不允许别人编辑 1）流程：选择数据大屏-不允许别人编辑 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人编辑 3）选择自己创建的数据大屏，对数据大屏是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑数据大屏 3.15 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-更多-不允许别人引用 3）选择自己创建的数据大屏，对数据大屏是否允许他人引用进行设置；如果设置为不允许，则其他人无法选择到 3.16 导出图片 1）操作流程：选择数据大屏-导出图片 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-导出图片 3）选择数据大屏后，点击【导出图片】按钮可以将当前数据大屏导出为图片 3.17 导出EXCEL 1）操作流程：选择数据大屏-导出EXCEL 2）操作路径：数据可视化-数据大屏-二级分组-数据大屏-数据大屏导出EXCEL 3）选择数据大屏后，点击【导出EXCEL】按钮可以将当前数据大屏包含的图表导出为EXCEL 4. 数据大屏设计页面 4.1 缩放自适应 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）进入页面后，默认按照当前屏幕展示最适合的数据大屏尺寸，可以通过+、-进行自定义缩放，每次缩放10% 4.2 全屏 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）进入页面后，设置完成，可以【全屏】查看效果，按esc退出全屏 4.3 保存 1) 流程：创建数据大屏-进入数据大屏设计页面 2) 操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3) 进入页面后，设置完成后进行保存，数据大屏保持最新内容 4.4 添加、编辑、删除组件 1）流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）可以添加图表、文本、通用标题、倒计时、时间器、图片、轮播图、视频、边框等组件；图表组件中，一个图表只能添加一次，其他组件不限制数量； 4）所有组件添加后均可进行设置样式，有编辑权限的图表组件可以通过【编辑】图标直接进入图表设计页面； 5）添加后均可删除，删除后组件不再展示在数据大屏画布中，可以重新添加 4.5 数据大屏设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）设置数据大屏时可以设置屏幕的宽高、背景颜色、背景图片、主题 a. 宽高：根据数据大屏需要投放的屏幕大小进行设置； b. 背景颜色：当数据大屏无图片背景时可以调整背景颜色； c. 背景图片：支持为数据大屏上传一张图片作为背景； d. 主题模版：可任选其一，需要先选定模版后再进行设计，不然设计完后再修改模版，会清空已选组件。 4.6 图表组件设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）拖入图表组件，可与边框合为一体，可以设置图表的显示内容、边框信息、动画效果、刷新频率 a. 图表显示内容：展示标题、副标题、描述、标签、图例，一屏展示条数，原图表有的内容在设置展示后展示在数据大屏，原图表没有的内容设置展示后不生效； b. 边框信息：包括边框样式、背景颜色、边框线条颜色、展示边框标题、边框标题内容、边框标题颜色、边框标题字体大小； c. 动画效果：可以设置自动轮播，为是时可以设置结束后停顿时长、速度、切换形式； d. 刷新频率：设置图表获取数据的频率，自动刷新、刷新频率。 4.7 文本组件设置 1）操作流程：创建数据大屏-进入数据大屏设计页面 2）操作路径：数据可视化-数据大屏-创建/编辑-设计页面 3）拖入文本组件后，可以输入多行文本，可以设置内容、对齐方式、字体大小、字体加粗、字体颜色、背景颜色、边框样式、文字滚动、结束后停顿、速度 4）当文字滚动开启时，文字会按照一行展示，通过设置结束后停顿和速度来控制文字滚动的效果 4.8 通用标题组件设置…

  史, 昂

  2024年6月20日

  1.5K000
• Oinone 7天入门到精通

  3.5.7.6 自定义字段

  字段是什么 字段的基本概念 定义：字段通常指的是数据的一个单独项，它可以是一个文本框、下拉菜单、复选框等，用于在用户界面上收集或展示数据。 用途：在表单中，字段用于收集用户输入；在表格或列表中，字段用于显示数据。 类型：字段可以有不同的类型，如文本、数字、日期等，这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中，字段的设计和实现遵循以下原则： 后端模型驱动：前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示，以及如何展示。 减少前后端联调：由于字段的定义和行为是由后端控制的，前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段，而后端则负责数据的逻辑和结构。 灵活性与规范性：虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则，以保持前后端的一致性和减少沟通成本，但它也为高度定制化的前端页面提供了灵活性。 元数据使用：Oinone可能还使用元数据来进一步定义字段的行为，例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时，理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率，而且有助于确保数据的一致性和应用程序的可维护性。同时，对于那些需要特定定制或特殊处理的场景，开发团队能够灵活地适应这些需求，在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中，字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点： 业务组件的核心： Oinone集成了AntdDesignVue的全部UI组件，将它们转化为业务组件。这些业务组件以字段的形式存在，使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面，大大减少了开发工作量。 无代码开发支持： 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面，而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程，提升了开发效率。 个性化定制： 虽然标准的UI组件可以满足大部分需求，但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中，开发者可以根据具体业务需求和公司的UI指南，定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合： Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时，也能保持使用无代码工具的便利性，实现更灵活、更高效的前端开发。 适应多维度业务需求： 由于字段在Oinone中的灵活性和可定制性，它们能够适应多维度的业务需求，无论是从UI设计、用户体验还是业务逻辑的角度，字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./field： 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件： 使用Vue框架创建一个新的组件（例如 CustomStringFieldVue），并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义： 导入必要的模块，如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释： viewType: 指定视图类型，如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型，例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例

  史, 昂

  2024年5月23日

  2.2K000