wuhuacong(伍華聰)的專欄

在實際業務中，主從表的情況也是很常見的，如訂單和訂單明細，報價單和報價單明細，工藝和工藝路線，進貨單和進貨單明細等等，很常見的處理類型。 主從表一般涉及兩個以上的表，一個是主表，其他的是從表的，在實際情況下，一般包含兩個表較多，我們這里以兩個表的主從表關系進行分析處理。本篇隨筆介紹基于Vue3+ElementPlus的BS端主從表的快速開發。 為了針對主從表的快速顯示和錄入，一般主從表同時錄入的，我們設計了主從表界面的代碼生成處理。

在實際業務中，主從表的情況也是很常見的，如訂單和訂單明細，報價單和報價單明細，工藝和工藝路線，進貨單和進貨單明細等等，很常見的處理類型。

主從表一般涉及兩個以上的表，一個是主表，其他的是從表的，在實際情況下，一般包含兩個表較多，我們這里以兩個表的主從表關系進行分析處理。本篇隨筆介紹基于Vue3+ElementPlus的BS端主從表的快速開發。

1、基于代碼生成工具的BS端主從表的快速開發

如報銷申請單主表和明細從表，數據庫設計關系如下所示。

或者根據業務編碼關聯的報價單主從表設計：

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

對于報價單和報價單明細表來說，同樣也是主從表關系，我們為了方便快速開發，專門設計了代碼生成工具界面用來定制主從表顯示和編輯界面的生成開發，如下是代碼生成工具用于生成BS端的Vue3+ElementPlus的界面代碼。

通過列出數據庫的相關字段，我們可以從中選擇用于顯示列表，編輯錄入、條件處理等條件的字段信息，還可以根據某些字段為指定字典類型的數據綁定操作。

 上面界面的選擇，也是生成類似Winform的主從表界面的方式來生成BS端的界面內容，生成的界面符合BS端框架的要求，生成相關獨立模塊的頁面代碼和相關處理Vue代碼等，如下所示。

生成的代碼經過一些簡單調整處理后，就可以很方便的顯示出來了。生成的主從表列表界面如下所示。

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

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

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

 對應從表的記錄，我們同通過表格錄入的方式，可以輸入或者選擇內容進行填入。

 

2、Vue3+ElementPlus的BS端主從表實現的具體代碼

首先我們來了解下幾個視圖文件的關系

我們先來了解下常規頁面的內容的整體界面布局，它包含常規的列表界面，新增、編輯、查看、導入等界面，除了列表頁面，其他內容以彈出層對話框的方式進行處理，如下界面示意圖所示。

我們分別創建index.vue代表主列表頁面內容， search代表查詢及列表，view代表查看頁面、edit代表新增或者編輯頁面（兩個頁面類似，因此整合一起更精簡），import代表導入頁面，然后再index頁面組合即可。

不同的頁面模塊的區分，有助于代碼的管理維護。

列表頁面的主要邏輯封裝在search.vue頁面中，包括左側樹形列表區域，查詢條件區域、主表記錄顯示、分頁展示區域、從表記錄區域等。

 其中主列表通過獲取查詢區域控件的條件，通過API進行數據獲取，綁定到表格列表即可。

但主表記錄呈現后，我們單擊任何一行主表記錄，會出發行單擊事件的處理，從而加載從表記錄的獲取并顯示。

主從表可以直接錄入，它是通過整合自定義控件的方式進行快速生成，界面效果展示如下所示。

在編輯界面中，主表和常規單表一樣的處理方式，從表記錄通過 vxe-table 進行錄入的處理。對于產品記錄的列表選取，我們通過自定義組件 TableSelector 快速綁定即可即可。

關于自定義組件 TableSelector ，我在隨筆《在Vue3+ElementPlus前端中增加表格記錄選擇的自定義組件，通過結合Popover 彈出框和Input輸入框或者按鈕選擇實現 》中有相關介紹。

其實現產品表數據的綁定顯示，供表格選擇代碼如下所示。

對于字典記錄的下拉列表，我們綁定字典類型即可顯示列表供選擇了。

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

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

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