fix: 修复送货计划管理嵌套表格细节问题

src/global/styles/global.less

@@ -442,6 +442,7 @@ a {
   }
 }
 
+//  定制化日期选择器(DatePicker.RangePicker通过css重写拆分成2个框)
 .datePicker-range-separate {
   padding: 0 !important;
   background-color: #FFF !important;
@@ -485,3 +486,12 @@ a {
     }
   }
 }
+
+// 定制化嵌套表格左边带主题色boxer线条
+.customizationTable {
+  .ant-table-expanded-row {
+    .ant-table-expanded-row-fixed {
+      border-left: 2px solid @primary-color;
+    }
+  }
+}
\ No newline at end of file

src/pages/order/constants/page-table-column.tsx

@@ -128,20 +128,20 @@ export const DeliveryGoodsTableColumn: any = [
 
 //  送货计划管理，协同  B2B通用 column
 export const columnB2B = [
-  { ...CommodityNoColumn, dataIndex: 'skuId', width: 80, ellipsis: true, fixed: 'left' },
-  { ...TradeNameColumn, dataIndex: 'productName', width: 192, ellipsis: true, fixed: 'left' },
+  { ...CommodityNoColumn, dataIndex: 'skuId', width: 110, ellipsis: true, fixed: 'left' },
+  { ...TradeNameColumn, dataIndex: 'productName', width: 254, ellipsis: true, fixed: 'left' },
   { ...ClassColumn, dataIndex: 'category', width: 128, ellipsis: true, fixed: 'left' },
-  { ...BrandColumn, dataIndex: 'brand', width: 96, ellipsis: true, },
-  { ...UntilColumn, dataIndex: 'unit', width: 64, ellipsis: true, },
-  { ...OrderNumColumn, dataIndex: 'purchaseCountSum', width: 96, ellipsis: true, },
+  { ...BrandColumn, dataIndex: 'brand', width: 128, ellipsis: true, fixed: 'left' },
+  { ...UntilColumn, dataIndex: 'unit', width: 64, ellipsis: true, fixed: 'left' },
+  { ...OrderNumColumn, dataIndex: 'purchaseCountSum', width: 96, ellipsis: true, fixed: 'left' },
   { ...ConsigneeNumColumn, dataIndex: 'receiveCountSum', width: 96, ellipsis: true, },
   { ...TransitNumColumn, dataIndex: 'transitCountSum', width: 96, ellipsis: true, },
   { ...DeliveredNumColumn, dataIndex: 'leftCountSum', width: 96, ellipsis: true, },
-  { ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 128, ellipsis: true, },
+  { ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 104, ellipsis: true, },
 ]
 //  送货计划管理，协同  SRM通用 column
 export const columnSRM = [
-  { ...MaterialNoColumn, dataIndex: 'skuId', width: 80, ellipsis: true,  fixed: 'left' },
+  { ...MaterialNoColumn, dataIndex: 'skuId', width: 110, ellipsis: true,  fixed: 'left' },
   { ...MaterialNameColumn, dataIndex: 'productName', width: 192, ellipsis: true,  fixed: 'left' },
   { ...MaterialModelColumn, dataIndex: 'spec', width: 128, ellipsis: true,  fixed: 'left' },
   { ...ClassColumn, dataIndex: 'category', width: 96, ellipsis: true,  fixed: 'left' },
@@ -151,17 +151,17 @@ export const columnSRM = [
   { ...ConsigneeNumColumn, dataIndex: 'receiveCountSum', width: 96, ellipsis: true, },
   { ...TransitNumColumn, dataIndex: 'transitCountSum', width: 96, ellipsis: true, },
   { ...DeliveredNumColumn, dataIndex: 'leftCountSum', width: 96, ellipsis: true, },
-  { ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 96, ellipsis: true, },
+  { ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 104, ellipsis: true, },
 ]
 
 //  送货计划管理，协同 SRM，B2B 嵌套表格通用 column - 不带地址
 export const initExpandIconColumn = [
-  { ...OrderNoColumn, dataIndex: 'orderNo', width: 108, ellipsis: true, fixed: 'left' },
-  { ...OrderSummaryColumn, dataIndex: 'orderDigest', width: 400, ellipsis: true, fixed: 'left'  },
-  { ...OrderCreatedAtColumn, dataIndex: 'createTime', width: 180, ellipsis: true, fixed: 'left'  },
+  { ...OrderNoColumn, dataIndex: 'orderNo', width: 110, ellipsis: true, fixed: 'left' },
+  { ...OrderSummaryColumn, dataIndex: 'orderDigest', width: 320, ellipsis: true, fixed: 'left'  },
+  { ...OrderCreatedAtColumn, dataIndex: 'createTime', width: 286, ellipsis: true, fixed: 'left'  },
   { ...OrderNumColumn, dataIndex: 'purchaseCount', width: 96, ellipsis: true, fixed: 'left'  },
   { ...ConsigneeNumColumn, dataIndex: 'receiveCount', width: 96, ellipsis: true, },
   { ...TransitNumColumn, dataIndex: 'transitCount', width: 96, ellipsis: true, },
   { ...DeliveredNumColumn, dataIndex: 'leftCount', width: 96, ellipsis: true, },
-  { ...PlannedDeliveryNumColumn, dataIndex: 'planCount', width: 96, ellipsis: true, },
+  { ...PlannedDeliveryNumColumn, dataIndex: 'planCount', width: 104, ellipsis: true, },
 ]

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

@@ -50,7 +50,7 @@ const DeliveryPlanAwaitB2BCreate: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record, index) => {
-    return <div>
+    return <div className='childTable'>
       <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }}/>
     </div>
   }
@@ -124,13 +124,12 @@ const DeliveryPlanAwaitB2BCreate: React.FC = () => {
       const dates = getDayAll(startDate, endDate)
       datesRef.current = dates
       setSelectedDate([startDate, endDate])
-      const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 90, align: 'center', }))
+      const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
       const datesExpandIconColumn = dates.map((item, i) => ({
         title: item.substr(1),
         dataIndex: item,
         key: item,
         width: 80,
-        align: 'center',
         render: (text: any, record: any) => (
           <InputNumber
             style={{ width: '100%' }}
@@ -198,6 +197,18 @@ const DeliveryPlanAwaitB2BCreate: React.FC = () => {
     }
   }, [selectedDate, selectedMember])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (<>
     <Spin spinning={spinning}>
       <AnchorPage
@@ -254,6 +265,7 @@ const DeliveryPlanAwaitB2BCreate: React.FC = () => {
           </BaseInfo>
           <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
             <Table
+              className='customizationTable parentTable'
               // defaultExpandAllRows
               rowKey={'planProductId'}
               columns={goodsTableColumn}

src/pages/order/deliveryPlanManagement/deliveryPlanAwaitB2B/details.tsx

@@ -43,8 +43,8 @@ const DeliveryPlanAwaitB2BDetails: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record, index) => {
-    return <div>
-      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return <div className='childTable'>
+      <Table  rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
     </div>
   }
 
@@ -56,13 +56,12 @@ const DeliveryPlanAwaitB2BDetails: React.FC = () => {
   //  计划周期 渲染日期
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (<CustomizedTableItem createNotice={text?.createNotice} createDelivery={text?.createDelivery} planCount={text?.planCount} />)
     }))
     setGoodsTableColumn([...goodsTableColumn, ...datesColumn])
@@ -108,6 +107,18 @@ const DeliveryPlanAwaitB2BDetails: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (<>
     <AnchorPage
       title={`${details?.digest} | ${details?.planNo}`}
@@ -149,6 +160,7 @@ const DeliveryPlanAwaitB2BDetails: React.FC = () => {
       </BaseInfo>
       <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
         <Table
+          className='customizationTable parentTable'
           // defaultExpandAllRows
           rowKey={'planProductId'}
           columns={goodsTableColumn}

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

@@ -51,7 +51,9 @@ const DeliveryPlanAwaitB2BUpdate: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record, index) => {
-    return <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return <div className='childTable'>
+      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
+    </div>
   }
 
   //  详情
@@ -102,13 +104,12 @@ const DeliveryPlanAwaitB2BUpdate: React.FC = () => {
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
     datesRef.current = dates
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (
         <InputNumber
           style={{ width: '100%' }}
@@ -168,6 +169,18 @@ const DeliveryPlanAwaitB2BUpdate: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (<>
     <Spin spinning={spinning}>
       <AnchorPage
@@ -227,6 +240,7 @@ const DeliveryPlanAwaitB2BUpdate: React.FC = () => {
           </BaseInfo>
           <BaseInfo className='mt-16' title={PlannedDelivery.name} id={PlannedDelivery.key} cols={1}>
             <Table
+              className='customizationTable parentTable'
               // defaultExpandAllRows
               rowKey={'planProductId'}
               columns={goodsTableColumn}
@@ -241,7 +255,7 @@ const DeliveryPlanAwaitB2BUpdate: React.FC = () => {
               }}
               dataSource={goodsTableData}
               tableLayout="fixed"
-              scroll={{ x: 2022 }}
+              scroll={{ x: '100%' }}
             />
           </BaseInfo>
           <BaseInfo className='mt-16' title={Remarks.name} id={Remarks.key} cols={1}>

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

@@ -16,7 +16,6 @@ import { RoleSelect } from '@/components/RoleSelect'
 import { getOrderDeliveryPlanOrderProductPage, postOrderDeliveryPlanSrmCreate } from '@/services/OrderNewV2Api'
 import { getMemberManageLowerMerchantProviderPage } from '@/services/MemberV2Api'
 import { columnSRM, initExpandIconColumn } from '../../constants/page-table-column'
-import { validatorByteObject } from '@/utils/regExp'
 
 const formItemLayout = {
   labelCol: { span: 3 },
@@ -50,8 +49,8 @@ const DeliveryPlanAwaitSRMCreate: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record) => {
-    return <div>
-      <Table id='child' rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }}/>
+    return <div className='childTable'>
+      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }}/>
     </div>
   }
 
@@ -126,13 +125,12 @@ const DeliveryPlanAwaitSRMCreate: React.FC = () => {
       const dates = getDayAll(startDate, endDate)
       datesRef.current = dates
       setSelectedDate([startDate, endDate])
-      const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, align: 'center', }))
+      const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
       const datesExpandIconColumn = dates.map((item, i) => ({
         title: item.substr(1),
         dataIndex: item,
         key: item,
         width: 80,
-        align: 'center',
         render: (text: any, record: any) => (
           <InputNumber
             style={{ width: '100%' }}
@@ -201,11 +199,13 @@ const DeliveryPlanAwaitSRMCreate: React.FC = () => {
   }, [selectedDate, selectedMember])
 
   useEffect(() => {
-    const parent = document.querySelector('#parent .ant-table-content')
+    const parent = document.querySelector('.parentTable .ant-table-content')
     parent?.addEventListener('scroll', () => {
-      const child = document.querySelector('#child .ant-table-content')
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
       if (child) {
-        child.scrollLeft = parent.scrollLeft
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
       }
     })
   },[])
@@ -261,12 +261,12 @@ const DeliveryPlanAwaitSRMCreate: React.FC = () => {
                 { required: true, message: '请选择' }
               ]}
             >
-              <DatePicker.RangePicker disabledDate={disabledDate} style={{ width: '100%' }} onChange={(dates) => handleDateAssembleColumn(dates)} />
+              <DatePicker.RangePicker className='datePicker-range-separate' disabledDate={disabledDate} style={{ width: '100%' }} onChange={(dates) => handleDateAssembleColumn(dates)} />
             </Form.Item>
           </BaseInfo>
           <BaseInfo className='mt-16' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
             <Table
-              id='parent'
+              className='customizationTable parentTable'
               // defaultExpandAllRows
               rowKey={'planProductId'}
               columns={materialTableColumn}

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

@@ -39,8 +39,8 @@ const DeliveryPlanAwaitSRMDetails: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record, index) => {
-    return <div>
-      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return <div className='childTable'>
+      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
     </div>
   }
 
@@ -53,13 +53,12 @@ const DeliveryPlanAwaitSRMDetails: React.FC = () => {
   //  计划周期 渲染日期
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (<CustomizedTableItem createNotice={text?.createNotice} createDelivery={text?.createDelivery} planCount={text?.planCount} />)
     }))
     setMaterialTableColumn([...materialTableColumn, ...datesColumn])
@@ -104,6 +103,18 @@ const DeliveryPlanAwaitSRMDetails: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (
     <AnchorPage
       title={`${details?.digest} | ${details?.planNo}`}
@@ -144,6 +155,7 @@ const DeliveryPlanAwaitSRMDetails: React.FC = () => {
       </BaseInfo>
       <BaseInfo className='mt-16' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
         <Table
+          className='customizationTable parentTable'
           // defaultExpandAllRows
           rowKey={'planProductId'}
           columns={materialTableColumn}

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

@@ -50,8 +50,8 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record) => {
-    return <div>
-      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return <div className='childTable'>
+      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
     </div>
   }
 
@@ -104,13 +104,12 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
     datesRef.current = dates
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (
         <InputNumber
           style={{ width: '100%' }}
@@ -170,6 +169,18 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (
     <Spin spinning={spinning}>
       <AnchorPage
@@ -228,6 +239,7 @@ const DeliveryPlanAwaitSRMUpdate: React.FC = () => {
           </BaseInfo>
           <BaseInfo className='mt-16' title={PlanMaterial.name} id={PlanMaterial.key} cols={1}>
             <Table
+              className='customizationTable parentTable'
               // defaultExpandAllRows
               rowKey={'planProductId'}
               columns={materialTableColumn}

src/pages/order/deliveryPlanManagement/deliveryPlanQuery/details.tsx

@@ -43,7 +43,7 @@ const DeliveryPlanManagementDetails: React.FC = () => {
   // const dynamicWidth = deliveryPlanType === '1' ? 214 : 342
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
   const expandedRowRender = (record) => {
-    return <div>
+    return <div className='childTable'>
       <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
     </div>
   }
@@ -56,13 +56,12 @@ const DeliveryPlanManagementDetails: React.FC = () => {
   //  计划周期 渲染日期
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (<CustomizedTableItem createNotice={text?.createNotice} createDelivery={text?.createDelivery} planCount={text?.planCount} />)
     }))
     const table_column = deliveryPlanType === '1' ? columnB2B : deliveryPlanType === '2' ? columnSRM : []
@@ -109,6 +108,18 @@ const DeliveryPlanManagementDetails: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (
     <AnchorPage
       title={`${details?.digest} | ${details?.planNo}`}
@@ -150,6 +161,7 @@ const DeliveryPlanManagementDetails: React.FC = () => {
       <BaseInfo className='mt-16' title={deliveryPlanType === '1' ? PlannedDelivery.name : PlanMaterial.name} id={deliveryPlanType === '1' ? PlannedDelivery.key : PlanMaterial.key} cols={1}>
         {/* B2B 显示计划送货物料，SRM显示计划送货商品 */}
         <Table
+          className='customizationTable parentTable'
           // defaultExpandAllRows
           rowKey={'planProductId'}
           columns={tableColumn}

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

@@ -52,8 +52,8 @@ const DeliveryPlanManagementUpdate: React.FC = () => {
   const [expandIconColumn, setExpandIconColumn] = useState<any>(initExpandIconColumn)
 
   const expandedRowRender = (record: any) => {
-    return <div>
-      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" />
+    return <div className='childTable'>
+      <Table rowKey={'orderProductId'} columns={expandIconColumn} dataSource={record.orders} pagination={false} tableLayout="fixed" scroll={{ x: '100%' }} />
     </div>
   }
 
@@ -105,13 +105,12 @@ const DeliveryPlanManagementUpdate: React.FC = () => {
   const handleDateAssembleColumn = (startDate: string, endDate: string) => {
     const dates = getDayAll(moment(startDate).format('YYYY-MM-DD'), moment(endDate).format('YYYY-MM-DD'))
     datesRef.current = dates
-    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 120, align: 'center', }))
+    const datesColumn = dates.map((item, i) => ({ title: item.substr(1), dataIndex: item, key: item, width: 80, }))
     const datesExpandIconColumn = dates.map((item, i) => ({
       title: item.substr(1),
       dataIndex: item,
       key: item,
       width: 80,
-      align: 'center',
       render: (text: any, record: any) => (
         <InputNumber
           style={{ width: '100%' }}
@@ -172,6 +171,18 @@ const DeliveryPlanManagementUpdate: React.FC = () => {
     getDetails()
   }, [])
 
+  useEffect(() => {
+    const parent = document.querySelector('.parentTable .ant-table-content')
+    parent?.addEventListener('scroll', () => {
+      const child: NodeListOf<HTMLElement> = document.querySelectorAll('.childTable .ant-table-content')
+      if (child) {
+        Array.from(new Array(child.length)).map((_: undefined, i: number) => {
+          child[i].scrollLeft = parent.scrollLeft
+        })
+      }
+    })
+  },[])
+
   return (
     <Spin spinning={spinning}>
       <AnchorPage
@@ -233,6 +244,7 @@ const DeliveryPlanManagementUpdate: React.FC = () => {
           </BaseInfo>
           <BaseInfo className='mt-16' title={deliveryPlanType === '1' ? PlannedDelivery.name : PlanMaterial.name} id={deliveryPlanType === '1' ? PlannedDelivery.key : PlanMaterial.key} cols={1}>
             <Table
+              className='customizationTable parentTable'
               // defaultExpandAllRows
               rowKey={'planProductId'}
               columns={tableColumn}