增加根据字段排序功能

src/modules/invoice/views/List.vue

 <template>
   <div>
     <app-card>
-      <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+      <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange" @sort-change="sortChange">
         <!-- 允许开具发票 -->
         <template v-slot:ticket_type="{ params }">
           <el-radio-group v-model="params.can_add_invoice">
@@ -129,7 +129,8 @@ export default {
             sales_rep_user_id: '',
             can_add_invoice: '',
             firstDate: '',
-            lastDate: ''
+            lastDate: '',
+            sort: ''
           },
           beforeRequest: this.beforeRequest,
           callback(data) {
@@ -193,7 +194,7 @@ export default {
           { label: '税额', prop: 'invoice_tax_rate_amount', align: 'center', minWidth: '100px' },
           { label: '不含税金额', prop: 'invoice_excluding_tax_amount', align: 'center', minWidth: '100px' },
           { label: '含税金额', prop: 'invoice_total_amount', align: 'center', minWidth: '100px' },
-          { label: '缴费时间', prop: 'final_payment_time', align: 'center', minWidth: '150px' },
+          { label: '缴费时间', prop: 'final_payment_time', align: 'center', minWidth: '150px', sortable: 'custom' },
           { label: '发票类型', prop: 'invoiceTypeViewName', align: 'center', minWidth: '100px' },
           { label: '抬头类型', prop: 'taxpayeTypeViewName', align: 'center', minWidth: '100px' },
           { label: '开票类型', prop: 'invoiceColorTypeViewName', align: 'center', minWidth: '100px' },
@@ -211,8 +212,14 @@ export default {
           { label: '收件人手机号', prop: 'recipient_mobile', align: 'center', minWidth: '150px' },
           { label: '邮箱地址', prop: 'recipient_email', align: 'center', minWidth: '300px' },
           { label: '票据跟进人', prop: 'sales_rep_user_id_name', align: 'center', minWidth: '100px' },
-          { label: '发票申请日期', prop: 'invoice_application_time', align: 'center', minWidth: '150px' },
-          { label: '开票时间', prop: 'invoice_issuing_time', align: 'center', minWidth: '150px' },
+          {
+            label: '发票申请日期',
+            prop: 'invoice_application_time',
+            align: 'center',
+            minWidth: '150px',
+            sortable: 'custom'
+          },
+          { label: '开票时间', prop: 'invoice_issuing_time', align: 'center', minWidth: '150px', sortable: 'custom' },
           { label: '发票状态', prop: 'invoiceStatusViewName', align: 'center', minWidth: '100px' },
           {
             label: '票据领取状态',
@@ -342,6 +349,17 @@ export default {
         return parseInt(findItem.value) === parseInt(item)
       })
       return found ? found.label : item
+    },
+    // 根据首次缴费时间排序
+    sortChange(columns) {
+      console.log(columns)
+      if (columns.order === 'ascending') {
+        this.tableOptions.remote.params.sort = columns.prop
+      } else {
+        columns.prop = '-' + columns.prop
+        this.tableOptions.remote.params.sort = columns.prop
+      }
+      this.$refs.list.refetch()
     }
   }
 }

src/modules/payment/views/List.vue

 <template>
   <app-card>
-    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange">
+    <app-list v-bind="tableOptions" ref="list" @selection-change="handleSelectionChange" @sort-change="sortChange">
       <!-- 允许开具发票 -->
       <template v-slot:can_add_invoice="{ params }">
         <el-radio-group v-model="params.can_add_invoice">
@@ -161,7 +161,8 @@ export default {
             first_payment_time_from: '',
             first_payment_time_to: '',
             final_payment_time_from: '',
-            final_payment_time_to: ''
+            final_payment_time_to: '',
+            sort: ''
           },
           beforeRequest: this.beforeRequest
         },
@@ -263,8 +264,14 @@ export default {
           { label: '项目', prop: 'project_id_name', align: 'center', minWidth: 150 },
           { label: '支付状态', prop: 'payment_status_name', align: 'center', minWidth: 100 },
           { label: '费用类型', prop: 'type_name', align: 'center', minWidth: 100 },
-          { label: '首次缴费时间', prop: 'first_payment_time', align: 'center', minWidth: 200 },
-          { label: '末次缴费时间', prop: 'final_payment_time', align: 'center', minWidth: 200 },
+          {
+            label: '首次缴费时间',
+            prop: 'first_payment_time',
+            align: 'center',
+            minWidth: 200,
+            sortable: 'custom'
+          },
+          { label: '末次缴费时间', prop: 'final_payment_time', align: 'center', minWidth: 200, sortable: 'custom' },
           { label: '应缴金额', prop: 'bill_total', align: 'center', minWidth: 100 },
           { label: '实缴金额', prop: 'amount_need_to_pay', align: 'center', minWidth: 100 },
           { label: '手续费', prop: 'service_charge', align: 'center', minWidth: 100 },
@@ -289,7 +296,13 @@ export default {
           { label: '账号', prop: 'channel_account', align: 'center', minWidth: 100 },
           { label: '开户行', prop: 'channel_bank_of_deposit', align: 'center', minWidth: 100 },
           { label: '所属班次', prop: 'bill_customer_class', align: 'center', minWidth: 200 },
-          { label: '开学时间', prop: 'bill_customer_class_start_time', align: 'center', minWidth: 200 },
+          {
+            label: '开学时间',
+            prop: 'bill_customer_class_start_time',
+            align: 'center',
+            minWidth: 200,
+            sortable: 'custom'
+          },
           { label: '学制期限', prop: 'bill_customer_class_length_of_schooling', align: 'center', minWidth: 100 },
           { label: '客户编号', prop: 'customer_id', align: 'center', minWidth: 300 },
           {
@@ -511,6 +524,17 @@ export default {
         const params = queryString.stringify(this.tableOptions.remote.params)
         window.open(`/api/finance/v1/payments/download?${params}`)
       })
+    },
+    // 根据首次缴费时间排序
+    sortChange(columns) {
+      console.log(columns)
+      if (columns.order === 'ascending') {
+        this.tableOptions.remote.params.sort = columns.prop
+      } else {
+        columns.prop = '-' + columns.prop
+        this.tableOptions.remote.params.sort = columns.prop
+      }
+      this.$refs.list.refetch()
     }
   }
 }