Commit a428d25b authored by 前端-彭佳文's avatar 前端-彭佳文

Merge branch 'v2-220418-order' into 'v2-220418'

V2 220418 order See merge request linkseeks-design/pro-platform!538
parents 0a332f13 9655e34e
......@@ -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
......@@ -2,9 +2,9 @@
* 订单模块 Table Column 组装
* @author: 莫雷
*/
import { Button } from "antd";
import { HarvestMaterialDelete, HarvestMaterialInput } from "../assets/context";
import { BrandColumn, ClassColumn, CommodityIdColumn, ConsigneeNumColumn, DeliveredNumColumn, DeliveryNumColumn, FlowNoteColumn, FlowOnColumn, FlowOptionsColumn, FlowOptionsTimeColumn, FlowRoleColumn, FlowStatusColumn, MaterialModelColumn, MaterialNameColumn, MaterialNoColumn, OrderCreatedAtColumn, OrderNoColumn, OrderSummaryColumn, OrderNumColumn, PlannedDeliveryNumColumn, TradeNameColumn, TransitNumColumn, UntilColumn, CommodityNoColumn } from "./table-column";
import { Tooltip } from "antd";
import { HarvestMaterialInput } from "../assets/context";
import { BrandColumn, ClassColumn, CommodityIdColumn, ConsigneeNumColumn, DeliveredNumColumn, DeliveryNumColumn, FlowNoteColumn, FlowOnColumn, FlowOptionsColumn, FlowOptionsTimeColumn, FlowRoleColumn, FlowStatusColumn, MaterialModelColumn, MaterialNameColumn, MaterialNoColumn, OrderCreatedAtColumn, OrderNoColumn, OrderSummaryColumn, OrderNumColumn, PlannedDeliveryNumColumn, TradeNameColumn, TransitNumColumn, UntilColumn, CommodityNoColumn, ReceivingAddressColumn } from "./table-column";
export const DeliveryNoteAddFromTableColumn: any = [
MaterialNoColumn,
......@@ -126,42 +126,74 @@ export const DeliveryGoodsTableColumn: any = [
{ ...PlannedDeliveryNumColumn, dataIndex: 'planCount' },
]
// 送货计划管理,协同 B2B通用 column
// 送货计划管理,协同 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
// 送货计划管理,协同 SRM通用 column
export const columnSRM = [
{ ...MaterialNoColumn, dataIndex: 'skuId', width: 80, 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' },
{ ...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' },
{ ...BrandColumn, dataIndex: 'brand', width: 96, 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: 96, ellipsis: true, },
{ ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 104, ellipsis: true, },
]
// 送货计划管理,协同 SRM,B2B 嵌套表格通用 column - 不带地址
// 送货计划管理 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' },
{ ...OrderNumColumn, dataIndex: 'purchaseCount', width: 96, 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: 104, ellipsis: true, },
]
// 送货计划协同 SRM,B2B 嵌套表格通用 column - 带地址
export const jointExpandIconColumn = [
{ ...OrderNoColumn, dataIndex: 'orderNo', width: 110, ellipsis: true, fixed: 'left' },
{ ...OrderSummaryColumn, dataIndex: 'orderDigest', width: 218, ellipsis: true, fixed: 'left' },
{ ...OrderCreatedAtColumn, dataIndex: 'createTime', width: 188, ellipsis: true, fixed: 'left' },
{
...ReceivingAddressColumn,
dataIndex: 'provinceName',
width: 168,
ellipsis: true,
fixed: 'left',
render: (txt: string, record: any) => (
<Tooltip
placement='topLeft'
title={<>
<span>{`${txt ?? '-'}${record?.cityName ?? '-'}${record?.districtName ?? '-'}${record?.streetName ?? '-'}${record?.address ?? '-'}`}</span>
<br />
<span>{record?.consignee ?? '-'}&nbsp;&nbsp;{record?.phone ?? '-'}</span>
</>}
>
<span>{`${txt ?? '-'}${record?.cityName ?? '-'}${record?.districtName ?? '-'}${record?.streetName ?? '-'}${record?.address ?? '-'}`}</span>
</Tooltip>
)
},
{ ...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, },
]
......@@ -21,7 +21,7 @@ export const TradeNameColumn: any = {
title: '商品名称',
dataIndex: 'productName',
key: 'productName',
align: 'center',
// align: 'center',
}
export const MaterialNoColumn: any = {
......@@ -35,7 +35,7 @@ export const MaterialNameColumn: any = {
title: '物料名称',
dataIndex: 'productName',
key: 'productName',
align: 'center',
// align: 'center',
}
export const MaterialModelColumn: any = {
......@@ -49,21 +49,21 @@ export const ClassColumn: any = {
title: '品类',
dataIndex: 'category',
key: 'category',
align: 'center',
// align: 'center',
}
export const BrandColumn: any = {
title: '品牌',
dataIndex: 'brand',
key: 'brand',
align: 'center',
// align: 'center',
}
export const UntilColumn: any = {
title: '单位',
dataIndex: 'unit',
key: 'unit',
align: 'center',
// align: 'center',
}
export const OrderNoColumn: any = {
......@@ -84,7 +84,12 @@ export const OrderCreatedAtColumn: any = {
render: (txt, rcoed) => dayjs(rcoed.createTime).format('YYYY-MM-DD HH:mm:ss')
}
export const OrderNumColumn: any = {
export const ReceivingAddressColumn: any = {
title: '收货地址',
// align: 'center',
}
export const OrderNumColumn: any = {
title: '订单数量',
dataIndex: 'purchaseCount',
key: 'purchaseCount',
......
......@@ -147,7 +147,7 @@ const DeliveryNoticeAwaitDetails: React.FC = () => {
{details.noticeNo}
</BaseInfo.BaseInfoItem>
<BaseInfo.BaseInfoItem label={SupplyMember}>
{details.buyerMemberName}
{details.vendorMemberName}
</BaseInfo.BaseInfoItem>
<BaseInfo.BaseInfoItem label={NoticeSummary}>
{details.digest}
......
......@@ -48,21 +48,20 @@ const DeliveryPlanCollaborationAwaitDetails: React.FC = () => {
// 动态 expandIconColumn
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>
}
// 计划周期 渲染日期
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 : []
......@@ -124,6 +123,18 @@ const DeliveryPlanCollaborationAwaitDetails: 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
title={`${details?.digest} | ${details?.planNo}`}
......@@ -172,6 +183,7 @@ const DeliveryPlanCollaborationAwaitDetails: 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}
......
......@@ -13,7 +13,7 @@ import { CaretDownOutlined, CaretRightOutlined, CheckCircleOutlined } from '@ant
import BaseInfo from '@/components/BaseInfo/BaseInfo'
import CalendarModal from '../../components/CalendarModal'
import { BaseInfo as base_Info, Circulation, ConfirmDeliveryPlan, ExternalState, PlanMaterial, PlanningCycle, PlanNumber, PlanSummary, Purchaser, SubmitDeliveryPlan, Supplier, SupplyMembersLabel, PlannedDelivery, BuyerLabel, DeliveryNoteGenerated, NoticeGenerated } from '../../constants'
import { columnB2B, columnSRM, ExternalRoamRecordTableColumn, initExpandIconColumn } from '../../constants/page-table-column'
import { columnB2B, columnSRM, ExternalRoamRecordTableColumn, initExpandIconColumn, jointExpandIconColumn } from '../../constants/page-table-column'
import { getDayAll, godAtob, integrationArrToObj, integrationOjb, newMapValues, TagStatus } from '../../utils'
import { getOrderDeliveryPlanDeliveryHistory, getOrderDeliveryPlanDeliveryOrder, getOrderDeliveryPlanDetail, getOrderDeliveryPlanDetailProductPage, getOrderDeliveryPlanNoticeOrder } from '@/services/OrderNewV2Api'
import CustomizedTableItem from '../../components/CustomizedTableItem'
......@@ -65,14 +65,15 @@ const DeliveryPlanCollaborationDetails: React.FC = () => {
}
const expandedRowRender = (record: any) => {
return <div>
return <div className='childTable'>
<Table
rowKey={'planOrderId'}
columns={expandIconColumn}
dataSource={record.orders}
pagination={false}
tableLayout="fixed"
rowSelection={expandIconRowSelection(record.planProductId)}
scroll={{ x: '100%' }}
rowSelection={pageBtn ? expandIconRowSelection(record.planProductId) : null}
/>
</div>
}
......@@ -80,18 +81,18 @@ const DeliveryPlanCollaborationDetails: 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 : []
const expandIcon_column = pageBtn ? jointExpandIconColumn : initExpandIconColumn
setTableColumn([...table_column, ...datesColumn])
setExpandIconColumn([...expandIconColumn, ...datesExpandIconColumn])
setExpandIconColumn([...expandIcon_column, ...datesExpandIconColumn])
}
// 获取计划送货
......@@ -205,6 +206,18 @@ const DeliveryPlanCollaborationDetails: 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
......@@ -260,6 +273,7 @@ const DeliveryPlanCollaborationDetails: 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}
......
......@@ -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}
......
......@@ -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}
......
......@@ -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}>
......
......@@ -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}
......
......@@ -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}
......
......@@ -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}
......
......@@ -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}
......
......@@ -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