fix(ProTableCard): 修复分页查询参数错误问题；添加loading

src/components/ProTableCard/index.less

@@ -88,6 +88,20 @@
       display: none;
     }
   }
+
+  .mask-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    display: none;
+    width: 100%;
+    height: 100%;
+
+    &.show {
+      display: block;
+    }
+  }
 }
 
 .iot-card {

src/components/ProTableCard/index.tsx

@@ -6,6 +6,7 @@ import { isFunction } from 'lodash';
 import { Empty, Pagination, Space } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
+import LoadingComponent from '@ant-design/pro-layout/es/PageLoading';
 import './index.less';
 
 enum ModelEnum {
@@ -36,6 +37,7 @@ const ProTableCard = <
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(Default_Size * 2); // 每页条数
   const [column, setColumn] = useState(props.gridColumn || 4);
+  const [loading, setLoading] = useState(false);
 
   /**
    * 处理 Card
@@ -82,6 +84,11 @@ const ProTableCard = <
 
   const pageSizeOptions = [Default_Size * 2, Default_Size * 4, Default_Size * 8, Default_Size * 16];
 
+  useEffect(() => {
+    setCurrent(1);
+    setPageIndex(0);
+  }, [props.params]);
+
   return (
     <div className={'pro-table-card'}>
       <ProTable<T, U, ValueType>
@@ -112,6 +119,10 @@ const ProTableCard = <
           }
           return {};
         }}
+        onLoadingChange={(l) => {
+          console.log(l);
+          setLoading(!!l);
+        }}
         pagination={{
           onChange: (page, size) => {
             setCurrent(page);
@@ -163,25 +174,30 @@ const ProTableCard = <
         }
       />
       {model === ModelEnum.CARD && (
-        <Pagination
-          showSizeChanger
-          size="small"
-          className={'pro-table-card-pagination'}
-          total={total}
-          current={current}
-          onChange={(page, size) => {
-            setCurrent(page);
-            setPageIndex(page - 1);
-            setPageSize(size);
-          }}
-          pageSizeOptions={pageSizeOptions}
-          pageSize={pageSize}
-          showTotal={(num) => {
-            const minSize = pageIndex * pageSize + 1;
-            const MaxSize = (pageIndex + 1) * pageSize;
-            return `第 ${minSize} - ${MaxSize > num ? num : MaxSize} 条/总共 ${num} 条`;
-          }}
-        />
+        <>
+          <div className={classNames('mask-loading', { show: loading })}>
+            <LoadingComponent />
+          </div>
+          <Pagination
+            showSizeChanger
+            size="small"
+            className={'pro-table-card-pagination'}
+            total={total}
+            current={current}
+            onChange={(page, size) => {
+              setCurrent(page);
+              setPageIndex(page - 1);
+              setPageSize(size);
+            }}
+            pageSizeOptions={pageSizeOptions}
+            pageSize={pageSize}
+            showTotal={(num) => {
+              const minSize = pageIndex * pageSize + 1;
+              const MaxSize = (pageIndex + 1) * pageSize;
+              return `第 ${minSize} - ${MaxSize > num ? num : MaxSize} 条/总共 ${num} 条`;
+            }}
+          />
+        </>
       )}
     </div>
   );