Vue3+ElementPlus的BS端和Winform端界面进行定制生成

在我前面很多随笔中都介绍过代码生成工具Database2Sharp的快速开发，为了方便业务系统的快速开发，我们对代码生成工具一直在优化完善，以便提高更多的效率，事半功倍。在我前面很多随笔主题《代码生成工具》中都介绍过快速开发的各个方面，包括对Winform开发框架界面、基于SQLSugar开发框架等方面的快速开发，本篇随笔介绍基于原来WInform的界面定制开发的基础上，对Vue3+ElementPlus的BS端界面也进行定制生成，同时可以定制开发主从表的直接编辑界面的处理。
1、回顾Winform界面的定制开发。

WInform界面一般也是按照列表、编辑、查看等界面的组合处理，实现业务数据的分页展示，以及编辑或者查看等，因此可以根据需要定制进行开发，一般列表界面中整合查看、编辑、新增、删除、导入、导出、查询/高级查询等功能，整合的编辑界面也是依据数据库表的信息进行生成的。
列表界面和编辑界面效果如下所示。

而主从表界面生成的效果如下所示。

根据这些界面组成的规则，我们可以进行数据库的相关信息进行选择，在代码生成工具上进行定制快速生成，从而可以极大提高开发效率。
WInform界面生成的界面效果如下所示，通过选定不同的字段，定制化界面效果。

 
2、实现基于《SQLSugar开发框架》的Vue3+ElementPlus的BS端界面定制开发

BS端的常规的列表页面内容和WInform端界面类似，也是包含一些查询条件，以及相关的入口按钮事件的处理，如下界面所示

如果有树形列表快速展示的，界面效果如下所示。

因此我们对BS端的界面进行了快速开发，直接根据表的字段进行生成，也是极大的提高开发效率。

我们在代码生成的时候，选择树列表界面生成即可，大致效果如下所示。

不过之前没有对界面进行定制，因此还是需要一些时间来生成的界面内容进行裁剪较多，去除一些条件查询的内容，以及展示的字段。
因此，为了更加方便的开发 BS 端的界面，我们一直在进行代码生成工具的改进，参考WInform端界面的生成，增加使用定制化界面字段的方式进行更高效的开发。

然后在代码生成工具的生成界面中进行定制，如下界面所示。

 这样，我们就可以根据查询列表、表格列表显示、编辑界面等界面内容的信息进行快速的生成，从而较少裁剪界面上多余字段信息的处理时间了。
这样可以快速生成符合开发框架的BS端界面的所需内容文件和文件中对应的代码信息了。

3、Vue3+ElementPlus的BS端主从表的界面定制开发 

上面的代码生成，主要是针对单表的信息进行处理，在实际业务中，主从表的情况也是很常见的，如订单和订单明细，报价单和报价单明细，工艺和工艺路线，进货单和进货单明细等等，很常见的处理类型。
为了针对主从表的快速显示和录入，一般主从表同时录入的，我们设计了主从表界面的代码生成处理。

 上面界面的选择，也是生成类似WInform的主从表界面的方式来生成BS端的界面内容，如下所示。

生成的主从表列表界面如下所示。

 可以看到的内容，有树形列表、主表列表、从表展示，以及常规的增删改查的入口。
对于主从表的数据展示，也是同样通过定制的界面元素进行快速生成。

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

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

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

我们通过自定义控件的方式，让vxTable的表格编辑界面可定制化，从而可以快速调整表格单元格的输入方式。
通过结合代码生成工具的字段定制的界面生成，可以提高我们对界面元素的快速生成效率和应用效率，极大提高我们的生成率。对于精益求精的代码生成，虽然我们在工具的开发上花费的时间多一些，但是可以极大的提高项目的开发效率，也是值得的。
以上就是我们对于常规的单表和主从表在Vue3+ElementPlus+TS的BS端框架里面，我们定制化界面元素的生成界面的处理过程。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！