feat: 外卖商品添加分页

src/pages/GoodsManage/Takeaway/components/GoodsGroup.jsx

@@ -34,18 +34,23 @@ const GoodsGroup = options => {
   };
 
   const getGroupList = async () => {
-    const res = await apiStorageList({
-      shopId: options.shopId,
-    });
-    if (res && res.data && res.data.length > 0) {
-      const arr = res.data
-        .sort((x, y) => x.priority - y.priority)
-        .map(item => ({
-          text: item.name,
-          id: item.rackId,
-        }));
-      setTags(arr);
-      setSelected(res.data[0].rackId);
+    if (options.shopId) {
+      const res = await apiStorageList({
+        shopId: options.shopId,
+      });
+      if (res && res.data && res.data.length > 0) {
+        const arr = res.data
+          .sort((x, y) => x.priority - y.priority)
+          .map(item => ({
+            text: item.name,
+            id: item.rackId,
+          }));
+        setTags(arr);
+        setSelected(res.data[0].rackId);
+      } else {
+        setTags([]);
+        setSelected(0);
+      }
     } else {
       setTags([]);
       setSelected(0);

src/pages/GoodsManage/Takeaway/index.jsx

 import React, { useState, useEffect, useCallback, useMemo } from 'react';
-import { Spin, Table, Modal, message, notification } from 'antd';
+import { Spin, Table, Pagination, message, notification } from 'antd';
 import { unstable_batchedUpdates } from 'react-dom';
 import { MenuOutlined, HolderOutlined, FormOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
@@ -21,6 +21,8 @@ const Takeaway = options => {
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [shopId, setShopId] = useState(0);
   const [groupId, setGroupId] = useState(0);
+  const [pageNo, setPageNo] = useState(1);
+  const [pageSize, setPageSize] = useState(50);
   const [loading, setLoading] = useState(false);
   const [actionLoading, setActionLoading] = useState(false);
   const [visibleWeekTime, setVisibleWeekTime] = useState(false);
@@ -37,9 +39,9 @@ const Takeaway = options => {
   const getDataList = async () => {
     setLoading(true);
     const params = Object.assign({}, options.searchValue, {
-      pageNo: 1,
+      pageNo,
       productType: 5,
-      pageSize: 100000,
+      pageSize,
       storageRackId: groupId,
     });
     const productCategoryId = options.searchValue?.productCategoryId || [];
@@ -51,6 +53,13 @@ const Takeaway = options => {
       setTableData(res.data.records);
     }
   };
+  const onPageChange = (page, size) => {
+    unstable_batchedUpdates(() => {
+      setPageNo(page);
+      setPageSize(size);
+    });
+    getDataList();
+  };
 
   const onSortEnd = async ({ oldIndex, newIndex }) => {
     if (oldIndex !== newIndex) {
@@ -188,6 +197,20 @@ const Takeaway = options => {
             },
           }}
         />
+        <br />
+        {(tableData && (
+          <Pagination
+            className={styles['takeawayBox--page']}
+            onChange={onPageChange}
+            total={tableData.total}
+            showTotal={total => `共${total}条`}
+            current={pageNo}
+            pageSize={pageSize}
+            showSizeChanger
+            onShowSizeChange={onPageChange}
+          />
+        )) ||
+          ''}
       </Spin>
       <WeekTime
         visible={visibleWeekTime}

src/pages/GoodsManage/style.less

@@ -141,6 +141,11 @@
   margin-top: 20px;
   padding-bottom: 40px;
   background-color: #fff;
+  &--page {
+    padding-top: 10px;
+    padding-left: 30px;
+    text-align: left;
+  }
 }
 .groupBox {
   padding: 0 24px 15px 24px;