Vue3+ElementPlus的BS端主从表的快速开发

1、基于代码生成工具的BS端主从表的快速开发

如报销申请单主表和明细从表，数据库设计关系如下所示。

或者根据业务编码关联的报价单主从表设计：

image

为了针对主从表的快速显示和录入，一般主从表同时录入的，我们设计了主从表界面的代码生成处理。

对于报价单和报价单明细表来说，同样也是主从表关系，我们为了方便快速开发，专门设计了代码生成工具界面用来定制主从表显示和编辑界面的生成开发，如下是代码生成工具用于生成BS端的Vue3+ElementPlus的界面代码。

image

通过列出数据库的相关字段，我们可以从中选择用于显示列表，编辑录入、条件处理等条件的字段信息，还可以根据某些字段为指定字典类型的数据绑定操作。

上面界面的选择，也是生成类似Winform的主从表界面的方式来生成BS端的界面内容，生成的界面符合BS端框架的要求，生成相关独立模块的页面代码和相关处理Vue代码等，如下所示。

image

生成的代码经过一些简单调整处理后，就可以很方便的显示出来了。生成的主从表列表界面如下所示。

image

可以看到的内容，有树形列表、主表列表、从表展示，以及常规的增删改查的入口。

对于主从表的数据展示，也是同样通过定制的界面元素进行快速生成。

image

而对于我们关注的主从表直接录入，也是通过整合自定义控件的方式进行快速生成，界面效果展示如下所示。

image

对应从表的记录，我们同通过表格录入的方式，可以输入或者选择内容进行填入。

image

2、Vue3+ElementPlus的BS端主从表实现的具体代码

首先我们来了解下几个视图文件的关系

image

我们先来了解下常规页面的内容的整体界面布局，它包含常规的列表界面，新增、编辑、查看、导入等界面，除了列表页面，其他内容以弹出层对话框的方式进行处理，如下界面示意图所示。

我们分别创建index.vue代表主列表页面内容， search代表查询及列表，view代表查看页面、edit代表新增或者编辑页面（两个页面类似，因此整合一起更精简），import代表导入页面，然后再index页面组合即可。

image

不同的页面模块的区分，有助于代码的管理维护。

image

列表页面的主要逻辑封装在search.vue页面中，包括左侧树形列表区域，查询条件区域、主表记录显示、分页展示区域、从表记录区域等。

image

其中主列表通过获取查询区域控件的条件，通过API进行数据获取，绑定到表格列表即可。

image

但主表记录呈现后，我们单击任何一行主表记录，会出发行单击事件的处理，从而加载从表记录的获取并显示。

image

主从表可以直接录入，它是通过整合自定义控件的方式进行快速生成，界面效果展示如下所示。

image

在编辑界面中，主表和常规单表一样的处理方式，从表记录通过 vxe-table 进行录入的处理。对于产品记录的列表选取，我们通过自定义组件 TableSelector 快速绑定即可即可。

关于自定义组件 TableSelector ，我在随笔《在Vue3+ElementPlus前端中增加表格记录选择的自定义组件，通过结合Popover 弹出框和Input输入框或者按钮选择实现 》中有相关介绍。

image

其实现产品表数据的绑定显示，供表格选择代码如下所示。

image

对于字典记录的下拉列表，我们绑定字典类型即可显示列表供选择了。

image

image

这些我们可以通过字段的属性进行选择不同的录入方式，生成对应的代码即可。

image

我们通过自定义控件的方式，让vxTable的表格编辑界面可定制化，从而可以快速调整表格单元格的输入方式。

通过结合代码生成工具的字段定制的界面生成，可以提高我们对界面元素的快速生成效率和应用效率，极大提高我们的生成率。对于精益求精的代码生成，虽然我们在工具的开发上花费的时间多一些，但是可以极大的提高项目的开发效率，也是值得的。

专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。