🔥 clean: update list demo (#6779)

* 🔥 clean: update list demo

* fix ts error

mock/listTableList.ts

@@ -45,30 +45,45 @@ function getRule(req: Request, res: Response, u: string) {
     ((current as number) - 1) * (pageSize as number),
     (current as number) * (pageSize as number),
   );
-  if (params.sorter) {
+  const sorter = JSON.parse(params.sorter as any);
-    const s = params.sorter.split('_');
+  if (sorter) {
     dataSource = dataSource.sort((prev, next) => {
-      if (s[1] === 'descend') {
+      let sortNumber = 0;
-        return next[s[0]] - prev[s[0]];
+      Object.keys(sorter).forEach((key) => {
+        if (sorter[key] === 'descend') {
+          if (prev[key] - next[key] > 0) {
+            sortNumber += -1;
+          } else {
+            sortNumber += 1;
+          }
+          return;
+        }
+        if (prev[key] - next[key] > 0) {
+          sortNumber += 1;
+        } else {
+          sortNumber += -1;
         }
-      return prev[s[0]] - next[s[0]];
+      });
+      return sortNumber;
     });
   }
-
+  if (params.filter) {
-  if (params.status) {
+    const filter = JSON.parse(params.filter as any) as {
-    const status = params.status.split(',');
+      [key: string]: string[];
-    let filterDataSource: TableListItem[] = [];
+    };
-    status.forEach((s: string) => {
+    if (Object.keys(filter).length > 0) {
-      filterDataSource = filterDataSource.concat(
+      dataSource = dataSource.filter((item) => {
-        dataSource.filter((item) => {
+        return Object.keys(filter).some((key) => {
-          if (parseInt(`${item.status}`, 10) === parseInt(s.split('')[0], 10)) {
+          if (!filter[key]) {
+            return true;
+          }
+          if (filter[key].includes(`${item[key]}`)) {
             return true;
           }
           return false;
-        }),
-      );
         });
-    dataSource = filterDataSource;
+      });
+    }
   }
 
   if (params.name) {

src/pages/ListTableList/data.d.ts

@@ -25,11 +25,12 @@ export interface TableListData {
 }
 
 export interface TableListParams {
-  sorter?: string;
   status?: string;
   name?: string;
   desc?: string;
   key?: number;
   pageSize?: number;
   currentPage?: number;
+  filter?: { [key: string]: any[] };
+  sorter?: { [key: string]: any };
 }

src/pages/ListTableList/index.tsx

@@ -3,7 +3,6 @@ import { Button, Divider, Dropdown, Menu, message, Input } from 'antd';
 import React, { useState, useRef } from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
-import { SorterResult } from 'antd/es/table/interface';
 
 import CreateForm from './components/CreateForm';
 import UpdateForm, { FormValueType } from './components/UpdateForm';
@@ -73,7 +72,6 @@ const handleRemove = async (selectedRows: TableListItem[]) => {
 };
 
 const TableList: React.FC<{}> = () => {
-  const [sorter, setSorter] = useState<string>('');
   const [createModalVisible, handleModalVisible] = useState<boolean>(false);
   const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
   const [stepFormValues, setStepFormValues] = useState({});
@@ -156,15 +154,6 @@ const TableList: React.FC<{}> = () => {
         headerTitle="查询表格"
         actionRef={actionRef}
         rowKey="key"
-        onChange={(_, _filter, _sorter) => {
-          const sorterResult = _sorter as SorterResult<TableListItem>;
-          if (sorterResult.field) {
-            setSorter(`${sorterResult.field}_${sorterResult.order}`);
-          }
-        }}
-        params={{
-          sorter,
-        }}
         toolBarRender={(action, { selectedRows }) => [
           <Button type="primary" onClick={() => handleModalVisible(true)}>
             <PlusOutlined /> 新建
@@ -200,7 +189,7 @@ const TableList: React.FC<{}> = () => {
             </span>
           </div>
         )}
-        request={(params) => queryRule(params)}
+        request={(params, sorter, filter) => queryRule({ ...params, sorter, filter })}
         columns={columns}
         rowSelection={{}}
       />