基於SqlSugar的開發框架循序漸進介紹（21）- 在工作流列表頁面中增加一些轉義資訊的輸出，在後端進行內容轉換

基於SqlSugar的開發框架循序漸進介紹（21）– 在工作流列表頁面中增加一些轉義資訊的輸出，在後端進行內容轉換

2022 年 11 月 11 日
筆記
SqlSugar

有時候，為了給前端頁面輸出內容，有時候我們需要準備和資料庫不一樣的實體資訊，因為資料庫可能記錄的是一些引用的ID或者特殊字元，那麼我們為了避免前端單獨的進行轉義處理，我們可以在後端進行統一的格式化後再行輸出，後端處理可以採用不同的DTO屍體資訊，後端對不同的實體進行映射處理即可，也可以採用同一個實體，在SqlSugar實體資訊中忽略對應的欄位寫入實現，本篇隨筆介紹後者的處理方式，實現在在工作流列表頁面中增加一些轉義資訊的輸出處理。

1、後端的轉義處理

大多數頁面，我們的前端顯示資訊DTO和後端的資料庫實體資訊Entity是一致的，只有部分資訊的差異，特別在工作流模組中，由於繼承原來歷史的資料庫設計結構，因此很多引用的欄位是int類型的，那麼為了避免前端對內容的頻繁解析，因此必要的時候在後端對內容進行統一的處理，實現內容的轉義。

例如我們以其中的模板流程的實體資訊定義來看，除了對常規的資訊，我們還需要對一些轉義資訊的處理。

如實體類對應欄位的SqlSugar的標識，只需要增加SqlsugarColumn的標識即可。

        [SqlSugar.SugarColumn(ColumnName = "PROC_TYPE")]
        public virtual int ProcType { get; set; }

如下所示的實體類

如果我們需要額外增加一些資訊的承載，而在保存或者提取資料庫欄位資訊的時候，進行忽略處理，那麼標識為Ignor即可。

        [SqlSugar.SugarColumn(IsIgnore = true)]
        public virtual string ProcTypeName { get; set; }

如下實體類程式碼所示

有了實體資訊的定義，我們在SqlSurgar框架的服務層返回列表資訊的時候，可以對列表的內容進行統一的轉換，而列表返回是在基類定義的統一泛型函數，如下定義所示。

        /// <summary>
        /// 根據條件獲取列表
        /// </summary>
        /// <param name="input">分頁查詢條件</param>
        /// <returns></returns>
        public virtual async Task<PagedResultDto<TEntity>> GetListAsync(TGetListInput input)
        {
            var query = CreateFilteredQueryAsync(input);
            var totalCount = await query.CountAsync();

            query = ApplySorting(query, input);
            query = ApplyPaging(query, input);

            var list = await query.ToListAsync();

            return new PagedResultDto<TEntity>(
               totalCount,
               list
           );
        }

因此需要在繼承的子類中重寫一下進行處理，如下程式碼所示。

而對於附加資訊的多少，則根據我們的業務規則適當調整即可，有些實體資訊附加的內容可能會多一些，有些會少一些，有些可能保存原狀即可。

2、前端的列表顯示

介紹了後端的內容轉義，前端相對處理就比較簡單了，只需要把對應的內容進行顯示即可。如前端的Vue3+TypeScript+ElementPlus的程式碼如下。

<!--表格列表資訊 -->
<el-table
  v-loading="loading"
  :data="list"
  border
  fit
  stripe
  highlight-current-row
  :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
  @selection-change="selectionChange"
  @row-dblclick="rowDbclick"
  @sort-change="sortChange"
>
  <el-table-column type="selection" width="40" />
  <el-table-column align="center" sortable="custom" prop="proc_Name" label="流程環節名稱">
    <template v-slot="scope">
      {{ scope.row.procName }}
    </template>
  </el-table-column>
  <el-table-column align="center" sortable="custom" prop="proc_Type" label="處理類型">
    <template v-slot="scope">
      {{ scope.row.procTypeName }}
    </template>
  </el-table-column>
  <el-table-column align="center" sortable="custom" prop="form_ID" label="對應表單">
    <template v-slot="scope">
      {{ scope.row.formName ?? '所有表單' }}
    </template>
  </el-table-column>