Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9332.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
相关推荐
-
报表发布主流程
1. 主业务流程图 2. 主业务流程操作图解 创建图表—创建报表/数据大屏—发布图表/报表—前端业务系统可引用 2.1 创建图表分组 1）操作流程：创建图表分组 2）操作路径：数据可视化-图表-创建图表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建图表 2.2 创建图表 1）操作流程：选择图表二级分组-创建图表 2）操作路径：数据可视化-图表-二级分组-创建图表 3）鼠标移动至需要创建图表的二级分组上，出现「+」，点击图标后弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进图表设计页面（详见图表-图表设计页面），设计完成后点击保存，图表创建成功 2.3 创建报表分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.4 创建数据大屏分组 1）操作流程：创建报表分组 2）操作路径：数据可视化-报表-创建报表分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 2.5 创建报表 1）操作流程：选择报表二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 2.6 为报表选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-图表-二级分组-报表-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a需要选择图表的一级分组后才能选择图表； b可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 2.7 创建数据大屏 1）操作流程：选择数据大屏二级分组-创建数据大屏 2）操作路径：数据可视化-数据大屏-二级分组-创建 3）鼠标移动至需要创建数据大屏的二级分组上，出现「+」，点击图标后进入数据大屏设计页面； a. 选择图表组件组合成数据大屏，还有其他诸如时间、图片等组件可供选择； b. 数据大屏标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）选择完成后可以保存，则创建数据大屏成功 2.8 发布图表/报表/数据大屏 1）操作流程：选择图表/报表-发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-发布 3）选择单个未发布且没有被隐藏的图表/报表/数据大屏，点击【发布】按钮，图表/报表发布后可以被前端引用，数据大屏可被屏幕演示，图表/报表/数据大屏状态变为已发布，展示最近发布时间； a. 如果图表发布后有更新内容，会展示的更新类型：更新图表信息/更新图表内容； b. 如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表； c. 如果数据大屏发布后有更新内容，会展示的更新类型：更新数据大屏信息/更新数据大屏内容； 4）发布后可以修改 2.9更新发布图表/报表/数据大屏 1）操作流程：选择图表/报表-更新发布图表/报表 2）操作路径：数据可视化-图表/报表/数据大屏-二级分组-图表名称/报表名称/数据大屏名称-更新发布图表/报表/数据大屏 3）选择单个已发布且没有被隐藏的图表/报表/数据大屏，并且该图表/报表/数据大屏在上次发布后有所更新，可以点击【更新发布】按钮，将最新的图表/报表内容发布至业务系统，业务系统引用的图表/报表为最新内容，屏幕展示的数据大屏是最新的大屏内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的图表/报表仍为最近发布的内容，屏幕展示的数据大屏仍是最近发布的内容
-
3.5.2.1 整体介绍
虽然我们有小眼睛可以让用户自定义展示字段和排序喜好，以及通过权限控制行、列展示，但在我们日常业务开发中还是会对页面进行调整，以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑，再带小伙伴一起完成自定义view的Template和Layout，以及整个母版的Template和Layout 页面的构成讲解 页面交互拓扑图 页面交互拓扑图 图3-5-2-1 页面交互拓扑图 注：页面逻辑交互拓扑图说明 模块作为主切换入口 模块决定菜单列表 菜单切换触发点击action 前端根据Mask、View进行渲染， a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版 bMask和View都是有layout定义和template定义合并而成，系统会提供默认母版，以及为每种视图提供默认layout c. layout与template通过插槽进行匹配 Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等 Aciton路由可以指定Mask、视图组件的layout、template a. 当layout没有指定的时候则用系统默认的 b. 当template没有指定的时候，且视图组件相同类型有多条记录时，根据优先级选取 Mask和视图组件的layout优先级（视图组件>视图动作 > 应用 > 全局） 默认母版以及各类视图组件 母版布局 默认母版基础布局base-layout <mask layout="default"> <header slot="header"/> <container slot="main" name="main"> <sidebar slot="sidebar"/> <container slot="content"/> </container> <footer slot="footer"/> </mask> 图3-5-2-2 默认母版基础布局base-layout 母版template <mask layout="default"> <mask name="defaultMask"> <template slot="header"> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </template> <template slot="sidebar"> <element widget="navMenu"/> </template> <template slot="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </template> </mask> 图3-5-2-3 母版template 注： 上例中因为名称为main的插槽不需要设置更多的属性，所以在template中缺省了main插槽的template标签。 最终可执行视图 <mask name="defaultMask"> <header> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </header> <container name="main"> <sidebar name="sidebar"> <element widget="navMenu"/> </sidebar> <container name="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </container> </container> <footer/> </mask> 图3-5-2-4 最终可执行视图 表格视图布局 默认表格视图基础布局base-layout <view type="table"> <view type="search"> <element widget="search" slot="search"> <xslot name="fields" slotSupport="field" /> </element> </view> <pack widget="fieldset"> <element widget="actionBar" slot="actions" slotSupport="action" /> <element widget="table" slot="table"> <xslot name="fields" slotSupport="field" /> <element widget="actionsColumn" slot="actionsColumn"> <xslot name="rowActions" slotSupport="action" /> </element> </element> </pack> </view> 图3-5-2-5 默认表格视图基础布局base-layout 注：table标签的子标签为column组件，如果field填充到元数据插槽fields没有column组件将自动包裹column组件。 表格视图template <view type="table" model="xxx" name="tableViewExample">…
-
4.1.13 Action之校验
在3.5.3【Action的类型】一文中有涉及到“ServerAction之校验”部分，本文介绍一个特殊的写法，当内置函数和表达式不够用的时候，怎么扩展。还是拿PetShopProxyAction举例，修改如下： package pro.shushi.pamirs.demo.core.action; ……引依赖类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { ……其他代码 // @Validation(ruleWithTips = { // @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), // @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长，不能超过128位"), // }) @Validation(check = "checkName") @Action(displayName = "启用") @Action.Advanced(rule="activeRecord.code !== undefined && !IS_BLANK(activeRecord.code)") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function public Boolean checkName(PetShopProxy data) { String field = "name"; String name = data.getShopName(); boolean success = true; if (StringUtils.isBlank(name)) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称为必填项")); success = false; } if (name.length() > 128) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称过长，不能超过128位")); success = false; } return success; } ……其他代码 } 图4-1-13-1 PetShopProxyAction扩展配置 注： check属性指定了校验函数名称，命名空间必须与服务器动作一致。 校验函数的入参必须与服务器动作一致 使用PamirsSession#getMessageHub方法可通知前端错误的属性及需要展示的提示信息，允许多个。
-
4.1.17 框架之网关协议-GraphQL协议
GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。 一个 GraphQL 服务是通过定义类型和类型上的字段来创建的，然后给每个类型上的每个字段提供解析函数。例如，一个 GraphQL 服务告诉我们当前登录用户是 me，这个用户的名称可能像这样： type Query { me: User } type User { id: ID name: String } 图4-1-17-1 GraphQL定义类型和字段示意 一并的还有每个类型上字段的解析函数： function Query_me(request) { return request.auth.user; } function User_name(user) { return user.getName(); } 图4-1-17-2 每个类型上字段的解析函数示意 一旦一个 GraphQL 服务运行起来（通常在 web 服务的一个 URL 上），它就能接收 GraphQL 查询，并验证和执行。接收到的查询首先会被检查确保它只引用了已定义的类型和字段，然后运行指定的解析函数来生成结果。 例如这个查询： { me { name } } 图4-1-17-3 GraphQL查询请求示意 会产生这样的JSON结果： { "me": { "name": "Luke Skywalker" } } 图4-1-17-4 GraphQL查询结果示意 了解更多 https://graphql.cn/learn/
-
3.5.2.2 构建View的Template
我们在很多时候需要自定义模型的管理页面，而不是直接使用默认页面，比如字段的展示与隐藏，Action是否在这个页面上出现，搜索条件自定义等等，那么本章节带您一起学习如何自定义View的Template。 自定义View的Template 在使用默认layout的情况下，我们来做几个自定义视图Template,并把文件放到指定目录下。 图3-5-2-14 自定义View的Template 第一个Tabel Step1 自定义PetTalent的列表 我们先通过数据库查看默认页面定义，找到base_view表，过滤条件设置为model =\’demo.PetTalent\’，我们就看到该模型下对应的所有view，这些是系统根据该模型的ViewAction对应生成的默认视图，找到类型为【表格（type = TABLE）】的记录，查看template字段。 图3-5-2-15 base_view表查看template字段 <view name="tableView" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id"/> <field data="writeUid" label="更新人id"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-16 base_view表查看template字段 对比view的template定义与页面差异，从页面上看跟view的定义少了，创建人id和更新人id。因为这两个字段元数据定义里invisible属性。 a. 当XML里面没有配置，则用元数据覆盖了。 b. 当XML里面配置了，则不会用元数据覆盖了。 在下一步中我们只要view的DSL中给这两个字段加上invisible="false"就可以展示出来了 图3-5-2-17 查看列表展示 图3-5-2-18 invisible属性 新建pet_talent_table.xml文件放到对应的pamirs/views/demo_core/template目录下，内容如下 a. 对比默认视图，在自定义视图时需要额外增加属性model="demo.PetTalent" b. name设置为"tableView"，系统重启后会替换掉base_view表中model为"demo.PetTalent"，name为"tableView"，type为"TABLE"的数据记录。 ⅰ. name不同的但type相同，且viewAction没有指定时，根据优先级priority进行选择。小伙伴可以尝试修改name="tableView1"，并设置priority为1，默认生成的优先级为10，越小越优先。 ccreateUid和writeUid字段，增加invisible="false"的属性定义 <view name="tableView" model="demo.PetTalent" cols="1" type="TABLE" enableSequence="false"> <template slot="actions" autoFill="true"/> <template slot="rowActions" autoFill="true"/> <template slot="fields"> <field invisible="true" data="id" label="ID" readonly="true"/> <field data="name" label="达人"/> <field data="dataStatus" label="数据状态"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间" readonly="true"/> <field data="writeDate" label="更新时间" readonly="true"/> <field data="createUid" label="创建人id" invisible="false"/> <field data="writeUid" label="更新人id" invisible="false"/> </template> <template slot="search" autoFill="true" cols="4"/> </view> 图3-5-2-19 增加invisible=”false”的属性定义 Step2 重启应用看效果 图3-5-2-20 示例效果 第一个Form Step1 自定义PetTalent的编辑页…