新增性能数据排序功能

src/views/perfManage/perfData/index.vue

@@ -30,6 +30,12 @@ let queryParams = reactive({
   neType: '',
   /**记录时间 */
   beginTime: '',
+  /**任务ID */
+  taskId: '',
+  /**排序字段 */
+  sortField: 'value',
+  /**排序方式 */
+  sortOrder: 'asc',
   endTime: '',
   /**当前页数 */
   pageNum: 1,
@@ -43,6 +49,8 @@ function fnQueryReset() {
     neType: '',
     beginTime: '',
     endTime: '',
+    sortField: 'value',
+    sortOrder: 'asc',
     pageNum: 1,
     pageSize: 20,
   });
@@ -108,34 +116,31 @@ let tableColumns: ColumnsType = [
   {
     title: t('views.perfManage.perfData.value'),
     dataIndex: 'value',
+    key: 'value',
     align: 'center',
-    sorter: (a: any, b: any) => {
-      return 1;
-    },
+    sorter: true,
   },
   {
     title: t('views.perfManage.perfData.startTime'),
     dataIndex: 'startTime',
+    key: 'start_time',
     align: 'center',
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    sorter: (a: any, b: any) => {
-      return 1;
-    },
+    sorter: true,
   },
   {
     title: t('views.perfManage.perfData.endTime'),
     dataIndex: 'endTime',
     align: 'center',
+    key: 'end_time',
     customRender(opt) {
       if (!opt.value) return '';
       return parseDateToStr(opt.value);
     },
-    sorter: (a: any, b: any) => {
-      return 1;
-    },
+    sorter: true,
   },
 ];
 
@@ -176,7 +181,7 @@ function fnTableSize({ key }: MenuInfo) {
 function fnGetList(pageNum?: number) {
   if (tableState.loading) return;
   tableState.loading = true;
-  if(pageNum){
+  if (pageNum) {
     queryParams.pageNum = pageNum;
   }
   if (!queryRangePicker.value) {
@@ -193,6 +198,18 @@ function fnGetList(pageNum?: number) {
   });
 }
 
+/**表格分页、排序、筛选变化时触发操作, 排序方式，取值为 ascend descend */
+function fnTableChange(pagination: any, filters: any, sorter: any, extra: any) {
+  const { columnKey, order } = sorter;
+  if (order) {
+    queryParams.sortField = columnKey;
+    queryParams.sortOrder = order.replace('end', '');
+  } else {
+    queryParams.sortOrder = 'asc';
+  }
+  fnGetList(1);
+}
+
 onMounted(() => {
   // 初始字典数据
   Promise.allSettled([getDict('alarm_status')]).then(resArr => {
@@ -217,8 +234,11 @@ onMounted(() => {
       <!-- 表格搜索栏 -->
       <a-form :model="queryParams" name="queryParams" layout="horizontal">
         <a-row :gutter="16">
-          <a-col :lg="6" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.perfData.type')" name="neType">
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.perfData.type')"
+              name="neType"
+            >
               <a-auto-complete
                 v-model:value="queryParams.neType"
                 :options="useNeInfoStore().getNeSelectOtions"
@@ -226,8 +246,21 @@ onMounted(() => {
               />
             </a-form-item>
           </a-col>
-          <a-col :lg="8" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.perfData.startTime')" name="queryRangePicker">
+
+          <a-col :lg="4" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.perfData.taskId')"
+              name="taskId"
+            >
+              <a-input v-model:value="queryParams.taskId" allow-clear></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :lg="10" :md="12" :xs="24">
+            <a-form-item
+              :label="t('views.perfManage.perfData.startTime')"
+              name="queryRangePicker"
+            >
               <a-range-picker
                 v-model:value="queryRangePicker"
                 allow-clear
@@ -316,6 +349,7 @@ onMounted(() => {
         :data-source="tableState.data"
         :size="tableState.size"
         :pagination="tablePagination"
+        @change="fnTableChange"
         :scroll="{ x: true }"
       >
         <template #bodyCell="{ column, record }">