wuhuacong(伍華聰)的專欄

我前面很多隨筆中都介紹過代碼生成工具Database2Sharp的快速開發(fā)，為了方便業(yè)務(wù)系統(tǒng)的快速開發(fā)，我們對代碼生成工具一直在優(yōu)化完善，以便提高更多的效率，事半功倍。在我前面很多隨筆主題《代碼生成工具》中都介紹過快速開發(fā)的各個方面，包括對Winform開發(fā)框架界面、基于SQLSugar開發(fā)框架等方面的快速開發(fā)，本篇隨筆介紹基于原來WInform的界面定制開發(fā)的基礎(chǔ)上，對Vue3+ElementPlus的BS端界面也進行定制生成，同時可以定制開發(fā)主從表的直接編輯界面的處理。

在我前面很多隨筆中都介紹過代碼生成工具Database2Sharp的快速開發(fā)，為了方便業(yè)務(wù)系統(tǒng)的快速開發(fā)，我們對代碼生成工具一直在優(yōu)化完善，以便提高更多的效率，事半功倍。在我前面很多隨筆主題《代碼生成工具》中都介紹過快速開發(fā)的各個方面，包括對Winform開發(fā)框架界面、基于SQLSugar開發(fā)框架等方面的快速開發(fā)，本篇隨筆介紹基于原來WInform的界面定制開發(fā)的基礎(chǔ)上，對Vue3+ElementPlus的BS端界面也進行定制生成，同時可以定制開發(fā)主從表的直接編輯界面的處理。

1、回顧Winform界面的定制開發(fā)。

WInform界面一般也是按照列表、編輯、查看等界面的組合處理，實現(xiàn)業(yè)務(wù)數(shù)據(jù)的分頁展示，以及編輯或者查看等，因此可以根據(jù)需要定制進行開發(fā)，一般列表界面中整合查看、編輯、新增、刪除、導入、導出、查詢/高級查詢等功能，整合的編輯界面也是依據(jù)數(shù)據(jù)庫表的信息進行生成的。

列表界面和編輯界面效果如下所示。

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

根據(jù)這些界面組成的規(guī)則，我們可以進行數(shù)據(jù)庫的相關(guān)信息進行選擇，在代碼生成工具上進行定制快速生成，從而可以極大提高開發(fā)效率。

WInform界面生成的界面效果如下所示，通過選定不同的字段，定制化界面效果。

 

2、實現(xiàn)基于《SQLSugar開發(fā)框架》的Vue3+ElementPlus的BS端界面定制開發(fā)

BS端的常規(guī)的列表頁面內(nèi)容和WInform端界面類似，也是包含一些查詢條件，以及相關(guān)的入口按鈕事件的處理，如下界面所示

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

因此我們對BS端的界面進行了快速開發(fā)，直接根據(jù)表的字段進行生成，也是極大的提高開發(fā)效率。

我們在代碼生成的時候，選擇樹列表界面生成即可，大致效果如下所示。

不過之前沒有對界面進行定制，因此還是需要一些時間來生成的界面內(nèi)容進行裁剪較多，去除一些條件查詢的內(nèi)容，以及展示的字段。

因此，為了更加方便的開發(fā) BS 端的界面，我們一直在進行代碼生成工具的改進，參考WInform端界面的生成，增加使用定制化界面字段的方式進行更高效的開發(fā)。

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

 這樣，我們就可以根據(jù)查詢列表、表格列表顯示、編輯界面等界面內(nèi)容的信息進行快速的生成，從而較少裁剪界面上多余字段信息的處理時間了。

這樣可以快速生成符合開發(fā)框架的BS端界面的所需內(nèi)容文件和文件中對應(yīng)的代碼信息了。

3、Vue3+ElementPlus的BS端主從表的界面定制開發(fā) 

上面的代碼生成，主要是針對單表的信息進行處理，在實際業(yè)務(wù)中，主從表的情況也是很常見的，如訂單和訂單明細，報價單和報價單明細，工藝和工藝路線，進貨單和進貨單明細等等，很常見的處理類型。

為了針對主從表的快速顯示和錄入，一般主從表同時錄入的，我們設(shè)計了主從表界面的代碼生成處理。

 上面界面的選擇，也是生成類似WInform的主從表界面的方式來生成BS端的界面內(nèi)容，如下所示。

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

 可以看到的內(nèi)容，有樹形列表、主表列表、從表展示，以及常規(guī)的增刪改查的入口。

對于主從表的數(shù)據(jù)展示，也是同樣通過定制的界面元素進行快速生成。

 而對于我們關(guān)注的主從表直接錄入，也是通過整合自定義控件的方式進行快速生成，界面效果展示如下所示。

 對應(yīng)從表的記錄，我們同通過表格錄入的方式，可以輸入或者選擇內(nèi)容進行填入。

 這些我們可以通過字段的屬性進行選擇不同的錄入方式，生成對應(yīng)的代碼即可。

我們通過自定義控件的方式，讓vxTable的表格編輯界面可定制化，從而可以快速調(diào)整表格單元格的輸入方式。

通過結(jié)合代碼生成工具的字段定制的界面生成，可以提高我們對界面元素的快速生成效率和應(yīng)用效率，極大提高我們的生成率。對于精益求精的代碼生成，雖然我們在工具的開發(fā)上花費的時間多一些，但是可以極大的提高項目的開發(fā)效率，也是值得的。

以上就是我們對于常規(guī)的單表和主從表在Vue3+ElementPlus+TS的BS端框架里面，我們定制化界面元素的生成界面的處理過程。