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

列表视图

接下来进入列表视图配置,创建的操作方式跟前面相同,如下图所示:
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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/760809.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

帕金森患者的福音,这些食物竟有神奇疗效!

在忙碌的现代生活中,健康问题越来越受到大家的关注。而帕金森病作为一种常见的老年神经系统疾病,更是让许多患者和家庭倍感压力。但是,你知道吗?除了药物治疗和手术干预,日常饮食也能对帕金森病产生积极的影响。今天&a…

开源分享:一套完整的直播购物系统源码

直播购物已经成为一种炙手可热的电商模式,吸引了无数商家和消费者的目光。对于开发者来说,构建一个功能齐全、用户体验优良的直播购物系统是一项复杂的任务。本文将分享一套完整的直播购物系统源码,帮助开发者快速搭建自己的直播购物平台。 …

基于springboot+vue+uniapp的语言课学习系统小程序

开发语言:Java框架:springbootuniappJDK版本:JDK1.8服务器:tomcat7数据库:mysql 5.7(一定要5.7版本)数据库工具:Navicat11开发软件:eclipse/myeclipse/ideaMaven包&#…

在Centos上安装Lua不要用什么curl指令,这样获取到的压缩包不是gzip格式的

Lua 环境安装 | 菜鸟教程 (runoob.com) 在这一篇里,把这一行 换成 wget http://www.lua.org/ftp/lua-5.3.0.tar.gz 再去解压编译安装就对了。

ue5导航网格设置

AI使用导航网格进行移动,所以,先设置导航网格边界体积 2,使导航网格边界体积覆盖AI所需要的场景(绿色区域),x,y,z在这里都扩大到原来的10倍 3,打开actor的“启用tick并开始” 4&…

No module named ‘MySQLdb‘

python 运行代码的时候遇到No module named ‘MySQLdb’报错如何解决? 解决办法 如果没有安装可以先安装以下依赖库 pip install PyMySQL如果已经安装了PyMySQL,仍然报MySQLdb模块找不到,可以尝试安装以下依赖库。 pip install mysqlclient

二轴机器人装箱机:重塑物流效率,精准灵活,引领未来装箱新潮流

在现代化物流领域,高效、精准与灵活性无疑是各大企业追求的核心目标。而在这个日益追求自动化的时代,二轴机器人装箱机凭借其较佳的性能和出色的表现,正逐渐成为装箱作业的得力助手,引领着未来装箱新潮流。 一、高效:重…

【12】交易-“未花费交易输出”

1. 未花费交易输出 1.1 概念 未花费交易输出(unspent transactions output, UTXO)。未花费(unspent)指的是这个输出还没有被包含在任何交易的输入中,或者说没有被任何输入引用。 在交易结构示意图中,未花费的输出是:tx1, output 1;tx3, output 0;tx4, output 0。 1…

JavaScript原型对象和对象原型、原型继承、原型链

目录 1. 原型对象和对象原型2. 原型继承3. 原型链 1. 原型对象和对象原型 作用: 以前通过构造函数实例化的对象,每个实例化的对象的属性和方法都是独立的,会造成内存浪费。通过prototype对象原型能实现不同实例化对象共享公用的属性和方法,减…

Android 10.0 关于定制自适应AdaptiveIconDrawable类型的动态日历图标的功能实现系列一

1.前言 在10.0的系统rom定制化开发中,在关于定制动态时钟图标中,原系统是不支持动态日历图标的功能,所以就需要从新 定制动态时钟图标关于自适应AdaptiveIconDrawable类型的样式,就是可以支持当改变系统图标样式变化时,动态日历 图标的背景图形也跟着改变,所以接下来就来…

国产分布式数据库灾备高可用实现

最近在进行核心业务系统的切换演练测试,就在想一个最佳的分布式数据库高可用部署方案是如何保证数据不丢、系统可用的,做到故障时候可切换、可回切,并且业务数据的一致性。本文简要介绍了OceanBase数据库和GoldenDB数据库在灾备高可用的部署方…

Springboot ResourceLoader获取指定package目录下所有的类(get class in jar on Linux)

get class in jar on Linux Springboot ResourceLoader获取指定package目录下所有的类 PathMatchingResourcePatternResolver resolver new PathMatchingResourcePatternResolver();String pattern ResourcePatternResolver.CLASSPATH_ALL_URL_PREFIX ClassUtils.convertClas…

《概率论与数理统计》期末复习笔记_下

目录 第4章 随机变量的数字特征 4.1 数学期望 4.2 方差 4.3 常见分布的期望与方差 4.4 协方差与相关系教 第5章 大数定律和中心极限定理 5.1 大数定律 5.2 中心极限定理 第6章 样本与抽样分布 6.1 数理统汁的基本概念 6.2 抽样分布 6.2.1 卡方分布 6.2.2 t分布 6.…

join()方法——连接字符串、元组、列表和字典

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 join()方法用于连接字符串数组。将字符串、元组、列表中的元素以指定的字符(分隔符)连接生成一个新的字符串&#…

全球点赞第一起名大师颜廷利:是金子总会“花光”的

在物质世界的繁华背后,隐藏着一个深刻的真理:有形之物的分享会逐渐减少,而无形之物的传递却能不断增值。金钱、货币、银两这些商业领域的实体,往往激发出人类对更多财富的渴望和对资源枯竭的恐惧。这种恐惧源于资源的有限性&#…

CSDN写文章时需要上、下标字号怎么输?

上标:​^^,符号中间加字 下标:~~,符号中间加字 前题是用MD编辑器,不然白搭: 我是感觉CSDN这个文本编辑比较拉,非常想吐槽。

10_网络规划和管理

目录 网络拓扑结构 网络拓扑结构分类 层次化局域网模型 建筑物综合布线系统 网络管理命令 其他知识点汇总 网络地址翻译 默认网关 PPP 冲突域和广播域 网络拓扑结构 网络拓扑结构分类 网络拓扑结构按分布范围分类见表 网络拓扑结构按范围分类 网络分类 缩写 分布…

商场配电新思维:智能网关驱动的自动化管理系统

在商场配电室监控系统中,主要是以无线网络为载体,目的就是便于对变电站等实时监测与控制。其中,4G配电网关非常关键,可以将配电室系统终端上的信息数据及时上传到服务器,再由服务器下达控制指令到各模块中,…

git客户端工具之Github,适用于windows和mac

对于我本人,我已经习惯了使用Github Desktop,不同的公司使用的代码管理平台不一样,就好奇Github Desktop是不是也适用于其他平台,结果是可以的。 一、克隆代码 File --> Clone repository… 选择第三种URL方式,输入url &…

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数 0. 引言1. 关于m_line2. 关于m_quiver3. 关于m_text4. 关于m_plot5. 结语 0. 引言 本篇介绍下m_map中添加绘制基础线(m_line、m_plot)、绘制箭头(m_quiver&#x…