在代码生成工具Database2Sharp中对Vue3+ElementPlus的BS端和Winform端界面进行定制生成

幽默大师 發表於 2025-9-2 10:06:00

在代码生成工具Database2Sharp中对Vue3+ElementPlus的BS端和Winform端界面进行定制生成

在我前面很多随笔中都介绍过代码生成工具Database2Sharp的快速开发，为了方便业务系统的快速开发，我们对代码生成工具一直在优化完善，以便提高更多的效率，事半功倍。在我前面很多随笔主题《代码生成工具》中都介绍过快速开发的各个方面，包括对Winform开发框架界面、基于SQLSugar开发框架等方面的快速开发，本篇随笔介绍基于原来WInform的界面定制开发的基础上，对Vue3+ElementPlus的BS端界面也进行定制生成，同时可以定制开发主从表的直接编辑界面的处理。
<h3>1、回顾Winform界面的定制开发。</h3>
WInform界面一般也是按照列表、编辑、查看等界面的组合处理，实现业务数据的分页展示，以及编辑或者查看等，因此可以根据需要定制进行开发，一般列表界面中整合查看、编辑、新增、删除、导入、导出、查询/高级查询等功能，整合的编辑界面也是依据数据库表的信息进行生成的。
列表界面和编辑界面效果如下所示。
<img src="https://img2022.cnblogs.com/blog/8867/202205/8867-20220514155248888-471353005.png" alt="" width="747" height="444" class="medium-zoom-image" loading="lazy">
而主从表界面生成的效果如下所示。
<img src="https://img2022.cnblogs.com/blog/8867/202205/8867-20220516114016321-601616931.png" alt="" width="1026" height="509" class="medium-zoom-image" loading="lazy">
根据这些界面组成的规则，我们可以进行数据库的相关信息进行选择，在代码生成工具上进行定制快速生成，从而可以极大提高开发效率。
WInform界面生成的界面效果如下所示，通过选定不同的字段，定制化界面效果。
<img src="https://img2022.cnblogs.com/blog/8867/202210/8867-20221028111614978-963392211.png" alt="" width="878" height="634" class="medium-zoom-image" loading="lazy">
 
<h3>2、实现基于《SQLSugar开发框架》的Vue3+ElementPlus的BS端界面定制开发</h3>
BS端的常规的列表页面内容和WInform端界面类似，也是包含一些查询条件，以及相关的入口按钮事件的处理，如下界面所示
<img src="https://img2022.cnblogs.com/blog/8867/202210/8867-20221013164629732-2080221418.png" alt="" width="1063" height="348" class="medium-zoom-image" loading="lazy">
如果有树形列表快速展示的，界面效果如下所示。
<img src="https://img2022.cnblogs.com/blog/8867/202209/8867-20220927165350215-97425515.png" alt="" width="1084" height="723" class="medium-zoom-image" loading="lazy">
因此我们对BS端的界面进行了快速开发，直接根据表的字段进行生成，也是极大的提高开发效率。
<img src="https://img2022.cnblogs.com/blog/8867/202210/8867-20221013172150041-744007100.png" alt="" width="1045" height="644" class="medium-zoom-image">
我们在代码生成的时候，选择树列表界面生成即可，大致效果如下所示。
<img src="https://img2022.cnblogs.com/blog/8867/202210/8867-20221028110116612-674722728.png" alt="" width="584" height="577" class="medium-zoom-image" loading="lazy">
不过之前没有对界面进行定制，因此还是需要一些时间来生成的界面内容进行裁剪较多，去除一些条件查询的内容，以及展示的字段。
因此，为了更加方便的开发 BS 端的界面，我们一直在进行代码生成工具的改进，参考WInform端界面的生成，增加使用定制化界面字段的方式进行更高效的开发。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902091034947-1604404828.png" alt="image" width="836" height="225" loading="lazy">
然后在代码生成工具的生成界面中进行定制，如下界面所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902091234054-117201488.png" alt="image" width="1060" height="653" loading="lazy">
 这样，我们就可以根据查询列表、表格列表显示、编辑界面等界面内容的信息进行快速的生成，从而较少裁剪界面上多余字段信息的处理时间了。
这样可以快速生成符合开发框架的BS端界面的所需内容文件和文件中对应的代码信息了。
<img src="https://img2022.cnblogs.com/blog/8867/202210/8867-20221013163050395-1220348594.png" alt="" width="291" height="471" class="medium-zoom-image" loading="lazy">
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902093308794-1282892610.png" alt="image" width="1055" height="609" loading="lazy">
<h3>3、Vue3+ElementPlus的BS端主从表的界面定制开发 </h3>
上面的代码生成，主要是针对单表的信息进行处理，在实际业务中，主从表的情况也是很常见的，如订单和订单明细，报价单和报价单明细，工艺和工艺路线，进货单和进货单明细等等，很常见的处理类型。
为了针对主从表的快速显示和录入，一般主从表同时录入的，我们设计了主从表界面的代码生成处理。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902092054886-78054683.png" alt="image" width="1168" height="641" loading="lazy">
 上面界面的选择，也是生成类似WInform的主从表界面的方式来生成BS端的界面内容，如下所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902092330265-1286336327.png" alt="image" width="256" height="209" loading="lazy">
生成的主从表列表界面如下所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902094649217-560440381.png" alt="image" width="1070" height="676" loading="lazy">
 可以看到的内容，有树形列表、主表列表、从表展示，以及常规的增删改查的入口。
对于主从表的数据展示，也是同样通过定制的界面元素进行快速生成。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902094932820-1558142774.png" alt="image" width="827" height="573" loading="lazy">
 而对于我们关注的主从表直接录入，也是通过整合自定义控件的方式进行快速生成，界面效果展示如下所示。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902095628982-1065363956.png" alt="image" width="831" height="676" loading="lazy">
 对应从表的记录，我们同通过表格录入的方式，可以输入或者选择内容进行填入。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902095342877-1954940342.png" alt="image" width="833" height="408" loading="lazy">
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902095917163-1638095163.png" alt="image" width="791" height="358" loading="lazy">
 这些我们可以通过字段的属性进行选择不同的录入方式，生成对应的代码即可。
<img src="https://img2024.cnblogs.com/blog/8867/202509/8867-20250902100008865-1686254488.png" alt="image" width="839" height="316" loading="lazy">
我们通过自定义控件的方式，让vxTable的表格编辑界面可定制化，从而可以快速调整表格单元格的输入方式。
通过结合代码生成工具的字段定制的界面生成，可以提高我们对界面元素的快速生成效率和应用效率，极大提高我们的生成率。对于精益求精的代码生成，虽然我们在工具的开发上花费的时间多一些，但是可以极大的提高项目的开发效率，也是值得的。
以上就是我们对于常规的单表和主从表在Vue3+ElementPlus+TS的BS端框架里面，我们定制化界面元素的生成界面的处理过程。

</div>
<div id="MySignature" role="contentinfo">
<div style="border-right-color: #cccccc; border-right-width: 1px; border-right-style: solid; padding-right: 5px; border-top-color: #cccccc; border-top-width: 1px; border-top-style: solid; padding-left: 4px; font-size: 13px; padding-bottom: 4px; border-left-color: #cccccc; border-left-width: 1px; border-left-style: solid; width: 98%; padding-top: 4px; border-bottom-color: #cccccc; border-bottom-width: 1px; border-bottom-style: solid; background-color: #eeeeee;">
<img src="http://www.cnblogs.com/Images/OutliningIndicators/None.gif" align="top" alt>

专注于代码生成工具、.Net/Python 框架架构及软件开发，以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架、Python开发框架等框架产品。
 转载请注明出处：撰写人：伍华聪 http://www.iqidi.com </div> 
来源：https://www.cnblogs.com/wuhuacong/p/19069489

頁: [1]

琼殿技术论坛's Archiver

在代码生成工具Database2Sharp中对Vue3+ElementPlus的BS端和Winform端界面进行定制生成