在我們基於框架開發系統的時候，往往對一些應用場景的頁面對進行了歸納總結，因此對大多數情況下的頁面呈現邏輯都做了清晰的分析，因此在我們基於框架的基礎上，增量式開發業務功能的時候，能夠事半功倍。代碼生成工具Database2Sharp承載着我們各種開發框架的快速開發邏輯，包括界面代碼的生成、后端代碼的生成等內容，本篇隨筆介紹在這個基礎上，增加Vue&Element 工作流頁面的快速生成，以便減輕我們實際開發工作流頁面的繁瑣工作。
1、工作流查看、編輯頁面的組件動態化
在我的隨筆《基於Vue的工作流項目模塊中，使用動態組件的方式統一呈現不同表單數據的處理方式》中曾經介紹過，由於我們動態掛載了工作流的查看頁面、編輯頁面，因此我們可以根據工作流表單的屬性，來動態呈現所需要的頁面內容，也就是組件動態化的處理方式。也就是類似我們下圖所示
除了查看表單、編輯表單，還有一個對具體業務申請單的查詢頁面，因此一個工作流表單，包含了三個特定功能的頁面，如下所示。
申請表單查看的實際效果界面如下所示。
創建具體的表單的時候，根據表單的編輯界面，錄入不同的流程申請單的數據，以及附件、清單、流程用戶等信息。
不同的表單，有不同的查詢界面，可以提供更加進行的業務表單數據查詢或者統計處理，如對於付款申請單，我們提供一個付款申請單的分頁查詢頁面。
這些頁面的內容，我們在項目框架中存放的位置如下所示。
2、結合代碼生成工具快速生成頁面代碼
根據上面的規則，我們可以使用代碼生成工具，根據數據庫的信息，結合頁面的呈現需要，把查看申請單、創建/編輯申請單、列表查詢幾個頁面的內容，通過代碼生成工具Database2Sharp來快速生成，只需要根據需要定義好頁面模板即可。
這里的ABP的Vue &Element界面代碼，即可以用來生成基於ABP后端的Vue&Element前端界面代碼，也可以基於Bootstrap&VUE框架的Web API前端界面代碼，我們在這里生成包含常規頁面的api+views視圖代碼外，同時也生成工作流模塊所需的三類頁面代碼，生成的代碼只需要簡單的在VSCode中進行增量式的合並即可使用，節省了非常多的前端代碼編寫或者裁剪工作。
我們看到生成的工作流模塊內容，已經根據edit /view / list幾個目錄進行了區分，如下所示。
這樣我們把生成的頁面，復制到對應的項目框架目錄中即可。
其中對於對於主從表單的處理，我們可以通過利用Vxe-table插件的方式直接錄入數據的方式進行錄入 。通過代碼生成工具，也是根據關聯表的信息，我們同時生成所需要的從表信息展示，供裁剪錄入信息處理。
<el-form-item label="明細清單"> <div> <vxe-toolbar> <template #buttons> <vxe-button status="primary" content="新增" @click="insertEvent" /> <vxe-button status="warning" content="刪除" @click="removeSelectEvent" /> <vxe-button content="提交" @click="saveEvent" /> </template> </vxe-toolbar> <vxe-table ref="xTable" border show-overflow keep-source resizable show-overflow :data="list" :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"> <vxe-column type="checkbox" width="60" /> <vxe-column type="seq" width="60" /> <vxe-column field="feeType" title="費用類型" :edit-render="{name: '$select', options: feeTypeList}" /> <vxe-column field="occurTime" title="發生時間" :edit-render="{name: '$input', props: {type: 'date', placeholder: '請選擇日期'}}" :formatter="formatDate" /> <vxe-column field="feeAmount" title="費用金額(元)" :edit-render="{name: '$input', props: {type: 'float', digits: 2}}" /> <vxe-column field="feeDescription" title="費用說明" :edit-render="{name: 'input', attrs: {type: 'text'}}" /> </vxe-table> </div> </el-form-item>
最終展示的界面效果如下所示。
利用代碼生成工具Database2Sharp，我們可以非常細致的定義我們所需要生成的代碼邏輯，因此在項目開發中，可以快速生成界面代碼以及后端C#的框架處理代碼，這樣增量式的開發，往往能夠做到事半功倍，並且在生成的界面代碼里面，我們提供了很多控件的展示例子，供修改調整，靈活度非常好，同時也是我們快速進階前端和后端開發的試金石。
以及API的生成代碼，部分注釋供參考。
代碼生成工具Database2Sharp為開發效率而生，同時也是開發的好幫手，我們信奉開發中，自己所想要的東西，往往就是大多數開發者所需要的，盡可能的信手拈來。