循序漸進VUE+Element 前端應用開發(30）--- ABP后端和Vue+Element前端結合的分頁排序處理

本文轉載自查看原文 2020-12-31 10:15 1049 循序漸進VUE+Element

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

1、Vue+Element前端的排序代碼

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

在列中設置sortable屬性即可實現以該列為基准的排序，接受一個Boolean，默認為false。可以通過 Table 的default-sort屬性設置默認的排序列和排序順序。可以使用sort-method或者sort-by使用自定義的排序規則。如果需要后端排序，需將sortable設置為custom，同時在 Table 上監聽sort-change事件，在事件回調中可以獲取當前排序的字段名和排序順序，從而向接口請求排序后的表格數據。在本例中，我們還使用了formatter屬性，它用於格式化指定列的值，接受一個Function，會傳入兩個參數：row和column，可以根據自己的需求進行處理。

根據上面說明，我們這里采取的是后端排序，將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;
        }