在很多列表展示資料的場合中，大多數都會需要一個排序的處理，以方便快速查詢排序所需的資料，本篇隨筆介紹如何結合ABP後端和Vue+Element前端結合的分頁排序處理過程。

1、Vue+Element前端的排序程式碼

我們首先參考一下Element介面元件的排序說明。如下效果是Element表格元件的排序效果。

在列中設定sortable屬性即可實現以該列為基準的排序，接受一個Boolean，預設為false。可以通過 Table 的default-sort屬性設定預設的排序列和排序順序。可以使用sort-method或者sort-by使用自定義的排序規則。如果需要後端排序，需將sortable

根據上面說明，我們這裡採取的是後端排序，將sortable設定為custom。如下案例程式碼所示。

    <!--表格列表資訊 -->
    <el-table
      v-loading="listLoading"
      :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="name" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" sortable="custom" prop="age" label="年齡">
        <template slot-scope="scope">
          {{ scope.row.age }} 歲
        </template>
      </el-table-column>
      <!--日期欄位資訊，顯示完整時間格式:formatter="timeFormat"，否則使用:formatter="dateFormat" -->
      <el-table-column align="center" label="建立時間" sortable="custom" width="160" prop="creationTime" :formatter="timeFormat" />

以上是介面端的HTML程式碼，那麼前端JS的處理邏輯也需要相應處理下，上面程式碼中 @sort-change="sortChange" 定義了排序變化的觸發事件處理。

  methods: {
    sortChange({ column, prop, order }) {
      var direction = (order === 'ascending') ? ' ASC' : ' DESC'
      this.sorting = !this.isEmpty(prop) ? (prop + direction) : null
      this.getlist()
    },

以上程式碼主要邏輯是構建一個排序字串，如：欄位 ASC 或 欄位 DESC的字串，以供ABP後端的排序處理即可，這個主要是根據ABP框架排序特點進行提交的。

我們通過getlist的方法提交對應的查詢條件和排序字串，讓後端再次獲取資料給我們前端處理。

    getlist() { // 列表資料獲取
      var param = { // 構造常規的分頁查詢條件
        // 分頁條件
        SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
        MaxResultCount: this.pageinfo.pagesize,
        Sorting: this.sorting,

      // 查詢過濾條件
        Name: this.searchForm.name,
        AgeStart: this.searchForm.ageStart
      };
      // 使用日期範圍選擇控制元件，在查詢物件增加開始日期CreationTimeStart、結束日期CreationTimeEnd
      this.addDateRange(param, this.searchForm.creationTime)

      // 獲取列表，繫結到模型上，並修改分頁數量
      this.listLoading = true
      customer.GetAll(param).then(data => {
        this.list = data.result.items
        this.pageinfo.total = data.result.totalCount
        this.listLoading = false
      })
    },

那麼剩下的時候，就是後端如何處理資料的問題了。

2、 ABP後端分頁排序的處理

我們檢視ABP的應用服務層的介面基類可以看到，對應的獲取所有記錄GetAll方法的定義如下所示。

        public virtual async Task<PagedResultDto<TEntityDto>> GetAllAsync(TGetAllInput input)
        {
            CheckGetAllPermission();                 //檢查許可權

            var query = CreateFilteredQuery(input);  //構建查詢條件

            var totalCount = await AsyncQueryableExecuter.CountAsync(query);  //獲取記錄總數

            query = ApplySorting(query, input);  //排序
            query = ApplyPaging(query, input);   //分頁

            var entities = await AsyncQueryableExecuter.ToListAsync(query);  //返回實體記錄

            return new PagedResultDto<TEntityDto>(  //構建分頁展示資料
                totalCount,
                entities.Select(MapToEntityDto).ToList()  //實體轉換DTO
            );
        }

一般情況下，這些邏輯我們一般不會變化，我們只需要進行一定的重寫構建查詢條件，以及排序規則即可。

例如重寫條件查詢獲取查詢物件的處理如下。

 詳細程式碼如下所示：

        /// <summary>
        /// 自定義條件處理
        /// </summary>
        /// <param name="input">查詢條件Dto</param>
        /// <returns></returns>
        protected override IQueryable<Customer> CreateFilteredQuery(CustomerPagedDto input)
        {
            return base.CreateFilteredQuery(input)
                .WhereIf(!input.ExcludeId.IsNullOrWhiteSpace(), t=>t.Id != input.ExcludeId) //不包含排除ID
                .WhereIf(!input.Name.IsNullOrWhiteSpace(), t => t.Name.Contains(input.Name)) //如需要精確匹配則用Equals
                 //年齡區間查詢
                .WhereIf(input.AgeStart.HasValue, s => s.Age >= input.AgeStart.Value)
                .WhereIf(input.AgeEnd.HasValue, s => s.Age <= input.AgeEnd.Value)
 
                //建立日期區間查詢
                .WhereIf(input.CreationTimeStart.HasValue, s => s.CreationTime >= input.CreationTimeStart.Value)
                .WhereIf(input.CreationTimeEnd.HasValue, s => s.CreationTime <= input.CreationTimeEnd.Value)
                ;
        }

排序的處理，我們可以重寫下規則如下所示。

        /// <summary>
        /// 自定義排序處理
        /// </summary>
        /// <param name="query">可查詢LINQ</param>
        /// <param name="input">查詢條件Dto</param>
        /// <returns></returns>
        protected override IQueryable<Customer> ApplySorting(IQueryable<Customer> query, CustomerPagedDto input)
        {
            if (!string.IsNullOrEmpty(input.Sorting))//排序欄位是否有值
            {
                query = query.OrderBy(input.Sorting);
            }
            else
            {
                query = query.OrderByDescending(t => t.CreationTime);
            }
            return query;
        }

完成這些，我們就可以測試前端的介面效果了。

&n