diff --git a/backend/src/main/java/io/metersphere/api/dto/QueryAPIReportRequest.java b/backend/src/main/java/io/metersphere/api/dto/QueryAPIReportRequest.java
index acdd872aab..6ebfbf5220 100644
--- a/backend/src/main/java/io/metersphere/api/dto/QueryAPIReportRequest.java
+++ b/backend/src/main/java/io/metersphere/api/dto/QueryAPIReportRequest.java
@@ -1,8 +1,12 @@
 package io.metersphere.api.dto;
 
+import io.metersphere.controller.request.OrderRequest;
 import lombok.Getter;
 import lombok.Setter;
 
+import java.util.List;
+import java.util.Map;
+
 @Getter
 @Setter
 public class QueryAPIReportRequest {
@@ -12,5 +16,6 @@ public class QueryAPIReportRequest {
     private String name;
     private String workspaceId;
     private boolean recent = false;
-    
+    private List<OrderRequest> orders;
+    private Map<String, List<String>> filters;
 }
diff --git a/backend/src/main/java/io/metersphere/api/service/APIReportService.java b/backend/src/main/java/io/metersphere/api/service/APIReportService.java
index 56916e1bbe..3fbd7c11e2 100644
--- a/backend/src/main/java/io/metersphere/api/service/APIReportService.java
+++ b/backend/src/main/java/io/metersphere/api/service/APIReportService.java
@@ -11,12 +11,14 @@ import io.metersphere.base.mapper.ApiTestReportMapper;
 import io.metersphere.base.mapper.ext.ExtApiTestReportMapper;
 import io.metersphere.commons.constants.APITestStatus;
 import io.metersphere.commons.exception.MSException;
+import io.metersphere.commons.utils.ServiceUtils;
 import io.metersphere.commons.utils.SessionUtils;
 import io.metersphere.dto.DashboardTestDTO;
 import io.metersphere.i18n.Translator;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
+import javax.annotation.Resource;
 import java.nio.charset.StandardCharsets;
 import java.time.Instant;
 import java.time.temporal.ChronoUnit;
@@ -24,8 +26,6 @@ import java.util.List;
 import java.util.Objects;
 import java.util.UUID;
 
-import javax.annotation.Resource;
-
 @Service
 @Transactional(rollbackFor = Exception.class)
 public class APIReportService {
@@ -38,6 +38,7 @@ public class APIReportService {
     private ExtApiTestReportMapper extApiTestReportMapper;
 
     public List<APIReportResult> list(QueryAPIReportRequest request) {
+        request.setOrders(ServiceUtils.getDefaultOrder(request.getOrders()));
         return extApiTestReportMapper.list(request);
     }
 
diff --git a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
index f4fbacef30..6d0700e3cb 100644
--- a/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
+++ b/backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiTestReportMapper.xml
@@ -26,8 +26,23 @@
             <if test="request.workspaceId != null">
                 AND project.workspace_id = #{request.workspaceId,jdbcType=VARCHAR}
             </if>
+            <if test="request.filters != null and request.filters.size() > 0">
+                <foreach collection="request.filters.entrySet()" index="key" item="values">
+                    <if test="values != null and values.size() > 0">
+                        and r.${key} in
+                        <foreach collection="values" item="value" separator="," open="(" close=")">
+                            #{value}
+                        </foreach>
+                    </if>
+                </foreach>
+            </if>
         </where>
-        ORDER BY r.update_time DESC
+        <if test="request.orders != null and request.orders.size() > 0">
+            order by
+            <foreach collection="request.orders" separator="," item="order">
+                r.${order.name} ${order.type}
+            </foreach>
+        </if>
     </select>
 
     <select id="listByTestId" resultMap="BaseResultMap">
diff --git a/frontend/src/business/components/api/report/ApiReportList.vue b/frontend/src/business/components/api/report/ApiReportList.vue
index 7f35563e86..189d92d654 100644
--- a/frontend/src/business/components/api/report/ApiReportList.vue
+++ b/frontend/src/business/components/api/report/ApiReportList.vue
@@ -3,10 +3,12 @@
     <ms-main-container>
       <el-card class="table-card" v-loading="result.loading">
         <template v-slot:header>
-          <ms-table-header :is-tester-permission="true" :condition.sync="condition" @search="search" :title="$t('api_report.title')"
+          <ms-table-header :is-tester-permission="true" :condition.sync="condition" @search="search"
+                           :title="$t('api_report.title')"
                            :show-create="false"/>
         </template>
-        <el-table :data="tableData" class="table-content">
+        <el-table :data="tableData" class="table-content" @sort-change="sort"
+                  @filter-change="filter">
           <el-table-column :label="$t('commons.name')" width="200" show-overflow-tooltip>
             <template v-slot:default="scope">
               <el-link type="info" @click="handleView(scope.row)">{{ scope.row.name }}</el-link>
@@ -22,7 +24,7 @@
             </template>
           </el-table-column>
           <el-table-column prop="status" :label="$t('commons.status')"
-                           :filter-method="filter"
+                           column-key="status"
                            :filters="statusFilters">
             <template v-slot:default="{row}">
               <ms-api-report-status :row="row"/>
@@ -50,13 +52,14 @@
   import MsContainer from "../../common/components/MsContainer";
   import MsMainContainer from "../../common/components/MsMainContainer";
   import MsApiReportStatus from "./ApiReportStatus";
+  import {_filter, _sort} from "../../../../common/js/utils";
 
   export default {
     components: {MsApiReportStatus, MsMainContainer, MsContainer, MsTableHeader, MsTablePagination},
     data() {
       return {
         result: {},
-        condition: {name: ""},
+        condition: {},
         tableData: [],
         multipleSelection: [],
         currentPage: 1,
@@ -80,16 +83,14 @@
 
     methods: {
       search() {
-        let param = {
-          name: this.condition.name,
-        };
+
 
         if (this.testId !== 'all') {
-          param.testId = this.testId;
+          this.condition.testId = this.testId;
         }
 
         let url = "/api/report/list/" + this.currentPage + "/" + this.pageSize
-        this.result = this.$post(url, param, response => {
+        this.result = this.$post(url, this.condition, response => {
           let data = response.data;
           this.total = data.itemCount;
           this.tableData = data.listObject;
@@ -120,9 +121,18 @@
         this.testId = this.$route.params.testId;
         this.search();
       },
-      filter(value, row) {
-        return row.status === value;
-      }
+      /* filter(value, row) {
+         return row.status === value;
+       },*/
+      sort(column) {
+        _sort(column, this.condition);
+        this.init();
+      },
+      filter(filters) {
+        _filter(filters, this.condition);
+        this.init();
+      },
+
     },
 
     created() {
diff --git a/frontend/src/business/components/api/test/ApiTestList.vue b/frontend/src/business/components/api/test/ApiTestList.vue
index e18e44c165..43b1673f35 100644
--- a/frontend/src/business/components/api/test/ApiTestList.vue
+++ b/frontend/src/business/components/api/test/ApiTestList.vue
@@ -66,7 +66,7 @@
     data() {
       return {
         result: {},
-        condition: {name: ""},
+        condition: {},
         projectId: null,
         tableData: [],
         multipleSelection: [],
@@ -106,16 +106,14 @@
         this.$router.push('/api/test/create');
       },
       search() {
-        let param = {
-          name: this.condition.name,
-        };
+
 
         if (this.projectId !== 'all') {
-          param.projectId = this.projectId;
+          this.condition.projectId = this.projectId;
         }
 
         let url = "/api/list/" + this.currentPage + "/" + this.pageSize
-        this.result = this.$post(url, param, response => {
+        this.result = this.$post(url, this.condition, response => {
           let data = response.data;
           this.total = data.itemCount;
           this.tableData = data.listObject;