Sfoglia il codice sorgente

修复机柜管理和详情的分页器样式

pm 5 mesi fa
parent
commit
15a9cd10c8

+ 38 - 12
src/components/lockCabinet/SlotsList.tsx

@@ -268,21 +268,47 @@ export default function SlotsList({ cabinetId }: SlotsListProps) {
           dataSource={list}
           rowSelection={rowSelection}
           columns={columns}
-          pagination={{
-            current: queryParams.pageNo,
-            pageSize: queryParams.pageSize,
-            total: total,
-            showSizeChanger: true,
-            showTotal: (total) => `共 ${total} 条`,
-            onChange: (page, pageSize) => {
-              const newParams = { ...queryParams, pageNo: page, pageSize };
-              setQueryParams(newParams);
-              getList(newParams);
-            },
-          }}
+          pagination={false}
+          scroll={{ x: 'max-content' }}
         />
       </div>
 
+      {/* 分页 */}
+      {!loading && list.length > 0 && (
+        <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600">
+              共 <span className="text-blue-600 font-medium">{total}</span> 条记录
+            </div>
+            <div className="flex gap-2">
+              <Button
+                onClick={() => {
+                  const newParams = { ...queryParams, pageNo: queryParams.pageNo - 1 };
+                  setQueryParams(newParams);
+                  getList(newParams);
+                }}
+                disabled={queryParams.pageNo <= 1}
+              >
+                上一页
+              </Button>
+              <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
+                {queryParams.pageNo} / {Math.ceil(total / queryParams.pageSize) || 1}
+              </span>
+              <Button
+                onClick={() => {
+                  const newParams = { ...queryParams, pageNo: queryParams.pageNo + 1 };
+                  setQueryParams(newParams);
+                  getList(newParams);
+                }}
+                disabled={queryParams.pageNo >= Math.ceil(total / queryParams.pageSize)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 表单弹窗 */}
       <SlotForm ref={formRef} onSuccess={getList} cabinetId={cabinetId} />
     </div>

+ 38 - 11
src/components/lockCabinet/SystemLockCabinetManagement.tsx

@@ -429,20 +429,47 @@ export default function SystemLockCabinetManagement() {
               ),
             },
           ]}
-          pagination={{
-            current: queryParams.pageNo,
-            pageSize: queryParams.pageSize,
-            total: total,
-            showTotal: (total) => `共 ${total} 条记录`,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            onChange: (page, pageSize) => {
-              setQueryParams(prev => ({ ...prev, pageNo: page, pageSize: pageSize || 10 }));
-            },
-          }}
+          pagination={false}
+          scroll={{ x: 'max-content' }}
         />
       </div>
 
+      {/* 分页 */}
+      {!loading && list.length > 0 && (
+        <div className="bg-white rounded-lg border border-gray-200 px-6 py-4">
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-gray-600">
+              共 <span className="text-blue-600 font-medium">{total}</span> 条记录
+            </div>
+            <div className="flex gap-2">
+              <Button
+                onClick={() => {
+                  const newParams = { ...queryParams, pageNo: queryParams.pageNo - 1 };
+                  setQueryParams(newParams);
+                  getList(newParams);
+                }}
+                disabled={queryParams.pageNo <= 1}
+              >
+                上一页
+              </Button>
+              <span className="px-4 py-2 text-sm text-gray-600 flex items-center">
+                {queryParams.pageNo} / {Math.ceil(total / queryParams.pageSize) || 1}
+              </span>
+              <Button
+                onClick={() => {
+                  const newParams = { ...queryParams, pageNo: queryParams.pageNo + 1 };
+                  setQueryParams(newParams);
+                  getList(newParams);
+                }}
+                disabled={queryParams.pageNo >= Math.ceil(total / queryParams.pageSize)}
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 表单弹窗 */}
       <LockCabinetForm ref={formRef} onSuccess={() => {
         // 编辑成功后刷新列表