You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
757 lines
29 KiB
React
757 lines
29 KiB
React
2 months ago
|
import { useState } from 'react';
|
||
|
|
import { useParams } from 'react-router-dom';
|
||
|
|
import { Button, Drawer, Card, Table } from 'antd';
|
||
|
|
import { useTranslation } from 'react-i18next';
|
||
|
|
import useProductsStore, { getAgencyAllExtrasAction } from '@/stores/Products/Index';
|
||
|
|
import { useProductsTypes, formatGroupSize } from '@/hooks/useProductsSets';
|
||
|
|
import { chunkBy, splitTable_6, splitTable_7, splitTable_8, splitTable_B, splitTable_D, splitTable_J, splitTable_Q, splitTable_R } from '@/hooks/useProductsQuotationFormat';
|
||
|
|
import { groupBy } from '@/utils/commons';
|
||
|
|
|
||
|
|
const AgencyPreview = ({ params, ...props }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const { travel_agency_id, use_year, audit_state } = useParams();
|
||
|
|
const productsTypes = useProductsTypes();
|
||
|
|
|
||
|
|
const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
|
||
|
|
|
||
|
|
const [previewMode, setPreviewMode] = useState(false);
|
||
|
|
const [tables, setTables] = useState([]);
|
||
|
|
const [extras, setExtras] = useState([]);
|
||
|
|
|
||
|
|
const handlePreview = async () => {
|
||
|
|
setPreviewMode(true);
|
||
|
|
|
||
|
|
const agencyExtras = await getAgencyAllExtrasAction(params);
|
||
|
|
setExtras(agencyExtras);
|
||
|
|
// console.log(agencyExtras)
|
||
|
|
|
||
|
|
// 只显示有产品的类型; 展开产品的价格表, 合并名称列; 转化为价格主表, 携带产品属性信息
|
||
|
|
const hasDataTypes = Object.keys(agencyProducts);
|
||
|
|
const _show = productsTypes
|
||
|
|
.filter((kk) => hasDataTypes.includes(kk.value))
|
||
|
|
.map((typeKey) => {
|
||
|
|
const typeProducts = agencyProducts[typeKey.value];
|
||
|
|
const chunked = chunkBy(use_year, typeProducts);
|
||
|
|
// console.log(typeKey.label, chunked);
|
||
|
|
// return {...chunked, typeKey};
|
||
|
|
const { SSRange, PSRange, SSsizeSetKey, SSsizeSetsMap, chunk } = chunked;
|
||
|
|
const bySizeSetKey = groupBy(chunk, 'sizeSetsSS'); // next: city
|
||
|
|
// return bySizeSetKey
|
||
|
|
const tables = Object.keys(bySizeSetKey).map((sizeSetsStr) => {
|
||
|
|
const _thisSSsetProducts = bySizeSetKey[sizeSetsStr];
|
||
|
|
return { cols: SSsizeSetsMap[sizeSetsStr], colsKey: sizeSetsStr, data: _thisSSsetProducts };
|
||
|
|
});
|
||
|
|
return { tables, typeKey };
|
||
|
|
});
|
||
|
|
// console.log(_show);
|
||
|
|
setTables(_show);
|
||
|
|
|
||
|
|
// const chunkR = chunkBy(use_year, agencyProducts['D'], []); // 'city_id',
|
||
|
|
// console.log(chunkR);
|
||
|
|
};
|
||
|
|
|
||
|
|
const cityRowHighlights = (record) => (record.info.isCityRow ? 'font-bold text-center ' : '')
|
||
|
|
|
||
|
|
const renderTable_6 = () => {
|
||
|
|
// console.log('666666');
|
||
|
|
if (!('6' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_6(use_year, agencyProducts['6']);
|
||
|
|
const table2Rows = tablesQuote.reduce((acc, {info, SS}) => {
|
||
|
|
return acc.concat(SS.map((v, i) => ({...v, info, rowSpan: i===0 ? SS.length : 0})));
|
||
|
|
}, []);
|
||
|
|
// console.log('table2Rows', table2Rows)
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={'ti'}
|
||
|
|
dataSource={table2Rows}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
// className='mt-4'
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '人等',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '5rem',
|
||
|
|
render: (_, r) => <div>{formatGroupSize(r.group_size_min, r.group_size_max, true)}</div>,
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '-',
|
||
|
|
dataIndex: 'SS',
|
||
|
|
key: 'SS',
|
||
|
|
width: '9rem',
|
||
|
|
align: 'center',
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: ['adult_cost'], key: 'adult_cost', width: '9rem', align: 'center', },
|
||
|
|
{ title: '儿童', dataIndex: ['child_cost'], key: 'child_cost', width: '9rem', align: 'center', },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_B = () => {
|
||
|
|
// console.log('BBBBBBBBBBBB');
|
||
|
|
if (!('B' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_B(use_year, agencyProducts.B);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={ti}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem', maxWidth: '12rem', className: 'max-w-48',
|
||
|
|
fixed: 'left',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '往返公里数',
|
||
|
|
dataIndex: ['info', 'km'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '6rem', maxWidth: '6rem', className: 'max-w-4',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '时段',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '5rem',
|
||
|
|
fixed: 'left',
|
||
|
|
render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
|
||
|
|
quote_season === 'SS' ? (rowSpan > 1 ? (
|
||
|
|
<div>
|
||
|
|
平季<div>(除特殊时段外)</div>
|
||
|
|
</div>
|
||
|
|
) : '') : (
|
||
|
|
<div>
|
||
|
|
特殊时段
|
||
|
|
<div>
|
||
|
|
{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
...cols.map((col) => ({
|
||
|
|
title: formatGroupSize(...col),
|
||
|
|
// dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
||
|
|
key: col[0],
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
|
||
|
|
{ title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
|
||
|
|
],
|
||
|
|
})),
|
||
|
|
]}
|
||
|
|
dataSource={data}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_J = () => {
|
||
|
|
// console.clear();
|
||
|
|
// console.log('jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj');
|
||
|
|
if (!('J' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_J(use_year, agencyProducts.J);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={ti}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
fixed: 'left',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '时段',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '9rem',
|
||
|
|
fixed: 'left',
|
||
|
|
render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
|
||
|
|
quote_season === 'SS' ? (rowSpan > 1 ? (
|
||
|
|
<div>
|
||
|
|
平季<div>(除特殊时段外)</div>
|
||
|
|
</div>
|
||
|
|
) : '') : (
|
||
|
|
<div>
|
||
|
|
特殊时段
|
||
|
|
<div>
|
||
|
|
{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
// { title: '时段', dataIndex: 'dateText', key: 'dateText', width: '9rem', render: (_, { quote_season, use_dates_start, use_dates_end}) => quote_season === 'SS' ? (<div>平季<div>(除特殊时段外)</div></div>) : (<div>特殊时段<div>{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}</div></div>)},
|
||
|
|
// `特殊时段\n${use_dates_start.replace(`${use_year}-`, '')}~${use_dates_end.replace(`${use_year}-`, '')}` },
|
||
|
|
...cols.map((col) => ({
|
||
|
|
title: formatGroupSize(...col),
|
||
|
|
// dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
||
|
|
key: col[0],
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
|
||
|
|
{ title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
|
||
|
|
],
|
||
|
|
})),
|
||
|
|
]}
|
||
|
|
dataSource={data}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
// className='mt-4'
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_D = () => {
|
||
|
|
// console.log('DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD');
|
||
|
|
if (!('D' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_D(use_year, agencyProducts.D);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={ti}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
fixed: 'left',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '时段',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '9rem',
|
||
|
|
fixed: 'left',
|
||
|
|
render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
|
||
|
|
quote_season === 'SS' ? (rowSpan > 1 ? (
|
||
|
|
<div>
|
||
|
|
平季<div>(除特殊时段外)</div>
|
||
|
|
</div>
|
||
|
|
) : '') : (
|
||
|
|
<div>
|
||
|
|
特殊时段
|
||
|
|
<div>
|
||
|
|
{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
...cols.map((col) => ({
|
||
|
|
title: formatGroupSize(...col),
|
||
|
|
// dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
||
|
|
key: col[0],
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost' },
|
||
|
|
{ title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost' },
|
||
|
|
],
|
||
|
|
})),
|
||
|
|
]}
|
||
|
|
dataSource={data}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
// className='mt-4'
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_Q = () => {
|
||
|
|
// console.log('QQQQQQ');
|
||
|
|
if (!('Q' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_Q(use_year, agencyProducts.Q);
|
||
|
|
// console.log('tablesQuote', tablesQuote);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={'ti'}
|
||
|
|
dataSource={tablesQuote}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
// onCell: (record) => {
|
||
|
|
// return { rowSpan: record.rowSpan };
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '平季(除特殊时段外)',
|
||
|
|
dataIndex: 'SS',
|
||
|
|
key: 'SS',
|
||
|
|
width: '9rem',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '成人',
|
||
|
|
dataIndex: [0, 'adult_cost'],
|
||
|
|
key: 'adult_cost',
|
||
|
|
width: '9rem',
|
||
|
|
render: (_, { SS }) => (
|
||
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
||
|
|
{(SS || []).length === 1 ? (
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-1 text-center'>{SS[0].adult_cost}</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
(SS || []).map((ele, qi) => (
|
||
|
|
<div key={qi} className=''>
|
||
|
|
<div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-0 w-32 text-start'>
|
||
|
|
{formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}
|
||
|
|
</span>
|
||
|
|
<span className='flex-1'>{ele.adult_cost}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '儿童',
|
||
|
|
dataIndex: [0, 'child_cost'],
|
||
|
|
key: 'child_cost',
|
||
|
|
width: '9rem',
|
||
|
|
render: (_, { SS }) => (
|
||
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
||
|
|
{(SS || []).length === 1 ? (
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-1 text-center'>{SS[0].child_cost}</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
(SS || []).map((ele, qi) => (
|
||
|
|
<div key={qi} className=''>
|
||
|
|
<div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-0 w-32 text-start'>
|
||
|
|
{formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}
|
||
|
|
</span>
|
||
|
|
<span className='flex-1'>{ele.child_cost}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '旺季',
|
||
|
|
dataIndex: 'PS',
|
||
|
|
key: 'PS',
|
||
|
|
width: '9rem',
|
||
|
|
children: [
|
||
|
|
{
|
||
|
|
title: '成人',
|
||
|
|
dataIndex: [0, 'adult_cost'],
|
||
|
|
key: 'adult_cost',
|
||
|
|
width: '9rem',
|
||
|
|
render: (_, { PS }) => (
|
||
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
||
|
|
{(PS || []).map((ele, pi) => (
|
||
|
|
<div key={pi} className='b'>
|
||
|
|
{ele.adult_cost}
|
||
|
|
<div>
|
||
|
|
{
|
||
|
|
ele.rows.map((d, di) => (
|
||
|
|
<div key={di}>
|
||
|
|
({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '儿童',
|
||
|
|
dataIndex: [0, 'child_cost'],
|
||
|
|
key: 'child_cost',
|
||
|
|
width: '9rem',
|
||
|
|
render: (_, { PS }) => (
|
||
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
||
|
|
{(PS || []).map((ele, pi) => (
|
||
|
|
<div key={pi} className='b'>
|
||
|
|
{ele.child_cost}
|
||
|
|
<div>
|
||
|
|
{ele.rows.map((d, di) => (
|
||
|
|
<div key={di}>
|
||
|
|
({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_7 = () => {
|
||
|
|
// console.log('7777777777777');
|
||
|
|
if (!('7' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_7(use_year, agencyProducts['7']);
|
||
|
|
// console.log('tableQuote', tablesQuote)
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={'ti'}
|
||
|
|
dataSource={tablesQuote}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
// className=''
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
// onCell: (record) => {
|
||
|
|
// return { rowSpan: record.rowSpan };
|
||
|
|
// },
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: (
|
||
|
|
<>
|
||
|
|
平季(除特殊时段外)
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-0 text-center w-32'>-</span>
|
||
|
|
<span className='flex-1 text-center'>成人</span>
|
||
|
|
<span className='flex-1 text-center'>儿童</span>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
dataIndex: 'SS',
|
||
|
|
key: 'SS',
|
||
|
|
width: '9rem',
|
||
|
|
render: (_, { SS }) => (
|
||
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
||
|
|
{(SS || []).length === 1 ? (
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-0 w-32 text-start'>{SS[0].unit_id === '0' ? '' : `${formatGroupSize(SS[0].group_size_min, SS[0].group_size_max, true)}, ${SS[0].unit_name}`}</span>
|
||
|
|
<span className='flex-1 text-center'>{SS[0].adult_cost}</span>
|
||
|
|
<span className='flex-1 text-center'>{SS[0].child_cost}</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
(SS || []).map((ele, qi) =>
|
||
|
|
<div key={qi} className=''>
|
||
|
|
<div className='flex justify-between text-center divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-0 w-32 text-start'>{formatGroupSize(ele.group_size_min, ele.group_size_max, true)}, {ele.unit_name}</span>
|
||
|
|
<span className='flex-1'>{ele.adult_cost}</span>
|
||
|
|
<span className='flex-1'>{ele.child_cost}</span>
|
||
|
|
</div>
|
||
|
|
</div>)
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: (
|
||
|
|
<>
|
||
|
|
旺季
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-1'>成人</span>
|
||
|
|
<span className='flex-1'>儿童</span>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
),
|
||
|
|
dataIndex: 'PS',
|
||
|
|
key: 'PS',
|
||
|
|
width: '9rem',
|
||
|
|
align: 'center',
|
||
|
|
render: (_, { PS }) => (
|
||
|
|
<div>
|
||
|
|
{(PS || []).map((ele, pi) => (
|
||
|
|
<div key={pi}>
|
||
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
||
|
|
<span className='flex-1'>{ele.adult_cost}</span>
|
||
|
|
<span className='flex-1'>{ele.child_cost}</span>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{ele.rows.map((d, di) => (
|
||
|
|
<div key={di}>
|
||
|
|
({d.use_dates_start.replace(`${use_year}-`, '')}~{d.use_dates_end.replace(`${use_year}-`, '')})
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{/* <div>( {ele.rows.map((d) => `${d.use_dates_start.replace(`${use_year}-`, '')}~${d.use_dates_end.replace(`${use_year}-`, '')}`).join('; ')} )</div> */}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
{ title: '特殊项目', width: '9rem', key: 'extras', render: (_, r) => {
|
||
|
|
const _extras = extras[r.info.id] || [];
|
||
|
|
return (<div>{_extras.map(e => <div key={e.info.id}>{e.info.product_title}【{e.info.product_type_name}】</div>)}</div>);
|
||
|
|
}},
|
||
|
|
]}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_R = () => {
|
||
|
|
// console.log('RRRRRRRRRRRRR');
|
||
|
|
if (!('R' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_R(use_year, agencyProducts.R);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={ti}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem',
|
||
|
|
fixed: 'left',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '时段',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '5rem',
|
||
|
|
fixed: 'left',
|
||
|
|
render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
|
||
|
|
quote_season === 'SS' ? (rowSpan > 1 ? (
|
||
|
|
<div>
|
||
|
|
平季<div>(除特殊时段外)</div>
|
||
|
|
</div>
|
||
|
|
) : '') : (
|
||
|
|
<div>
|
||
|
|
特殊时段
|
||
|
|
<div>
|
||
|
|
{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
...cols.map((col) => ({
|
||
|
|
title: formatGroupSize(...col),
|
||
|
|
// dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
||
|
|
key: col[0],
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
|
||
|
|
{ title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
|
||
|
|
],
|
||
|
|
})),
|
||
|
|
{ title: '司陪餐补（元/团/餐）', dataIndex: 'extra', key: 'extra', width: '4rem',
|
||
|
|
onCell: (record, index) => {
|
||
|
|
return { rowSpan: index === 0 ? data.length : 0 };
|
||
|
|
},
|
||
|
|
render: _ => (<>不分人等</>)
|
||
|
|
},
|
||
|
|
]}
|
||
|
|
dataSource={data}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTable_8 = () => {
|
||
|
|
// console.log('888888');
|
||
|
|
if (!('8' in agencyProducts)) {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
const tablesQuote = splitTable_8(use_year, agencyProducts['8']);
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
||
|
|
<Table
|
||
|
|
bordered
|
||
|
|
striped
|
||
|
|
sticky={{ offsetHeader: -24 }}
|
||
|
|
key={ti}
|
||
|
|
rowClassName={cityRowHighlights}
|
||
|
|
columns={[
|
||
|
|
{
|
||
|
|
title: '项目',
|
||
|
|
dataIndex: ['info', 'product_title'],
|
||
|
|
key: 'product_title',
|
||
|
|
width: '12rem', maxWidth: '12rem', className: 'max-w-48',
|
||
|
|
fixed: 'left',
|
||
|
|
onCell: (record) => {
|
||
|
|
return { rowSpan: record.rowSpan };
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '时段',
|
||
|
|
dataIndex: 'dateText',
|
||
|
|
key: 'dateText',
|
||
|
|
width: '5rem',
|
||
|
|
fixed: 'left',
|
||
|
|
render: (_, { quote_season, use_dates_start, use_dates_end, rowSpan }) =>
|
||
|
|
quote_season === 'SS' ? (rowSpan > 1 ? (
|
||
|
|
<div>
|
||
|
|
平季<div>(除特殊时段外)</div>
|
||
|
|
</div>
|
||
|
|
) : '') : (
|
||
|
|
<div>
|
||
|
|
特殊时段
|
||
|
|
<div>
|
||
|
|
{use_dates_start.replace(`${use_year}-`, '')}~{use_dates_end.replace(`${use_year}-`, '')}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
},
|
||
|
|
...cols.map((col) => ({
|
||
|
|
title: formatGroupSize(...col),
|
||
|
|
// dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
||
|
|
key: col[0],
|
||
|
|
children: [
|
||
|
|
{ title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost', width: '4rem' },
|
||
|
|
{ title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost', width: '4rem' },
|
||
|
|
],
|
||
|
|
})),
|
||
|
|
]}
|
||
|
|
dataSource={data}
|
||
|
|
size={'small'}
|
||
|
|
pagination={false}
|
||
|
|
scroll={{ x: 'max-content' }}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const typeTableMap = {
|
||
|
|
'6': { render: renderTable_6 },
|
||
|
|
'B': { render: renderTable_B },
|
||
|
|
'J': { render: renderTable_J },
|
||
|
|
'Q': { render: renderTable_Q },
|
||
|
|
'7': { render: renderTable_7 },
|
||
|
|
'R': { render: renderTable_R },
|
||
|
|
'8': { render: renderTable_8 },
|
||
|
|
'D': { render: renderTable_D },
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderTableByType = (allTables) => {
|
||
|
|
return allTables.map(({ typeKey, tables }) => {
|
||
|
|
return (
|
||
|
|
<Card title={typeKey.label} key={typeKey.value} className='[&_.ant-card-head]:bg-neutral-200' >
|
||
|
|
<div className='flex flex-col gap-4'>
|
||
|
|
{typeTableMap[typeKey.value].render()}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button size='small' onClick={handlePreview}>
|
||
|
|
{t('Preview')}
|
||
|
|
</Button>
|
||
|
|
<Drawer title={`${t('Preview')}`} width={'70%'} open={previewMode} onClose={() => setPreviewMode(false)} >
|
||
|
|
<div className='flex flex-col gap-2'>
|
||
|
|
{renderTableByType(tables)}
|
||
|
|
</div>
|
||
|
|
</Drawer>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default AgencyPreview;
|