一二三应用开发平台应用开发示例(5)——列表视图、树视图、树表视图、树参照视图配置

server/2024/10/18 14:15:29/

列表视图

接下来进入列表视图配置,创建的操作方式跟前面相同,如下图所示:
image.png

保存后回到列表,点击行记录的配置按钮,进入如下配置页面
image.png
可以看到该配置界面相比新增、修改、查看那三个视图要复杂得多,配置项也多一些。
实际对应着就是一个实体的包含查询功能的典型列表页面。

配置按钮

最左侧是配置页面级的功能按钮,如刷新、新增、删除(批量)……。
最右侧是配置行记录的功能按钮,如修改、删除(单条)……。
平台为了提升开发效率,除了支持常规的添加按钮并设置属性外,还将常用功能按钮做了预置,可以一键勾选与添加。
image.png

点击某个按钮,如删除,可以打开设置页面,如下图所示:
image.png
编码:按钮的唯一性标识,也对应着点击按钮触发的方法名。
**内容:**可以直接写js方法体,该属性非必须。平台通过vue的mixin功能将常用的方法实现了。只有自定义方法,或想覆盖mixin默认实现的情况下才需要填充内容。
图标:如设置了,则会生成带图标的按钮。仅限于页面按钮,行数据按钮平台默认不显示图标。
是否需要确认:若是,则需要进一步输入确认信息,代码生成时会调用confirm对话框。
是否控制权限:如否,该按钮对所有人可见;若是,则进一步设置权限编码。平台会在前端页面该按钮的生成逻辑中自动附加权限编码,并通过平台的权限控制机制来控制该按钮是否可见。
是否更多:主要是考虑某些实体的功能项比较多,从而对应的按钮比较多,一行放不下或者影响美观和直观性,为了节省行按钮占用空间,一些冷僻不常用功能,统一放到一个“更多”的下拉菜单中。

补充说明一点,这部分预置按钮可以通过实体配置模块下的视图按钮模板来调整和新增。
image.png

配置查询条件

查询条件的配置操作方式与前面为新增视图添加属性的操作方式是相同的,拖动属性列表中的属性至查询条件区域即可,平台会从实体模型属性拷贝数据类型、控件类型等到视图属性。
平台同样提供了批量添加和清空列表的功能。
可根据需要调整,如隐藏作为隐含查询条件,控制只读限定查询范围,设置默认值自动填充等。
image.png
对于文本类属性,可选择匹配规则,如相等、模糊匹配、以开始和以结尾……。
对于数据字典类的属性,若为下拉列表,平台会自动附加允许多选控制,并清空默认值。
对于日期类、数值类的属性,查询单个值没有业务意义,例如合同金额等于100万,而是需要进行范围查询。
查询区域会自动生成起止范围选择,使用时可灵活选择小于100万,或大于500万,还可以组合控制在200万与300万之间。

配置查询结果

image.png
其中的大部分属性也是从实体模型同步过来的,只有少量属性需要按需配置。
**名称:**对应着表格的列名,可根据实际情况调整。
**编码:**对应着属性名,不能随意修改。对于数据字典,平台会自动按约定取字典编码+Name的属性,即转化后的显示名称,该属性是在controller中将entity转化成vo环节处理的。同理,对于外部关联实体,如用户的组织机构属性,也是同样的处理,不过转换后显示文本是实体的主属性。
**宽度:**即表格的列宽,按需设置。列数较少的时候,可以不设置,el-table会平均分配各列,设置了反而会出现表格占不满页面影响美观的问题。列数多的时候如不设置,基于平均分配原则,每列显示很窄,挤在一块同样影响美观,这时候建议人工调整,会出现水平滚动条。
是否支持排序:若选是,则开启后端远程排序。这地方需要注意的是,对于数据字典和外部关联实体,平台自动视为不允许后端远程排序。主要原因在于这部分属性排序业务意义不大,次要原因在于属性名做了前面所说的附加Name处理,传到后端后,后端会因为找不到字段而报错,这地方可以考虑在后面再优化,使其也支持排序。
格式化方法:用于格式化输出的,目前实现了日期的两个,格式化输出到秒的yyyy-MM-dd HH:mm:ss和到天的yyyy-MM-dd,直接下拉选择。后续可以按需扩展,如增加货币的千分位逗号、人民币/美元符号,控制小数位数,显示百分比等。
是否悬浮显示:即鼠标悬停弹出悬浮框显示该单元格完整内容,比较实用的功能。
是否显示:字面意思,这地方只是控制是否默认加入查询结果列显示,用户在使用的时候,还是可以通过表格右上方的列配置功能,将该属性加入到列表中来。

树视图

对于普通的实体,以上四个视图配置完成基本就结束了,可以通过平台代码生成直接输出前端的vue页面。
而当前配置的实体文件夹是自关联的树形数据结构,因此还需要继续配置相关的视图。
按照前面的操作方式,新增视图,视图类型选择“树视图”。
image.png
树视图无需任何配置,平台从前面的配置中已经获取到了足够的信息,其中,树节点的名称使用“主属性”标记的模型属性,id使用实体的标识。

树表视图

对于自关联的实体,实际更直观的列表页面应该是左树右表。
前面我们分别配置了列表视图和树视图,接下来定义一个树表视图,组合使用二者。
image.png
同样无需配置具体信息,平台会遵命约定自动组合树视图和列表视图。

这里需要注意,设置主视图属性为是,前端框架vue-element-plus-admin,根据vue组件的name属性来缓存页面,平台处理时,将标记为主视图的页面设置name属性,进行缓存,否则每次切换tab标签时,页面都会重新加载。

树参照视图

与树表视图类似,组合树视图和参照视图,产生用于选择的页面。
image.png

注意这地方需要把主参照视图设置为是,在使用选择页面的视图中,通过该属性来决定引入哪个参照视图。
至此,所有视图都配置完成。正如前面所说,普通的实体,只要配置列表、新增、修改、查看四个视图即可。自关联的特性和被选择的业务需求,产生了后面树、树表和树参照三个视图的配置需求。

开发平台资料

平台名称:一二三应用开发平台
平台简介:企业级通用低代码应用开发平台,免费全开源可商用
设计资料:csdn专栏
开源地址:Gitee
开源协议:MIT

应用系统资料

应用名称:一二三文档管理系统
应用简介: 企事业单位一站式文档管理系统,让组织内文档管理有序,协作高效、安全可控
设计文档:csdn专栏
开源地址:Gitee
开源协议:MIT

如果您在阅读本文时获得了帮助或受到了启发,希望您能够喜欢并收藏这篇文章,为它点赞~
请在评论区与我分享您的想法和心得,一起交流学习,不断进步,遇见更加优秀的自己!


http://www.ppmy.cn/server/53717.html

相关文章

MySQL表解锁

查看锁信息 show full processlist 如果一个表被锁定了,会有一个 “Waiting for table metadata lock” 的提示,表明该表正在等待锁定。 解锁表 删除state上有值的事务 kill query 事务id 表解锁完成

微信小程序的跳转页面

在微信小程序中,要实现从当前页面返回到指定页面的功能,通常不直接使用“返回上一页”的逻辑,而是利用小程序的页面栈管理和navigateBack或者重新定向到目标页面的API。下面我将介绍两种主要的方法: 方法一:使用 navi…

求职刷题力扣 DAY38动态规划 part04

1. 1049. 最后一块石头的重量 II 有一堆石头&#xff0c;用整数数组 stones 表示。其中 stones[i] 表示第 i 块石头的重量。 每一回合&#xff0c;从中选出任意两块石头&#xff0c;然后将它们一起粉碎。假设石头的重量分别为 x 和 y&#xff0c;且 x < y。那么粉碎的可能…

学习java第一百一十六天

Spring Framework有哪些不同的功能&#xff1f; 答&#xff1a; 轻量级-Spring 在代码量和透明度方面都很轻便。 IOC-控制反转AOP-面向切面编程可以将应用业务逻辑和系统服务分离&#xff0c;以实现高内聚。容器-Spring 负责创建和管理对象&#xff08;Bean&#xff09;的生命周…

4.2 sql手工注入和自动注入实战(OWASP实战训练)

4.2 sql手工注入和自动注入实战&#xff08;OWASP实战训练&#xff09; 引言1. information_schema1.1 查询数据库名&#xff08;TABLE_SCHEMA&#xff09;、表名&#xff08;TABLE_NAME&#xff09; information_schema.tables1.2 查询数据库名、表名、字段名&#xff08;colu…

1.3章节python中的注释和代码缩进

1.单行注释 2.多行注释 3.中文声明注释 4.代码缩进 在Python中&#xff0c;注释是用于解释代码或暂时禁用某些代码行的方法。Python支持两种类型的注释&#xff1a; 1.单行注释 使用#符号进行注释。在#符号之后的所有内容都会被Python解释器忽略。 # 这是一个单行注释 pr…

Kafka~消息系列问题解决:消费顺序问题解决、消息丢失问题优化(不能保证100%)

消息消费顺序问题 使用消息队列的过程中经常有业务场景需要严格保证消息的消费顺序&#xff0c;比如我们同时发了 2 个消息&#xff0c;这 2 个消息对应的操作分别对应的数据库操作是&#xff1a; 用户等级升级。根据用户等级下的订单价格 假如这两条消息的消费顺序不一样造…

DAO中的数据如何传到其他类中使用

## 难点2&#xff1a;数据访问层的内容如何在其他类中使用 1&#xff1a; public List<User> getAllUsers() throws ClassNotFoundException {//创建一个User的集合&#xff0c;并抛出ClassNotFoundException异常 List<User> users new ArrayList<>();//集合…