充值页面添加筛选字段

src/common/api/user/user.js

@@ -3,3 +3,6 @@ import axios from '../axios'
 export function getUserRechargeRecordListApi(params) {
   return axios.post('/pay/businessPayRecord/list_page', params)
 }
+export function getSubjectListApi(params) {
+  return axios.get('/pay/businessPayRecord/subjectList', params)
+}

src/views/user/rechargeRecord.vue

@@ -9,10 +9,25 @@
             clearable></el-input>
         </el-form-item>
         <el-form-item label="套餐版本">
-          <el-input
+          <el-select
             v-model="searchForm.subject"
-            placeholder="请输入客户"
-            clearable></el-input>
+            placeholder="请选择套餐版本"
+            clearable>
+            <el-option
+              v-for="(item, index) in subjectList"
+              :key="index"
+              :label="item.value"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="支付状态">
+          <el-select
+            v-model="searchForm.payStatus"
+            placeholder="请选择支付状态"
+            clearable>
+            <el-option label="已支付" value="已支付"></el-option>
+            <el-option label="待支付" value="待支付"></el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="交易号">
           <el-input
@@ -32,6 +47,17 @@
             placeholder="请输入业务类型"
             clearable></el-input>
         </el-form-item>
+        <el-form-item label="付款时间">
+          <el-date-picker
+            :default-time="['00:00:00', '23:59:59']"
+            v-model="searchForm.daterange"
+            type="datetimerange"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            range-separator="至"
+            :confirm="false"
+            start-placeholder="初始创建时间"
+            end-placeholder="结束创建时间"></el-date-picker>
+        </el-form-item>
         <el-form-item>
           <el-button
             type="primary"
@@ -51,6 +77,7 @@
         width="100%"
         height="100%"
         :highlight-current-row="true"
+        @sort-change="sortChange"
         header-row-class-name="header-row-class-name">
         <el-table-column
           label="序号"
@@ -104,6 +131,13 @@
           width="100"
           :show-overflow-tooltip="true"></el-table-column>
         <el-table-column
+          label="支付状态"
+          prop="payStatus"
+          header-align="center"
+          align="center"
+          width="100"
+          :show-overflow-tooltip="true"></el-table-column>
+        <el-table-column
           label="业务类型"
           prop="businessType"
           header-align="center"
@@ -149,6 +183,7 @@
 
         <el-table-column
           label="付款时间"
+          sortable="custom"
           prop="clientTime"
           header-align="center"
           align="center"
@@ -183,13 +218,18 @@
   </div>
 </template>
 <script>
-import { getUserRechargeRecordListApi } from '@/common/api/user/user'
+import {
+  getUserRechargeRecordListApi,
+  getSubjectListApi
+} from '@/common/api/user/user'
 
 export default {
   name: 'rechargeRecord',
   data() {
     return {
       period: [],
+      subjectList: [],
+      sortParmas: {},
       searchForm: {},
       total: 0,
       pageSize: 50,
@@ -200,14 +240,22 @@ export default {
   },
   async created() {
     this.loadData()
+    this.getSubjectList()
   },
   methods: {
-    async loadData() {
-      const data = {
+    async loadData(obj) {
+      let data = {
         ...this.searchForm,
         currentPage: this.currentPage,
         pageSize: this.pageSize
       }
+      if (this.searchForm.daterange?.length) {
+        data.minTime = this.searchForm.daterange[0]
+        data.maxTime = this.searchForm.daterange[1]
+      }
+      if (obj) {
+        data = { ...data, ...obj }
+      }
       this.loading = true
       try {
         const res = await getUserRechargeRecordListApi(data)
@@ -215,22 +263,37 @@ export default {
         this.rechargeRecordList = res.data.records
         this.total = res.data.total
       } catch (e) {
-        console.error(e)
+        console.log(e)
       } finally {
         this.loading = false
       }
     },
     search() {
       this.currentPage = 1
-      this.loadData()
+      this.loadData(this.sortParmas)
     },
     onCurrentChange(currentPage) {
       this.currentPage = currentPage
-      this.loadData()
+      this.loadData(this.sortParmas)
     },
     sizeChange(pageSize) {
       this.pageSize = pageSize
-      this.loadData()
+      this.loadData(this.sortParmas)
+    },
+    sortChange({ column, prop, order }) {
+      this.sortParmas = {
+        field: prop,
+        asc: order === 'ascending'
+      }
+      this.loadData(this.sortParmas)
+    },
+    async getSubjectList() {
+      try {
+        const { data } = await getSubjectListApi()
+        this.subjectList = data
+      } catch (error) {
+        console.log(error)
+      }
     }
   }
 }