fix: 修复选择会员组件分页器已知问题

src/components/RoleSelect/RoleSelect.tsx

@@ -32,6 +32,7 @@ function RoleSelect(props: RoleSelectProps) {
   const [dataSource, setDataSource] = useState([])
   const [total, setTotal] = useState(0)
   const [current, setCurrent] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
 
   const showDrawer = useCallback(() => {
     setVisible(true)
@@ -106,12 +107,16 @@ function RoleSelect(props: RoleSelectProps) {
             columns={TableMemberColumn}
             dataSource={dataSource}
             pagination={{
-              total: total,
-              pageSize: 10,
-              current: current,
-              onChange: (page: number) => {
-                form.setFieldsValue({ 'current': page });
-                setCurrent(page);
+              position: ['bottomCenter'],
+              total,
+              pageSize,
+              current,
+              showTotal: (total: number, range: [number, number]) => (`共 ${total} 条`),
+              showQuickJumper: true,
+              onChange: (page: number, pageSize: number) => {
+                form.setFieldsValue({ 'current': page })
+                setCurrent(page)
+                setPageSize(pageSize)
                 fetchData()
               }
             }}

src/pages/order/deliveryPlanManagement/deliveryPlanAwaitSRM/create.tsx

@@ -7,7 +7,7 @@
  import { history } from 'umi'
  import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
  import { BaseInfo as base_Info, Remarks, PlanningCycle, SupplyMembersLabel, PlanSummary, ExternalState, Circulation, Purchaser, SubmitDeliveryPlan, Supplier, ConfirmDeliveryPlan, PlannedDelivery, DeliveryPlanText, DeliveryPlanRemark, CreateDeliveryPlanTitleSRM } from '../../constants'
- import { Button, DatePicker, Form, Input, InputNumber, message, Space, Steps, Table } from 'antd'
+ import { Button, DatePicker, Form, Input, InputNumber, message, Space, Spin, Steps, Table } from 'antd'
  import { SaveOutlined } from '@ant-design/icons'
  import BaseInfo from '@/components/BaseInfo/BaseInfo'
  import _ from 'lodash'
@@ -54,8 +54,10 @@ const initExpandIconColumn = [
    const [form] = Form.useForm()
    const datesRef = useRef<any>(null)
    const materialTableDataRef = useRef(null)
- 
-   const [iAnchors, setiAnchors] = useState<AnchorsItem[]>([
+
+   const [spinning, setSpinning] = useState<boolean>(false)
+
+   const [iAnchors, setIAnchors] = useState<AnchorsItem[]>([
      Circulation,
      base_Info,
      PlannedDelivery,
@@ -78,8 +80,6 @@ const initExpandIconColumn = [
    const [selectedMember, setSelectedMember] = useState<any>({})
    // 计划送货物料 列表
    const [materialTableData, setMaterialTableData] = useState<any>(null)
-   //  外部流转单据记录
-   const [externalRoamRecordData, setExternalRoamRecordData] = useState<any>(null)
  
    // 保存
    const save = () => {
@@ -87,8 +87,10 @@ const initExpandIconColumn = [
        // console.log('values :>> ', values)
        if (_.isEmpty(materialTableDataRef.current)) {
          message.warning('没有找到可执行计划送货')
+         setSpinning(false)
          return
        }
+       setSpinning(true)
        const productList = materialTableDataRef.current.map((item: any) => {
          return {
            ...item,
@@ -111,7 +113,12 @@ const initExpandIconColumn = [
          remark: values.remark,
          productList
        }).then((res: any) => {
-         console.log('保存 :>> ', res)
+        setSpinning(false)
+         if (res.code === 1000) {
+            history.goBack()
+         }
+       }).catch(err => {
+         setSpinning(false)
        })
      })
    }
@@ -202,88 +209,90 @@ const initExpandIconColumn = [
    }, [selectedDate, selectedMember])
  
    return (
-     <AnchorPage
-       title={CreateDeliveryPlanTitleSRM}
-       onBack={() => history.goBack()}
-       anchors={iAnchors}
-       extra={
-         <Space>
-           {/* <Button>保存并新增</Button> */}
-           <Button type='primary' icon={<SaveOutlined />} onClick={save}>保存</Button>
-         </Space>
-       }
-     >
-       <Form
-         labelAlign='left'
-         form={form}
-       >
-         <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
-           <Steps progressDot current={0}>
-             <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
-             <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
-           </Steps>
-         </BaseInfo>
-         <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
-           <Form.Item
-             {...formItemLayout}
-             label={PlanningCycle}
-             name='dates'
-             rules={[
-               { required: true, message: '请选择' }
-             ]}
-           >
-             <DatePicker.RangePicker style={{ width: '100%' }} onChange={(dates) => handleDateAssembleColumn(dates)} />
-           </Form.Item>
- 
-           <Form.Item
-             {...formItemLayout}
-             label={SupplyMembersLabel}
-             name='memberId'
-             rules={[
-               { required: true, message: '请选择' }
-             ]}
-           >
-             <RoleSelect
-               request={getMemberManageLowerMerchantProviderPage}
-               onChange={handleMemberInfo}
-               params={{ current: '1', pageSize: '100' }}
-             />
-           </Form.Item>
- 
-           <Form.Item
-             {...formItemLayout}
-             label={PlanSummary}
-             name='planSummaryText'
-             rules={[
-               { required: true, message: '请选择' }
-             ]}
-           >
-             <Input />
-           </Form.Item>
-         </BaseInfo>
-         <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
-           <Table
-             // defaultExpandAllRows
-             rowKey={'skuId'}
-             columns={materialTableColumn}
-             expandedRowRender={expandedRowRender}
-             dataSource={materialTableData}
-             tableLayout="fixed"
-             scroll={{ x: 2022 }}
-           />
-         </BaseInfo>
-         <BaseInfo className='mt-16' title={Remarks.name} id={Remarks.key} cols={1}>
-           <Form.Item
-             name='remark'
-             rules={[
-               { required: true, message: '请输入' }
-             ]}
-           >
-             <Input.TextArea rows={4} maxLength={300} placeholder={DeliveryPlanRemark} />
-           </Form.Item>
-         </BaseInfo>
-       </Form>
-     </AnchorPage>
+     <Spin spinning={spinning}>
+      <AnchorPage
+        title={CreateDeliveryPlanTitleSRM}
+        onBack={() => history.goBack()}
+        anchors={iAnchors}
+        extra={
+          <Space>
+            {/* <Button>保存并新增</Button> */}
+            <Button type='primary' icon={<SaveOutlined />} onClick={save}>保存</Button>
+          </Space>
+        }
+      >
+        <Form
+          labelAlign='left'
+          form={form}
+        >
+          <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
+            <Steps progressDot current={0}>
+              <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
+              <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
+            </Steps>
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
+            <Form.Item
+              {...formItemLayout}
+              label={PlanningCycle}
+              name='dates'
+              rules={[
+                { required: true, message: '请选择' }
+              ]}
+            >
+              <DatePicker.RangePicker style={{ width: '100%' }} onChange={(dates) => handleDateAssembleColumn(dates)} />
+            </Form.Item>
+  
+            <Form.Item
+              {...formItemLayout}
+              label={SupplyMembersLabel}
+              name='memberId'
+              rules={[
+                { required: true, message: '请选择' }
+              ]}
+            >
+              <RoleSelect
+                request={getMemberManageLowerMerchantProviderPage}
+                onChange={handleMemberInfo}
+                params={{ current: '1', pageSize: '100' }}
+              />
+            </Form.Item>
+  
+            <Form.Item
+              {...formItemLayout}
+              label={PlanSummary}
+              name='planSummaryText'
+              rules={[
+                { required: true, message: '请选择' }
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
+            <Table
+              // defaultExpandAllRows
+              rowKey={'skuId'}
+              columns={materialTableColumn}
+              expandedRowRender={expandedRowRender}
+              dataSource={materialTableData}
+              tableLayout="fixed"
+              scroll={{ x: 2022 }}
+            />
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={Remarks.name} id={Remarks.key} cols={1}>
+            <Form.Item
+              name='remark'
+              rules={[
+                { required: true, message: '请输入' }
+              ]}
+            >
+              <Input.TextArea rows={4} maxLength={300} placeholder={DeliveryPlanRemark} />
+            </Form.Item>
+          </BaseInfo>
+        </Form>
+      </AnchorPage>
+     </Spin>
    )
  }
  

src/pages/order/deliveryPlanManagement/deliveryPlanAwaitSRM/update.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { history, useHistory } from 'umi'
 import AnchorPage, { AnchorsItem } from '@/components/AnchorPage'
 import { BaseInfo as base_Info, Remarks, PlanningCycle, SupplyMembersLabel, PlanSummary, ExternalRoamRecord, ExternalState, Circulation, Purchaser, SubmitDeliveryPlan, Supplier, ConfirmDeliveryPlan, PlannedDelivery, DeliveryPlanRemark } from '../../constants'
-import { Button, Form, Input, InputNumber, message, Space, Steps, Table, Tag } from 'antd'
+import { Button, Form, Input, InputNumber, message, Space, Spin, Steps, Table, Tag } from 'antd'
 import { SaveOutlined } from '@ant-design/icons'
 import BaseInfo from '@/components/BaseInfo/BaseInfo'
 import { ExternalRoamRecordTableColumn } from '../../constants/page-table-column'
@@ -32,7 +32,9 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
   const datesRef = useRef(null)
   const materialTableDataRef = useRef(null)
 
-  const [iAnchors, setiAnchors] = useState<AnchorsItem[]>([
+  const [spinning, setSpinning] = useState<boolean>(false)
+
+  const [iAnchors, setIAnchors] = useState<AnchorsItem[]>([
     Circulation,
     base_Info,
     PlannedDelivery,
@@ -85,6 +87,7 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
         message.warning('没有找到可执行计划送货')
         return
       }
+      setSpinning(true)
       const orders = materialTableDataRef.current.flatMap((item: any) => item.orders).flatMap((o: any) => ({
         ...o,
         planDays: Object.keys(o).filter((f: any) => f.startsWith('$')).map((p: any) => o[p])
@@ -95,7 +98,12 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
         remark: values.remark,
         orders
       }).then((res: any) => {
-        console.log('保存 :>> ', res)
+        setSpinning(false)
+        if (res.code === 1000) {
+          history.goBack()
+        }
+      }).catch(err => {
+        setSpinning(false)
       })
     })
   }
@@ -181,79 +189,81 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
   }, [])
 
   return (
-    <AnchorPage
-      title={details?.planNo}
-      onBack={() => history.goBack()}
-      anchors={iAnchors}
-      extra={
-        <Space>
-          <Button type='primary' icon={<SaveOutlined />} onClick={save}>保存</Button>
-        </Space>
-      }
-    >
-      <Form
-        labelAlign='left'
-        form={form}
+    <Spin spinning={spinning}>
+      <AnchorPage
+        title={details?.planNo}
+        onBack={() => history.goBack()}
+        anchors={iAnchors}
+        extra={
+          <Space>
+            <Button type='primary' icon={<SaveOutlined />} onClick={save}>保存</Button>
+          </Space>
+        }
       >
-        <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
-          <Steps progressDot current={0}>
-            <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
-            <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
-          </Steps>
-        </BaseInfo>
-        <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
-          <BaseInfo.BaseInfoItem label={PlanningCycle}> {moment(details?.planStartTime).format('YYYY-MM-DD')} ~ {moment(details?.planEndTime).format('YYYY-MM-DD')} </BaseInfo.BaseInfoItem>
+        <Form
+          labelAlign='left'
+          form={form}
+        >
+          <BaseInfo className='mt-0' title={Circulation.name} id={Circulation.key} cols={1}>
+            <Steps progressDot current={0}>
+              <Steps.Step title={Purchaser} description={SubmitDeliveryPlan} />
+              <Steps.Step title={Supplier} description={ConfirmDeliveryPlan} />
+            </Steps>
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={base_Info.name} id={base_Info.key}>
+            <BaseInfo.BaseInfoItem label={PlanningCycle}> {moment(details?.planStartTime).format('YYYY-MM-DD')} ~ {moment(details?.planEndTime).format('YYYY-MM-DD')} </BaseInfo.BaseInfoItem>
 
-          <BaseInfo.BaseInfoItem label={SupplyMembersLabel}> {details?.vendorMemberName} </BaseInfo.BaseInfoItem>
+            <BaseInfo.BaseInfoItem label={SupplyMembersLabel}> {details?.vendorMemberName} </BaseInfo.BaseInfoItem>
 
-          <Form.Item
-            {...formItemLayout}
-            label={PlanSummary}
-            name='planSummaryText'
-            rules={[
-              { required: true, message: '请输入' }
-            ]}
-          >
-            <Input />
-          </Form.Item>
+            <Form.Item
+              {...formItemLayout}
+              label={PlanSummary}
+              name='planSummaryText'
+              rules={[
+                { required: true, message: '请输入' }
+              ]}
+            >
+              <Input />
+            </Form.Item>
 
-          <BaseInfo.BaseInfoItem label={ExternalState}>
-            <Tag color={tagStatus.getTagStyle(details?.status).bgColor}>
-              <span style={{ color: tagStatus.getTagStyle(details?.status).fontColor }}>{statusTxt.get(details?.status)}</span>
-            </Tag>
-          </BaseInfo.BaseInfoItem>
-        </BaseInfo>
-        <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
-          <Table
-            // defaultExpandAllRows
-            rowKey={'skuId'}
-            columns={materialTableColumn}
-            expandedRowRender={expandedRowRender}
-            dataSource={materialTableData}
-            tableLayout="fixed"
-            scroll={{ x: 2022 }}
-          />
-        </BaseInfo>
-        <BaseInfo className='mt-16' title={Remarks.name} id={Remarks.key} cols={1}>
-          <Form.Item
-            name='remark'
-            rules={[
-              { required: true, message: '请输入' }
-            ]}
-          >
-            <Input.TextArea rows={4} maxLength={300} placeholder={DeliveryPlanRemark} />
-          </Form.Item>
-        </BaseInfo>
-        <BaseInfo className='mt-16' title={ExternalRoamRecord.name} id={ExternalRoamRecord.key} cols={1}>
-          <Table
-            rowKey={'id'}
-            dataSource={externalRoamRecordData}
-            columns={ExternalRoamRecordTableColumn}
-            pagination={false}
-          />
-        </BaseInfo>
-      </Form>
-    </AnchorPage>
+            <BaseInfo.BaseInfoItem label={ExternalState}>
+              <Tag color={tagStatus.getTagStyle(details?.status).bgColor}>
+                <span style={{ color: tagStatus.getTagStyle(details?.status).fontColor }}>{statusTxt.get(details?.status)}</span>
+              </Tag>
+            </BaseInfo.BaseInfoItem>
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
+            <Table
+              // defaultExpandAllRows
+              rowKey={'skuId'}
+              columns={materialTableColumn}
+              expandedRowRender={expandedRowRender}
+              dataSource={materialTableData}
+              tableLayout="fixed"
+              scroll={{ x: 2022 }}
+            />
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={Remarks.name} id={Remarks.key} cols={1}>
+            <Form.Item
+              name='remark'
+              rules={[
+                { required: true, message: '请输入' }
+              ]}
+            >
+              <Input.TextArea rows={4} maxLength={300} placeholder={DeliveryPlanRemark} />
+            </Form.Item>
+          </BaseInfo>
+          <BaseInfo className='mt-16' title={ExternalRoamRecord.name} id={ExternalRoamRecord.key} cols={1}>
+            <Table
+              rowKey={'id'}
+              dataSource={externalRoamRecordData}
+              columns={ExternalRoamRecordTableColumn}
+              pagination={false}
+            />
+          </BaseInfo>
+        </Form>
+      </AnchorPage>
+    </Spin>
   )
 }