按部就班VUE+Element 前端應用開發(30）--- ABP後端和Vue+Element前端結合的分頁排序處理

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

一、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
      })
    },

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

 

二、 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;
        }

完成這些，咱們就能夠測試前端的界面效果了。