Forráskód Böngészése

perf(views): 优化“网关协议列表管理”页面,支持按时间排序

wangcong 1 hónapja
szülő
commit
f145e99108
1 módosított fájl, 8 hozzáadás és 5 törlés
  1. 8 5
      src/views/gateway-protocol/GatewayProtocol.vue

+ 8 - 5
src/views/gateway-protocol/GatewayProtocol.vue

@@ -8,11 +8,12 @@ import { useRequest } from '@/hooks/request';
 import { useViewVisible } from '@/hooks/view-visible';
 import { t } from '@/i18n';
 import { deleteProtocolBaseInfo, getProtocolList, updateProtocolBaseInfo } from '@/api';
+import { getTablePageSorts } from '@/utils';
 
 import ProtocolContent from '../setup-protocol/ProtocolContent.vue';
 import SetupProtocol from '../setup-protocol/SetupProtocol.vue';
 
-import type { ColumnType } from 'ant-design-vue/es/table';
+import type { ColumnType, TableProps } from 'ant-design-vue/es/table';
 import type { PageParams, ProtocolBaseInfo } from '@/types';
 
 const protocolInitialInfo: Partial<ProtocolBaseInfo> = {
@@ -77,6 +78,7 @@ const columns = computed<ColumnType<ProtocolBaseInfo>[]>(() => {
       title: t('common.updateTime'),
       dataIndex: 'updateTime',
       key: 'updateTime',
+      sorter: true,
     },
     {
       title: t('common.operation'),
@@ -139,9 +141,10 @@ const handleDelete = (record: ProtocolBaseInfo) => {
   });
 };
 
-const handlePageChange = (page: number, pageSize: number) => {
-  pageParams.value.pageIndex = page;
-  pageParams.value.pageSize = pageSize;
+const handleProtocolTableChange: TableProps['onChange'] = (pagination, filters, sorter) => {
+  pageParams.value.pageIndex = pagination.current || 1;
+  pageParams.value.pageSize = pagination.pageSize || 10;
+  pageParams.value.pageSorts = getTablePageSorts(sorter);
   getProtocolData();
 };
 
@@ -204,9 +207,9 @@ const handleOk = () => {
         showSizeChanger: true,
         showQuickJumper: true,
         hideOnSinglePage: false,
-        onChange: handlePageChange,
         showTotal: (total) => $t('common.pageTotal', { total }),
       }"
+      @change="handleProtocolTableChange"
     >
       <template #bodyCell="{ column, record }">
         <span v-if="column.key === 'action'">