feat: 产品管理: 价格日志组件
Lei OT
2 months ago
parent
d4ab034c15
commit
ef997cb5c0
@ -0,0 +1,211 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import { Button, Table, Popover, Typography } from 'antd';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { getPPLogAction, getPPRunningAction } from '@/stores/Products/Index';
|
||||||
|
import { formatGroupSize } from '@/hooks/useProductsSets';
|
||||||
|
import { isEmpty, isNotEmpty } from '@/utils/commons';
|
||||||
|
|
||||||
|
const parseJson = (str) => {
|
||||||
|
let result;
|
||||||
|
if (str === null || str === undefined || str === '') {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
result = JSON.parse(str);
|
||||||
|
return Array.isArray(result) ? result.reduce((acc, cur) => ({ ...acc, ...cur }), {}) : result;
|
||||||
|
} catch (e) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const columnsSets = (t, colorize = true) => [
|
||||||
|
{
|
||||||
|
key: 'adult',
|
||||||
|
title: t('AgeType.Adult'),
|
||||||
|
width: '12rem',
|
||||||
|
render: (_, { adult_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
|
||||||
|
const _changed = parseJson(lastedit_changed);
|
||||||
|
const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
|
||||||
|
const ifData = isNotEmpty(_changed.adult_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
|
||||||
|
const preValue =
|
||||||
|
ifCompare && ifData ? (
|
||||||
|
<div className='text-muted line-through '>{`${_changed.adult_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}</div>
|
||||||
|
) : null;
|
||||||
|
const editCls = ifCompare && ifData ? 'text-danger' : '';
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{preValue}
|
||||||
|
<span className={editCls}>{`${adult_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'child',
|
||||||
|
title: t('AgeType.Child'),
|
||||||
|
width: '12rem',
|
||||||
|
render: (_, { child_cost, currency, unit_id, unit_name, audit_state_id, lastedit_changed }) => {
|
||||||
|
const _changed = parseJson(lastedit_changed);
|
||||||
|
const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
|
||||||
|
const ifData = isNotEmpty(_changed.child_cost) || isNotEmpty(_changed.unit_id) || isNotEmpty(_changed.currency);
|
||||||
|
const preValue =
|
||||||
|
ifCompare && ifData ? (
|
||||||
|
<div className='text-muted line-through '>{`${_changed.child_cost} ${_changed.currency || currency} / ${t(`PriceUnit.${_changed.unit_id || unit_id}`)}`}</div>
|
||||||
|
) : null;
|
||||||
|
const editCls = ifCompare && ifData ? 'text-danger' : '';
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{preValue}
|
||||||
|
<span className={editCls}>{`${child_cost} ${currency} / ${t(`PriceUnit.${unit_id}`)}`}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// {key: 'unit', title: t('Unit'), },
|
||||||
|
{
|
||||||
|
key: 'groupSize',
|
||||||
|
dataIndex: ['group_size_min'],
|
||||||
|
title: t('group_size'),
|
||||||
|
width: '6rem',
|
||||||
|
render: (_, { audit_state_id, group_size_min, group_size_max, lastedit_changed }) => {
|
||||||
|
const _changed = parseJson(lastedit_changed);
|
||||||
|
const preValue =
|
||||||
|
colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? (
|
||||||
|
<div className='text-muted line-through '>{`${_changed.group_size_min ?? group_size_min} - ${_changed.group_size_max ?? group_size_max}`}</div>
|
||||||
|
) : null;
|
||||||
|
const editCls = colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.group_size_min) || isNotEmpty(_changed.group_size_max)) ? 'text-danger' : '';
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{preValue}
|
||||||
|
<span className={editCls}>{formatGroupSize(group_size_min, group_size_max)}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'useDates',
|
||||||
|
dataIndex: ['use_dates_start'],
|
||||||
|
title: t('use_dates'),
|
||||||
|
width: '12rem',
|
||||||
|
render: (_, { use_dates_start, use_dates_end, weekdays, audit_state_id, lastedit_changed }) => {
|
||||||
|
const _changed = parseJson(lastedit_changed);
|
||||||
|
const preValue =
|
||||||
|
colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? (
|
||||||
|
<div className='text-muted'>
|
||||||
|
{isNotEmpty(_changed.use_dates_start) ? <span className=' line-through '>{_changed.use_dates_start}</span> : use_dates_start} ~{' '}
|
||||||
|
{isNotEmpty(_changed.use_dates_end) ? <span className='t line-through '>{_changed.use_dates_end}</span> : use_dates_end}
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
const editCls = colorize && ![-1, 1, 2].includes(audit_state_id) && (isNotEmpty(_changed.use_dates_start) || isNotEmpty(_changed.use_dates_end)) ? 'text-danger' : '';
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{preValue}
|
||||||
|
<span className={editCls}>{`${use_dates_start} ~ ${use_dates_end}`}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'weekdays',
|
||||||
|
dataIndex: ['weekdays'],
|
||||||
|
title: t('Weekdays'),
|
||||||
|
width: '6rem',
|
||||||
|
render: (text, { weekdays, audit_state_id, lastedit_changed }) => {
|
||||||
|
const _changed = parseJson(lastedit_changed);
|
||||||
|
const ifCompare = colorize && ![-1, 1, 2].includes(audit_state_id);
|
||||||
|
const ifData = !isEmpty((_changed.weekdayList || []).filter((s) => s));
|
||||||
|
const preValue = ifCompare && ifData ? <div className='text-muted line-through '>{_changed.weekdayList}</div> : null;
|
||||||
|
const editCls = ifCompare && ifData ? 'text-danger' : '';
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{preValue}
|
||||||
|
<span className={editCls}>{text || t('Unlimited')}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const useLogMethod = (method) => {
|
||||||
|
const { t } = useTranslation('products');
|
||||||
|
const methodMap = {
|
||||||
|
'history': {
|
||||||
|
title: t('versionHistory'),
|
||||||
|
fetchData: async (params) => {
|
||||||
|
const data = await getPPLogAction(params);
|
||||||
|
return data;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
'published': {
|
||||||
|
title: t('versionPublished'),
|
||||||
|
fetchData: async (params) => {
|
||||||
|
const { travel_agency_id, product_id, price_id } = params;
|
||||||
|
const data = await getPPRunningAction({ travel_agency_id, product_id_list: product_id });
|
||||||
|
return data?.[0]?.quotation || [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return methodMap[method];
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* ProductQuotationLogPopover - A popover component that displays product quotation change logs or published data
|
||||||
|
*
|
||||||
|
* This component shows a history of price changes for a specific product quotation in a popover table.
|
||||||
|
* It supports displaying different data sources (history logs or published data) and shows
|
||||||
|
* comparison between previous and current values with visual indicators.
|
||||||
|
*
|
||||||
|
* @param {Object} props - Component props
|
||||||
|
* @param {string} props.btnText - The text to display on the trigger button and in the popover header
|
||||||
|
* @param {'history' | 'published'} props.method - Determines data source - "history" for change logs or "published" for published quotations
|
||||||
|
* @param {Object} props.triggerProps - Additional props to pass to the trigger button
|
||||||
|
* @param {number} props.travel_agency_id - ID of the travel agency (used in data fetching)
|
||||||
|
* @param {number} props.product_id - ID of the product (used in data fetching)
|
||||||
|
* @param {number} props.price_id - ID of the price entry (used in data fetching)
|
||||||
|
*/
|
||||||
|
const ProductQuotationLogPopover = ({ method, triggerProps = {}, ...props }) => {
|
||||||
|
const { travel_agency_id, product_id, price_id } = props;
|
||||||
|
|
||||||
|
const { t } = useTranslation('products');
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [logData, setLogData] = useState([]);
|
||||||
|
|
||||||
|
const { title, fetchData } = useLogMethod(method);
|
||||||
|
|
||||||
|
const getData = async () => {
|
||||||
|
const data = await fetchData({ travel_agency_id, product_id, price_id });
|
||||||
|
setLogData(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const columns = [...columnsSets(t, false), { title: '时间', dataIndex: 'updatetime', key: 'updatetime' }];
|
||||||
|
return (
|
||||||
|
<Popover
|
||||||
|
{...props}
|
||||||
|
title={
|
||||||
|
<div className='flex justify-between mt-0 gap-4 items-center'>
|
||||||
|
<Typography.Text strong>{title}</Typography.Text>
|
||||||
|
<Button size='small' onClick={() => setOpen(false)}>
|
||||||
|
×
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
content={
|
||||||
|
<>
|
||||||
|
<Table columns={columns} dataSource={logData} rowKey={'id'} size='small' />
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
trigger={['click']}
|
||||||
|
placement='bottom'
|
||||||
|
className=''
|
||||||
|
rootClassName='w-5/6'
|
||||||
|
open={open}
|
||||||
|
onOpenChange={(v) => {
|
||||||
|
setOpen(v);
|
||||||
|
}}>
|
||||||
|
<Button {...triggerProps} onClick={getData} title={title}>
|
||||||
|
{title}
|
||||||
|
</Button>
|
||||||
|
</Popover>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default ProductQuotationLogPopover;
|
||||||
Loading…
Reference in New Issue