Skip to content

J
jinfa-platform
Commit 20e02b0c authored by Gavin Peng's avatar Gavin Peng
Browse files
Options

fix: 计划送货协同嵌套表格样式

parent 6383da4d
Hide whitespace changes
Inline Side-by-side
Showing with 87 additions and 25 deletions
src/pages/order/constants/page-table-column.tsx
View file @ 20e02b0c
......@@ -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,7 +126,7 @@ export const DeliveryGoodsTableColumn: any = [
{ ...PlannedDeliveryNumColumn, dataIndex: 'planCount' },
]
// 送货计划管理，协同 B2B通用 column
// 送货计划管理 B2B通用 column
export const columnB2B = [
{ ...CommodityNoColumn, dataIndex: 'skuId', width: 110, ellipsis: true, fixed: 'left' },
{ ...TradeNameColumn, dataIndex: 'productName', width: 254, ellipsis: true, fixed: 'left' },
......@@ -139,12 +139,12 @@ export const columnB2B = [
{ ...DeliveredNumColumn, dataIndex: 'leftCountSum', width: 96, ellipsis: true, },
{ ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 104, ellipsis: true, },
]
// 送货计划管理，协同 SRM通用 column
// 送货计划管理 SRM通用 column
export const columnSRM = [
{ ...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' },
{ ...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' },
......@@ -154,12 +154,43 @@ export const columnSRM = [
{ ...PlannedDeliveryNumColumn, dataIndex: 'planCountSum', width: 104, ellipsis: true, },
]
// 送货计划管理，协同 SRM，B2B 嵌套表格通用 column - 不带地址
// 送货计划管理 SRM，B2B 嵌套表格通用 column - 不带地址
export const initExpandIconColumn = [
{ ...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' },
{ ...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, },
......
src/pages/order/constants/table-column.ts
View file @ 20e02b0c
......@@ -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',
......
src/pages/order/deliveryNoticeCollaboration/deliveryNoticeAwait/details.tsx
View file @ 20e02b0c
......@@ -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}
......
src/pages/order/deliveryPlanCollaboration/deliveryPlanAwait/details.tsx
View file @ 20e02b0c
......@@ -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}
......
src/pages/order/deliveryPlanCollaboration/deliveryPlanQuery/details.tsx
View file @ 20e02b0c
......@@ -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}
......
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