Skip to content

J
jinfa-platform
Commit 6383da4d authored by Gavin Peng's avatar Gavin Peng
Browse files
Options

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

parent 1d10512b
Hide whitespace changes
Inline Side-by-side
Showing with 145 additions and 48 deletions
src/global/styles/global.less
View file @ 6383da4d
......@@ -442,6 +442,7 @@ a {
}
}
// 定制化日期选择器(DatePicker.RangePicker通过css重写拆分成2个框)
.datePicker-range-separate {
padding: 0 !important;
background-color: #FFF !important;
......@@ -484,4 +485,13 @@ a {
content: '~';
}
}
}
// 定制化嵌套表格左边带主题色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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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
View file @ 6383da4d
......@@ -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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment