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.
1059 lines
42 KiB
JavaScript
1059 lines
42 KiB
JavaScript
import { useState } from 'react';
|
|
import { useParams, Link } 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, isNotEmpty } from '@/utils/commons';
|
|
import useAuthStore from '@/stores/Auth';
|
|
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
|
|
import ExportDocxBtn from './ExportDocxBtn';
|
|
|
|
const AgencyPreview = ({ params, ...props }) => {
|
|
const isPermitted = useAuthStore(state => state.isPermitted);
|
|
|
|
const { t } = useTranslation();
|
|
const { travel_agency_id, use_year } = params;
|
|
const productsTypes = useProductsTypes();
|
|
|
|
const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
|
|
const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
|
|
|
|
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 renderTitle = (text, r) => {
|
|
const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
|
|
const itemLink = isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
|
? `/products/${travel_agency_id}/${use_year}/all/edit`
|
|
: isPermitted(PERM_PRODUCTS_OFFER_PUT)
|
|
? `/products/edit`
|
|
: '';
|
|
return (
|
|
<div className=''>
|
|
{isNotEmpty(itemLink) && (r.info?.isCityRow !== true) ? (
|
|
<div className='' onClick={() => setEditingProduct({ info: r.info })}>
|
|
<Link to={itemLink}>{title}</Link>
|
|
</div>
|
|
) : (
|
|
title
|
|
)}
|
|
<b>{r.info.id}</b>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderTable_6 = () => {
|
|
// console.log('666666');
|
|
if (!('6' in agencyProducts)) {
|
|
return null;
|
|
}
|
|
const {tables, SSRange} = splitTable_6(use_year, agencyProducts['6'], false);
|
|
const table2Rows = tables.reduce((acc, {info, SS}) => {
|
|
return acc.concat(SS.map((v, i) => ({...v, info, rowSpan: i===0 ? SS.length : 0})));
|
|
}, []);
|
|
// console.log('tablesQuote', tablesQuote)
|
|
// console.log('table2Rows', table2Rows)
|
|
return (
|
|
<>
|
|
<Table
|
|
bordered
|
|
striped
|
|
sticky={{ offsetHeader: -24 }}
|
|
key={'ti6'}
|
|
rowKey={'rowKey'}
|
|
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: <>{SSRange.map(v => <div key={v}>{v}</div>)}</>,
|
|
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={colsKey}
|
|
rowKey={'rowKey'}
|
|
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);
|
|
// console.log(tablesQuote)
|
|
return (
|
|
<>
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
|
<Table
|
|
bordered
|
|
striped
|
|
sticky={{ offsetHeader: -24 }}
|
|
key={colsKey}
|
|
rowKey={'rowKey'}
|
|
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 key={'ss'}>
|
|
平季<div>(除特殊时段外)</div>
|
|
</div>
|
|
) : (
|
|
''
|
|
)
|
|
) : (
|
|
<div key={'ps'}>
|
|
特殊时段
|
|
<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',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.adult_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => {
|
|
const _warning = r.info?.isCityRow !== true && text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return {
|
|
children: (
|
|
<>
|
|
{text}
|
|
{_warning ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
};
|
|
},
|
|
},
|
|
{
|
|
title: '儿童',
|
|
dataIndex: [formatGroupSize(...col), 'child_cost'],
|
|
key: 'child_cost',
|
|
width: '4rem',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.child_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => {
|
|
const _warning = r.info?.isCityRow !== true && text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
return {
|
|
children: (
|
|
<>
|
|
{text}
|
|
{_warning ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
};
|
|
},
|
|
},
|
|
],
|
|
})),
|
|
]}
|
|
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);
|
|
// console.log(tablesQuote)
|
|
return (
|
|
<>
|
|
{tablesQuote.map(({ cols, colsKey, data }, ti) => (
|
|
<Table
|
|
bordered
|
|
striped
|
|
sticky={{ offsetHeader: -24 }}
|
|
key={colsKey}
|
|
rowKey={'rowKey'}
|
|
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>
|
|
{use_dates_start.replace(`${use_year}.`, '')}~{use_dates_end.replace(`${use_year}.`, '')}
|
|
</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],
|
|
// children1: [
|
|
// { title: '成人', dataIndex: [formatGroupSize(...col), 'adult_cost'], key: 'adult_cost' },
|
|
// { title: '儿童', dataIndex: [formatGroupSize(...col), 'child_cost'], key: 'child_cost' },
|
|
// ],
|
|
children: [
|
|
{
|
|
title: '成人',
|
|
dataIndex: [formatGroupSize(...col), 'adult_cost'],
|
|
key: 'adult_cost',
|
|
width: '4rem',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.adult_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => {
|
|
const _warning = r.info?.isCityRow !== true && text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
return {
|
|
children: (
|
|
<>
|
|
{text}
|
|
{_warning ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
};
|
|
},
|
|
},
|
|
{
|
|
title: '儿童',
|
|
dataIndex: [formatGroupSize(...col), 'child_cost'],
|
|
key: 'child_cost',
|
|
width: '4rem',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.child_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => {
|
|
const _warning = r.info?.isCityRow !== true && text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
// && r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
return {
|
|
children: (
|
|
<>
|
|
{text}
|
|
{_warning ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
};
|
|
},
|
|
},
|
|
]
|
|
})),
|
|
]}
|
|
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'}
|
|
rowKey={'rowKey'}
|
|
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', align: 'center',
|
|
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].unit_id !== '1' ? 'bg-yellow-100' : ''}`}>{SS[0].adult_cost}{SS[0].unit_id !== '1' ? ` /${SS[0].unit_name}` : ''}</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', align: 'center',
|
|
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].unit_id !== '1' ? 'bg-yellow-100' : ''}`}>{SS[0].child_cost}{SS[0].unit_id !== '1' ? ` /${SS[0].unit_name}` : ''}</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', align: 'center',
|
|
render: (_, { PS }) => (
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
{(PS || []).map((ele, pi) => (
|
|
<div key={pi} className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
|
<div className='flex-1 self-center'>
|
|
{ele.rows.map((d, di) => (
|
|
<div key={di}>
|
|
{d.use_dates_start.replace(`${use_year}.`, '')}~{d.use_dates_end.replace(`${use_year}.`, '')}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span className={`flex-1 self-center ${ele.unit_id !== '1' ? 'bg-yellow-100' : ''}`}>{ele.adult_cost}{ele.unit_id !== '1' ? ` /${ele.unit_name}` : ''}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
),
|
|
// // 表格形式
|
|
// render: (_, { PSData }) => (
|
|
// <div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
// {(PSData || []).map((ele, pi) => (
|
|
// <div key={pi} className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
// <div className='flex-0 text-center w-24-'>
|
|
// {ele.headerDates.map((d, di) => (
|
|
// <div key={di}>
|
|
// {d.use_dates_start.replace(`${use_year}.`, '')}~{d.use_dates_end.replace(`${use_year}.`, '')}
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// {ele.rows.map((qrow, qri) => (
|
|
// <div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200' key={qrow.id}>
|
|
// <span className='flex-0 w-16 text-start self-center'>{formatGroupSize(qrow.group_size_min, qrow.group_size_max, true)}</span>
|
|
// <span className='flex-0 w-10 self-center'>{qrow.unit_name}</span>
|
|
// <span className='flex-1 self-center'>{qrow.adult_cost}</span>
|
|
// </div>
|
|
// ))}
|
|
// <div></div>
|
|
// </div>
|
|
// ))}
|
|
// </div>
|
|
// ),
|
|
},
|
|
{
|
|
title: '儿童',
|
|
dataIndex: [0, 'child_cost'],
|
|
key: 'child_cost',
|
|
width: '9rem', align: 'center',
|
|
render: (_, { PS }) => (
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
{(PS || []).map((ele, pi) => (
|
|
<div key={pi} className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200'>
|
|
<div className='flex-1 self-center'>
|
|
{ele.rows.map((d, di) => (
|
|
<div key={di}>
|
|
{d.use_dates_start.replace(`${use_year}.`, '')}~{d.use_dates_end.replace(`${use_year}.`, '')}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span className={`flex-1 self-center ${ele.unit_id !== '1' ? 'bg-yellow-100' : ''}`}>{ele.child_cost}{ele.unit_id !== '1' ? ` /${ele.unit_name}` : ''}</span>
|
|
</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'}
|
|
rowKey={'rowKey'}
|
|
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'>
|
|
{SS[0].unit_id === '0' && SS[0].group_size_min <= 1 && SS[0].group_size_max === 1000 ? (
|
|
<span className='flex-0 text-center w-32'></span>
|
|
) : (
|
|
<>
|
|
<span className='flex-0 w-16 text-start'>{formatGroupSize(SS[0].group_size_min, SS[0].group_size_max, true)}</span>
|
|
<span className='flex-0 w-16 text-center'>{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-16 text-start'>{formatGroupSize(ele.group_size_min, ele.group_size_max, true)}</span>
|
|
<span className='flex-0 w-16'>{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-0 text-center w-24'>-</span>
|
|
<span className='flex-1'>成人</span>
|
|
<span className='flex-1'>儿童</span>
|
|
</div>
|
|
</>
|
|
),
|
|
dataIndex: 'PS',
|
|
key: 'PS',
|
|
width: '9rem',
|
|
align: 'center',
|
|
render: (_, { PSData }) => (
|
|
<div className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
{(PSData || []).map((ele, pi) => (
|
|
<div key={pi} className='divide-x-0 divide-y divide-solid divide-stone-200'>
|
|
<div className='flex-0 text-center w-24-'>
|
|
{ele.headerDates.map((d, di) => (
|
|
<div key={di}>
|
|
{d.use_dates_start.replace(`${use_year}.`, '')}~{d.use_dates_end.replace(`${use_year}.`, '')}
|
|
</div>
|
|
))}
|
|
</div>
|
|
{ele.rows.map((qrow, qri) => (
|
|
<div className='flex justify-between divide-x divide-y-0 divide-solid divide-stone-200' key={qrow.id}>
|
|
<span className='flex-0 w-16 text-start self-center'>{formatGroupSize(qrow.group_size_min, qrow.group_size_max, true)}</span>
|
|
<span className='flex-0 w-8 self-center'>{qrow.unit_name}</span>
|
|
<span className='flex-1 self-center'>{qrow.adult_cost}</span>
|
|
<span className='flex-1 self-center'>{qrow.child_cost}</span>
|
|
</div>
|
|
))}
|
|
<div></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={colsKey}
|
|
rowKey={'rowKey'}
|
|
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',
|
|
onCell: (r) => {
|
|
const text = r[formatGroupSize(...col)]?.adult_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '0';
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
},
|
|
{
|
|
title: '儿童',
|
|
dataIndex: [formatGroupSize(...col), 'child_cost'],
|
|
key: 'child_cost',
|
|
width: '4rem',
|
|
onCell: (r) => {
|
|
const text = r[formatGroupSize(...col)]?.child_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
&& r[formatGroupSize(...col)]?.unit_id !== '0';
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
},
|
|
],
|
|
})),
|
|
{
|
|
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={colsKey}
|
|
rowKey={'rowKey'}
|
|
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',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.adult_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
// && r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
&& r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => (
|
|
<>
|
|
{text}
|
|
{r.info?.isCityRow !== true && text ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: '儿童',
|
|
dataIndex: [formatGroupSize(...col), 'child_cost'],
|
|
key: 'child_cost',
|
|
width: '4rem',
|
|
onCell: (r, ) => {
|
|
const text = r[formatGroupSize(...col)]?.child_cost
|
|
const _warning = r.info?.isCityRow !== true
|
|
&& text
|
|
// && r[formatGroupSize(...col)]?.unit_id !== '1';
|
|
&& r[formatGroupSize(...col)]?.unit_id !== r.unit_id;
|
|
|
|
return { className: _warning ? 'bg-yellow-100' : '' };
|
|
},
|
|
render: (text, r) => (
|
|
<>
|
|
{text}
|
|
{r.info?.isCityRow !== true && text ? ` /${r[formatGroupSize(...col)].unit_name}` : ''}
|
|
</>
|
|
),
|
|
},
|
|
],
|
|
})),
|
|
]}
|
|
dataSource={data}
|
|
size={'small'}
|
|
pagination={false}
|
|
scroll={{ x: 'max-content' }}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const typeTableMap = {
|
|
// '6': { render: () => {} },
|
|
'6': { render: renderTable_6 },
|
|
// 'B': { render: () => {} },
|
|
'B': { render: renderTable_B },
|
|
// 'J': { render: () => {} },
|
|
'J': { render: renderTable_J },
|
|
// 'Q': { render: () => {} },
|
|
'Q': { render: renderTable_Q },
|
|
// '7': { render: () => {} },
|
|
'7': { render: renderTable_7 },
|
|
// 'R': { render: () => {} },
|
|
'R': { render: renderTable_R },
|
|
// '8': { render: () => {} },
|
|
'8': { render: renderTable_8 },
|
|
// 'D': { render: () => {} },
|
|
'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={
|
|
<>
|
|
<div className='flex gap-4'>
|
|
<span>{t('Preview')}</span>
|
|
<ExportDocxBtn params={params} />
|
|
</div>
|
|
</>
|
|
}
|
|
width={'70%'}
|
|
open={previewMode}
|
|
onClose={() => setPreviewMode(false)}>
|
|
<div className='flex flex-col gap-2'>{renderTableByType(tables)}</div>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
};
|
|
export default AgencyPreview;
|