1、通用的業(yè)務(wù)編碼規(guī)則的管理功能

在前面隨筆我們介紹了一個(gè)通用的業(yè)務(wù)編碼規(guī)則的管理功能，通過(guò)代碼生成工具Database2Sharp一步步的生成相關(guān)的后端和Winform、WPF的界面，進(jìn)行了整合，通過(guò)利用代碼生成工具Database2sharp生成節(jié)省了常規(guī)功能的開(kāi)發(fā)時(shí)間，并且實(shí)現(xiàn)的界面整體一致的風(fēng)格。

通用的業(yè)務(wù)編碼規(guī)則的用途：

在我們很多應(yīng)用系統(tǒng)中，往往都需要根據(jù)實(shí)際情況生成一些編碼規(guī)則，如訂單號(hào)、入庫(kù)單號(hào)、出庫(kù)單號(hào)、退貨單號(hào)等等，我們有時(shí)候根據(jù)規(guī)則自行增加一個(gè)函數(shù)來(lái)生成處理，不過(guò)我們仔細(xì)觀察后，發(fā)現(xiàn)它們的編碼規(guī)則有很大的共通性，因此可以考慮使用一些通用的業(yè)務(wù)編碼規(guī)則生成，從而在系統(tǒng)中統(tǒng)一維護(hù)即可。

數(shù)據(jù)庫(kù)設(shè)計(jì)信息：

設(shè)計(jì)一個(gè)通用的編碼規(guī)則，對(duì)這些元素進(jìn)行組合配置，數(shù)據(jù)庫(kù)設(shè)計(jì)如下所示。

利用代碼生成工具Database2sharp生成基于《SqlSugar開(kāi)發(fā)框架》的后端接口:

首先我們通過(guò)上面PowerDesigner工具生成SQL腳本后，創(chuàng)建對(duì)應(yīng)的數(shù)據(jù)庫(kù)表，從代碼生成工具中展開(kāi)數(shù)據(jù)庫(kù)信息。

先展開(kāi)數(shù)據(jù)庫(kù)和表的列表信息，然后選擇《SqlSugar框架代碼生成》，選擇剛才創(chuàng)建的表信息，生成SqlSugar框架代碼，如下界面所示。

生成的代碼整合到基礎(chǔ)框架上，實(shí)現(xiàn)我們業(yè)務(wù)代碼的增量開(kāi)發(fā)。同理對(duì)于Winform的代碼和WPF的代碼，選擇相關(guān)的功能入口，生成相關(guān)的界面代碼整合到對(duì)應(yīng)的項(xiàng)目上即可，這里不再贅述。

最終Winform和WPF管理界面如下所示。

其中Winform端的業(yè)務(wù)編碼的管理界面和查看的對(duì)應(yīng)編碼的界面如下所示，供參考設(shè)計(jì)界面處理。

Winform端的編輯單個(gè)業(yè)務(wù)編碼規(guī)則的界面如下所示。

同樣，WPF管理端的界面也可以重用具體的業(yè)務(wù)編碼規(guī)則處理，WPF應(yīng)用端的界面如下所示。

?WPF應(yīng)用端的通用業(yè)務(wù)編碼規(guī)則的編輯界面如下所示。

?因此，不管對(duì)于Winform還是WPF的界面，他們的展示方式都是類似的，我們可以重用業(yè)務(wù)層對(duì)通用編碼規(guī)則的定義。

2、使用代碼生成工具快速開(kāi)發(fā)Vue3+ElementPlus前端應(yīng)用

我們?cè)陂_(kāi)始Vue3的前端界面生成之前，我們先來(lái)看看WebAPI的控制器代碼，由于使用代碼生成工具生成的控制器，具有標(biāo)準(zhǔn)的CRUD等常規(guī)的接口，因此我們只需要實(shí)現(xiàn)一些自定義的接口即可，由于自定義的接口也在Service層實(shí)現(xiàn)了，如下代碼所示。

這個(gè)Service層的接口里面的一些函數(shù)代碼，我們是根據(jù)數(shù)據(jù)庫(kù)表的信息一一生成，基本不需要過(guò)多改動(dòng)，只需要增加一個(gè)自定義的測(cè)試生成業(yè)務(wù)編碼的接口即可。?

而由于Service層的實(shí)現(xiàn)了邏輯處理的接口，因此Web API的控制器代碼也是比較簡(jiǎn)單，只是需要繼承一下基類即可，如下代碼所示。

namespace WebApi.Controllers
{/// <summary>/// 業(yè)務(wù)表編碼規(guī)則 業(yè)務(wù)控制器/// </summary>public class TableNumberController : BusinessController<TableNumberInfo, string, TableNumberPagedDto>{       private ITableNumberService _tablenumberService;/// <summary>/// 構(gòu)造函數(shù)，并注入基礎(chǔ)接口對(duì)象/// </summary>/// <param name="tablenumberService">服務(wù)接口對(duì)象</param>public TableNumberController(ITableNumberService tablenumberService) :base(tablenumberService){this._tablenumberService = tablenumberService;}/// <summary>/// 根據(jù)定義表名、單據(jù)頭、分割符1、分割符2，生成業(yè)務(wù)編碼。如果生成錯(cuò)誤，返回空字符串/// </summary>/// <param name="tableNameOrCode">表名或代碼</param>/// <returns></returns>/// <returns></returns>[HttpGet][Route("GenerateNumber/{tableNameOrCode}")]public async Task<string> GenerateNumber(string tableNameOrCode){return await _tablenumberService.GenerateNumber(tableNameOrCode);}}
}

自定義的接口實(shí)現(xiàn)，也只需簡(jiǎn)單的調(diào)用一下接口即可。

有了前面這些準(zhǔn)備，我們來(lái)看看如何實(shí)現(xiàn)快速的Vue3+ElementPlus前端界面的開(kāi)發(fā)整合。

在代碼生成工具的數(shù)據(jù)庫(kù)列表右鍵上找到上面的功能入口（或者在工具欄的Web界面代碼生成中選擇）

或者從工具欄中選擇【Vue3+Element界面代碼生成】

最后選擇該業(yè)務(wù)處理的表，生成相關(guān)的界面代碼，其中包括了對(duì)WebAPI 的遠(yuǎn)程調(diào)用封裝的API客戶端類，以及View視圖界面。

其中Vue3+Element前端的API類如下位置復(fù)制過(guò)去，放在Src/api目錄下，這個(gè)是統(tǒng)一放置相關(guān)Web API調(diào)用的JS的ES6類。

其中這個(gè)tablenumber的類也是有基類的，我們基于基類的基礎(chǔ)上添加我們的自定義接口調(diào)用接口，如下是實(shí)際的代碼。

// 導(dǎo)入API基類對(duì)象,默認(rèn)具有Get/GetAll/Create/Update/Delete/BatchDelete/SaveImport/Count等接口
import BaseApi from './base-api';
// 業(yè)務(wù)類自定義接口實(shí)現(xiàn), 通用的接口已經(jīng)在BaseApi中定義
class Api extends BaseApi {// 參考下面案例，增加自定義函數(shù)// GET 方法例子// 根據(jù)條件計(jì)算記錄數(shù)量// async GetCount(params: object) {//   return await this.HttpGet<number>(this.baseurl + "count", params);// }// POST 方法例子// 創(chuàng)建對(duì)象// async Create(data: object) {//   return await this.HttpPost<boolean>(this.baseurl + `create`, data);// }// PUT 方法例子// 更新對(duì)象// async Update(data: object) {//   return await this.HttpPut<boolean>(this.baseurl + `update`, data);// }// DELETE 方法例子// 刪除指定ID的對(duì)象// async Delete(id: number | string) {//   return await this.HttpDelete<boolean>(this.baseurl + `${id}`);// }// 根據(jù)定義表名、單據(jù)頭、分割符1、分割符2，生成業(yè)務(wù)編碼。如果生成錯(cuò)誤，返回空字符串a(chǎn)sync GenerateNumber(tableNameOrCode: string) {return await this.HttpGet<string>(this.baseurl + `GenerateNumber/${tableNameOrCode}`);}
}// 構(gòu)造業(yè)務(wù)表編碼規(guī)則 Api實(shí)例，并傳遞業(yè)務(wù)類接口地址
export default new Api('/api/tablenumber/');

我們注釋掉的代碼，是統(tǒng)一生成，供參考生成自定義的接口調(diào)用代碼的，其中GenerateNumber?是我們手工添加的一個(gè)自定義Web API的封裝調(diào)用，對(duì)應(yīng)著Web API的接口規(guī)則。

而視圖代碼，我們復(fù)制到對(duì)應(yīng)的views目錄上即可，具體位置可以根據(jù)實(shí)際的需要移動(dòng)目錄處理，由于是一些通用的功能，我們把它放到了Security權(quán)限的視圖目錄中。

?使用代碼生成工具，直接生成的視圖包含了幾個(gè)文件，這些文件就是各個(gè)模塊的組件定義，如下視圖代碼所示。

它們最終是整合呈現(xiàn)在index.vue的視圖入口中，我們可以適當(dāng)?shù)恼{(diào)整一下相關(guān)的界面代碼。

在我們測(cè)試界面前，我們需要把靜態(tài)路由添加到系統(tǒng)中去，我們找到對(duì)應(yīng)模塊的路由定義信息，如下所示。

?添加上剛才的頁(yè)面路由地址，如下所示。

?至此，我們構(gòu)建了一個(gè)完整的界面和入口了，可以在VSCode的控制臺(tái)中運(yùn)行前端界面測(cè)試了，測(cè)試需要結(jié)合其中Web API的后端。

我們可以根據(jù)實(shí)際的效果進(jìn)行界面的微調(diào)處理和完善即可，主要是排版布局的一些微調(diào)。

運(yùn)行界面，登錄后進(jìn)入界面，可以查看相關(guān)的菜單，然后查看《業(yè)務(wù)編碼規(guī)則》界面信息了。

查看界面和編輯界面分屬不同的視圖界面，查看界面效果如下所示。

?編輯界面效果如下所示，微調(diào)了界面效果，并增加了一個(gè)測(cè)試生成的按鈕。

結(jié)合前面的WInform和WPF管理端的界面，達(dá)到了三者前端共同管理的效果了。

文章轉(zhuǎn)載自：伍華聰

原文鏈接：https://www.cnblogs.com/wuhuacong/p/17921357.html

體驗(yàn)地址：引邁 - JNPF快速開(kāi)發(fā)平臺(tái)_低代碼開(kāi)發(fā)平臺(tái)_零代碼開(kāi)發(fā)平臺(tái)_流程設(shè)計(jì)器_表單引擎_工作流引擎_軟件架構(gòu)