LiaoYijun
2 months ago
commit
97e997d95e
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
@ -0,0 +1,76 @@
|
||||
import { useState } from "react";
|
||||
import { Popover, message, FloatButton, Button, Form, Input } from "antd";
|
||||
import { BugOutlined } from "@ant-design/icons";
|
||||
import useAuthStore from "@/stores/Auth";
|
||||
import { uploadPageSpyLog, sendNotify } from "@/pageSpy";
|
||||
|
||||
function LogUploader() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const hide = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
const handleOpenChange = (newOpen) => {
|
||||
setOpen(newOpen);
|
||||
};
|
||||
|
||||
const [currentUser] = useAuthStore((s) => [s.currentUser]);
|
||||
|
||||
const [messageApi, contextHolder] = message.useMessage();
|
||||
const [formBug] = Form.useForm();
|
||||
|
||||
const popoverContent = (
|
||||
<Form
|
||||
layout={"vertical"}
|
||||
form={formBug}
|
||||
initialValues={{ problem: '' }}
|
||||
scrollToFirstError
|
||||
onFinish={async (values) => {
|
||||
const success = await uploadPageSpyLog();
|
||||
messageApi.success("Thanks for the feedback😊");
|
||||
if (success) {
|
||||
sendNotify(currentUser?.realname + "说：" + values.problem);
|
||||
} else {
|
||||
sendNotify(currentUser?.realname + "上传日志失败");
|
||||
}
|
||||
hide();
|
||||
formBug.setFieldsValue({problem: ''});
|
||||
}}
|
||||
>
|
||||
<Form.Item
|
||||
name="problem"
|
||||
label="Need help?"
|
||||
rules={[{ required: true, message: "Specify issue needing support." }]}
|
||||
>
|
||||
<Input.TextArea rows={3} />
|
||||
</Form.Item>
|
||||
<Button
|
||||
type="primary"
|
||||
htmlType="submit"
|
||||
color="cyan"
|
||||
variant="solid"
|
||||
block
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
</Form>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{contextHolder}
|
||||
<Popover
|
||||
content={popoverContent}
|
||||
trigger={["click"]}
|
||||
placement="topRight"
|
||||
open={open}
|
||||
onOpenChange={handleOpenChange}
|
||||
fresh
|
||||
destroyOnHidden
|
||||
>
|
||||
<FloatButton icon={<BugOutlined />} />
|
||||
</Popover>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default LogUploader;
|
||||
@ -0,0 +1,268 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Button, Table, Popover, Typography } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { formatGroupSize } from '@/hooks/useProductsSets';
|
||||
import { isEmpty, isNotEmpty } from '@/utils/commons';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
|
||||
/**
|
||||
* 产品价格日志
|
||||
*/
|
||||
const getPPLogAction = async (params) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_log`, params)
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 产品价格: 已发布的
|
||||
*/
|
||||
const getPPRunningAction = async (params) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_running`, params)
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
const parseJson = (str) => {
|
||||
let result;
|
||||
if (str === null || str === undefined || str === '') {
|
||||
return {};
|
||||
}
|
||||
try {
|
||||
result = typeof str === 'string' ? JSON.parse(str) : str;
|
||||
return Array.isArray(result) ? result.reduce((acc, cur) => ({ ...acc, ...cur }), {}) : result;
|
||||
} catch (e) {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
|
||||
const statesForHideEdited = [1, 2];
|
||||
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 && !statesForHideEdited.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 || 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 && !statesForHideEdited.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 || 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 && !statesForHideEdited.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 && !statesForHideEdited.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 && !statesForHideEdited.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 && !statesForHideEdited.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 && !statesForHideEdited.includes(audit_state_id);
|
||||
const ifData = !isEmpty(_changed.weekdays);
|
||||
const _weekdays = ifData
|
||||
? _changed.weekdays
|
||||
.split(',')
|
||||
.filter(Boolean)
|
||||
.map((w) => t(`common:weekdaysShort.${w}`))
|
||||
.join(', ')
|
||||
: '';
|
||||
const preValue = ifCompare && ifData ? <div className='text-muted line-through '>{_weekdays}</div> : null;
|
||||
const editCls = ifCompare && ifData ? 'text-danger' : '';
|
||||
const weekdaysTxt = weekdays
|
||||
.split(',')
|
||||
.filter(Boolean)
|
||||
.map((w) => t(`common:weekdaysShort.${w}`))
|
||||
.join(', ');
|
||||
return (
|
||||
<div>
|
||||
{preValue}
|
||||
<span className={editCls}>{weekdaysTxt || t('Unlimited')}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const useLogMethod = (method) => {
|
||||
const { t } = useTranslation('products');
|
||||
const methodMap = {
|
||||
'history': {
|
||||
title: '📑' + t('versionHistory'),
|
||||
btnText: t('versionHistory'),
|
||||
fetchData: async (params) => {
|
||||
const data = await getPPLogAction(params);
|
||||
return { data };
|
||||
},
|
||||
},
|
||||
'published': {
|
||||
title: '✅' + t('versionPublished'),
|
||||
btnText: t('versionPublished'),
|
||||
fetchData: async (params) => {
|
||||
const { travel_agency_id, product_id, price_id, use_year } = params;
|
||||
const data = await getPPRunningAction({ travel_agency_id, product_id_list: product_id, use_year });
|
||||
return { data: 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)
|
||||
* @param {number} props.use_year - Year to use for fetching data (used in data fetching)
|
||||
* @param {Function} props.onOpenChange - Callback function to be called when the popover opens or closes
|
||||
*/
|
||||
const ProductQuotationLogPopover = ({ method, triggerProps = {}, onOpenChange, ...props }) => {
|
||||
const { travel_agency_id, product_id, price_id, use_year } = props;
|
||||
const { travelAgencyId } = usingStorage();
|
||||
|
||||
const { t } = useTranslation('products');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [logData, setLogData] = useState([]);
|
||||
|
||||
const { title, btnText: methodBtnText, fetchData } = useLogMethod(method);
|
||||
|
||||
const tablePagination = useMemo(() => method === 'history' ? { pageSize: 5, position: ['bottomLeft']} : { pageSize: 10, position: ['bottomLeft']}, [method]);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const getData = async () => {
|
||||
setLoading(true);
|
||||
const { data } = await fetchData({ travel_agency_id: travel_agency_id || travelAgencyId, product_id, price_id, use_year });
|
||||
setLogData(data);
|
||||
invokeOpenChange(true);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const invokeOpenChange = (_open) => {
|
||||
if (typeof onOpenChange === 'function') {
|
||||
onOpenChange(_open);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [...columnsSets(t, false),
|
||||
{ title: t('common:time'), dataIndex: 'updatetime', key: 'updatetime', width: '10rem', },
|
||||
{ title: t('common:operator'), dataIndex: 'update_by', key: 'update_by' }
|
||||
];
|
||||
return (
|
||||
<Popover
|
||||
placement='bottom'
|
||||
className=''
|
||||
rootClassName='w-5/6'
|
||||
{...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);
|
||||
invokeOpenChange(false);
|
||||
}}>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<>
|
||||
<Table columns={columns} dataSource={logData} rowKey={'id'} size='small' loading={loading} pagination={tablePagination} />
|
||||
</>
|
||||
}
|
||||
trigger={['click']}
|
||||
open={open}
|
||||
onOpenChange={(v) => {
|
||||
setOpen(v);
|
||||
invokeOpenChange(v);
|
||||
}}>
|
||||
<Button {...triggerProps} onClick={getData} title={title}>
|
||||
{props.btnText || methodBtnText}
|
||||
</Button>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
export default ProductQuotationLogPopover;
|
||||
@ -0,0 +1,45 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { Row, DatePicker, Flex, Col, Typography } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
function PickYear() {
|
||||
const navigate = useNavigate();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Row justify="center">
|
||||
<Col span={4}>
|
||||
<Flex gap="middle" vertical>
|
||||
<Typography.Title className="text-center" level={3}>
|
||||
请选择产品年份
|
||||
</Typography.Title>
|
||||
<DatePicker
|
||||
className="w-full"
|
||||
size="large"
|
||||
variant="underlined"
|
||||
needConfirm
|
||||
inputReadOnly={true}
|
||||
minDate={dayjs().add(-30, "year")}
|
||||
maxDate={dayjs().add(2, "year")}
|
||||
allowClear={false}
|
||||
picker="year"
|
||||
styles={{
|
||||
root: {
|
||||
color: 'red'
|
||||
}
|
||||
}}
|
||||
open={true}
|
||||
onOk={(date) => {
|
||||
const useYear = date.year();
|
||||
navigate(`/products/${travelAgencyId}/${useYear}/all/edit`);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PickYear;
|
||||
Loading…
Reference in New Issue