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

列表视图

接下来进入列表视图配置，创建的操作方式跟前面相同，如下图所示：

保存后回到列表，点击行记录的配置按钮，进入如下配置页面

可以看到该配置界面相比新增、修改、查看那三个视图要复杂得多，配置项也多一些。
实际对应着就是一个实体的包含查询功能的典型列表页面。

配置按钮

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

点击某个按钮，如删除，可以打开设置页面，如下图所示：

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

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

配置查询条件

查询条件的配置操作方式与前面为新增视图添加属性的操作方式是相同的，拖动属性列表中的属性至查询条件区域即可，平台会从实体模型属性拷贝数据类型、控件类型等到视图属性。
平台同样提供了批量添加和清空列表的功能。
可根据需要调整，如隐藏作为隐含查询条件，控制只读限定查询范围，设置默认值自动填充等。

对于文本类属性，可选择匹配规则，如相等、模糊匹配、以开始和以结尾……。
对于数据字典类的属性，若为下拉列表，平台会自动附加允许多选控制，并清空默认值。
对于日期类、数值类的属性，查询单个值没有业务意义，例如合同金额等于100万，而是需要进行范围查询。
查询区域会自动生成起止范围选择，使用时可灵活选择小于100万，或大于500万，还可以组合控制在200万与300万之间。

配置查询结果

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

树视图

对于普通的实体，以上四个视图配置完成基本就结束了，可以通过平台代码生成直接输出前端的vue页面。
而当前配置的实体文件夹是自关联的树形数据结构，因此还需要继续配置相关的视图。
按照前面的操作方式，新增视图，视图类型选择“树视图”。

树视图无需任何配置，平台从前面的配置中已经获取到了足够的信息，其中，树节点的名称使用“主属性”标记的模型属性，id使用实体的标识。

树表视图

对于自关联的实体，实际更直观的列表页面应该是左树右表。
前面我们分别配置了列表视图和树视图，接下来定义一个树表视图，组合使用二者。

同样无需配置具体信息，平台会遵命约定自动组合树视图和列表视图。

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

树参照视图

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

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

开发平台资料

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

应用系统资料

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

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