Compare commits
4 Commits
main
...
feature/pr
| Author | SHA1 | Date |
|---|---|---|
Lei OT
|
24b6734999 | 1 year ago |
|
Lei OT
|
3073154392 | 1 year ago |
|
Lei OT
|
640e6e7fb2 | 1 year ago |
|
Lei OT
|
d27e777eb7 | 1 year ago |
@ -1 +0,0 @@
|
||||
npm version patch
|
||||
@ -1 +0,0 @@
|
||||
npm version prerelease
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 4.2 KiB |
@ -1,6 +1,26 @@
|
||||
@import 'tailwindcss/base';
|
||||
@import 'tailwindcss/components';
|
||||
@import 'tailwindcss/utilities';
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
height: 36px;
|
||||
margin: 16px 24px 16px 0;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.reservation-highlight {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: rgba(255, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
#error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.ant-table-wrapper.border-collapse table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@ -0,0 +1,243 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Table, Input, Button, DatePicker, Row, Col, Tag, Select } from 'antd';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const { Option } = Select;
|
||||
const BatchImportPrice = () => {
|
||||
const [startDate, setStartDate] = useState(null);
|
||||
const [endDate, setEndDate] = useState(null);
|
||||
const [startPeople, setStartPeople] = useState(1);
|
||||
const [endPeople, setEndPeople] = useState(5);
|
||||
const [dateRanges, setDateRanges] = useState([]);
|
||||
const [peopleRanges, setPeopleRanges] = useState([]);
|
||||
const [tableData, setTableData] = useState([]);
|
||||
const [currency, setCurrency] = useState('RMB'); // 默认值为 RMB
|
||||
const [type, setType] = useState('每人'); // 默认值为 每人
|
||||
|
||||
const handleGenerateTable = () => {
|
||||
if (dateRanges.length === 0 || peopleRanges.length === 0) return;
|
||||
|
||||
const newData = dateRanges.flatMap(dateRange => {
|
||||
const { startDate, endDate } = dateRange;
|
||||
const dates = generateDateRange(startDate, endDate);
|
||||
const row = { dateRange: `${startDate.format('YYYY-MM-DD')} ~ ${endDate.format('YYYY-MM-DD')}` };
|
||||
|
||||
peopleRanges.forEach(peopleRangeString => {
|
||||
const [start, end] = peopleRangeString.split('-').map(Number);
|
||||
generatePeopleRange(start, end).forEach(person => {
|
||||
row[`${person}_adultPrice`] = '';
|
||||
row[`${person}_childPrice`] = '';
|
||||
});
|
||||
});
|
||||
|
||||
dates.forEach(date => {
|
||||
row[date] = '';
|
||||
});
|
||||
|
||||
return row;
|
||||
});
|
||||
|
||||
setTableData(newData);
|
||||
};
|
||||
|
||||
const generateDateRange = (start, end) => {
|
||||
const dates = [];
|
||||
let currentDate = start.clone();
|
||||
|
||||
while (currentDate <= end) {
|
||||
dates.push(currentDate.format('YYYY-MM-DD'));
|
||||
currentDate = currentDate.add(1, 'day');
|
||||
}
|
||||
|
||||
return dates;
|
||||
};
|
||||
|
||||
const generatePeopleRange = (start, end) => {
|
||||
const range = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
range.push(`人等${i}`);
|
||||
}
|
||||
return range;
|
||||
};
|
||||
|
||||
const handleCellChange = (value, dateRange, peopleRange, type) => {
|
||||
const newData = [...tableData];
|
||||
const rowIndex = newData.findIndex(row => row.dateRange === dateRange);
|
||||
newData[rowIndex][`${peopleRange}_${type}`] = value;
|
||||
setTableData(newData);
|
||||
};
|
||||
|
||||
const handleAddDateRange = () => {
|
||||
if (startDate && endDate) {
|
||||
const newDateRange = { startDate, endDate };
|
||||
// 检查是否已经存在相同的日期范围
|
||||
const isDateRangeExist = dateRanges.some(range => (
|
||||
range.startDate.isSame(startDate, 'day') && range.endDate.isSame(endDate, 'day')
|
||||
));
|
||||
if (!isDateRangeExist) {
|
||||
setDateRanges([...dateRanges, newDateRange]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddPeopleRange = () => {
|
||||
if (startPeople <= endPeople) {
|
||||
const newPeopleRange = `${startPeople}-${endPeople}`;
|
||||
// 检查是否已经存在相同的人员范围
|
||||
const isPeopleRangeExist = peopleRanges.includes(newPeopleRange);
|
||||
if (!isPeopleRangeExist) {
|
||||
setPeopleRanges([...peopleRanges, newPeopleRange]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTag = (index, type) => {
|
||||
if (type === 'date') {
|
||||
setDateRanges(dateRanges.filter((_, i) => i !== index));
|
||||
} else {
|
||||
const removedPeopleRange = peopleRanges[index];
|
||||
setPeopleRanges(peopleRanges.filter(range => range !== removedPeopleRange));
|
||||
}
|
||||
setTableData([]);
|
||||
};
|
||||
|
||||
|
||||
const [adultPrice, setAdultPrice] = useState('');
|
||||
const [childPrice, setChildPrice] = useState('');
|
||||
|
||||
const handleAdultPriceChange = (value, dateRange) => {
|
||||
const newData = [...tableData];
|
||||
const rowIndex = newData.findIndex(row => row.dateRange === dateRange);
|
||||
newData[rowIndex]['成人价'] = value;
|
||||
setTableData(newData);
|
||||
};
|
||||
|
||||
const handleChildPriceChange = (value, dateRange) => {
|
||||
const newData = [...tableData];
|
||||
const rowIndex = newData.findIndex(row => row.dateRange === dateRange);
|
||||
newData[rowIndex]['儿童价'] = value;
|
||||
setTableData(newData);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '日期\\人等',
|
||||
dataIndex: 'dateRange',
|
||||
key: 'dateRange',
|
||||
},
|
||||
...peopleRanges.flatMap(peopleRange => ([
|
||||
{
|
||||
title: peopleRange,
|
||||
dataIndex: `${peopleRange}_price`,
|
||||
key: `${peopleRange}_price`,
|
||||
render: (text, record) => (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<Input
|
||||
value={record[`${peopleRange}_adultPrice`]}
|
||||
onChange={(e) => handleCellChange(e.target.value, record.dateRange, peopleRange, 'adultPrice')}
|
||||
placeholder="成人价"
|
||||
style={{ width: '45%' }}
|
||||
suffix={`${currency}/${type}`}
|
||||
/>
|
||||
<Input
|
||||
value={record[`${peopleRange}_childPrice`]}
|
||||
onChange={(e) => handleCellChange(e.target.value, record.dateRange, peopleRange, 'childPrice')}
|
||||
placeholder="儿童价"
|
||||
style={{ width: '45%' }}
|
||||
suffix={`${currency}/${type}`}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
])),
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<Select value={currency} onChange={value => setCurrency(value)} style={{ width: '100%', marginTop: 10 }}>
|
||||
<Option value="RMB">RMB</Option>
|
||||
<Option value="MY">MY</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={4}>
|
||||
<Select value={type} onChange={value => setType(value)} style={{ width: '100%', marginTop: 10 }}>
|
||||
<Option value="每人">每人</Option>
|
||||
<Option value="美团">美团</Option>
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<RangePicker
|
||||
onChange={(dates) => {
|
||||
if (dates && dates.length === 2) {
|
||||
setStartDate(dates[0]);
|
||||
setEndDate(dates[1]);
|
||||
} else {
|
||||
setStartDate(null);
|
||||
setEndDate(null);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Button onClick={handleAddDateRange} type="primary">记录有效期</Button>
|
||||
</Row>
|
||||
<Row gutter={16}>
|
||||
<Col span={8}>
|
||||
<Input.Group compact style={{ marginTop: 10 }}>
|
||||
<Input
|
||||
style={{ width: 100, textAlign: 'center' }}
|
||||
placeholder="Start"
|
||||
value={startPeople}
|
||||
onChange={(e) => setStartPeople(parseInt(e.target.value, 10))}
|
||||
/>
|
||||
<Input
|
||||
style={{ width: 30, borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff' }}
|
||||
placeholder="~"
|
||||
disabled
|
||||
/>
|
||||
<Input
|
||||
style={{ width: 100, textAlign: 'center', borderLeft: 0 }}
|
||||
placeholder="End"
|
||||
value={endPeople}
|
||||
onChange={(e) => setEndPeople(parseInt(e.target.value, 10))}
|
||||
/>
|
||||
</Input.Group>
|
||||
</Col>
|
||||
<Button onClick={handleAddPeopleRange} type="primary" style={{ marginTop: 10 }}>记录人等</Button>
|
||||
</Row>
|
||||
<Button onClick={handleGenerateTable} type="primary" style={{ marginTop: 10 }}>生成表格</Button>
|
||||
|
||||
|
||||
<Row gutter={16} style={{ marginTop: '16px' }}>
|
||||
<Col span={24}>
|
||||
{dateRanges.map((dateRange, index) => (
|
||||
<Tag key={index} closable onClose={() => handleRemoveTag(index, 'date')}>
|
||||
{`${dateRange.startDate.format('YYYY-MM-DD')} ~ ${dateRange.endDate.format('YYYY-MM-DD')}`}
|
||||
</Tag>
|
||||
))}
|
||||
{peopleRanges.map((peopleRange, index) => (
|
||||
<Tag key={index} closable onClose={() => handleRemoveTag(index, 'people')}>
|
||||
{peopleRange}
|
||||
</Tag>
|
||||
))}
|
||||
</Col>
|
||||
</Row>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={tableData}
|
||||
bordered
|
||||
pagination={false}
|
||||
style={{ marginTop: '16px' }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BatchImportPrice;
|
||||
|
||||
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import {} from 'antd';
|
||||
import SearchInput from './SearchInput';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
//供应商列表
|
||||
export const fetchCityList = async (q) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/search_cities`, { q });
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
const CitySelector = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
placeholder={t('products:City')}
|
||||
mode={null}
|
||||
maxTagCount={0}
|
||||
{...props}
|
||||
fetchOptions={fetchCityList}
|
||||
map={{ city_name: 'label', city_id: 'value' }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default CitySelector;
|
||||
@ -1,94 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Tag, Button, message } from 'antd';
|
||||
import { CaretUpOutlined, CaretDownOutlined, DownloadOutlined } from '@ant-design/icons';
|
||||
import { utils, writeFile } from "xlsx";
|
||||
import { isEmpty, getNestedValue } from "../utils/commons";
|
||||
|
||||
/**
|
||||
* @property diffPercent
|
||||
* @property diffData
|
||||
* @property data1
|
||||
* @property data2
|
||||
*/
|
||||
export const VSTag = (props) => {
|
||||
const { diffPercent, diffData, data1, data2 } = props;
|
||||
const CaretIcon = parseInt(diffPercent) < 0 ? CaretDownOutlined : CaretUpOutlined;
|
||||
const tagColor = parseInt(diffPercent) < 0 ? 'gold' : 'lime';
|
||||
return parseInt(diffPercent) === 0 ? (
|
||||
'-'
|
||||
) : (
|
||||
<span>
|
||||
{/* <div>
|
||||
{data1} vs {data2}
|
||||
</div> */}
|
||||
<Tag icon={<CaretIcon />} color={tagColor}>
|
||||
{diffPercent}<span>%</span>{' '}<span>{diffData}</span>
|
||||
</Tag>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* 导出表格数据存为xlsx
|
||||
*/
|
||||
export const TableExportBtn = (props) => {
|
||||
const output_name = `${props.label}`;
|
||||
const [columnsMap, setColumnsMap] = useState([]);
|
||||
const [summaryRow, setSummaryRow] = useState({});
|
||||
useEffect(() => {
|
||||
const r1 = props.columns.reduce((r, v) => ({
|
||||
...r,
|
||||
...(v.children ? v.children.reduce((rc, vc, ci) => ({
|
||||
...rc,
|
||||
...(vc?.titleX ? {[`${v?.titleX || v.title},${vc.titleX}`]: vc.titleX } : {[(v?.titleX || v.title) + (ci || '')]: `${vc?.titleX || vc?.title || ''}`}),
|
||||
}), {}) : {})
|
||||
}), {});
|
||||
const flatCols = props.columns.flatMap((v, k) =>
|
||||
v.children ? v.children.map((vc, ci) => ({ ...vc, title: `${v?.titleX || v.title}` + (vc?.titleX ? `,${vc.titleX}` : (ci || '')) })) : {...v, title: `${v?.titleX || v.title}`}
|
||||
);
|
||||
// .filter((c) => c.dataIndex)
|
||||
// !['string', 'number'].includes(typeof vc.title) ? `${v?.titleX || v.title}` : `${v?.titleX || v.title}-${vc.title || ''}`
|
||||
;
|
||||
setColumnsMap(flatCols);
|
||||
// console.log('flatCols', flatCols);
|
||||
|
||||
setSummaryRow(r1);
|
||||
// console.log('summaryRow', r1);
|
||||
|
||||
return () => {};
|
||||
}, [props.columns]);
|
||||
|
||||
const onExport = () => {
|
||||
if (isEmpty(props.dataSource)) {
|
||||
message.warning('无结果.');
|
||||
return false;
|
||||
}
|
||||
const data = props.dataSource.map((item) => {
|
||||
const itemMapped = columnsMap.reduce((sv, kset) => {
|
||||
const render_val = typeof kset?.render === 'function' ? kset.render('', item) : null;
|
||||
const data_val = kset?.dataIndex ? (Array.isArray(kset.dataIndex) ? getNestedValue(item, kset.dataIndex) : item[kset.dataIndex]) : undefined;
|
||||
const x_val = item[`${kset.dataIndex}_X`];
|
||||
// const _title = kset.title.replace('-[object Object]', '');
|
||||
const v = { [kset.title]: x_val || data_val || render_val };
|
||||
return { ...sv, ...v };
|
||||
}, {});
|
||||
return itemMapped;
|
||||
});
|
||||
const ws = utils.json_to_sheet([].concat(isEmpty(summaryRow) ? [] : [summaryRow], data), { header: columnsMap.filter((r) => r.dataIndex).map((r) => r.title) });
|
||||
const wb = utils.book_new();
|
||||
utils.book_append_sheet(wb, ws, 'sheet');
|
||||
writeFile(wb, `${output_name}.xlsx`);
|
||||
};
|
||||
|
||||
return (
|
||||
<Button
|
||||
type="link"
|
||||
icon={<DownloadOutlined />}
|
||||
size="small"
|
||||
disabled={false}
|
||||
onClick={onExport}
|
||||
>
|
||||
{props.btnTxt || '导出excel'}
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
@ -1,76 +0,0 @@
|
||||
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;
|
||||
@ -1,77 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Spin, Cascader } from 'antd';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { groupBy } from '@/utils/commons';
|
||||
|
||||
// 产品列表
|
||||
export const fetchAgencyProductsList = async (params) => {
|
||||
const map = { title: 'label', id: 'value' };
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, params);
|
||||
const byTypes = errcode !== 0 ? {} : (groupBy(result.products, (row) => row.info.product_type_name));
|
||||
// console.log(byTypes)
|
||||
return Object.keys(byTypes).map((type_name) => ({
|
||||
label: type_name,
|
||||
title: type_name,
|
||||
key: type_name,
|
||||
value: type_name,
|
||||
// disableCheckbox: true,
|
||||
level: 1,
|
||||
options: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id })),
|
||||
children: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id, key: row.info.id, level:2 })),
|
||||
}));
|
||||
};
|
||||
|
||||
const ProductsSelector = ({ params, value, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const [fetching, setFetching] = useState(false);
|
||||
const [options, setOptions] = useState([]);
|
||||
|
||||
const fetchAction = async () => {
|
||||
setOptions([]);
|
||||
setFetching(true);
|
||||
const data = await fetchAgencyProductsList(params);
|
||||
// console.log(data)
|
||||
setOptions(data);
|
||||
setFetching(false);
|
||||
return data;
|
||||
};
|
||||
useEffect(() => {
|
||||
fetchAction();
|
||||
|
||||
return () => {};
|
||||
}, []);
|
||||
|
||||
const filter = (inputValue, path) => path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
|
||||
|
||||
const onCascaderChange = (value, selectedOptions) => {
|
||||
// console.log(value, selectedOptions)
|
||||
const selectedP = selectedOptions.map(([parent, item]) => item);
|
||||
// console.log(selectedP);
|
||||
if (typeof props.onChange === 'function') {
|
||||
props.onChange(selectedP);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Cascader
|
||||
placeholder={t('products:ProductName')}
|
||||
allowClear
|
||||
expandTrigger="hover"
|
||||
multiple
|
||||
showCheckedStrategy={Cascader.SHOW_CHILD}
|
||||
maxTagCount={0}
|
||||
classNames={{ popup: { root: 'h-96 overflow-y-auto [&_.ant-cascader-menu]:h-full [&_.ant-cascader-checkbox-disabled]:hidden'}}}
|
||||
{...props}
|
||||
notFoundContent={fetching ? <Spin size='small' /> : null}
|
||||
options={options}
|
||||
onChange={onCascaderChange}
|
||||
showSearch={{ filter }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductsSelector;
|
||||
@ -1,14 +0,0 @@
|
||||
import { Select } from 'antd';
|
||||
import { useProductsTypes } from '@/hooks/useProductsSets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const ProductsTypesSelector = ({...props}) => {
|
||||
const productsTypes = useProductsTypes();
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<Select labelInValue allowClear placeholder={t('products:ProductType')} options={productsTypes} {...props}/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductsTypesSelector;
|
||||
@ -1,29 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import {} from 'antd';
|
||||
import SearchInput from './SearchInput';
|
||||
import { fetchJSON } from '@/utils/request';
|
||||
import { HT_HOST } from '@/config';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
//供应商列表
|
||||
export const fetchVendorList = async (q) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/VendorList`, { q });
|
||||
return errcode !== 0 ? [] : result;
|
||||
};
|
||||
|
||||
const VendorSelector = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
placeholder={t('products:Vendor')}
|
||||
mode={'multiple'}
|
||||
maxTagCount={0}
|
||||
{...props}
|
||||
fetchOptions={fetchVendorList}
|
||||
map={{ travel_agency_name: 'label', travel_agency_id: 'value' }}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default VendorSelector;
|
||||
@ -0,0 +1,51 @@
|
||||
import React, { useState } from 'react';
|
||||
import { DatePicker, Button } from 'antd';
|
||||
|
||||
const Date = ({ onDateChange }) => {
|
||||
const dateFormat = 'YYYY/MM/DD';
|
||||
const { RangePicker } = DatePicker;
|
||||
const [dateRange, setDateRange] = useState(null);
|
||||
const [selectedDays, setSelectedDays] = useState([]);
|
||||
|
||||
const days = [
|
||||
'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'
|
||||
];
|
||||
|
||||
const handleChange = (date, dateString) => {
|
||||
const range = dateString[0] + "-" + dateString[1];
|
||||
setDateRange(range);
|
||||
onDateChange({ dateRange: range, selectedDays });
|
||||
};
|
||||
|
||||
const handleDayClick = (day) => {
|
||||
setSelectedDays((prevSelectedDays) => {
|
||||
const updatedDays = prevSelectedDays.includes(day)
|
||||
? prevSelectedDays.filter((d) => d !== day)
|
||||
: [...prevSelectedDays, day];
|
||||
onDateChange({ dateRange, selectedDays: updatedDays });
|
||||
return updatedDays;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4>Data</h4>
|
||||
<RangePicker format={dateFormat} onChange={handleChange} />
|
||||
<h4>Weekdays</h4>
|
||||
<div>
|
||||
{days.map((day, index) => (
|
||||
<Button
|
||||
key={index}
|
||||
type={selectedDays.includes(day) ? 'primary' : 'default'}
|
||||
onClick={() => handleDayClick(day)}
|
||||
style={{ margin: '5px' }}
|
||||
>
|
||||
{day}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Date;
|
||||
@ -1,139 +0,0 @@
|
||||
import { flush, groupBy, isEmpty, isNotEmpty, unique, uniqWith } from '@/utils/commons';
|
||||
import dayjs from 'dayjs';
|
||||
// Shoulder Season 平季; peak season 旺季
|
||||
const isFullYearOrLonger = (year, startDate, endDate) => {
|
||||
// Parse the dates
|
||||
const start = dayjs(startDate, 'YYYY-MM-DD');
|
||||
const end = dayjs(endDate, 'YYYY-MM-DD');
|
||||
|
||||
// Create the start and end dates for the year
|
||||
const yearStart = dayjs(`${year}-01-01`, 'YYYY-MM-DD');
|
||||
const yearEnd = dayjs(`${year}-12-31`, 'YYYY-MM-DD');
|
||||
|
||||
// Check if start is '01-01' and end is '12-31' and the year matches
|
||||
const isFullYear = start.isSame(yearStart, 'day') && end.isSame(yearEnd, 'day');
|
||||
|
||||
// Check if the range is longer than a year
|
||||
const isLongerThanYear = end.diff(start, 'year') >= 1;
|
||||
|
||||
return isFullYear || isLongerThanYear;
|
||||
};
|
||||
|
||||
const uniqueBySub = (arr) =>
|
||||
arr.filter((subArr1, _, self) => {
|
||||
return !self.some((subArr2) => {
|
||||
if (subArr1 === subArr2) return false; // don't compare a subarray with itself
|
||||
const set1 = new Set(subArr1);
|
||||
const set2 = new Set(subArr2);
|
||||
// check if subArr1 is a subset of subArr2
|
||||
return [...set1].every((value) => set2.has(value));
|
||||
});
|
||||
});
|
||||
export const chunkBy = (use_year, dataList = [], by = []) => {
|
||||
const dataRollSS = dataList.map((rowp, ii) => {
|
||||
const quotation = rowp.quotation.map((quoteItem) => {
|
||||
return {
|
||||
...quoteItem,
|
||||
quote_season: isFullYearOrLonger(use_year, quoteItem.use_dates_start, quoteItem.use_dates_end) ? 'SS' : 'PS',
|
||||
};
|
||||
});
|
||||
return { ...rowp, quotation };
|
||||
});
|
||||
|
||||
// 人等分组只取平季, 因为产品只一行
|
||||
const allQuotesSS = dataRollSS.reduce((acc, rowp) => acc.concat(rowp.quotation.filter((q) => q.quote_season === 'SS')), []);
|
||||
|
||||
const allQuotesPS = dataRollSS.reduce((acc, rowp) => acc.concat(rowp.quotation.filter((q) => q.quote_season === 'PS')), []);
|
||||
const allQuotesSSS = isEmpty(allQuotesSS) ? allQuotesPS : allQuotesSS;
|
||||
|
||||
const PGroupSizeSS = allQuotesSSS.reduce((aq, cq) => {
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN] || [];
|
||||
aq[cq.WPI_SN].push(cq.group_size_min);
|
||||
aq[cq.WPI_SN] = unique(aq[cq.WPI_SN]);
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN].slice().sort((a, b) => a - b);
|
||||
return aq;
|
||||
}, {});
|
||||
|
||||
const maxGroupSize = Math.max(...allQuotesSSS.map((q) => q.group_size_max));
|
||||
const maxSet = maxGroupSize === 1000 ? Infinity : maxGroupSize;
|
||||
|
||||
const _SSMinSet = uniqWith(Object.values(PGroupSizeSS), (a, b) => a.join(',') === b.join(','));
|
||||
// const uSSsizeSetArr = (_SSMinSet)
|
||||
const uSSsizeSetArr = uniqueBySub(_SSMinSet);
|
||||
|
||||
// * 若不重叠分组, 则上面不要 uniqueBySub
|
||||
for (const key in PGroupSizeSS) {
|
||||
if (Object.prototype.hasOwnProperty.call(PGroupSizeSS, key)) {
|
||||
const element = PGroupSizeSS[key];
|
||||
const findSet = uSSsizeSetArr.find((minCut) => element.every((v) => minCut.includes(v)));
|
||||
PGroupSizeSS[key] = findSet;
|
||||
}
|
||||
}
|
||||
|
||||
const [SSsizeSets, PSsizeSets] = [uSSsizeSetArr, []].map((arr) => {
|
||||
const _arr = structuredClone(arr);
|
||||
const arrSets = _arr.map((keyMins) =>
|
||||
keyMins.reduce((acc, curr, idx, minsArr) => {
|
||||
const _max = idx === minsArr.length - 1 ? maxSet : Number(minsArr[idx + 1]) - 1;
|
||||
acc.push([Number(curr), _max]);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
return arrSets;
|
||||
});
|
||||
|
||||
const compactSizeSets = {
|
||||
SSsizeSetKey: uSSsizeSetArr.map((s) => s.join(',')).filter(isNotEmpty),
|
||||
sizeSets: SSsizeSets,
|
||||
};
|
||||
|
||||
const chunkSS = structuredClone(dataRollSS).map((rowp) => {
|
||||
const pkey = (PGroupSizeSS[rowp.info.id] || []).join(',') || compactSizeSets.SSsizeSetKey[0]; // todo:
|
||||
|
||||
const thisRange = (PGroupSizeSS[rowp.info.id] || []).reduce((acc, curr, idx, minsArr) => {
|
||||
const _max = idx === minsArr.length - 1 ? maxSet : Number(minsArr[idx + 1]) - 1;
|
||||
acc.push([Number(curr), _max]);
|
||||
return acc;
|
||||
}, []);
|
||||
const _quotation = rowp.quotation.map((quoteItem) => {
|
||||
const ssSets = isEmpty(thisRange) ? SSsizeSets[0] : structuredClone(thisRange).reverse();
|
||||
|
||||
const matchRange = ssSets.find((ss) => quoteItem.group_size_min >= ss[0] && quoteItem.group_size_max <= ss[1]);
|
||||
const findEnd = matchRange || ssSets.find((ss) => quoteItem.group_size_max > ss[0] && quoteItem.group_size_max <= ss[1] && ss[1] !== Infinity);
|
||||
const findStart = findEnd || ssSets.find((ss) => quoteItem.group_size_min >= ss[0]);
|
||||
const finalRange = findStart || ssSets[0];
|
||||
|
||||
quoteItem.quote_size = finalRange.join('-');
|
||||
return quoteItem;
|
||||
});
|
||||
const quote_chunk_flat = groupBy(_quotation, (quoteItem2) => by.map((key) => quoteItem2[key]).join('@'));
|
||||
const quote_chunk = Object.keys(quote_chunk_flat).reduce((qc, ckey) => {
|
||||
const ckeyArr = ckey.split('@');
|
||||
if (isEmpty(qc[ckeyArr[0]])) {
|
||||
qc[ckeyArr[0]] = ckeyArr[1] ? { [ckeyArr[1]]: quote_chunk_flat[ckey] } : quote_chunk_flat[ckey];
|
||||
} else {
|
||||
qc[ckeyArr[0]][ckeyArr[1]] = (qc[ckeyArr[0]][ckeyArr[1]] || []).concat(quote_chunk_flat[ckey]);
|
||||
}
|
||||
return qc;
|
||||
}, {});
|
||||
return {
|
||||
...rowp,
|
||||
sizeSetsSS: pkey,
|
||||
quotation: _quotation,
|
||||
quote_chunk,
|
||||
};
|
||||
});
|
||||
|
||||
const allquotation = chunkSS.reduce((a, c) => a.concat(c.quotation), []);
|
||||
// 取出两季相应的时效区间
|
||||
const SSRange = unique((allquotation || []).filter((q) => q.quote_season === 'SS').map((qr) => `${qr.use_dates_start}~${qr.use_dates_end}`));
|
||||
const PSRange = unique((allquotation || []).filter((q) => q.quote_season === 'PS').map((qr) => `${qr.use_dates_start}~${qr.use_dates_end}`));
|
||||
|
||||
return {
|
||||
chunk: chunkSS,
|
||||
dataSource: chunkSS,
|
||||
SSRange,
|
||||
PSRange,
|
||||
...compactSizeSets,
|
||||
};
|
||||
};
|
||||
@ -1,395 +0,0 @@
|
||||
import { flush, groupBy, isEmpty, isNotEmpty, pick, unique, uniqWith } from '@/utils/commons';
|
||||
import dayjs from 'dayjs';
|
||||
import { formatGroupSize } from './useProductsSets';
|
||||
|
||||
// Shoulder Season 平季; peak season 旺季
|
||||
export const isFullYearOrLonger = (year, startDate, endDate) => {
|
||||
// Parse the dates
|
||||
const start = dayjs(startDate, 'YYYY-MM-DD');
|
||||
const end = dayjs(endDate, 'YYYY-MM-DD');
|
||||
|
||||
// Create the start and end dates for the year
|
||||
const yearStart = dayjs(`${year}-01-01`, 'YYYY-MM-DD');
|
||||
const yearEnd = dayjs(`${year}-12-31`, 'YYYY-MM-DD');
|
||||
|
||||
// Check if start is '01-01' and end is '12-31' and the year matches
|
||||
const isFullYear = start.isSame(yearStart, 'day') && end.isSame(yearEnd, 'day');
|
||||
|
||||
// Check if the range is longer than a year
|
||||
const isLongerThanYear = end.diff(startDate, 'year') >= 1;
|
||||
const isLongerThan12M = end.diff(startDate, 'month') >= 11;
|
||||
|
||||
return isFullYear || isLongerThanYear || isLongerThan12M;
|
||||
};
|
||||
|
||||
const uniqueBySub = (arr) => {
|
||||
const sortedArr = arr.sort((a, b) => b.length - a.length);
|
||||
const uniqueArr = [];
|
||||
sortedArr.forEach((currentSubArr) => {
|
||||
const isSubsetOfUnique = uniqueArr.some((uniqueSubArr) => {
|
||||
return currentSubArr.every((item) => uniqueSubArr.includes(item));
|
||||
});
|
||||
if (!isSubsetOfUnique) {
|
||||
uniqueArr.push(currentSubArr);
|
||||
}
|
||||
});
|
||||
|
||||
return uniqueArr;
|
||||
}
|
||||
|
||||
export const chunkBy = (use_year, dataList = [], by = []) => {
|
||||
const dataRollSS = dataList.map((rowp, ii) => {
|
||||
const quotation = rowp.quotation.map((quoteItem) => {
|
||||
return {
|
||||
...quoteItem,
|
||||
quote_season: isFullYearOrLonger(use_year, quoteItem.use_dates_start, quoteItem.use_dates_end) ? 'SS' : 'PS',
|
||||
};
|
||||
});
|
||||
return { ...rowp, quotation };
|
||||
});
|
||||
|
||||
// 人等分组只取平季, 因为产品只一行
|
||||
const allQuotesSS = dataRollSS.reduce((acc, rowp) => acc.concat(rowp.quotation.filter((q) => q.quote_season === 'SS')), []);
|
||||
|
||||
const allQuotesPS = dataRollSS.reduce((acc, rowp) => acc.concat(rowp.quotation.filter((q) => q.quote_season === 'PS')), []);
|
||||
const allQuotesSSS = isEmpty(allQuotesSS) ? allQuotesPS : allQuotesSS;
|
||||
|
||||
const allQuotesSSS2 = [].concat(allQuotesSS, allQuotesPS);
|
||||
|
||||
const PGroupSizeSS = allQuotesSSS.reduce((aq, cq) => {
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN] || [];
|
||||
aq[cq.WPI_SN].push(`${cq.group_size_min}-${cq.group_size_max}`);
|
||||
// aq[cq.WPI_SN].push([cq.group_size_min, cq.group_size_max]);
|
||||
// aq[cq.WPI_SN].push(cq.group_size_min);
|
||||
aq[cq.WPI_SN] = unique(aq[cq.WPI_SN]);
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN].slice().sort((a, b) => a.split('-')[0] - b.split('-')[0]);
|
||||
return aq;
|
||||
}, {});
|
||||
// debug:
|
||||
// PGroupSizeSS['5098'] = ['1-1000'];
|
||||
// PGroupSizeSS['5099'] = ['1-2', '3-4'];
|
||||
|
||||
const PGroupSizePS = allQuotesPS.reduce((aq, cq) => {
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN] || [];
|
||||
aq[cq.WPI_SN].push(`${cq.group_size_min}-${cq.group_size_max}`);
|
||||
// aq[cq.WPI_SN].push([cq.group_size_min, cq.group_size_max]);
|
||||
// aq[cq.WPI_SN].push(cq.group_size_min);
|
||||
aq[cq.WPI_SN] = unique(aq[cq.WPI_SN]);
|
||||
aq[cq.WPI_SN] = aq[cq.WPI_SN].slice().sort((a, b) => a.split('-')[0] - b.split('-')[0]);
|
||||
return aq;
|
||||
}, {});
|
||||
|
||||
// 补全产品旺季的人等分组 (当旺季和平季的人等不完全一致时)
|
||||
const allWPI = unique(allQuotesSSS2.map((ele) => ele.WPI_SN));
|
||||
for (const WPI of allWPI) {
|
||||
// for (const WPI in PGroupSizeSS) {
|
||||
// if (Object.prototype.hasOwnProperty.call(PGroupSizeSS, WPI)) {
|
||||
const element = PGroupSizeSS[WPI] || [];
|
||||
const elementP = PGroupSizePS[WPI] || [];
|
||||
const diff = (elementP || []).filter((ele, index) => !element.includes(ele));
|
||||
PGroupSizeSS[WPI] = element.concat(diff);
|
||||
// }
|
||||
}
|
||||
|
||||
// console.log('PGroupSizeSS', PGroupSizeSS, '\nPGroupSizePS', PGroupSizePS, '\nallQuotesSSS', allQuotesSSS2)
|
||||
|
||||
// const maxGroupSize = Math.max(...allQuotesSSS.map((q) => q.group_size_max));
|
||||
// const maxSet = maxGroupSize === 1000 ? Infinity : maxGroupSize;
|
||||
|
||||
const _SSMinSet = uniqWith(Object.values(PGroupSizeSS), (a, b) => a.join(',') === b.join(','));
|
||||
// const uSSsizeSetArr = (_SSMinSet)
|
||||
const uSSsizeSetArr = uniqueBySub(_SSMinSet);
|
||||
// console.log('_SSMinSet', _SSMinSet, '\n uSSsizeSetArr', uSSsizeSetArr)
|
||||
|
||||
// * 若不重叠分组, 则上面不要 uniqueBySub
|
||||
for (const key in PGroupSizeSS) {
|
||||
if (Object.prototype.hasOwnProperty.call(PGroupSizeSS, key)) {
|
||||
const element = PGroupSizeSS[key];
|
||||
const findSet = uSSsizeSetArr.find((minCut) => element.every((v) => minCut.includes(v)));
|
||||
PGroupSizeSS[key] = findSet;
|
||||
}
|
||||
}
|
||||
// console.log('PGroupSizeSS -- ', PGroupSizeSS)
|
||||
|
||||
const [SSsizeSets, PSsizeSets] = [uSSsizeSetArr, []].map((arr) => {
|
||||
const _arr = structuredClone(arr);
|
||||
const arrSets = _arr.map((keyMinMaxStrs) =>
|
||||
keyMinMaxStrs.reduce((acc, curr, idx, minMaxArr) => {
|
||||
const curArr = curr.split('-').map(val => parseInt(val, 10));
|
||||
acc.push(curArr);
|
||||
// const _max = idx === minsArr.length - 1 ? maxSet : Number(minsArr[idx + 1]) - 1;
|
||||
// acc.push([Number(curr), _max]);
|
||||
return acc;
|
||||
}, [])
|
||||
);
|
||||
return arrSets;
|
||||
});
|
||||
|
||||
// console.log('uSSsizeSetArr', uSSsizeSetArr);
|
||||
const [SSsizeSetsMap, PSsizeSetsMap] = [uSSsizeSetArr, []].map((arr) => {
|
||||
const _arr = structuredClone(arr);
|
||||
const SetsMap = _arr.reduce((acc, keyMinMaxStrs, ii, strArr) => {
|
||||
const _key = keyMinMaxStrs.join(',');
|
||||
// console.log(_key);
|
||||
const _value = keyMinMaxStrs.reduce((acc, curr, idx, minMaxArr) => {
|
||||
const curArr = curr.split('-').map((val) => parseInt(val, 10));
|
||||
acc.push(curArr);
|
||||
return acc;
|
||||
}, []);
|
||||
return { ...acc, [_key]: _value };
|
||||
}, {});
|
||||
return SetsMap;
|
||||
});
|
||||
// console.log('SSsizeSetsMap', SSsizeSetsMap);
|
||||
|
||||
const compactSizeSets = {
|
||||
SSsizeSetKey: uSSsizeSetArr.map((s) => s.join(',')).filter(isNotEmpty),
|
||||
sizeSets: SSsizeSets,
|
||||
SSsizeSetsMap,
|
||||
};
|
||||
// console.log('sizeSets -- ', SSsizeSets, '\nSSsizeSetKey', compactSizeSets.SSsizeSetKey, '\nSSsizeSetsMap', SSsizeSetsMap)
|
||||
|
||||
const chunkSS = structuredClone(dataRollSS).map((rowp) => {
|
||||
const pkey = (PGroupSizeSS[rowp.info.id] || []).join(',') || compactSizeSets.SSsizeSetKey[0]; // todo:
|
||||
|
||||
let unitCnt = { '0': 0, '1': 0 }; // ? todo: 以平季的为准
|
||||
const _quotation = rowp.quotation.map((quoteItem) => {
|
||||
unitCnt[quoteItem.unit_id]++;
|
||||
|
||||
quoteItem.quote_size = pkey;
|
||||
quoteItem.quote_col_key = formatGroupSize(quoteItem.group_size_min, quoteItem.group_size_max);
|
||||
quoteItem.use_dates_start = quoteItem.use_dates_start.replace(/-/g, '.');
|
||||
quoteItem.use_dates_end = quoteItem.use_dates_end.replace(/-/g, '.');
|
||||
return quoteItem;
|
||||
});
|
||||
const quote_chunk_flat = groupBy(_quotation, (quoteItem2) => by.map((key) => quoteItem2[key]).join('@') || '#');
|
||||
const quote_chunk = Object.keys(quote_chunk_flat).reduce((qc, ckey) => {
|
||||
const ckeyArr = ckey.split('@');
|
||||
if (isEmpty(qc[ckeyArr[0]])) {
|
||||
qc[ckeyArr[0]] = ckeyArr[1] ? { [ckeyArr[1]]: quote_chunk_flat[ckey] } : quote_chunk_flat[ckey];
|
||||
} else {
|
||||
qc[ckeyArr[0]][ckeyArr[1]] = (qc[ckeyArr[0]][ckeyArr[1]] || []).concat(quote_chunk_flat[ckey]);
|
||||
}
|
||||
return qc;
|
||||
}, {});
|
||||
|
||||
const _quotationTransposeBySize = Object.keys(quote_chunk).reduce((accBy, byKey) => {
|
||||
const byValues = quote_chunk[byKey];
|
||||
const groupTablesBySize = groupBy(byValues, 'quote_size');
|
||||
const transposeTables = Object.keys(groupTablesBySize).reduce((accBy, sizeKeys) => {
|
||||
const _sizeRows = groupTablesBySize[sizeKeys];
|
||||
const rowsByDate = groupBy(_sizeRows, qi => `${qi.use_dates_start}~${qi.use_dates_end}`);
|
||||
const _rowsFromDate = Object.keys(rowsByDate).reduce((accDate, dateKeys) => {
|
||||
const _dateRows = rowsByDate[dateKeys];
|
||||
const rowKey = _dateRows.map(e => e.id).join(',');
|
||||
const keepCol = pick(_dateRows[0], ['WPI_SN', 'WPP_VEI_SN', 'currency', 'unit_id', 'unit_name', 'use_dates_start', 'use_dates_end', 'weekdays', 'quote_season']);
|
||||
const _colFromDateRow = _dateRows.reduce((accCols, rowp) => {
|
||||
// const _colRow = pick(rowp, ['currency', 'unit_id', 'unit_name', 'use_dates_start', 'use_dates_end', 'weekdays', 'child_cost', 'adult_cost']);
|
||||
return { ...accCols, [rowp.quote_col_key]: rowp };
|
||||
}, {...keepCol, originRows: _dateRows, rowKey });
|
||||
accDate.push(_colFromDateRow);
|
||||
return accDate;
|
||||
}, []);
|
||||
return { ...accBy, [sizeKeys]: _rowsFromDate };
|
||||
}, {});
|
||||
return { ...accBy, [byKey]: transposeTables };
|
||||
}, {});
|
||||
// console.log(_quotationTransposeBySize);
|
||||
|
||||
return {
|
||||
...rowp,
|
||||
unitCnt,
|
||||
unitSet: Object.keys(unitCnt).reduce((a, b) => unitCnt[a] > unitCnt[b] ? a : b),
|
||||
sizeSetsSS: pkey,
|
||||
_quotationTransposeBySize,
|
||||
quotation: _quotation,
|
||||
quote_chunk,
|
||||
};
|
||||
});
|
||||
|
||||
const allquotation = chunkSS.reduce((a, c) => a.concat(c.quotation), []);
|
||||
// 取出两季相应的时效区间
|
||||
const SSRange = unique((allquotation || []).filter((q) => q.quote_season === 'SS').map((qr) => `${qr.use_dates_start}~${qr.use_dates_end}`));
|
||||
const PSRange = unique((allquotation || []).filter((q) => q.quote_season === 'PS').map((qr) => `${qr.use_dates_start}~${qr.use_dates_end}`));
|
||||
|
||||
// const transposeDataSS = chunkSS
|
||||
|
||||
return {
|
||||
chunk: chunkSS,
|
||||
// dataSource: chunkSS,
|
||||
SSRange,
|
||||
PSRange,
|
||||
...compactSizeSets, // { SSsizeSetKey, sizeSets }
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 按[单位, 人等]拆分表格
|
||||
* @use D J B R 8
|
||||
*/
|
||||
export const splitTable_SizeSets = (chunkData) => {
|
||||
const { SSRange, PSRange, SSsizeSetKey, SSsizeSetsMap, chunk } = chunkData;
|
||||
// console.log('---- chunk', chunk);
|
||||
const bySizeUnitSetKey = groupBy(chunk, pitem => ['unitSet', 'sizeSetsSS', ].map((key) => pitem[key]).join('@'));
|
||||
// agencyProducts.J.
|
||||
// console.log('bySizeSetKey', bySizeUnitSetKey);
|
||||
const tables = Object.keys(bySizeUnitSetKey).map((sizeSetsUnitStr) => {
|
||||
const [unitSet, sizeSetsStr] = sizeSetsUnitStr.split('@');
|
||||
const _thisSSsetProducts = bySizeUnitSetKey[sizeSetsUnitStr];
|
||||
const _subTable = _thisSSsetProducts.map(({ info, sizeSetsSS, _quotationTransposeBySize, unitSet, ...pitem }) => {
|
||||
const transpose = _quotationTransposeBySize['#'][sizeSetsSS];
|
||||
const _pRow = transpose.map((quote, qi) => ({ ...quote, rowSpan: qi === 0 ? transpose.length : 0 }));
|
||||
return { info, sizeSetsSS, unitSet, rows: _pRow, transpose };
|
||||
});
|
||||
return { cols: SSsizeSetsMap[sizeSetsStr], colsKey: sizeSetsStr, unitSet, sizeSetsUnitStr, data: _subTable };
|
||||
});
|
||||
// console.log('---- tables', tables);
|
||||
const tablesQuote = tables.map(({ cols, colsKey, unitSet, sizeSetsUnitStr, data }, ti) => {
|
||||
const _table = data.reduce((acc, prow) => {
|
||||
const prows = prow.rows.map((_q) => ({ ..._q, info: prow.info, dateText: `${_q.use_dates_start}~${_q.use_dates_end}` }));
|
||||
return acc.concat(prows);
|
||||
}, []);
|
||||
return { cols, colsKey: sizeSetsUnitStr, data: _table }; // `${unitSet}@${colsKey}`
|
||||
});
|
||||
// console.log('---- tablesQuote', tablesQuote);
|
||||
return tablesQuote;
|
||||
};
|
||||
|
||||
/**
|
||||
* 按季度分列 [平季, 旺季]
|
||||
* @use Q 7 6
|
||||
*/
|
||||
export const splitTable_Season = (chunkData) => {
|
||||
const { SSRange, PSRange, SSsizeSetKey, SSsizeSetsMap, chunk } = chunkData;
|
||||
// console.log(chunkData);
|
||||
const tablesQuote = chunk.map((pitem) => {
|
||||
const { quote_chunk } = pitem;
|
||||
// const bySeason = groupBy(pitem.quotation, (ele) => ele.quote_season);
|
||||
const rowSeason = Object.keys(quote_chunk).reduce((accp, _s) => {
|
||||
const bySeasonValue = groupBy(quote_chunk[_s], (ele) => ['adult_cost', 'child_cost', 'group_size_min', 'group_size_max', 'unit_id'].map((k) => ele[k]).join('@'));
|
||||
// console.log('---- bySeasonValue', _s, bySeasonValue);
|
||||
|
||||
const byDate = groupBy(quote_chunk[_s], (ele) => `${ele.use_dates_start}~${ele.use_dates_end}`);
|
||||
// console.log('---- byDate', _s, byDate);
|
||||
|
||||
const subHeader = Object.keys(bySeasonValue).length >= Object.keys(byDate).length ? 'dates' : 'priceValues';
|
||||
// console.log('---- subHeader', _s, subHeader);
|
||||
|
||||
let valuesArr = [];
|
||||
switch (subHeader) {
|
||||
case 'priceValues':
|
||||
valuesArr = Object.keys(bySeasonValue).reduce((accv, valKey) => {
|
||||
const valRows = bySeasonValue[valKey];
|
||||
const valRow = pick(valRows[0], ['adult_cost', 'child_cost', 'currency', 'unit_id', 'unit_name', 'group_size_min', 'group_size_max']);
|
||||
// valRow.dates = valRows.map((v) => pick(v, ['id', 'use_dates_end', 'use_dates_start']));
|
||||
valRow.rows = [valRows[0]];
|
||||
valRow.originRows = valRows;
|
||||
valRow.rowKey = valRows.map((v) => v.id).join(',');
|
||||
valRow.headerDates = valRows.map((v) => pick(v, ['use_dates_end', 'use_dates_start']));
|
||||
accv.push(valRow);
|
||||
return accv;
|
||||
}, []);
|
||||
break;
|
||||
case 'dates':
|
||||
valuesArr = Object.keys(byDate).reduce((accv, dateKey) => {
|
||||
const valRows = byDate[dateKey];
|
||||
const valRow = pick(valRows[0], ['use_dates_end', 'use_dates_start']);
|
||||
valRow.rows = valRows;
|
||||
valRow.originRows = valRows;
|
||||
valRow.rowKey = valRows.map((v) => v.id).join(',');
|
||||
valRow.headerDates = [pick(valRows[0], ['use_dates_end', 'use_dates_start'])];
|
||||
accv.push(valRow);
|
||||
return accv;
|
||||
}, []);
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
const valUnderSeason = Object.keys(bySeasonValue).reduce((accv, valKey) => {
|
||||
const valRows = bySeasonValue[valKey];
|
||||
const valRow = pick(valRows[0], ['adult_cost', 'child_cost', 'currency', 'unit_id', 'unit_name', 'group_size_min', 'group_size_max']);
|
||||
// valRow.dates = valRows.map((v) => pick(v, ['id', 'use_dates_end', 'use_dates_start']));
|
||||
valRow.rows = valRows;
|
||||
valRow.rowKey = valRows.map(v => v.id).join(',');
|
||||
accv.push(valRow);
|
||||
return accv;
|
||||
}, []);
|
||||
|
||||
return { ...accp, [_s]: valUnderSeason, [_s + 'Data']: valuesArr };
|
||||
}, {});
|
||||
return { info: pitem.info, ...rowSeason, rowKey: pitem.info.id };
|
||||
});
|
||||
// console.log('---- tablesQuote', tablesQuote);
|
||||
return tablesQuote;
|
||||
};
|
||||
|
||||
export const splitTable_D = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource);
|
||||
// console.log(chunked);
|
||||
const tables = addCityRow4Split(splitTable_SizeSets(chunked));
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const splitTable_J = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource);
|
||||
// console.log(chunked);
|
||||
const tables = addCityRow4Split(splitTable_SizeSets(chunked));
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const splitTable_Q = (use_year, dataSource) => {
|
||||
const chunked = chunkBy(use_year, dataSource, ['quote_season']);
|
||||
return addCityRow4Season(splitTable_Season(chunked));
|
||||
};
|
||||
|
||||
export const splitTable_7 = (use_year, dataSource) => {
|
||||
const chunked = chunkBy(use_year, dataSource, ['quote_season']);
|
||||
return addCityRow4Season(splitTable_Season(chunked));
|
||||
};
|
||||
|
||||
export const splitTable_R = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource);
|
||||
// console.log(chunked);
|
||||
const tables = addCityRow4Split(splitTable_SizeSets(chunked));
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const splitTable_8 = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource);
|
||||
// console.log(chunked);
|
||||
const tables = addCityRow4Split(splitTable_SizeSets(chunked));
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const splitTable_6 = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource, ['quote_season']);
|
||||
const tables = splitTable_Season(chunked);
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const splitTable_B = (use_year, dataSource, retTableOnly = true) => {
|
||||
const chunked = chunkBy(use_year, dataSource);
|
||||
// console.log(chunked);
|
||||
const tables = addCityRow4Split(splitTable_SizeSets(chunked));
|
||||
return retTableOnly ? tables : { ...chunked, tables };
|
||||
};
|
||||
|
||||
export const addCityRow4Season = (table) => {
|
||||
const byCity = groupBy(table, (ele) => `${ele.info.city_id}@${ele.info.city_name}`);
|
||||
const withCityRow = Object.keys(byCity).reduce((acc, cityIdName) => {
|
||||
const [cityId, cityName] = cityIdName.split('@');
|
||||
acc.push({ info: { product_title: cityName, isCityRow: true,}, use_dates_end: '', use_dates_start: '', quote_season: 'SS', rowSpan: 1, rowKey: `c_${cityId}` });
|
||||
return acc.concat(byCity[cityIdName]);
|
||||
}, []);
|
||||
return withCityRow;
|
||||
};
|
||||
|
||||
export const addCityRow4Split = (splitTables) => {
|
||||
const tables = splitTables.map(table => {
|
||||
return { ...table, data: addCityRow4Season(table.data)}
|
||||
});
|
||||
return tables;
|
||||
};
|
||||
|
||||
@ -1,145 +1,106 @@
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import {
|
||||
createBrowserRouter,
|
||||
RouterProvider,
|
||||
} from 'react-router-dom'
|
||||
import '@/assets/global.css'
|
||||
import App from '@/views/App'
|
||||
import Standlone from '@/views/Standlone'
|
||||
import Login from '@/views/Login'
|
||||
import Logout from '@/views/Logout'
|
||||
import ErrorPage from '@/components/ErrorPage'
|
||||
} from "react-router-dom";
|
||||
import "@/assets/global.css";
|
||||
import App from "@/views/App";
|
||||
import Standlone from "@/views/Standlone";
|
||||
import Login from "@/views/Login";
|
||||
import Logout from "@/views/Logout";
|
||||
import ErrorPage from "@/components/ErrorPage";
|
||||
import RequireAuth from '@/components/RequireAuth'
|
||||
import ReservationNewest from '@/views/reservation/Newest'
|
||||
import ReservationDetail from '@/views/reservation/Detail'
|
||||
import ChangePassword from '@/views/account/ChangePassword'
|
||||
import AccountProfile from '@/views/account/Profile'
|
||||
import AccountManagement from '@/views/account/Management'
|
||||
import RoleList from '@/views/account/RoleList'
|
||||
import FeedbackIndex from '@/views/feedback/Index'
|
||||
import FeedbackDetail from '@/views/feedback/Detail'
|
||||
import FeedbackCustomerDetail from '@/views/feedback/CustomerDetail'
|
||||
import ReportIndex from '@/views/report/Index'
|
||||
import NoticeIndex from '@/views/notice/Index'
|
||||
import NoticeDetail from '@/views/notice/Detail'
|
||||
import InvoiceIndex from '@/views/invoice/Index'
|
||||
import InvoiceDetail from '@/views/invoice/Detail'
|
||||
import InvoiceHistory from '@/views/invoice/History'
|
||||
import InvoicePaid from '@/views/invoice/Paid'
|
||||
import InvoicePaidDetail from '@/views/invoice/PaidDetail'
|
||||
import Airticket from '@/views/airticket/Index'
|
||||
import AirticketPlan from '@/views/airticket/Plan'
|
||||
import AirticketInvoice from '@/views/airticket/Invoice'
|
||||
import AirticketInvoicePaid from '@/views/airticket/InvoicePaid'
|
||||
|
||||
import Trainticket from '@/views/trainticket/index'
|
||||
import TrainticketPlan from '@/views/trainticket/plan'
|
||||
import TrainticketInvoice from '@/views/trainticket/invoice'
|
||||
import TrainticketInvoicePaid from '@/views/trainticket/invoicePaid'
|
||||
|
||||
import ReservationNewest from "@/views/reservation/Newest";
|
||||
import ReservationDetail from "@/views/reservation/Detail";
|
||||
import ChangePassword from "@/views/account/ChangePassword";
|
||||
import AccountProfile from "@/views/account/Profile";
|
||||
import AccountManagement from "@/views/account/Management";
|
||||
import RoleList from "@/views/account/RoleList";
|
||||
import FeedbackIndex from "@/views/feedback/Index";
|
||||
import FeedbackDetail from "@/views/feedback/Detail";
|
||||
import FeedbackCustomerDetail from "@/views/feedback/CustomerDetail";
|
||||
import ReportIndex from "@/views/report/Index";
|
||||
import NoticeIndex from "@/views/notice/Index";
|
||||
import NoticeDetail from "@/views/notice/Detail";
|
||||
import InvoiceIndex from "@/views/invoice/Index";
|
||||
import InvoiceDetail from "@/views/invoice/Detail";
|
||||
import InvoicePaid from "@/views/invoice/Paid";
|
||||
import InvoicePaidDetail from "@/views/invoice/PaidDetail";
|
||||
import Airticket from "@/views/airticket/Index";
|
||||
import AirticketPlan from "@/views/airticket/Plan";
|
||||
import { ThemeContext } from '@/stores/ThemeContext'
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
import useAuthStore from './stores/Auth'
|
||||
import { isNotEmpty } from '@/utils/commons'
|
||||
import { notifyAuth } from "./utils/lifecycle"
|
||||
|
||||
import ProductsManage from '@/views/products/Manage';
|
||||
import ProductsDetail from '@/views/products/Detail';
|
||||
import ProductsAudit from '@/views/products/Audit';
|
||||
import ImageViewer from '@/views/ImageViewer';
|
||||
import CustomerImageViewer from '@/views/CustomerImageViewer';
|
||||
import PickYear from './views/products/PickYear'
|
||||
import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT } from '@/config'
|
||||
|
||||
import { PERM_ACCOUNT_MANAGEMENT, PERM_ROLE_NEW, PERM_OVERSEA,PERM_TRAIN_TICKET, PERM_AIR_TICKET, PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT } from '@/config'
|
||||
import './i18n';
|
||||
|
||||
import './i18n'
|
||||
|
||||
const initRouter = async () => {
|
||||
return createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <NoticeIndex /> },
|
||||
{ path: 'account/change-password', element: <ChangePassword />},
|
||||
{ path: 'account/profile', element: <AccountProfile />},
|
||||
{ path: 'account/management', element: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT} result={true}><AccountManagement /></RequireAuth>},
|
||||
{ path: 'account/role-list', element: <RequireAuth subject={PERM_ROLE_NEW} result={true}><RoleList /></RequireAuth>},
|
||||
//
|
||||
{ path: 'reservation/newest', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationNewest /></RequireAuth>},
|
||||
{ path: 'reservation/:reservationId', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationDetail /></RequireAuth>},
|
||||
//
|
||||
{ path: 'feedback', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackIndex /></RequireAuth>},
|
||||
{ path: 'feedback/:GRI_SN/:CII_SN/:RefNo', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackCustomerDetail /></RequireAuth>},
|
||||
{ path: 'feedback/:GRI_SN/:RefNo', element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackDetail /></RequireAuth>},
|
||||
//
|
||||
{ path: 'report', element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReportIndex /></RequireAuth>},
|
||||
//
|
||||
{ path: 'notice', element: <NoticeIndex />},
|
||||
{ path: 'notice/:CCP_BLID', element: <NoticeDetail />},
|
||||
//
|
||||
{ path: 'invoice',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceIndex /></RequireAuth>},
|
||||
{ path: 'invoice/detail/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceDetail /></RequireAuth>},
|
||||
{ path: 'invoice/history/:GMDSN/:GSN',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceHistory /></RequireAuth>},
|
||||
{ path: 'invoice/paid',element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaid /></RequireAuth>},
|
||||
{ path: 'invoice/paid/detail/:flid', element: <RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaidDetail /></RequireAuth>},
|
||||
{ path: 'airticket',element: <RequireAuth subject={PERM_AIR_TICKET} result={true}><Airticket /></RequireAuth>},
|
||||
{ path: 'airticket/plan/:coli_sn/:gri_sn',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketPlan /></RequireAuth>},
|
||||
{ path: 'airticket/invoice',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketInvoice /></RequireAuth>},
|
||||
{ path: 'airticket/invoicepaid',element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketInvoicePaid /></RequireAuth>},
|
||||
//
|
||||
{ path: 'trainticket',element: <RequireAuth subject={PERM_TRAIN_TICKET} result={true}><Trainticket /></RequireAuth>},
|
||||
{ path: 'trainticket/plan/:coli_sn/:gri_sn',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketPlan /></RequireAuth>},
|
||||
{ path: 'trainticket/invoice',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketInvoice /></RequireAuth>},
|
||||
{ path: 'trainticket/invoicepaid',element:<RequireAuth subject={PERM_TRAIN_TICKET} result={true}><TrainticketInvoicePaid /></RequireAuth>},
|
||||
//
|
||||
{ path: "products",element: <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsManage /></RequireAuth>},
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/audit",element:<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsAudit /></RequireAuth>},
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/edit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsDetail /></RequireAuth>},
|
||||
{ path: "products/audit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsAudit /></RequireAuth>},
|
||||
{ path: "products/edit",element:<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><ProductsDetail /></RequireAuth>},
|
||||
{ path: "products/pick-year",element: <RequireAuth subject={PERM_PRODUCTS_OFFER_PUT} result={true}><PickYear /></RequireAuth>},
|
||||
//
|
||||
]
|
||||
},
|
||||
{
|
||||
element: <Standlone />,
|
||||
children: [
|
||||
{ path: '/login', element: <Login /> },
|
||||
{ path: '/logout', element: <Logout /> },
|
||||
{ path: '/image-viewer/:GRI_SN/:GRI_No', element: <ImageViewer /> },
|
||||
{ path: '/customer-image/:key', element: <CustomerImageViewer /> },
|
||||
]
|
||||
}
|
||||
])
|
||||
}
|
||||
|
||||
const initAppliction = async () => {
|
||||
|
||||
const { loginToken, userId } = usingStorage()
|
||||
|
||||
if (isNotEmpty(userId) && isNotEmpty(loginToken)) {
|
||||
await useAuthStore.getState().initAuth()
|
||||
await notifyAuth()
|
||||
}
|
||||
}
|
||||
|
||||
const router = await initRouter()
|
||||
const root = document.getElementById('root')
|
||||
await initAppliction()
|
||||
|
||||
if (!root) throw new Error('No root element found')
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: "/",
|
||||
element: <App />,
|
||||
errorElement: <ErrorPage />,
|
||||
children: [
|
||||
{ index: true, element: <NoticeIndex /> },
|
||||
{ path: "account/change-password", element: <ChangePassword />},
|
||||
{ path: "account/profile", element: <AccountProfile />},
|
||||
{ path: "account/management", element: <RequireAuth subject={PERM_ACCOUNT_MANAGEMENT} result={true}><AccountManagement /></RequireAuth>},
|
||||
{ path: "account/role-list", element: <RequireAuth subject={PERM_ROLE_NEW} result={true}><RoleList /></RequireAuth>},
|
||||
{ path: "reservation/newest", element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationNewest /></RequireAuth>},
|
||||
{ path: "reservation/:reservationId", element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReservationDetail /></RequireAuth>},
|
||||
{ path: "feedback", element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackIndex /></RequireAuth>},
|
||||
{ path: "feedback/:GRI_SN/:CII_SN/:RefNo", element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackCustomerDetail /></RequireAuth>},
|
||||
{ path: "feedback/:GRI_SN/:RefNo", element: <RequireAuth subject={PERM_OVERSEA} result={true}><FeedbackDetail /></RequireAuth>},
|
||||
{ path: "report", element: <RequireAuth subject={PERM_OVERSEA} result={true}><ReportIndex /></RequireAuth>},
|
||||
{ path: "notice", element: <NoticeIndex />},
|
||||
{ path: "notice/:CCP_BLID", element: <NoticeDetail />},
|
||||
{ path: "invoice",element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceIndex /></RequireAuth>},
|
||||
{ path: "invoice/detail/:GMDSN/:GSN",element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoiceDetail /></RequireAuth>},
|
||||
{ path: "invoice/paid",element:<RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaid /></RequireAuth>},
|
||||
{ path: "invoice/paid/detail/:flid", element: <RequireAuth subject={PERM_OVERSEA} result={true}><InvoicePaidDetail /></RequireAuth>},
|
||||
{ path: "airticket",element: <RequireAuth subject={PERM_AIR_TICKET} result={true}><Airticket /></RequireAuth>},
|
||||
{ path: "airticket/plan/:coli_sn",element:<RequireAuth subject={PERM_AIR_TICKET} result={true}><AirticketPlan /></RequireAuth>},
|
||||
{ path: "products",element: <RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsManage /></RequireAuth>},
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/audit",element:<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT} result={true}><ProductsAudit /></RequireAuth>},
|
||||
{ path: "products/:travel_agency_id/:use_year/:audit_state/edit",element:<ProductsDetail />},
|
||||
{ path: "products/edit",element:<ProductsDetail />},
|
||||
]
|
||||
},
|
||||
{
|
||||
element: <Standlone />,
|
||||
children: [
|
||||
{ path: "/login", element: <Login /> },
|
||||
{ path: "/logout", element: <Logout /> },
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
createRoot(root).render(
|
||||
//<React.StrictMode>
|
||||
<ThemeContext.Provider value={{ colorPrimary: '#00b96b', borderRadius: 4 }}>
|
||||
<RouterProvider
|
||||
future={{
|
||||
v7_startTransition: true,
|
||||
}}
|
||||
router={router}
|
||||
fallbackElement={() => <div>Loading...</div>}
|
||||
/>
|
||||
</ThemeContext.Provider>
|
||||
//</React.StrictMode>
|
||||
)
|
||||
}
|
||||
|
||||
initAppliction()
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
//<React.StrictMode>
|
||||
<ThemeContext.Provider value={{ colorPrimary: '#00b96b', borderRadius: 4 }}>
|
||||
<RouterProvider
|
||||
router={router}
|
||||
fallbackElement={() => <div>Loading...</div>}
|
||||
/>
|
||||
</ThemeContext.Provider>
|
||||
//</React.StrictMode>
|
||||
)
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
// 顾问查看客人上传的护照
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Input, Button, Card, Typography, Space, Alert } from 'antd';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import ImageUploader from '@/components/ImageUploader';
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const ImageViewer = () => {
|
||||
const { GRI_SN, GRI_No } = useParams();
|
||||
const [ossKey, setOssKey] = useState('');
|
||||
const [showUploader, setShowUploader] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (GRI_SN && GRI_No) {
|
||||
const key = `ghh/${GRI_SN}-${GRI_No}/passport_image`;
|
||||
setOssKey(key);
|
||||
setShowUploader(true);
|
||||
}
|
||||
}, [GRI_SN, GRI_No]);
|
||||
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px' }}>
|
||||
<Title level={2}>{GRI_SN}-{GRI_No}</Title>
|
||||
|
||||
{showUploader && (
|
||||
<ImageUploader osskey={ossKey} />
|
||||
)}
|
||||
|
||||
{!showUploader && (
|
||||
<Text>无法从URL中提取订单信息</Text>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ImageViewer;
|
||||
@ -1,116 +1,101 @@
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { useEffect } from "react";
|
||||
import { Button, Form, Input, Row, Radio, App, Typography } from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useAuthStore from "@/stores/Auth";
|
||||
import { appendRequestParams } from "@/utils/request";
|
||||
import { useNavigate, useLocation } from 'react-router-dom'
|
||||
import { useEffect } from 'react'
|
||||
import { Button, Checkbox, Form, Input, Row, App } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
import useNoticeStore from '@/stores/Notice'
|
||||
|
||||
function Login() {
|
||||
const [authenticate, loginStatus, defaultRoute] = useAuthStore((state) => [
|
||||
state.authenticate,
|
||||
state.loginStatus,
|
||||
state.defaultRoute,
|
||||
]);
|
||||
const [authenticate, loginStatus, defaultRoute] =
|
||||
useAuthStore((state) => [state.authenticate, state.loginStatus, state.defaultRoute])
|
||||
|
||||
const { t, i18n } = useTranslation();
|
||||
const { notification } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
const [form] = Form.useForm();
|
||||
const { t, i18n } = useTranslation()
|
||||
const { notification } = App.useApp()
|
||||
const navigate = useNavigate()
|
||||
const [form] = Form.useForm()
|
||||
|
||||
const handleLngChange = (lng) => {
|
||||
appendRequestParams("lgc", lng === "zh" ? 2 : 1);
|
||||
i18n.changeLanguage(lng);
|
||||
};
|
||||
|
||||
const defaultLng = i18n.language ?? "zh";
|
||||
appendRequestParams("lgc", defaultLng === "zh" ? 2 : 1);
|
||||
|
||||
useEffect(() => {
|
||||
useEffect (() => {
|
||||
if (loginStatus === 302) {
|
||||
navigate(defaultRoute);
|
||||
navigate(defaultRoute)
|
||||
}
|
||||
}, [loginStatus]);
|
||||
}, [loginStatus])
|
||||
|
||||
const onFinish = (values) => {
|
||||
authenticate(values.username, values.password).catch((ex) => {
|
||||
console.error(ex);
|
||||
notification.error({
|
||||
message: t("Validation.Title"),
|
||||
description: t("Validation.LoginFailed"),
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
authenticate(values.username, values.password)
|
||||
.catch(ex => {
|
||||
console.error(ex)
|
||||
notification.error({
|
||||
message: t('Validation.Title'),
|
||||
description: t('Validation.LoginFailed'),
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const onFinishFailed = (errorInfo) => {
|
||||
console.log("Failed:", errorInfo);
|
||||
};
|
||||
console.log('Failed:', errorInfo);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Typography.Title className="text-center" level={3}>
|
||||
Highlights Hub
|
||||
</Typography.Title>
|
||||
<Row justify="center" align="middle" className="min-h-96">
|
||||
<Form
|
||||
name="login"
|
||||
layout="vertical"
|
||||
form={form}
|
||||
size="large"
|
||||
labelCol={{
|
||||
span: 8,
|
||||
}}
|
||||
<Row justify='center' align='middle' style={{ minHeight: 500 }}>
|
||||
<Form
|
||||
name='basic'
|
||||
form={form}
|
||||
size='large'
|
||||
labelCol={{
|
||||
span: 8,
|
||||
}}
|
||||
wrapperCol={{
|
||||
span: 16,
|
||||
}}
|
||||
style={{
|
||||
maxWidth: 600,
|
||||
}}
|
||||
initialValues={{
|
||||
remember: true,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.Item
|
||||
label={t('Username')}
|
||||
name='username'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('Validation.UsernameIsEmpty'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t('Password')}
|
||||
name='password'
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t('Validation.PasswordIsEmpty'),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
wrapperCol={{
|
||||
span: 24,
|
||||
}}
|
||||
className="max-w-xl"
|
||||
initialValues={{
|
||||
language: defaultLng,
|
||||
offset: 8,
|
||||
span: 16,
|
||||
}}
|
||||
onFinish={onFinish}
|
||||
onFinishFailed={onFinishFailed}
|
||||
autoComplete="off"
|
||||
>
|
||||
<Form.Item
|
||||
label={t("Username")}
|
||||
name="username"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("Validation.UsernameIsEmpty"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("Password")}
|
||||
name="password"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("Validation.PasswordIsEmpty"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Input.Password />
|
||||
</Form.Item>
|
||||
<Form.Item name="language">
|
||||
<Radio.Group onChange={(e) => handleLngChange(e.target.value)}>
|
||||
<Radio value="zh">中文</Radio>
|
||||
<Radio value="en">English</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" className="w-full">
|
||||
{t("Login")}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
<Button type='primary' htmlType='submit' style={{width: '100%'}}>
|
||||
{t('Login')}
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
export default Login;
|
||||
export default Login
|
||||
|
||||
@ -1,36 +1,56 @@
|
||||
import { Outlet } from "react-router-dom";
|
||||
import { Layout, ConfigProvider, theme, Row, Col, App as AntApp } from "antd";
|
||||
import "antd/dist/reset.css";
|
||||
import AppLogo from "@/assets/highlights_travel_600_550.png";
|
||||
import { useThemeContext } from "@/stores/ThemeContext";
|
||||
import { BUILD_VERSION, GIT_HEAD } from "@/config";
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import { Layout, ConfigProvider, theme, Typography, Row, Col, App as AntApp } from 'antd'
|
||||
import 'antd/dist/reset.css'
|
||||
import AppLogo from '@/assets/logo-gh.png'
|
||||
import Language from '../i18n/LanguageSwitcher'
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const { Title } = Typography
|
||||
const { Header, Content, Footer } = Layout
|
||||
|
||||
function Standlone() {
|
||||
const { colorPrimary } = useThemeContext();
|
||||
|
||||
const {
|
||||
token: { colorBgContainer },
|
||||
} = theme.useToken()
|
||||
|
||||
return (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
token: {
|
||||
colorPrimary: colorPrimary,
|
||||
colorPrimary: '#00b96b',
|
||||
},
|
||||
algorithm: theme.defaultAlgorithm,
|
||||
}}>
|
||||
<AntApp>
|
||||
<Layout className="min-h-screen">
|
||||
<Header className="sticky top-0 z-10 w-full text-center">
|
||||
<img src={AppLogo} className="h-12 my-2 mr-6 ml-0" alt="App logo" />
|
||||
<Layout
|
||||
style={{
|
||||
minHeight: '100vh',
|
||||
}}>
|
||||
<Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%' }}>
|
||||
<Row gutter={{ md: 24 }} justify='center'>
|
||||
<Col span={4}>
|
||||
<img src={AppLogo} className='logo' alt='App logo' />
|
||||
</Col>
|
||||
<Col span={18}><Title style={{ color: 'white', marginTop: '3.5px' }}>Global Highlights Hub</Title></Col>
|
||||
<Col span={2}>
|
||||
<Language />
|
||||
</Col>
|
||||
</Row>
|
||||
</Header>
|
||||
<Content className="p-6 m-0 min-h-72 bg-white">
|
||||
<Content
|
||||
style={{
|
||||
padding: 24,
|
||||
margin: 0,
|
||||
minHeight: 280,
|
||||
background: colorBgContainer,
|
||||
}}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
<Footer>China Highlights International Travel Service Co., LTD, Version: {BUILD_VERSION}({GIT_HEAD})</Footer>
|
||||
<Footer></Footer>
|
||||
</Layout>
|
||||
</AntApp>
|
||||
</ConfigProvider>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
export default Standlone;
|
||||
export default Standlone
|
||||
|
||||
@ -1,24 +1,41 @@
|
||||
import { Descriptions, Col, Row } from 'antd'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Descriptions, Col, Row } from 'antd';
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useAuthStore from '@/stores/Auth'
|
||||
import { fetchUserDetail } from '@/stores/Auth'
|
||||
import { usingStorage } from '@/hooks/usingStorage'
|
||||
|
||||
function Profile() {
|
||||
|
||||
const { t } = useTranslation()
|
||||
const currentUser = useAuthStore(state => state.currentUser)
|
||||
const [userDetail, setUserDetail] = useState({})
|
||||
const { loginToken } = usingStorage()
|
||||
|
||||
useEffect (() => {
|
||||
fetchUserDetail(loginToken)
|
||||
.then(json => {
|
||||
setUserDetail({
|
||||
username: json.LoginName,
|
||||
realname: json.real_name,
|
||||
rolesName: json.roles_name,
|
||||
emailAddress: json.LMI_listmail,
|
||||
travelAgencyName: json.VName,
|
||||
})
|
||||
})
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col span={12} offset={6}>
|
||||
<Descriptions title={t('userProfile')} layout="vertical" column={2}>
|
||||
<Descriptions.Item label={t("Username")}>{currentUser?.username}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Realname")}>{currentUser?.realname}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Email")}>{currentUser?.emailAddress}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Company")}>{currentUser?.travelAgencyName}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Username")}>{userDetail?.username}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Realname")}>{userDetail?.realname}({userDetail?.rolesName})</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Email")}>{userDetail?.emailAddress}</Descriptions.Item>
|
||||
<Descriptions.Item label={t("Company")}>{userDetail?.travelAgencyName}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
export default Profile
|
||||
export default Profile;
|
||||
|
||||
@ -1,137 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Grid, Divider, Layout, Spin, Input, Col, Row, Space, Checkbox, Table, Button, App } from "antd";
|
||||
import { PhoneOutlined, CustomerServiceOutlined, FrownTwoTone, LikeTwoTone } from "@ant-design/icons";
|
||||
import { useParams, useHref, useNavigate, NavLink } from "react-router-dom";
|
||||
import { isEmpty, formatColonTime, formatDate, isNotEmpty } from "@/utils/commons";
|
||||
import { DATE_FORMAT } from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
import SearchForm from "@/components/SearchForm";
|
||||
import BackBtn from "@/components/BackBtn";
|
||||
import { TableExportBtn } from "@/components/Data";
|
||||
import useInvoiceStore from "@/stores/Invoice";
|
||||
import { fetchInvoicePaidDetail } from "@/stores/Invoice";
|
||||
|
||||
import airTicketStore from "@/stores/Airticket";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
const InvoicePaid = props => {
|
||||
const navigate = useNavigate();
|
||||
const { notification } = App.useApp();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const [invoicePaidDetail, setInvoicePaidDetail] = useState([]);
|
||||
const [invoiceNO, setInvoiceNO] = useState([]); //显示账单编号
|
||||
const [loading, invoicePaid, fetchInvoicePaid] = useInvoiceStore(state => [state.loading, state.invoicePaid, state.fetchInvoicePaid]);
|
||||
const showTotal = total => `Total ${total} items`;
|
||||
const showTotal_detail = total => `Total ${total} items`;
|
||||
useEffect(() => {
|
||||
// fetchInvoicePaid(travelAgencyId, "", dayjs().subtract(2, "M").startOf("M").format(DATE_FORMAT), dayjs().endOf("M").format(DATE_FORMAT));
|
||||
}, []);
|
||||
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "编号",
|
||||
dataIndex: "fl_finaceNo",
|
||||
key: "fl_finaceNo",
|
||||
},
|
||||
{
|
||||
title: "报账日期",
|
||||
key: "fl_adddate",
|
||||
dataIndex: "fl_adddate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "团数",
|
||||
key: "fcount",
|
||||
dataIndex: "fcount",
|
||||
},
|
||||
{
|
||||
title: "总额",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
//render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
||||
},
|
||||
{
|
||||
title: "查看",
|
||||
key: "pSum",
|
||||
dataIndex: "pSum",
|
||||
render: (text, record) => (
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => {
|
||||
fetchInvoicePaidDetail(travelAgencyId, record.key).then(res => setInvoicePaidDetail(res));
|
||||
setInvoiceNO(record.fl_finaceNo);
|
||||
}}>
|
||||
查看明细
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const invoicePaidDetailColumns = [
|
||||
{
|
||||
title: "团号",
|
||||
dataIndex: "fl2_GroupName",
|
||||
key: "fl2_GroupName",
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
key: "fl2_price",
|
||||
dataIndex: "fl2_price",
|
||||
},
|
||||
{
|
||||
title: "报账日期",
|
||||
key: "fl2_ArriveDate",
|
||||
dataIndex: "fl2_ArriveDate",
|
||||
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
||||
},
|
||||
{
|
||||
title: "顾问",
|
||||
dataIndex: "fl2_wl",
|
||||
key: "fl2_wl",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row>
|
||||
<Col md={20} lg={20} xxl={20}>
|
||||
<SearchForm
|
||||
initialValue={{
|
||||
dates: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||
}}
|
||||
fieldsConfig={{
|
||||
shows: ["dates"],
|
||||
fieldProps: {
|
||||
dates: { col: 10, label: "报账日期" },
|
||||
},
|
||||
}}
|
||||
onSubmit={(err, formVal) => {
|
||||
fetchInvoicePaid(travelAgencyId, "", formVal.startdate, formVal.enddate);
|
||||
setInvoicePaidDetail([]);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col md={4} lg={4} xxl={4}>
|
||||
<BackBtn to={"/airticket"} />
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Col md={24} lg={16} xxl={16}>
|
||||
<Divider orientation="left">汇款列表</Divider>
|
||||
<Table bordered columns={invoicePaidColumns} dataSource={invoicePaid} loading={loading} pagination={{ defaultPageSize: 20, showTotal: showTotal }} />
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}></Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={20} xxl={20}>
|
||||
<Divider orientation="left">账单明细 {invoiceNO}</Divider>
|
||||
<Table bordered columns={invoicePaidDetailColumns} dataSource={invoicePaidDetail} pagination={{ defaultPageSize: 100, showTotal: showTotal_detail }} />
|
||||
<TableExportBtn btnTxt="导出账单明细" label={`机票账单`} {...{ columns: invoicePaidDetailColumns, dataSource: invoicePaidDetail }} />
|
||||
</Col>
|
||||
<Col md={24} lg={4} xxl={4}></Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
export default InvoicePaid;
|
||||
@ -1,130 +0,0 @@
|
||||
import { useParams, NavLink, useNavigate } from "react-router-dom";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Row, Col, Space, Table, Image,App } from "antd";
|
||||
import { formatDate, isNotEmpty } from "@/utils/commons";
|
||||
import SearchForm from "@/components/SearchForm";
|
||||
import dayjs from "dayjs";
|
||||
import BackBtn from "@/components/BackBtn";
|
||||
import { fetchInvoiceDetail } from "@/stores/Invoice";
|
||||
import useInvoiceStore from "@/stores/Invoice";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
function History() {
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const { GMDSN, GSN } = useParams();
|
||||
const [dataLoading, setDataLoading] = useState(false);
|
||||
const [invoiceZDDetail, setInvoiceZDDetail] = useState([]);
|
||||
const { notification } = App.useApp();
|
||||
|
||||
useEffect(() => {
|
||||
defaultShow();
|
||||
}, [GMDSN, GSN]);
|
||||
|
||||
function defaultShow() {
|
||||
setDataLoading(true);
|
||||
|
||||
fetchInvoiceDetail(travelAgencyId, GMDSN, GSN)
|
||||
.then((json) => {
|
||||
//console.log("id:"+travelAgencyId+",gmdsn:"+GMDSN+",GSN:"+GSN+"#13"+json);
|
||||
setInvoiceZDDetail(json.invoiceZDDetail);
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: `Notification`,
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setDataLoading(false);
|
||||
});
|
||||
}
|
||||
|
||||
const invoicePaidColumns = [
|
||||
{
|
||||
title: "ID",
|
||||
dataIndex: "GMD_SN",
|
||||
key: "GMD_SN",
|
||||
},
|
||||
{
|
||||
title: "Due Date",
|
||||
key: "GMD_PayDate",
|
||||
dataIndex: "GMD_PayDate",
|
||||
render: (text, record) =>
|
||||
isNotEmpty(text) ? formatDate(new Date(text)) : "",
|
||||
},
|
||||
{
|
||||
title: "Amount",
|
||||
key: "GMD_Cost",
|
||||
dataIndex: "GMD_Cost",
|
||||
},
|
||||
{
|
||||
title: "Currency",
|
||||
key: "GMD_Currency",
|
||||
dataIndex: "GMD_Currency",
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
key: "FKState",
|
||||
dataIndex: "FKState",
|
||||
render: (text, record) => (isNotEmpty(record.FKState) ? invoiceStatus(record.FKState) : text),
|
||||
},
|
||||
{
|
||||
title: "Invoice",
|
||||
key: "GMD_Pic",
|
||||
dataIndex: "GMD_Pic",
|
||||
render: showPIc,
|
||||
},
|
||||
];
|
||||
|
||||
const invoiceStatus = (FKState) => {
|
||||
switch (FKState - 1) {
|
||||
case 1:
|
||||
return "Submitted";
|
||||
case 2:
|
||||
return "Travel Advisor";
|
||||
case 3:
|
||||
return "Finance Dept";
|
||||
case 4:
|
||||
return "Paid";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
};
|
||||
|
||||
function showPIc(text, record) {
|
||||
let strPic = record.GMD_Pic;
|
||||
//console.log(JSON.parse(strPic));
|
||||
if (isNotEmpty(strPic)) {
|
||||
return JSON.parse(strPic).map((item, index) => {
|
||||
return <Image key={index} width={90} src={item.url} />;
|
||||
});
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Space direction="vertical" style={{ width: "100%" }}>
|
||||
<Row gutter={16}>
|
||||
<Col span={20}></Col>
|
||||
<Col span={4}>
|
||||
<BackBtn />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col md={24} lg={24} xxl={24}>
|
||||
<Table
|
||||
rowKey={"GMD_SN"}
|
||||
bordered
|
||||
columns={invoicePaidColumns}
|
||||
dataSource={invoiceZDDetail}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
|
||||
export default History;
|
||||
@ -1,100 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Form, Modal, Input, Button, Flex, App } from 'antd'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useProductsStore from '@/stores/Products/Index'
|
||||
import { useProductsTypesMapVal } from '@/hooks/useProductsSets'
|
||||
import RequireAuth from '@/components/RequireAuth'
|
||||
import { PERM_PRODUCTS_OFFER_PUT } from '@/config'
|
||||
|
||||
export const ContractRemarksModal = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const { notification } = App.useApp()
|
||||
const productsTypesMapVal = useProductsTypesMapVal()
|
||||
const [getRemarkList, saveOrUpdateRemark] = useProductsStore((state) => [
|
||||
state.getRemarkList, state.saveOrUpdateRemark
|
||||
])
|
||||
|
||||
const [isRemarksModalOpen, setRemarksModalOpen] = useState(false)
|
||||
const [remarksForm] = Form.useForm()
|
||||
|
||||
const onRemarksFinish = () => {
|
||||
const remarkList = remarksForm.getFieldsValue().remarkList
|
||||
saveOrUpdateRemark(remarkList)
|
||||
.then(() => {
|
||||
setRemarksModalOpen(false)
|
||||
notification.info({
|
||||
message: 'Notification',
|
||||
description: '合同备注保存成功',
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const handleContractRemarks = () => {
|
||||
getRemarkList()
|
||||
.then(list => {
|
||||
remarksForm.setFieldsValue({remarkList:list})
|
||||
setRemarksModalOpen(true)
|
||||
})
|
||||
.catch(ex => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getFieldLabel = (field) => {
|
||||
const remarkList = remarksForm.getFieldsValue([['remarkList']]).remarkList
|
||||
return productsTypesMapVal[remarkList[field.key].product_type_id]?.label
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
|
||||
<Button size='small' onClick={handleContractRemarks}>{t('products:ContractRemarks')}</Button>
|
||||
</RequireAuth>
|
||||
|
||||
<Modal
|
||||
centered
|
||||
title={t('products:ContractRemarks')}
|
||||
width={'640px'}
|
||||
open={isRemarksModalOpen}
|
||||
onOk={() => onRemarksFinish()}
|
||||
onCancel={() => setRemarksModalOpen(false)}
|
||||
destroyOnHidden
|
||||
forceRender
|
||||
>
|
||||
<Form
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
form={remarksForm}
|
||||
name='remarksForm'
|
||||
autoComplete='off'
|
||||
>
|
||||
<Form.List name='remarkList'>
|
||||
{(fields) => (
|
||||
<Flex gap='middle' vertical>
|
||||
{fields.map((field) => (
|
||||
<Form.Item label={getFieldLabel(field)} name={[field.name, 'Memo']} key={field.key}>
|
||||
<Input.TextArea rows={2}></Input.TextArea>
|
||||
</Form.Item>
|
||||
))}
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ContractRemarksModal
|
||||
@ -1,229 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { App, Form, Modal, DatePicker, Divider, Switch, Space, Flex, Radio } from 'antd';
|
||||
import { isEmpty, objectMapper } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import DeptSelector from '@/components/DeptSelector';
|
||||
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
|
||||
import VendorSelector from '@/components/VendorSelector';
|
||||
import dayjs from 'dayjs';
|
||||
import arraySupport from 'dayjs/plugin/arraySupport';
|
||||
import { copyAgencyDataAction } from '@/stores/Products/Index';
|
||||
|
||||
// import useAuthStore from '@/stores/Auth';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT } from '@/config';
|
||||
import ProductsSelector from '@/components/ProductsSelector';
|
||||
|
||||
dayjs.extend(arraySupport);
|
||||
|
||||
export const CopyProductsForm = ({ action, initialValues, onFormInstanceReady, source, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const [form] = Form.useForm();
|
||||
const {
|
||||
sourceAgency: { travel_agency_id },
|
||||
sourceYear: use_year,
|
||||
} = source;
|
||||
|
||||
// const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
const [showTypeOrItem, setShowTypeOrItem] = useState(1);
|
||||
|
||||
useEffect(() => {
|
||||
onFormInstanceReady(form);
|
||||
}, []);
|
||||
|
||||
const onValuesChange = (changeValues, allValues) => {
|
||||
if ('copyType' in changeValues) {
|
||||
setShowTypeOrItem(changeValues.copyType === 'type' ? 1 : 2);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form layout='horizontal' form={form} name='form_in_modal' initialValues={{...initialValues, copyType: 'type'}} onValuesChange={onValuesChange}>
|
||||
<Flex gap={8}>
|
||||
<div className='basis-96 shrink-0 flex-auto'>
|
||||
{action === '#' && (
|
||||
<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
|
||||
<Form.Item name={`dept`} label={t('products:Dept')} rules={[{ required: false, message: t('products:CopyFormMsg.requiredDept') }]}>
|
||||
<DeptSelector isLeaf={true} />
|
||||
</Form.Item>
|
||||
</RequireAuth>
|
||||
)}
|
||||
<Form.Item name={'copyType'}>
|
||||
<Radio.Group optionType="button" options={[{ key: 'type', value: 'type', label: t('按类型复制(多选)') }, { key: 'item', value: 'item', label: t('仅复制指定产品(多选)') }]}></Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item name={`products_types`} label={t('products:ProductType')} dependencies={['products_list']} hidden={showTypeOrItem!==1} >
|
||||
<ProductsTypesSelector maxTagCount={1} mode={'multiple'} placeholder={t('All')} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name={'products_list'}
|
||||
label={t('products:ProductName')} dependencies={['products_types']} hidden={showTypeOrItem!==2} >
|
||||
<ProductsSelector params={{ travel_agency_id, use_year }} mode={'multiple'} placeholder={t('All')} />
|
||||
</Form.Item>
|
||||
<Divider orientation='left'>{t('products:CopyFormMsg.copyTo')}:</Divider>
|
||||
{action === '#' && (
|
||||
<Form.Item
|
||||
name='agency'
|
||||
label={`${t('products:CopyFormMsg.target')}${t('products:Vendor')}`}
|
||||
rules={[{ required: true, message: t('products:CopyFormMsg.requiredVendor') }]}>
|
||||
<VendorSelector mode={null} placeholder={t('products:Vendor')} />
|
||||
</Form.Item>
|
||||
)}
|
||||
<Divider orientation='left'></Divider>
|
||||
<Form.Item noStyle>
|
||||
<Space.Compact className='w-full gap-2'>
|
||||
<Form.Item
|
||||
name={'source_use_year'}
|
||||
label={`${t('products:CopyFormMsg.Source')}${t('products:UseYear')}`}
|
||||
initialValue={dayjs([source.sourceYear, 1, 1])}
|
||||
rules={[{ required: true }]}>
|
||||
<DatePicker picker='year' allowClear />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name={'target_use_year'} label={`${t('products:CopyFormMsg.target')}${t('products:UseYear')}`} rules={[{ required: true }]}>
|
||||
<DatePicker picker='year' allowClear />
|
||||
{/* disabledDate={(current) => current <= dayjs([source.sourceYear, 12, 31])} */}
|
||||
</Form.Item>
|
||||
</Space.Compact>
|
||||
</Form.Item>
|
||||
<Form.Item name={'with_quote'} label={`${t('products:CopyFormMsg.withQuote')}`}>
|
||||
<Switch checkedChildren={'含报价金额'} unCheckedChildren={'仅人等+日期'} />
|
||||
</Form.Item>
|
||||
</div>
|
||||
|
||||
<Form.Item noStyle shouldUpdate>
|
||||
{() => showTypeOrItem===2 ? (
|
||||
<div className='max-h-96 overflow-auto divide-x-0 divide-y divide-solid divide-stone-200'>
|
||||
{!isEmpty(form.getFieldValue('products_list')) && <b>已选择的产品 预览:</b>}
|
||||
{(form.getFieldValue('products_list') || []).map((item, index) => (
|
||||
<div key={item.value}>
|
||||
{index + 1}. {item.label}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (<></>)}
|
||||
</Form.Item>
|
||||
</Flex>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'agency': {
|
||||
key: 'target_agency',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'source_use_year': [{ key: 'source_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
|
||||
'target_use_year': [{ key: 'target_use_year', transform: (arrVal) => (arrVal ? arrVal.format('YYYY') : '') }],
|
||||
'products_types': {
|
||||
key: 'products_types',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
|
||||
},
|
||||
},
|
||||
'dept': {
|
||||
key: 'dept',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '';
|
||||
},
|
||||
},
|
||||
'with_quote': { key: 'with_quote', transform: (value) => (value ? 1 : 0) },
|
||||
'products_list': { key: 'product_id_list', transform: (value) => (Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '') },
|
||||
};
|
||||
let dest = {};
|
||||
const { agency, year, products_list, ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
return dest;
|
||||
};
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const CopyProductsFormModal = ({ source, action = '#' | 'o', open, onSubmit, onCancel, initialValues, loading, copyModalVisible, setCopyModalVisible }) => {
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
const [formInstance, setFormInstance] = useState();
|
||||
|
||||
const [copyLoading, setCopyLoading] = useState(false);
|
||||
const handleCopyAgency = async (param) => {
|
||||
param.target_agency = isEmpty(param.target_agency) ? source.sourceAgency.travel_agency_id : param.target_agency;
|
||||
// 选了产品, 清空类型
|
||||
param.products_types = param.copyType === 'item' ? '' : param.products_types;
|
||||
param.product_id_list = param.copyType === 'type' ? '' : param.product_id_list;
|
||||
|
||||
setCopyLoading(true);
|
||||
// debug:
|
||||
// console.log('ready params', param);
|
||||
// setCopyLoading(false);
|
||||
// throw new Error('暂不支持复制');
|
||||
// const toID = param.target_agency;
|
||||
const success = await copyAgencyDataAction({ ...param, source_agency: source.sourceAgency.travel_agency_id }).catch((ex) => {
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
setCopyLoading(false);
|
||||
success ? message.success(t('Success')) : message.error(t('Failed'));
|
||||
|
||||
if (success && typeof onSubmit === 'function') {
|
||||
onSubmit(param);
|
||||
}
|
||||
// setCopyModalVisible(false);
|
||||
// navigate(`/products/${toID}/${searchValues.use_year || 'all'}/${searchValues.audit_state || 'all'}/edit`);
|
||||
};
|
||||
return (
|
||||
<Modal
|
||||
width={800}
|
||||
open={open}
|
||||
title={`${t('Copy')}${t('products:#')}${t('products:Offer')}`}
|
||||
okText='确认'
|
||||
// cancelText='Cancel'
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
}}
|
||||
confirmLoading={copyLoading}
|
||||
onCancel={() => {
|
||||
onCancel();
|
||||
formInstance?.resetFields();
|
||||
}}
|
||||
destroyOnClose destroyOnHidden
|
||||
onOk={async () => {
|
||||
try {
|
||||
const values = await formInstance?.validateFields();
|
||||
// formInstance?.resetFields();
|
||||
const dest = formValuesMapper(values);
|
||||
handleCopyAgency(dest);
|
||||
} catch (error) {
|
||||
console.log('Failed:', error);
|
||||
}
|
||||
}}>
|
||||
<RequireAuth subject={PERM_PRODUCTS_MANAGEMENT}>
|
||||
<div className='py-2'>
|
||||
{t('products:CopyFormMsg.Source')}: {source.sourceAgency.travel_agency_name}
|
||||
<Divider type={'vertical'} />
|
||||
{source.sourceYear}
|
||||
</div>
|
||||
</RequireAuth>
|
||||
<CopyProductsForm
|
||||
action={action}
|
||||
source={source}
|
||||
initialValues={initialValues}
|
||||
onFormInstanceReady={(instance) => {
|
||||
setFormInstance(instance);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
export default CopyProductsFormModal;
|
||||
@ -1,276 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
|
||||
import { App, Button, Divider, Popconfirm, Select } from "antd";
|
||||
import { ReloadOutlined } from "@ant-design/icons";
|
||||
import { useProductsAuditStatesMapVal } from "@/hooks/useProductsSets";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import useProductsStore, {
|
||||
postAgencyProductsAuditAction,
|
||||
postAgencyAuditAction,
|
||||
} from "@/stores/Products/Index";
|
||||
import { isEmpty, objectMapper } from "@/utils/commons";
|
||||
import useAuthStore from "@/stores/Auth";
|
||||
import RequireAuth from "@/components/RequireAuth";
|
||||
import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from "@/config";
|
||||
import dayjs from "dayjs";
|
||||
import VendorSelector from "@/components/VendorSelector";
|
||||
import AuditStateSelector from "@/components/AuditStateSelector";
|
||||
import { usingStorage } from "@/hooks/usingStorage";
|
||||
|
||||
import AgencyPreview from "../Print/AgencyPreview";
|
||||
import ExportDocxBtn from "../Print/ExportDocxBtn";
|
||||
|
||||
const Header = ({ refresh, ...props }) => {
|
||||
const location = useLocation();
|
||||
const isEditPage = location.pathname.includes("edit");
|
||||
const showEditA = !location.pathname.includes("edit");
|
||||
const showAuditA = !location.pathname.includes("audit");
|
||||
const { travel_agency_id, use_year, audit_state } = useParams();
|
||||
const { travelAgencyId } = usingStorage();
|
||||
const { t } = useTranslation();
|
||||
const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
const [activeAgency, setActiveAgency] = useProductsStore((state) => [
|
||||
state.activeAgency,
|
||||
state.setActiveAgency,
|
||||
]);
|
||||
const [switchParams, setSwitchParams] = useProductsStore((state) => [
|
||||
state.switchParams,
|
||||
state.setSwitchParams,
|
||||
]);
|
||||
// const [activeAgencyState] = useProductsStore((state) => [state.activeAgencyState]);
|
||||
const stateMapVal = useProductsAuditStatesMapVal();
|
||||
const { message, notification } = App.useApp();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const yearOptions = [];
|
||||
const currentYear = switchParams.use_year || dayjs().year();
|
||||
const baseYear = use_year
|
||||
? Number(use_year === "all" ? currentYear : use_year)
|
||||
: currentYear;
|
||||
for (let i = currentYear - 5; i <= baseYear + 5; i++) {
|
||||
yearOptions.push({ label: i, value: i });
|
||||
}
|
||||
|
||||
const [param, setParam] = useState({
|
||||
pick_year: baseYear,
|
||||
pick_agency: travel_agency_id,
|
||||
});
|
||||
const [pickYear, setPickYear] = useState(baseYear);
|
||||
const [pickAgency, setPickAgency] = useState({
|
||||
value: activeAgency.travel_agency_id,
|
||||
label: activeAgency.travel_agency_name,
|
||||
});
|
||||
const [pickAuditState, setPickAuditState] = useState();
|
||||
useEffect(() => {
|
||||
const _param = objectMapper(param, {
|
||||
pick_year: "use_year",
|
||||
pick_agency: "travel_agency_id",
|
||||
pick_state: "audit_state",
|
||||
});
|
||||
setSwitchParams({
|
||||
..._param,
|
||||
travel_agency_id: _param?.travel_agency_id || travelAgencyId,
|
||||
});
|
||||
refresh(param);
|
||||
|
||||
return () => {};
|
||||
}, [param]);
|
||||
|
||||
const emptyPickState = { value: "", label: t("products:State") };
|
||||
useEffect(() => {
|
||||
const baseState = audit_state
|
||||
? audit_state === "all"
|
||||
? emptyPickState
|
||||
: stateMapVal[`${audit_state}`]
|
||||
: emptyPickState;
|
||||
if (isEmpty(pickAuditState)) {
|
||||
setPickAuditState(baseState);
|
||||
}
|
||||
return () => {};
|
||||
}, [audit_state, stateMapVal]);
|
||||
|
||||
const handleYearChange = (value) => {
|
||||
setPickYear(value);
|
||||
setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
|
||||
};
|
||||
const handleAuditStateChange = (labelValue) => {
|
||||
const { value } = labelValue || emptyPickState;
|
||||
setPickAuditState(labelValue || emptyPickState);
|
||||
setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
|
||||
};
|
||||
|
||||
const handleAgencyChange = ({ label, value }) => {
|
||||
setPickAgency({ label, value });
|
||||
setActiveAgency({ travel_agency_id: value, travel_agency_name: label });
|
||||
setParam((pre) => ({ ...pre, ...{ pick_agency: value } }));
|
||||
};
|
||||
|
||||
const handleAuditAgency = (state) => {
|
||||
// const s = Object.keys(agencyProducts).map((typeKey) => {
|
||||
|
||||
// });
|
||||
postAgencyProductsAuditAction(state, {
|
||||
travel_agency_id: activeAgency.travel_agency_id,
|
||||
use_year: switchParams.use_year,
|
||||
})
|
||||
.then((json) => {
|
||||
if (json.errcode === 0) {
|
||||
message.success(json.errmsg);
|
||||
if (typeof refresh === "function") {
|
||||
refresh(param);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: "Notification",
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmitForAudit = () => {
|
||||
postAgencyAuditAction(activeAgency.travel_agency_id, switchParams.use_year)
|
||||
.then((json) => {
|
||||
if (json.errcode === 0) {
|
||||
message.success(t("Success"));
|
||||
if (typeof refresh === "function") {
|
||||
refresh(param);
|
||||
const auditPagePath = isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${switchParams.use_year}/all/audit`
|
||||
: isPermitted(PERM_PRODUCTS_OFFER_PUT)
|
||||
? `/products/audit`
|
||||
: "";
|
||||
navigate(auditPagePath);
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: "Notification",
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-end items-center gap-4 h-full">
|
||||
<div className="grow">
|
||||
<h2 className="m-0 leading-tight">
|
||||
{isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
|
||||
<VendorSelector
|
||||
value={{
|
||||
label: activeAgency.travel_agency_name,
|
||||
value: activeAgency.travel_agency_id,
|
||||
}}
|
||||
onChange={handleAgencyChange}
|
||||
allowClear={false}
|
||||
mode={null}
|
||||
className="w-72"
|
||||
size="large"
|
||||
variant={"borderless"}
|
||||
/>
|
||||
) : (
|
||||
activeAgency.travel_agency_name
|
||||
)}
|
||||
<Divider type={"vertical"} />
|
||||
<Select
|
||||
options={yearOptions}
|
||||
variant={"borderless"}
|
||||
className="w-24"
|
||||
size="large"
|
||||
value={pickYear}
|
||||
onChange={handleYearChange}
|
||||
/>
|
||||
<Divider type={"vertical"} />
|
||||
<AuditStateSelector
|
||||
variant={"borderless"}
|
||||
className="w-32"
|
||||
size="large"
|
||||
value={pickAuditState}
|
||||
onChange={handleAuditStateChange}
|
||||
/>
|
||||
{/* <Divider type={'vertical'} />
|
||||
{(use_year || '').replace('all', '')} */}
|
||||
<Button
|
||||
onClick={() => refresh(param)}
|
||||
type="text"
|
||||
className="text-primary round-none"
|
||||
icon={<ReloadOutlined />}
|
||||
/>
|
||||
</h2>
|
||||
</div>
|
||||
<AgencyPreview params={switchParams} />
|
||||
<ExportDocxBtn params={switchParams} />
|
||||
{/* {activeAgencyState === 0 && ( */}
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_PUT}>
|
||||
<Popconfirm
|
||||
title={t("products:sureSubmitAudit")}
|
||||
onConfirm={handleSubmitForAudit}
|
||||
okText={t("Yes")}
|
||||
placement={"bottomLeft"}
|
||||
>
|
||||
<Button size="small" type={"primary"}>
|
||||
{t("Submit")}
|
||||
{t("Audit")}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</RequireAuth>
|
||||
</>
|
||||
{/* )} */}
|
||||
{showEditA && (
|
||||
<Link
|
||||
className="px-2"
|
||||
to={
|
||||
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${pickYear}/all/edit`
|
||||
: `/products/edit`
|
||||
}
|
||||
>
|
||||
{t("Edit")}
|
||||
</Link>
|
||||
)}
|
||||
{showAuditA && (
|
||||
<Link
|
||||
className="px-2"
|
||||
to={
|
||||
isPermitted(PERM_PRODUCTS_OFFER_AUDIT)
|
||||
? `/products/${activeAgency.travel_agency_id}/${pickYear}/${audit_state}/audit`
|
||||
: `/products/audit`
|
||||
}
|
||||
>
|
||||
{t("products:AuditRes")}
|
||||
</Link>
|
||||
)}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button
|
||||
size="small"
|
||||
type={"primary"}
|
||||
onClick={() => handleAuditAgency("1")}
|
||||
>
|
||||
{t("products:auditStateAction.Published")}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
{/* <Button size='small' type={'primary'} ghost onClick={() => handleAuditAgency('2')}>
|
||||
{t('products:auditStateAction.Approved')}
|
||||
</Button> */}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button
|
||||
size="small"
|
||||
type={"primary"}
|
||||
danger
|
||||
ghost
|
||||
onClick={() => handleAuditAgency("3")}
|
||||
>
|
||||
{t("products:auditStateAction.Rejected")}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
@ -1,135 +0,0 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Form, Modal, Input, Button } from 'antd';
|
||||
import { objectMapper } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import ProductsTypesSelector from '@/components/ProductsTypesSelector';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useNewProductRecord, useProductsTypesMapVal } from '@/hooks/useProductsSets';
|
||||
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_OFFER_PUT, PERM_PRODUCTS_NEW } from '@/config';
|
||||
|
||||
export const NewProductsForm = ({ initialValues, onFormInstanceReady, ...props }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const [form] = Form.useForm();
|
||||
|
||||
useEffect(() => {
|
||||
onFormInstanceReady(form);
|
||||
}, []);
|
||||
|
||||
const [pickType, setPickType] = useState({ value: '6' });
|
||||
const onValuesChange = (changeValues, allValues) => {
|
||||
if ('products_type' in changeValues) {
|
||||
setPickType(changeValues.products_type);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Form layout='horizontal' form={form} name='new_product_in_modal' initialValues={initialValues} onValuesChange={onValuesChange}>
|
||||
<Form.Item name={`products_type`} label={t('products:ProductType')} rules={[{ required: true }]} tooltip={false}>
|
||||
<ProductsTypesSelector maxTagCount={1} mode={null} placeholder={t('common:All')} />
|
||||
</Form.Item>
|
||||
<Form.Item name={`title`} label={t('products:Title')} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${pickType.value}`)} dependencies={['products_type']}>
|
||||
{/* ${pickType.value} */}
|
||||
<Input placeholder={t(`FormTooltip.NewTitle.${pickType.value}`)} />
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
const formValuesMapper = (values) => {
|
||||
const destinationObject = {
|
||||
'products_types': {
|
||||
key: 'products_types',
|
||||
transform: (value) => {
|
||||
return Array.isArray(value) ? value.map((ele) => ele.key).join(',') : value ? value.value : '-1';
|
||||
},
|
||||
},
|
||||
};
|
||||
let dest = {};
|
||||
const { ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : dest[key];
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
return dest;
|
||||
};
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export const NewProductModal = ({ initialValues }) => {
|
||||
const { t } = useTranslation();
|
||||
const [formInstance, setFormInstance] = useState();
|
||||
const [setEditingProduct] = useProductsStore((state) => [state.setEditingProduct]);
|
||||
const [switchParams] = useProductsStore((state) => [state.switchParams]);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [copyLoading, setCopyLoading] = useState(false);
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
const newProduct = useNewProductRecord();
|
||||
const { language } = useDefaultLgc();
|
||||
const handelAddProduct = (param) => {
|
||||
const copyNewProduct = structuredClone(newProduct);
|
||||
copyNewProduct.info.title = param.title;
|
||||
copyNewProduct.info.product_title = param.title;
|
||||
copyNewProduct.info.product_type_id = productsTypesMapVal[param.products_type.value].value;
|
||||
copyNewProduct.info.product_type_name = productsTypesMapVal[param.products_type.value].label;
|
||||
copyNewProduct.lgc_details[0].lgc = language;
|
||||
copyNewProduct.lgc_details[0].title = param.title;
|
||||
copyNewProduct.quotation[0].use_dates_start = `${switchParams.use_year}-01-01`;
|
||||
copyNewProduct.quotation[0].use_dates_end = `${switchParams.use_year}-12-31`;
|
||||
setEditingProduct(copyNewProduct);
|
||||
// if (typeof onSubmit === 'function') {
|
||||
// onSubmit();
|
||||
// }
|
||||
setOpen(false);
|
||||
return false;
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<RequireAuth subject={PERM_PRODUCTS_NEW}>
|
||||
<Button size='small' type={'primary'} onClick={() => setOpen(true)}>
|
||||
{t('New')}
|
||||
{t('products:#')}
|
||||
</Button>
|
||||
</RequireAuth>
|
||||
|
||||
<Modal
|
||||
width={600}
|
||||
open={open}
|
||||
title={`${t('common:New')}${t('products:#')}`}
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
}}
|
||||
confirmLoading={copyLoading}
|
||||
onCancel={() => {
|
||||
// onCancel();
|
||||
setOpen(false);
|
||||
formInstance?.resetFields();
|
||||
}}
|
||||
destroyOnClose
|
||||
onOk={async () => {
|
||||
try {
|
||||
const values = await formInstance?.validateFields();
|
||||
// formInstance?.resetFields();
|
||||
const dest = formValuesMapper(values);
|
||||
handelAddProduct(dest);
|
||||
} catch (error) {
|
||||
console.log('Failed:', error);
|
||||
}
|
||||
}}>
|
||||
<NewProductsForm
|
||||
initialValues={initialValues}
|
||||
onFormInstanceReady={(instance) => {
|
||||
setFormInstance(instance);
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default NewProductModal;
|
||||
@ -1,109 +0,0 @@
|
||||
import { useState } from 'react'
|
||||
import { Input, Space } from 'antd'
|
||||
|
||||
const PriceCompactInput = (props) => {
|
||||
const { id, value = {}, onChange } = props
|
||||
const [numberStart, setNumberStart] = useState(0)
|
||||
const [numberEnd, setNumberEnd] = useState(0)
|
||||
const [audultPrice, setAudultPrice] = useState(0)
|
||||
const [childrenPrice, setChildrenPrice] = useState(0)
|
||||
const triggerChange = (changedValue) => {
|
||||
onChange?.({
|
||||
numberStart,
|
||||
numberEnd,
|
||||
audultPrice,
|
||||
childrenPrice,
|
||||
...value,
|
||||
...changedValue,
|
||||
})
|
||||
}
|
||||
const onNumberStartChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('numberStart' in value)) {
|
||||
setNumberStart(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
numberStart: newNumber,
|
||||
})
|
||||
}
|
||||
const onNumberEndChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('numberEnd' in value)) {
|
||||
setNumberEnd(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
numberEnd: newNumber,
|
||||
})
|
||||
}
|
||||
const onAudultPriceChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('audultPrice' in value)) {
|
||||
setAudultPrice(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
audultPrice: newNumber,
|
||||
})
|
||||
}
|
||||
const onChildrenPriceChange = (e) => {
|
||||
const newNumber = parseInt(e.target.value || '0', 10)
|
||||
if (Number.isNaN(newNumber)) {
|
||||
return
|
||||
}
|
||||
if (!('childrenPrice' in value)) {
|
||||
setChildrenPrice(newNumber)
|
||||
}
|
||||
triggerChange({
|
||||
childrenPrice: newNumber,
|
||||
})
|
||||
}
|
||||
return (
|
||||
<Space.Compact id={id}>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.numberStart || numberStart}
|
||||
onChange={onNumberStartChange}
|
||||
style={{
|
||||
width: '20%',
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.numberEnd || numberEnd}
|
||||
onChange={onNumberEndChange}
|
||||
style={{
|
||||
width: '40%',
|
||||
}}
|
||||
addonBefore='~'
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.audultPrice || audultPrice}
|
||||
onChange={onAudultPriceChange}
|
||||
style={{
|
||||
width: '70%',
|
||||
}}
|
||||
addonBefore='成人价'
|
||||
/>
|
||||
<Input
|
||||
type='text'
|
||||
value={value.childrenPrice || childrenPrice}
|
||||
onChange={onChildrenPriceChange}
|
||||
style={{
|
||||
width: '70%',
|
||||
}}
|
||||
addonBefore='儿童价'
|
||||
/>
|
||||
</Space.Compact>
|
||||
)
|
||||
}
|
||||
|
||||
export default PriceCompactInput
|
||||
@ -1,165 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { App, Breadcrumb, Divider } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useProductsTypesMapVal, useNewProductRecord } from '@/hooks/useProductsSets';
|
||||
import useProductsStore, { postProductsSaveAction } from '@/stores/Products/Index';
|
||||
import useAuthStore from '@/stores/Auth';
|
||||
import { PERM_PRODUCTS_MANAGEMENT, PERM_PRODUCTS_OFFER_PUT, PERM_PRODUCTS_INFO_PUT, PERM_PRODUCTS_NEW } from '@/config';
|
||||
import { isEmpty, objectMapper, pick, unique } from '@/utils/commons';
|
||||
import ProductInfoForm from './ProductInfoForm';
|
||||
import { usingStorage } from '@/hooks/usingStorage';
|
||||
import Extras from './Extras';
|
||||
import NewProductModal from './NewProductModal';
|
||||
|
||||
const ProductInfo = ({ ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const { notification, message } = App.useApp();
|
||||
const { userId } = usingStorage();
|
||||
const isPermitted = useAuthStore((state) => state.isPermitted);
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
const newProductRecord = useNewProductRecord();
|
||||
|
||||
const [loading, setLoading, appendNewProduct] = useProductsStore((state) => [state.loading, state.setLoading, state.appendNewProduct]);
|
||||
const [activeAgency, editingProduct, setEditingProduct] = useProductsStore((state) => [state.activeAgency, state.editingProduct, state.setEditingProduct]);
|
||||
|
||||
const [extrasVisible, setExtrasVisible] = useState(false);
|
||||
const [editablePerm, setEditablePerm] = useState(false);
|
||||
const [infoEditable, setInfoEditable] = useState(false);
|
||||
const [priceEditable, setPriceEditable] = useState(false);
|
||||
useEffect(() => {
|
||||
const topPerm = isPermitted(PERM_PRODUCTS_MANAGEMENT); // 高级权限
|
||||
|
||||
const hasHT = (editingProduct?.info?.htid || 0) > 0;
|
||||
// const hasAuditPer = isPermitted(PERM_PRODUCTS_OFFER_AUDIT);
|
||||
const hasEditPer = isPermitted(PERM_PRODUCTS_INFO_PUT) || isPermitted(PERM_PRODUCTS_NEW); // || isPermitted(PERM_PRODUCTS_OFFER_PUT);
|
||||
|
||||
setEditablePerm(topPerm || hasEditPer);
|
||||
// setEditable(topPerm || (hasAuditPer ? true : (!hasHT && hasEditPer)));
|
||||
// setEditable(true); // debug: 0
|
||||
// console.log('editable', hasAuditPer, (notAudit && hasEditPer));
|
||||
setInfoEditable(topPerm || (!hasHT && hasEditPer));
|
||||
|
||||
const _priceEditable = [-1, 3].includes(activeAgency?.audit_state_id) || isEmpty(editingProduct?.info?.id);
|
||||
const hasPricePer = isPermitted(PERM_PRODUCTS_OFFER_PUT);
|
||||
// setPriceEditable(topPerm || (_priceEditable && hasPricePer));
|
||||
setPriceEditable(topPerm || (hasPricePer));
|
||||
// setPriceEditable(true); // debug: 0
|
||||
|
||||
const showExtras = topPerm && hasHT; // !isEmpty(editingProduct) &&
|
||||
setExtrasVisible(showExtras);
|
||||
|
||||
setLgcEdits({});
|
||||
setInfoEditStatus('');
|
||||
setEditKeys([]);
|
||||
return () => {};
|
||||
}, [activeAgency, editingProduct]);
|
||||
|
||||
const [infoEditStatus, setInfoEditStatus] = useState('');
|
||||
const [lgcEdits, setLgcEdits] = useState({});
|
||||
// const [editChanged, setEditChanged] = useState({});
|
||||
const [editKeys, setEditKeys] = useState([]);
|
||||
|
||||
const onValuesChange = (changedValues) => {
|
||||
// console.log('onValuesChange', changedValues);
|
||||
const changedKeys = objectMapper(changedValues, { 'city': 'city_id', 'dept': 'dept_id', 'product_title': 'title', 'lgc_details_mapped': 'lgc_details'});
|
||||
setEditKeys(prev => unique([...prev, ...Object.keys(changedKeys)]));
|
||||
// const preValues = pick(editingProduct.info, editKeys);
|
||||
if ('product_title' in changedValues) {
|
||||
setInfoEditStatus('2');
|
||||
setLgcEdits({...lgcEdits, '2': {'edit_status': '2'}});
|
||||
}
|
||||
if ('lgc_details_mapped' in changedValues) {
|
||||
const lgc = Object.keys(changedValues.lgc_details_mapped)[0];
|
||||
setLgcEdits({...lgcEdits, [lgc]: {'edit_status': '2'}});
|
||||
} else if ('quotation' in changedValues) {
|
||||
// 价格不改 edit_status
|
||||
} else {
|
||||
setInfoEditStatus('2');
|
||||
}
|
||||
};
|
||||
|
||||
const onSave = async (err, values, forms) => {
|
||||
values.travel_agency_id = activeAgency.travel_agency_id;
|
||||
const editChanged = pick(editingProduct.info, editKeys);
|
||||
(editKeys.includes('lgc_details') ? editChanged.lgc_details = editingProduct.lgc_details.map(l => l.lgc) : false);
|
||||
// console.log("editKeys pre values", editKeys, editChanged, '\neditingProduct', );
|
||||
|
||||
const copyNewProduct = structuredClone(newProductRecord);
|
||||
const poster = {
|
||||
// ...(topPerm ? { } : { 'audit_state': -1 }), // 高级权限: 不变更状态值
|
||||
// "create_date": dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||||
// "created_by": userId,
|
||||
'travel_agency_id': activeAgency.travel_agency_id,
|
||||
// "travel_agency_name": "",
|
||||
'lastedit_changed': editChanged, // isEmpty(editChanged) ? "" : JSON.stringify(editChanged),
|
||||
'edit_status': infoEditStatus || editingProduct.info.edit_status,
|
||||
};
|
||||
// console.log("ready to post", poster);
|
||||
const copyFields = pick(editingProduct.info, ['product_type_id']); // 'title',
|
||||
const readyToSubInfo = { ...copyNewProduct.info, ...editingProduct.info, title: editingProduct.info.product_title, ...values.info, ...copyFields, ...poster };
|
||||
// console.log('onSave', editingProduct.info, readyToSubInfo);
|
||||
|
||||
/** lgc_details */
|
||||
const prevLgcDetailsMapped = editingProduct.lgc_details.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
const mergedLgc = { ...prevLgcDetailsMapped, ...values.lgc_details_mapped, };
|
||||
for (const lgcKey in lgcEdits) {
|
||||
if (Object.prototype.hasOwnProperty.call(lgcEdits, lgcKey)) {
|
||||
const element = lgcEdits[lgcKey];
|
||||
mergedLgc[lgcKey].edit_status = element?.edit_status || values.lgc_details_mapped[lgcKey]?.edit_status || '2';
|
||||
}
|
||||
}
|
||||
|
||||
// console.log('before save', readyToSubInfo, '\n lgcEdits:', lgcEdits, '\n mergedLgc', mergedLgc);
|
||||
// return false; // debug: 0
|
||||
// throw new Error("Test save");
|
||||
/** 提交保存 */
|
||||
setLoading(true);
|
||||
const { success, result } = await postProductsSaveAction({
|
||||
travel_agency_id: activeAgency.travel_agency_id,
|
||||
info: readyToSubInfo,
|
||||
lgc_details: Object.values(mergedLgc),
|
||||
quotation: values.quotation.map((q) => ({ ...q, unit: Number(q.unit || q.unit_id), unit_id: Number(q.unit_id) })), // || editingProduct.quotation, // 没改动, 就用原来的
|
||||
}).catch((ex) => {
|
||||
setLoading(false);
|
||||
notification.error({
|
||||
message: 'Notification',
|
||||
description: ex.message,
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
setLoading(false);
|
||||
success ? message.success(t('Success')) : message.error(t('Failed'));
|
||||
// 保存后更新数据
|
||||
// result.quotation = isEmpty(result.quotation) ? editingProduct.quotation : result.quotation;
|
||||
result.info.htid = editingProduct?.info?.htid;
|
||||
appendNewProduct(result);
|
||||
setEditingProduct(result);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
items={[
|
||||
{ title: productsTypesMapVal[editingProduct?.info?.product_type_id]?.label || editingProduct?.info?.product_type_name },
|
||||
{ title: editingProduct?.info?.title ?? t('New') },
|
||||
// { title: 'htID: ' + editingProduct?.info?.htid },
|
||||
// { title: 'ID: ' + editingProduct?.info?.id },
|
||||
]}
|
||||
/>
|
||||
<Divider className='my-1' />
|
||||
{isEmpty(editingProduct) ? (
|
||||
<div className=' my-2'>
|
||||
<NewProductModal />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<h2>{t('products:EditComponents.info')}</h2>
|
||||
<ProductInfoForm {...{ editablePerm, infoEditable, priceEditable, onValuesChange }} initialValues={editingProduct?.info} onSubmit={onSave} />
|
||||
<Divider className='my-1' />
|
||||
{extrasVisible && <Extras productId={editingProduct?.info?.id} />}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfo;
|
||||
@ -1,497 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { App, Form, Input, Row, Col, Select, Button, InputNumber, Checkbox } from 'antd';
|
||||
import { objectMapper, isEmpty, isNotEmpty, pick } from '@/utils/commons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useWeekdays } from '@/hooks/useDatePresets';
|
||||
import DeptSelector from '@/components/DeptSelector';
|
||||
import CitySelector from '@/components/CitySelector';
|
||||
import { useProductsTypesFieldsets, PackageTypes } from '@/hooks/useProductsSets';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import ProductInfoLgc from './ProductInfoLgc';
|
||||
import ProductInfoQuotation from './ProductInfoQuotation';
|
||||
import { useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
||||
|
||||
const InfoForm = ({ onSubmit, onReset, onValuesChange, editablePerm, infoEditable, priceEditable, showSubmit, confirmText, formName, ...props }) => {
|
||||
const { notification } = App.useApp();
|
||||
const { t } = useTranslation('products');
|
||||
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
||||
const [loading, editingProduct] = useProductsStore((state) => [state.loading, state.editingProduct]);
|
||||
const weekdays = useWeekdays();
|
||||
const [form] = Form.useForm();
|
||||
const { sort, hides, fieldProps, fieldComProps } = {
|
||||
sort: '',
|
||||
fieldProps: '',
|
||||
fieldComProps: '',
|
||||
hides: [],
|
||||
shows: [],
|
||||
...props.fieldsConfig,
|
||||
};
|
||||
const filedsets = useProductsTypesFieldsets(editingProduct?.info?.product_type_id);
|
||||
const shows = filedsets[0];
|
||||
|
||||
const [pickEditedInfo, setPickEditedInfo] = useState({}); // 传递联动的字段
|
||||
|
||||
// const [editable, setEditable] = useState(true);
|
||||
const [formEditable, setFormEditable] = useState(true);
|
||||
const [showSave, setShowSave] = useState(true);
|
||||
useEffect(() => {
|
||||
form.resetFields();
|
||||
const _formValue = serverData2Form(editingProduct);
|
||||
const readyFormVal = pick(_formValue, ['quotation', 'lgc_details_mapped','city', 'city_list', 'dept', 'display_to_c', 'sub_type_D'])
|
||||
// form.setFieldsValue(serverData2Form(editingProduct));
|
||||
// ! setFieldsValue 导致赋值错误
|
||||
for (const _key in readyFormVal) {
|
||||
form.setFieldValue(_key, readyFormVal[_key])
|
||||
}
|
||||
setPickEditedInfo({ ...pickEditedInfo, product_title: editingProduct?.info?.product_title });
|
||||
|
||||
setFormEditable(infoEditable || priceEditable);
|
||||
|
||||
// const editable0 = isEmpty(editingProduct) ? false : editablePerm; // 空对象未操作
|
||||
setShowSave(infoEditable || priceEditable);
|
||||
// setEditable(editable0);
|
||||
return () => {};
|
||||
}, [editingProduct, editablePerm, infoEditable, priceEditable]);
|
||||
|
||||
const onFinish = (values) => {
|
||||
console.log('Received values of form, origin form value: \n', values);
|
||||
const dest = formValuesMapper2Server(values);
|
||||
console.log('form value send to onSubmit:\n', dest);
|
||||
if (typeof onSubmit === 'function') {
|
||||
onSubmit(null, dest, values);
|
||||
}
|
||||
};
|
||||
|
||||
const onFinishFailed = ({ values, errorFields }) => {
|
||||
console.log('form validate failed', '\nform values:', values, '\nerrorFields', errorFields);
|
||||
notification.warning({
|
||||
message: '数据未填写完整',
|
||||
// description: '数据未填写完整',
|
||||
placement: 'top',
|
||||
duration: 4,
|
||||
})
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
form.setFieldsValue({
|
||||
// 'DateType': undefined,
|
||||
});
|
||||
if (typeof onReset === 'function') {
|
||||
onReset();
|
||||
}
|
||||
};
|
||||
const onIValuesChange = (changedValues, allValues) => {
|
||||
const dest = formValuesMapper2Server(allValues);
|
||||
// console.log('form onValuesChange', Object.keys(changedValues), changedValues);
|
||||
if ('product_title' in changedValues) {
|
||||
const editTitle = (changedValues.product_title);
|
||||
setPickEditedInfo({ ...pickEditedInfo, product_title: editTitle });
|
||||
}
|
||||
if (typeof onValuesChange === 'function') {
|
||||
onValuesChange(changedValues, dest);
|
||||
}
|
||||
};
|
||||
const onFieldsChange = (hangedFields, allFields) => {
|
||||
console.log('onFieldsChange', hangedFields, allFields);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Form
|
||||
form={form}
|
||||
disabled={!formEditable}
|
||||
name={formName || 'product_info'}
|
||||
// preserve={false}
|
||||
onFinish={onFinish}
|
||||
onValuesChange={onIValuesChange}
|
||||
// onFieldsChange={onFieldsChange}
|
||||
initialValues={{ ...(editingProduct?.info || {}), sub_type_D: editingProduct?.info?.item_type || '' }}
|
||||
onFinishFailed={onFinishFailed}
|
||||
scrollToFirstError>
|
||||
<Row>
|
||||
{getFields({ sort, initialValue: editingProduct?.info, hides, shows, fieldProps, fieldComProps, form, t, dataSets: { weekdays }, editable: infoEditable })}
|
||||
{/* {showSubmit && (
|
||||
<Col flex='1 0 90px' className='flex justify-end items-start'>
|
||||
<Space align='center'>
|
||||
<Button size={'middle'} type='primary' htmlType='submit' loading={loading}>
|
||||
{confirmText || t('common:Save')}
|
||||
</Button>
|
||||
</Space>
|
||||
</Col>
|
||||
)} */}
|
||||
</Row>
|
||||
{/* <Divider className='my-1' /> */}
|
||||
<Form.Item
|
||||
className='mb-0'
|
||||
name={'lgc_details_mapped'}
|
||||
rules={[
|
||||
() => ({
|
||||
transform(value) {
|
||||
return Object.values(value).filter((_v) => !isEmpty(_v));
|
||||
},
|
||||
validator: async (_, valueArr) => {
|
||||
const invalidLgcName = valueArr
|
||||
.filter((l) => isEmpty(l.title))
|
||||
.map((x) => HTLanguageSetsMapVal[x.lgc].label)
|
||||
.join(', ');
|
||||
if (isNotEmpty(invalidLgcName)) {
|
||||
// Please complete multi -language information
|
||||
return Promise.reject(new Error(`请完善多语种信息: ${invalidLgcName}`));
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
}),
|
||||
]}>
|
||||
<ProductInfoLgc editable={infoEditable} formInstance={form} pickEditedInfo={pickEditedInfo} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item name='quotation'>
|
||||
<ProductInfoQuotation editable={priceEditable} />
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item hidden name={'id'} label={'ID'}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
{/* <Form.Item hidden name={'title'} label={'title'}>
|
||||
<Input />
|
||||
</Form.Item> */}
|
||||
{showSave && (
|
||||
<Form.Item>
|
||||
<div className='flex justify-around'>
|
||||
<Button type='primary' htmlType='submit' loading={loading}>
|
||||
{t('common:Save')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form.Item>
|
||||
)}
|
||||
</Form>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
function getFields(props) {
|
||||
const { fieldProps, fieldComProps, form, t, dataSets } = props;
|
||||
// console.log('getFields', props.initialValue);
|
||||
const styleProps = {};
|
||||
const editableProps = (name) => {
|
||||
// const disabled = props.ignoreEditable ? false : (isEmpty(props.initialValue?.[name]) && props.editable ? false : true)
|
||||
const disabled = !props.editable;
|
||||
return { disabled, className: disabled ? '!text-slate-500' : '' };
|
||||
};
|
||||
const bigCol = 4 * 2;
|
||||
const midCol = 8;
|
||||
const layoutProps = {
|
||||
// gutter: { xs: 8, sm: 8, lg: 16 },
|
||||
lg: { span: 6 },
|
||||
md: { span: 8 },
|
||||
sm: { span: 12 },
|
||||
xs: { span: 24 },
|
||||
};
|
||||
const item = (name, sort = 0, render, col) => {
|
||||
const customCol = col || midCol;
|
||||
const mdCol = customCol * 2;
|
||||
return {
|
||||
'key': '',
|
||||
sort,
|
||||
name,
|
||||
render,
|
||||
'hide': false,
|
||||
'col': { lg: { span: customCol }, md: { span: mdCol < 8 ? 10 : mdCol > 24 ? 24 : mdCol }, flex: mdCol < 8 ? '1 0' : '' },
|
||||
};
|
||||
};
|
||||
let baseChildren = [];
|
||||
baseChildren = [
|
||||
item(
|
||||
'product_title',
|
||||
99,
|
||||
<Form.Item name='product_title' label={t('Title')} {...fieldProps.product_title} rules={[{ required: true }]} tooltip={false}>
|
||||
<Input allowClear {...fieldComProps.product_title} {...styleProps} {...editableProps('product_title')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.product_title?.col || midCol
|
||||
),
|
||||
item(
|
||||
'code',
|
||||
99,
|
||||
<Form.Item name='code' label={t('Code')} {...fieldProps.code} rules={[{ required: true }]} tooltip={false}>
|
||||
<Input allowClear {...fieldComProps.code} {...styleProps} {...editableProps('code')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.code?.col || midCol
|
||||
),
|
||||
item(
|
||||
'city',
|
||||
99,
|
||||
<Form.Item name='city' label={t('City')} {...fieldProps.city} rules={[{ required: true }]} tooltip={t('FormTooltip.City')}>
|
||||
<CitySelector {...styleProps} {...editableProps('city_id')} placeholder={t('FormTooltip.City')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.city?.col || midCol
|
||||
),
|
||||
item(
|
||||
'dept',
|
||||
99,
|
||||
<Form.Item name='dept' label={t('Dept')} {...fieldProps.dept}>
|
||||
<DeptSelector labelInValue={false} isLeaf {...styleProps} {...editableProps('dept')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.dept?.col || midCol
|
||||
),
|
||||
item(
|
||||
'duration',
|
||||
99,
|
||||
<Form.Item name='duration' label={t('Duration')} {...fieldProps.duration} rules={[{ required: true, type: 'number', min: 0}]} tooltip={false}>
|
||||
<InputNumber suffix={'H'} max={24} {...styleProps} {...editableProps('duration')} />
|
||||
{/* <Input allowClear {...fieldComProps.duration} suffix={'H'} /> */}
|
||||
</Form.Item>,
|
||||
fieldProps?.duration?.col || midCol
|
||||
),
|
||||
item(
|
||||
'city_list',
|
||||
99,
|
||||
<Form.Item name='city_list' label={t('多城市')} tooltip={t('把产品绑定到多个城市')}>
|
||||
<CitySelector mode='multiple' maxTagCount={10} {...styleProps} {...editableProps('city_list')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.city_list?.col || midCol
|
||||
),
|
||||
item(
|
||||
'km',
|
||||
99,
|
||||
<Form.Item name='km' label={t('KM')} {...fieldProps.km} rules={[{ required: true, },]} tooltip={t('FormTooltip.KM')}>
|
||||
<InputNumber suffix={'KM'} min={0.1} {...styleProps} {...editableProps('km')} placeholder={t('FormTooltip.KM')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.km?.col || midCol
|
||||
),
|
||||
item(
|
||||
'recommends_rate',
|
||||
99,
|
||||
<Form.Item name='recommends_rate' label={t('RecommendsRate')} {...fieldProps.recommends_rate} tooltip={t('FormTooltip.RecommendsRate')}>
|
||||
{/* <Input placeholder={t('RecommendsRate')} allowClear /> */}
|
||||
<InputNumber style={{width: '100%'}} {...styleProps} {...editableProps('recommends_rate')} min={1} max={1000} />
|
||||
{/* <Select
|
||||
{...styleProps}
|
||||
{...editableProps('recommends_rate')}
|
||||
style={{ width: '100%' }}
|
||||
labelInValue={false}
|
||||
options={[
|
||||
{ value: 1, label: 'Top 1' },
|
||||
{ value: 2, label: 'Top 2' },
|
||||
{ value: 3, label: 'Top 3' },
|
||||
{ value: 4, label: '4' },
|
||||
{ value: 5, label: '5' },
|
||||
]}
|
||||
/> */}
|
||||
</Form.Item>,
|
||||
fieldProps?.recommends_rate?.col || (props.shows.includes('sort_order') ? midCol/2 : midCol)
|
||||
),
|
||||
item(
|
||||
'sort_order',
|
||||
99,
|
||||
<Form.Item name='sort_order' label={t('SortOrder')} {...fieldProps.sort_order} >
|
||||
<InputNumber style={{width: '100%'}} {...styleProps} {...editableProps('sort_order')} max={1000} />
|
||||
</Form.Item>,
|
||||
fieldProps?.sort_order?.col || midCol/2
|
||||
),
|
||||
item(
|
||||
'display_to_c',
|
||||
99,
|
||||
<Form.Item
|
||||
name='display_to_c'
|
||||
label={t('DisplayToC')}
|
||||
{...fieldProps.display_to_c}
|
||||
tooltip={t('FormTooltip.DisplayToC')}
|
||||
// rules={[
|
||||
// () => ({
|
||||
// validator(_, value) {
|
||||
// if ((value || []).includes(153002) && !(value || []).includes(153001)) {
|
||||
// return Promise.reject(new Error('不允许仅报价信显示'));
|
||||
// }
|
||||
// return Promise.resolve();
|
||||
// },
|
||||
// }),
|
||||
// ]}
|
||||
>
|
||||
{/* <Checkbox.Group
|
||||
options={[
|
||||
{ value: 153001, label: '报价信不显示' },
|
||||
{ value: 153002, label: '计划不显示' },
|
||||
]}
|
||||
/> */}
|
||||
<Select
|
||||
labelInValue={false}
|
||||
options={[
|
||||
{ value: '153001', label: '在计划显示，不在报价信显示' },
|
||||
{ value: '0', label: '计划和报价信都要显示' },
|
||||
{ value: '153001, 153002', label: '计划和报价信都不用显示' },
|
||||
]}
|
||||
{...styleProps}
|
||||
{...editableProps('display_to_c')}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.display_to_c?.col || midCol
|
||||
),
|
||||
item(
|
||||
'sub_type_D',
|
||||
99,
|
||||
<Form.Item
|
||||
name='sub_type_D'
|
||||
label={t('subTypeD')}
|
||||
{...fieldProps.sub_type_D}
|
||||
rules={[{ required: true }]}
|
||||
// tooltip={t('FormTooltip.subTypeD')}
|
||||
>
|
||||
<Select
|
||||
labelInValue={false}
|
||||
options={PackageTypes}
|
||||
{...styleProps}
|
||||
{...editableProps('sub_type_D')}
|
||||
/>
|
||||
</Form.Item>,
|
||||
fieldProps?.sub_type_D?.col || midCol
|
||||
),
|
||||
item(
|
||||
'open_weekdays',
|
||||
99,
|
||||
<Form.Item name='open_weekdays' label={t('OpenWeekdays')} {...fieldProps.open_weekdays} tooltip={false}>
|
||||
<Checkbox.Group options={dataSets.weekdays} {...styleProps} {...editableProps('open_weekdays')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.open_weekdays?.col || 24
|
||||
),
|
||||
item(
|
||||
'remarks',
|
||||
99,
|
||||
<Form.Item name='remarks' label={t('Remarks')} {...fieldProps.remarks} tooltip={t('FormTooltip.Remarks')}>
|
||||
<Input.TextArea allowClear rows={2} maxLength={2000} showCount {...fieldComProps.remarks} {...styleProps} {...editableProps('remarks')} />
|
||||
</Form.Item>,
|
||||
fieldProps?.remarks?.col || 24
|
||||
),
|
||||
];
|
||||
baseChildren = baseChildren
|
||||
.map((x) => {
|
||||
x.hide = false;
|
||||
if (props.sort === undefined) {
|
||||
return x;
|
||||
}
|
||||
const tmpSort = props.sort;
|
||||
for (const key in tmpSort) {
|
||||
if (Object.prototype.hasOwnProperty.call(tmpSort, key)) {
|
||||
if (x.name === key) {
|
||||
x.sort = tmpSort[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.map((x) => {
|
||||
if (props.hides.length === 0 && props.shows.length === 0) {
|
||||
return x;
|
||||
}
|
||||
if (props.hides.length === 0) {
|
||||
x.hide = !props.shows.includes(x.name);
|
||||
} else if (props.shows.length === 0) {
|
||||
x.hide = props.hides.includes(x.name);
|
||||
}
|
||||
return x;
|
||||
})
|
||||
.filter((x) => !x.hide)
|
||||
.sort((a, b) => {
|
||||
return a.sort < b.sort ? -1 : 1;
|
||||
});
|
||||
const children = [];
|
||||
const leftStyle = {}; // { borderRight: '1px solid #dedede' };
|
||||
for (let i = 0; i < baseChildren.length; i++) {
|
||||
let style = {}; // { padding: '0px 2px' };
|
||||
style = i % 2 === 0 && baseChildren[i].col === 12 ? { ...style, ...leftStyle } : style;
|
||||
style = !baseChildren[i].hide ? { ...style, display: 'block' } : { ...style, display: 'none' };
|
||||
const Item = (
|
||||
<Col key={String(i)} style={style} {...baseChildren[i].col} className='px-1 shrink-0 grow'>
|
||||
{baseChildren[i].render}
|
||||
</Col>
|
||||
);
|
||||
children.push(Item);
|
||||
}
|
||||
return children;
|
||||
}
|
||||
|
||||
const serverData2Form = (productItem) => {
|
||||
const infoForRender = {
|
||||
city: productItem?.info?.city_id ? { value: productItem?.info?.city_id, label: productItem?.info?.city_name } : undefined,
|
||||
dept: { value: productItem?.info?.dept_id, label: productItem?.info?.dept_name },
|
||||
display_to_c: productItem.info?.display_to_c || '0',
|
||||
city_list: productItem?.info?.city_list ? productItem?.info?.city_list?.map((ele) => ({ value: ele.id, label: ele.name })) : undefined,
|
||||
sub_type_D: productItem?.info?.item_type || '',
|
||||
};
|
||||
const lgc_details_mapped = (productItem?.lgc_details || []).reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
const quotation = productItem?.quotation || [];
|
||||
return { ...productItem, ...(productItem?.info || {}), ...infoForRender, lgc_details_mapped };
|
||||
};
|
||||
|
||||
const formValuesMapper2Server = (values) => {
|
||||
const destinationObject = {
|
||||
'city': [
|
||||
{ key: 'city_id', transform: (value) => value?.value || value?.key || '' },
|
||||
{ key: 'city_name', transform: (value) => value?.label || '' },
|
||||
],
|
||||
'city_list': [
|
||||
{ key: 'city_list', transform: (value) => {
|
||||
return value.map(option => {
|
||||
return {
|
||||
id: option?.value || option?.key || '',
|
||||
name: option?.label || ''
|
||||
}
|
||||
})
|
||||
}},
|
||||
],
|
||||
'dept': { key: 'dept_id', transform: (value) => (typeof value === 'string' ? value : value?.value || value?.key || '') },
|
||||
'open_weekdays': { key: 'open_weekdays', transform: (value) => (Array.isArray(value) ? value.join(',') : value) },
|
||||
// 'recommends_rate': { key: 'recommends_rate', transform: (value) => ((typeof value === 'string' || typeof value === 'number') ? value : value?.value || value?.key || '') },
|
||||
// 'lgc_details': [
|
||||
// {
|
||||
// key: 'lgc_details',
|
||||
// transform: (value) => {
|
||||
// const _val = value.filter((s) => s !== undefined).map((e) => ({ title: '', ...e, description: e.description || '' }));
|
||||
// return _val || '';
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// key: 'lgc_details_mapped_tmp',
|
||||
// transform: (value) => {
|
||||
// const _val = value.filter((s) => s !== undefined);
|
||||
// return _val.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
'lgc_details_mapped': [
|
||||
{
|
||||
key: 'lgc_details',
|
||||
transform: (value) => {
|
||||
const valueArr = Object.values(value)
|
||||
.filter((_v) => !isEmpty(_v.lgc))
|
||||
.map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
|
||||
return valueArr;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'lgc_details_mapped',
|
||||
transform: (value) => {
|
||||
const valueArr = Object.values(value)
|
||||
.filter((_v) => !isEmpty(_v.lgc))
|
||||
.map((e) => ({ title: '', ...e, descriptions: e.descriptions || '' }));
|
||||
return valueArr.reduce((r, c) => ({ ...r, [c.lgc]: c }), {});
|
||||
},
|
||||
},
|
||||
],
|
||||
'product_title': { key: 'title' },
|
||||
'sub_type_D': { key: 'item_type'},
|
||||
'sort_order': { key: 'sort_order'},
|
||||
};
|
||||
let dest = {};
|
||||
const { city, dept, product_title, sub_type_D, ...omittedValue } = values;
|
||||
dest = { ...omittedValue, ...objectMapper(values, destinationObject) };
|
||||
for (const key in dest) {
|
||||
if (Object.prototype.hasOwnProperty.call(dest, key)) {
|
||||
dest[key] = typeof dest[key] === 'string' ? (dest[key] || '').trim() : (dest[key] ?? '');
|
||||
}
|
||||
}
|
||||
// omit empty
|
||||
// Object.keys(dest).forEach((key) => (dest[key] == null || dest[key] === '' || dest[key].length === 0) && delete dest[key]);
|
||||
const { lgc_details, lgc_details_mapped, quotation, ...info } = dest;
|
||||
return { info, lgc_details, lgc_details_mapped, quotation };
|
||||
};
|
||||
|
||||
export default InfoForm;
|
||||
@ -1,185 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Input, Tabs, Modal, Select, Form } from 'antd';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useHTLanguageSets, useHTLanguageSetsMapVal } from '@/hooks/useHTLanguageSets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
|
||||
import { cloneDeep, isEmpty, isNotEmpty } from '@/utils/commons';
|
||||
|
||||
const ProductInfoLgc = ({ editable, formInstance, pickEditedInfo, ...props }) => {
|
||||
const { t } = useTranslation('products');
|
||||
const { language: languageHT } = useDefaultLgc();
|
||||
const HTLanguageSetsMapVal = useHTLanguageSetsMapVal();
|
||||
const allLgcOptions = useHTLanguageSets();
|
||||
const [editingProduct] = useProductsStore((state) => [state.editingProduct]);
|
||||
const [activeKey, setActiveKey] = useState();
|
||||
const [items, setItems] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
formInstance.setFieldValue(['lgc_details_mapped', '2', 'title'], pickEditedInfo.product_title);
|
||||
|
||||
return () => {};
|
||||
}, [pickEditedInfo.product_title]);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const existsLgc = (editingProduct?.lgc_details || []).map((ele, li) => ({
|
||||
...ele,
|
||||
label: HTLanguageSetsMapVal[ele.lgc]?.label || ele.lgc,
|
||||
// key: `${editingProduct.info.id}-${ele.id}`,
|
||||
key: ele.lgc,
|
||||
closable: false, // isPermitted(PERM_PRODUCTS_MANAGEMENT) ? true : false,
|
||||
forceRender: true,
|
||||
children: (
|
||||
<Form.Item noStyle key={`${editingProduct.info.id}-${ele.id}`}>
|
||||
<Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'title']} label={t('products:Title')} initialValue={ele.title} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}>
|
||||
<Input
|
||||
className={' !text-slate-600'}
|
||||
allowClear
|
||||
placeholder={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}
|
||||
// onChange={(e) => handleChange('title', e.target.value)}
|
||||
// disabled={ignoreEditable ? false : (!isEmpty(ele.title) || !editable)}
|
||||
// disabled={ignoreEditable ? false : !editable}
|
||||
disabled={!editable}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name={['lgc_details_mapped', `${ele.lgc}`, 'descriptions']} label={t('products:Description')} initialValue={ele.descriptions} tooltip={t('FormTooltip.Description')}>
|
||||
<Input.TextArea
|
||||
className={'!text-slate-600'}
|
||||
rows={3} maxLength={2000} showCount
|
||||
allowClear
|
||||
// onChange={(e) => handleChange('description', e.target.value)}
|
||||
// disabled={ignoreEditable ? false : (!isEmpty(ele.descriptions) || !editable)}
|
||||
// disabled={ignoreEditable ? false : !editable}
|
||||
disabled={!editable}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${ele.lgc}`, 'lgc']} initialValue={ele.lgc}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${ele.lgc}`, 'id']} initialValue={ele.id}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
),
|
||||
}));
|
||||
setItems(existsLgc);
|
||||
const pageDefaultLgcI = (editingProduct?.lgc_details || []).findIndex((ele) => ele.lgc === languageHT);
|
||||
setActiveKey(existsLgc?.[pageDefaultLgcI || 0]?.key);
|
||||
// formInstance.validateFields();
|
||||
const filterLgcOptions = allLgcOptions.filter((ele) => !existsLgc.some((item) => `${item.lgc}` === ele.value));
|
||||
setLgcOptions(filterLgcOptions);
|
||||
|
||||
return () => {};
|
||||
}, [editingProduct]);
|
||||
|
||||
const onLgcTabChange = (newActiveKey) => {
|
||||
setActiveKey(newActiveKey);
|
||||
};
|
||||
|
||||
const addLgc = (lgcItem) => {
|
||||
// const currentLgcOptions = structuredClone(lgcOptions);
|
||||
const currentLgcOptions = cloneDeep(lgcOptions);
|
||||
currentLgcOptions.splice(
|
||||
currentLgcOptions.findIndex((ele) => ele.value === lgcItem.value),
|
||||
1
|
||||
);
|
||||
setLgcOptions(currentLgcOptions);
|
||||
|
||||
const newActiveKey = lgcItem.value;
|
||||
const newPanes = [...items];
|
||||
newPanes.push({
|
||||
...lgcItem,
|
||||
forceRender: true,
|
||||
key: lgcItem.value,
|
||||
children: (
|
||||
<Form.Item noStyle>
|
||||
<Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'title']} preserve={false} label={t('products:Title')} rules={[{ required: true }]} tooltip={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)}>
|
||||
<Input allowClear placeholder={t(`FormTooltip.NewTitle.${editingProduct?.info?.product_type_id}`)} />
|
||||
</Form.Item>
|
||||
<Form.Item name={['lgc_details_mapped', `${lgcItem.value}`, 'descriptions']} preserve={false} label={t('products:Description')} tooltip={t('FormTooltip.Description')}>
|
||||
<Input.TextArea rows={3} maxLength={2000} showCount allowClear />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${lgcItem.value}`, 'lgc']} preserve={false} initialValue={lgcItem.value}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item hidden name={['lgc_details_mapped', `${lgcItem.value}`, 'id']} preserve={false} initialValue={''}>
|
||||
<Input />
|
||||
</Form.Item>
|
||||
</Form.Item>
|
||||
),
|
||||
});
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
setSelectNewLgc(null);
|
||||
};
|
||||
const remove = (targetKey) => {
|
||||
let newActiveKey = activeKey;
|
||||
let lastIndex = -1;
|
||||
items.forEach((item, i) => {
|
||||
if (item.key === targetKey) {
|
||||
lastIndex = i - 1;
|
||||
}
|
||||
});
|
||||
const newPanes = items.filter((item) => item.key !== targetKey);
|
||||
if (newPanes.length && newActiveKey === targetKey) {
|
||||
if (lastIndex >= 0) {
|
||||
newActiveKey = newPanes[lastIndex].key;
|
||||
} else {
|
||||
newActiveKey = newPanes[0].key;
|
||||
}
|
||||
}
|
||||
setItems(newPanes);
|
||||
setActiveKey(newActiveKey);
|
||||
setLgcOptions([...lgcOptions, ...items.filter((item) => item.key === targetKey)]);
|
||||
};
|
||||
const onEdit = (targetKey, action) => {
|
||||
if (action === 'add') {
|
||||
setNewLgcModalVisible(true);
|
||||
} else {
|
||||
remove(targetKey);
|
||||
formInstance.validateFields(['lgc_details_mapped']);
|
||||
}
|
||||
};
|
||||
|
||||
const [newLgcModalVisible, setNewLgcModalVisible] = useState(false);
|
||||
const [selectNewLgc, setSelectNewLgc] = useState();
|
||||
const [lgcOptions, setLgcOptions] = useState(allLgcOptions);
|
||||
const handleOk = () => {
|
||||
addLgc(selectNewLgc);
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const handleCancel = () => {
|
||||
setNewLgcModalVisible(false);
|
||||
};
|
||||
const onSelectNewLgc = (lgcItem) => {
|
||||
setSelectNewLgc(lgcItem);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
type='editable-card'
|
||||
size='small'
|
||||
onChange={onLgcTabChange}
|
||||
activeKey={activeKey}
|
||||
onEdit={onEdit}
|
||||
items={items}
|
||||
hideAdd={isEmpty(lgcOptions) || !editable}
|
||||
tabPosition='top'
|
||||
/>
|
||||
<Modal title={t('LgcModal.title')} open={newLgcModalVisible} onOk={handleOk} onCancel={() => setNewLgcModalVisible(false)} destroyOnClose>
|
||||
<Select
|
||||
showSearch
|
||||
labelInValue
|
||||
style={{ width: '80%' }}
|
||||
placeholder={t('LgcModal.placeholder')}
|
||||
optionFilterProp='children'
|
||||
options={lgcOptions}
|
||||
onChange={onSelectNewLgc}
|
||||
value={selectNewLgc}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfoLgc;
|
||||
@ -1,687 +0,0 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Table,
|
||||
Form,
|
||||
Modal,
|
||||
Button,
|
||||
Radio,
|
||||
Input,
|
||||
Flex,
|
||||
Card,
|
||||
InputNumber,
|
||||
Checkbox,
|
||||
DatePicker,
|
||||
Space,
|
||||
App,
|
||||
Popconfirm,
|
||||
Tooltip,
|
||||
} from "antd";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
CloseOutlined,
|
||||
StarTwoTone,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { useDatePresets } from "@/hooks/useDatePresets";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import useProductsStore from "@/stores/Products/Index";
|
||||
import PriceCompactInput from "@/views/products/Detail/PriceCompactInput";
|
||||
import { formatGroupSize } from "@/hooks/useProductsSets";
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
|
||||
const defaultPriceValue = {
|
||||
priceInput: {
|
||||
numberStart: 1,
|
||||
numberEnd: 2,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
};
|
||||
|
||||
const getYearRange = (year) => [
|
||||
dayjs().year(year).startOf("y"),
|
||||
dayjs().year(year).endOf("y"),
|
||||
];
|
||||
|
||||
const generateDefinitionValue = (year) => ({
|
||||
useDateList: [{ useDate: getYearRange(year) }],
|
||||
unitId: "0",
|
||||
currency: "RMB",
|
||||
weekend: [],
|
||||
priceList: [defaultPriceValue],
|
||||
});
|
||||
|
||||
const ProductInfoQuotation = ({ editable, ...props }) => {
|
||||
const { onChange } = props;
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [
|
||||
quotationList,
|
||||
newEmptyQuotation,
|
||||
appendQuotationList,
|
||||
saveOrUpdateQuotation,
|
||||
deleteQuotation,
|
||||
switchParams,
|
||||
] = useProductsStore((state) => [
|
||||
state.quotationList,
|
||||
state.newEmptyQuotation,
|
||||
state.appendQuotationList,
|
||||
state.saveOrUpdateQuotation,
|
||||
state.deleteQuotation,
|
||||
state.switchParams,
|
||||
]);
|
||||
|
||||
const batchSetupInitialValues = {
|
||||
defList: [
|
||||
// 全年
|
||||
{
|
||||
useDateList: [{ useDate: getYearRange(switchParams.use_year) }],
|
||||
unitId: "0",
|
||||
currency: "RMB",
|
||||
weekend: [],
|
||||
priceList: [
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 1,
|
||||
numberEnd: 2,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 3,
|
||||
numberEnd: 4,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 5,
|
||||
numberEnd: 6,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 7,
|
||||
numberEnd: 9,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// 特殊时间段
|
||||
{
|
||||
useDateList: [
|
||||
{
|
||||
useDate: [
|
||||
dayjs().year(switchParams.use_year).subtract(2, "M").startOf("M"),
|
||||
dayjs().year(switchParams.use_year).endOf("M"),
|
||||
],
|
||||
},
|
||||
],
|
||||
unitId: "0",
|
||||
currency: "RMB",
|
||||
weekend: [],
|
||||
priceList: [
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 1,
|
||||
numberEnd: 2,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 3,
|
||||
numberEnd: 4,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 5,
|
||||
numberEnd: 6,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
priceInput: {
|
||||
numberStart: 7,
|
||||
numberEnd: 9,
|
||||
audultPrice: 0,
|
||||
childrenPrice: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [defaultUseDates, setDefaultUseDates] = useState(
|
||||
getYearRange(switchParams.use_year)
|
||||
);
|
||||
const [defaultDefinitionValue, setDefaultDefinitionValue] = useState(
|
||||
generateDefinitionValue(switchParams.use_year)
|
||||
);
|
||||
const [isQuotationModalOpen, setQuotationModalOpen] = useState(false);
|
||||
const [isBatchSetupModalOpen, setBatchSetupModalOpen] = useState(false);
|
||||
const [groupAllSize, setGroupAllSize] = useState(false);
|
||||
const [groupMaxUnlimit, setGroupMaxUnlimit] = useState(false);
|
||||
const { notification } = App.useApp();
|
||||
const [quotationForm] = Form.useForm();
|
||||
const [batchSetupForm] = Form.useForm();
|
||||
|
||||
const datePresets = useDatePresets();
|
||||
|
||||
useEffect(() => {
|
||||
setDefaultUseDates(getYearRange(switchParams.use_year));
|
||||
setDefaultDefinitionValue(generateDefinitionValue(switchParams.use_year));
|
||||
}, [switchParams]);
|
||||
|
||||
const triggerChange = (changedValue) => {
|
||||
onChange?.(changedValue);
|
||||
};
|
||||
|
||||
const onQuotationSeleted = async (quotation) => {
|
||||
// 把 start, end 转换为 RangePicker 数组格式
|
||||
quotation.use_dates = [
|
||||
dayjs(quotation.use_dates_start),
|
||||
dayjs(quotation.use_dates_end),
|
||||
];
|
||||
quotation.weekdayList = quotation.weekdays.split(",");
|
||||
quotationForm.setFieldsValue(quotation);
|
||||
setQuotationModalOpen(true);
|
||||
};
|
||||
|
||||
const onNewQuotation = () => {
|
||||
setGroupAllSize(false); // 新报价不分人等
|
||||
const emptyQuotation = newEmptyQuotation(defaultUseDates);
|
||||
quotationForm.setFieldsValue(emptyQuotation);
|
||||
setQuotationModalOpen(true);
|
||||
};
|
||||
|
||||
const onQuotationFinish = (values) => {
|
||||
const newList = saveOrUpdateQuotation(values);
|
||||
triggerChange(newList);
|
||||
setQuotationModalOpen(false);
|
||||
};
|
||||
|
||||
const onBatchSetupFinish = () => {
|
||||
const defList = batchSetupForm.getFieldsValue().defList;
|
||||
const newList = appendQuotationList(defList);
|
||||
triggerChange(newList);
|
||||
setBatchSetupModalOpen(false);
|
||||
};
|
||||
|
||||
const quotationColumns = [
|
||||
// { title: 'id', dataIndex: 'id', width: 40, className: 'italic text-gray-400' }, // test: 0
|
||||
// { title: 'WPI_SN', dataIndex: 'WPI_SN', width: 40, className: 'italic text-gray-400' }, // test: 0
|
||||
{ title: t("products:adultPrice"), dataIndex: "adult_cost", width: "5rem" },
|
||||
{
|
||||
title: t("products:childrenPrice"),
|
||||
dataIndex: "child_cost",
|
||||
width: "5rem",
|
||||
},
|
||||
{ title: t("products:currency"), dataIndex: "currency", width: "4rem" },
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
{t("products:unit_name")}{" "}
|
||||
<Tooltip placement="top" title={t("products:FormTooltip.PriceUnit")}>
|
||||
<QuestionCircleOutlined className="text-gray-500" />
|
||||
</Tooltip>
|
||||
</>
|
||||
),
|
||||
dataIndex: "unit_id",
|
||||
width: "6rem",
|
||||
render: (text) => t(`products:PriceUnit.${text}`), // (text === '0' ? '每人' : text === '1' ? '每团' : text),
|
||||
},
|
||||
{
|
||||
title: t("products:group_size"),
|
||||
dataIndex: "group_size",
|
||||
width: "6rem",
|
||||
render: (_, record) =>
|
||||
formatGroupSize(record.group_size_min, record.group_size_max),
|
||||
},
|
||||
|
||||
{
|
||||
title: (
|
||||
<>
|
||||
{t("products:use_dates")}{" "}
|
||||
<Tooltip
|
||||
placement="top"
|
||||
styles={{ body: { width: "24rem" } }}
|
||||
title={t("products:FormTooltip.UseDates")}
|
||||
>
|
||||
<QuestionCircleOutlined className="text-gray-500" />
|
||||
</Tooltip>
|
||||
</>
|
||||
),
|
||||
dataIndex: "use_dates",
|
||||
render: (_, record) =>
|
||||
`${record.use_dates_start}-${record.use_dates_end}`,
|
||||
},
|
||||
|
||||
{ title: t("products:Weekdays"), dataIndex: "weekdays", width: "4rem" },
|
||||
{
|
||||
title: t("products:operation"),
|
||||
dataIndex: "operation",
|
||||
width: "10rem",
|
||||
render: (_, quotation) => {
|
||||
return (
|
||||
<Space>
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => onQuotationSeleted(quotation)}
|
||||
>
|
||||
{t("Edit")}
|
||||
</Button>
|
||||
<Popconfirm
|
||||
placement="topRight"
|
||||
icon={<QuestionCircleOutlined style={{ color: "red" }} />}
|
||||
title="请确认"
|
||||
description="你要删除这条价格吗？"
|
||||
onConfirm={() => {
|
||||
deleteQuotation(quotation)
|
||||
.then((res) => {
|
||||
triggerChange(res);
|
||||
})
|
||||
.catch((ex) => {
|
||||
notification.error({
|
||||
message: "Notification",
|
||||
description: ex.message,
|
||||
placement: "top",
|
||||
duration: 4,
|
||||
});
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
type="link"
|
||||
danger
|
||||
>
|
||||
{t("Delete")}
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<h2>{t("products:EditComponents.Quotation")}</h2>
|
||||
<Table
|
||||
size="small"
|
||||
bordered
|
||||
dataSource={quotationList}
|
||||
columns={quotationColumns}
|
||||
pagination={false}
|
||||
/>
|
||||
{editable && (
|
||||
<Space>
|
||||
<Button
|
||||
onClick={() => onNewQuotation()}
|
||||
type="primary"
|
||||
ghost
|
||||
style={{ marginTop: 16 }}
|
||||
>
|
||||
{t("products:addQuotation")}
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setBatchSetupModalOpen(true)}
|
||||
type="primary"
|
||||
ghost
|
||||
style={{ marginTop: 16, marginLeft: 16 }}
|
||||
>
|
||||
批量设置
|
||||
</Button>
|
||||
</Space>
|
||||
)}
|
||||
<Modal
|
||||
centered
|
||||
title="批量设置价格"
|
||||
width={"640px"}
|
||||
open={isBatchSetupModalOpen}
|
||||
onOk={() => onBatchSetupFinish()}
|
||||
onCancel={() => setBatchSetupModalOpen(false)}
|
||||
destroyOnHidden
|
||||
forceRender
|
||||
>
|
||||
<Form
|
||||
labelCol={{ span: 3 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
form={batchSetupForm}
|
||||
name="batchSetupForm"
|
||||
autoComplete="off"
|
||||
initialValues={batchSetupInitialValues}
|
||||
>
|
||||
<Form.List name="defList">
|
||||
{(fields, { add, remove }) => (
|
||||
<Flex gap="middle" vertical>
|
||||
{fields.map((field, index) => (
|
||||
<Card
|
||||
size="small"
|
||||
title={
|
||||
index == 0 ? "全年" : index == 1 ? "特殊时间段" : "其他"
|
||||
}
|
||||
key={field.key}
|
||||
extra={
|
||||
index == 0 ? (
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
) : (
|
||||
<CloseOutlined
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
>
|
||||
<Form.Item label="币种" name={[field.name, "currency"]}>
|
||||
<Radio.Group>
|
||||
<Radio value="RMB">RMB</Radio>
|
||||
<Radio value="USD">USD</Radio>
|
||||
<Radio value="THB">THB</Radio>
|
||||
<Radio value="JPY">JPY</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="类型" name={[field.name, "unitId"]}>
|
||||
<Radio.Group>
|
||||
<Radio value="0">每人</Radio>
|
||||
<Radio value="1">每团</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item label="周末" name={[field.name, "weekend"]}>
|
||||
<Checkbox.Group options={["5", "6", "7"]} />
|
||||
</Form.Item>
|
||||
<Form.Item label="有效期">
|
||||
<Form.List name={[field.name, "useDateList"]}>
|
||||
{(useDateFieldList, useDateOptList) => (
|
||||
<Flex gap="middle" vertical>
|
||||
{useDateFieldList.map((useDateField, index) => (
|
||||
<Space key={useDateField.key}>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[useDateField.name, "useDate"]}
|
||||
>
|
||||
<RangePicker
|
||||
style={{ width: "100%" }}
|
||||
allowClear={true}
|
||||
inputReadOnly={true}
|
||||
presets={datePresets}
|
||||
placeholder={["From", "Thru"]}
|
||||
/>
|
||||
</Form.Item>
|
||||
{index == 0 ? (
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
) : (
|
||||
<CloseOutlined
|
||||
onClick={() =>
|
||||
useDateOptList.remove(useDateField.name)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
useDateOptList.add({ useDate: defaultUseDates })
|
||||
}
|
||||
block
|
||||
>
|
||||
新增有效期
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
<Form.Item label="人等">
|
||||
<Form.List name={[field.name, "priceList"]}>
|
||||
{(priceFieldList, priceOptList) => (
|
||||
<Flex gap="middle" vertical>
|
||||
{priceFieldList.map((priceField, index) => (
|
||||
<Space key={priceField.key}>
|
||||
<Form.Item
|
||||
noStyle
|
||||
name={[priceField.name, "priceInput"]}
|
||||
>
|
||||
<PriceCompactInput />
|
||||
</Form.Item>
|
||||
{index == 0 ? (
|
||||
<StarTwoTone twoToneColor="#eb2f96" />
|
||||
) : (
|
||||
<CloseOutlined
|
||||
onClick={() =>
|
||||
priceOptList.remove(priceField.name)
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</Space>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() =>
|
||||
priceOptList.add(defaultPriceValue)
|
||||
}
|
||||
block
|
||||
>
|
||||
新增人等
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form.Item>
|
||||
</Card>
|
||||
))}
|
||||
<Button
|
||||
type="dashed"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => add(defaultDefinitionValue)}
|
||||
block
|
||||
>
|
||||
新增设置
|
||||
</Button>
|
||||
</Flex>
|
||||
)}
|
||||
</Form.List>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
<Modal
|
||||
centered
|
||||
okButtonProps={{
|
||||
autoFocus: true,
|
||||
htmlType: "submit",
|
||||
}}
|
||||
title={t("products:EditComponents.Quotation")}
|
||||
open={isQuotationModalOpen}
|
||||
onCancel={() => setQuotationModalOpen(false)}
|
||||
destroyOnHidden
|
||||
forceRender
|
||||
modalRender={(dom) => (
|
||||
<Form
|
||||
name="quotationForm"
|
||||
form={quotationForm}
|
||||
labelCol={{ span: 4 }}
|
||||
wrapperCol={{ span: 20 }}
|
||||
className="max-w-2xl"
|
||||
onFinish={onQuotationFinish}
|
||||
autoComplete="off"
|
||||
>
|
||||
{dom}
|
||||
</Form>
|
||||
)}
|
||||
>
|
||||
<Form.Item name="id" className="hidden">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="key" className="hidden">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item name="fresh" className="hidden">
|
||||
<Input />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("products:adultPrice")}
|
||||
name="adult_cost"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.adultPrice"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("products:childrenPrice")}
|
||||
name="child_cost"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.childrenPrice"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("products:currency")}
|
||||
name="currency"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.currency"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="RMB">RMB</Radio>
|
||||
<Radio value="USD">USD</Radio>
|
||||
<Radio value="THB">THB</Radio>
|
||||
<Radio value="JPY">JPY</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("products:unit_name")}
|
||||
name="unit_id"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.unit_name"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<Radio.Group>
|
||||
<Radio value="0">每人</Radio>
|
||||
<Radio value="1">每团</Radio>
|
||||
</Radio.Group>
|
||||
</Form.Item>
|
||||
<Checkbox
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
quotationForm.setFieldValue("group_size_min", 1);
|
||||
quotationForm.setFieldValue("group_size_max", 1000);
|
||||
setGroupAllSize(true);
|
||||
} else {
|
||||
setGroupAllSize(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="font-bold">不分人等(1~1000)</span>
|
||||
</Checkbox>
|
||||
<Form.Item
|
||||
label={t("products:group_size")}
|
||||
name="group_size_min"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.group_size_min"),
|
||||
},
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value > 1000 || value < 1) {
|
||||
return Promise.reject("人等必须在 1~1000 之间");
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber disabled={groupAllSize} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
|
||||
<Checkbox
|
||||
disabled={groupAllSize}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
quotationForm.setFieldValue("group_size_max", 1000);
|
||||
setGroupMaxUnlimit(true);
|
||||
} else {
|
||||
setGroupMaxUnlimit(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span className="font-bold">不限(1000)</span>
|
||||
</Checkbox>
|
||||
<Form.Item
|
||||
label={t("products:group_size")}
|
||||
name="group_size_max"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.group_size_max"),
|
||||
},
|
||||
{
|
||||
validator: (_, value) => {
|
||||
if (value > 1000 || value < 1) {
|
||||
return Promise.reject("人等必须在 1~1000 之间");
|
||||
}
|
||||
return Promise.resolve();
|
||||
},
|
||||
},
|
||||
]}
|
||||
>
|
||||
<InputNumber
|
||||
disabled={groupAllSize || groupMaxUnlimit}
|
||||
style={{ width: "100%" }}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label={t("products:use_dates")}
|
||||
name="use_dates"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: t("products:Validation.use_dates"),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<RangePicker presets={datePresets} style={{ width: "100%" }} />
|
||||
</Form.Item>
|
||||
<Form.Item label={t("products:Weekdays")} name="weekdayList">
|
||||
<Checkbox.Group options={["5", "6", "7"]} />
|
||||
</Form.Item>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProductInfoQuotation;
|
||||
@ -1,285 +0,0 @@
|
||||
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 getPPSnapshotAction = async (params) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_snapshot`, 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 || [] };
|
||||
},
|
||||
},
|
||||
'snapshot': {
|
||||
title: '📷' + t('versionSnapshot'),
|
||||
btnText: t('versionSnapshot'),
|
||||
fetchData: async (params) => {
|
||||
const { price_id, ..._params } = params;
|
||||
const data = await getPPSnapshotAction(_params);
|
||||
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' | 'snapshot'} 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;
|
||||
@ -1,299 +0,0 @@
|
||||
import { useState, useMemo } from 'react';
|
||||
import { Button, Table, Popover, Typography, List, Flex } 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 { chunkBy } from '@/hooks/useProductsQuotationFormat';
|
||||
|
||||
/**
|
||||
* 产品价格日志
|
||||
*/
|
||||
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 getPPSnapshotAction = async (params) => {
|
||||
const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/agency_product_price_snapshot`, params)
|
||||
return errcode !== 0 ? [] : result;
|
||||
}
|
||||
|
||||
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'),
|
||||
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 || []};
|
||||
},
|
||||
},
|
||||
'snapshot': {
|
||||
title: '📷' + t('versionSnapshot'),
|
||||
btnText: t('versionSnapshot'),
|
||||
subTitle: t('点击左侧价格版本查看具体价格'),
|
||||
fetchData: async (params) => {
|
||||
const { price_id, ..._params } = params;
|
||||
const data = await getPPSnapshotAction(_params);
|
||||
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' | 'snapshot'} 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 ProductQuotationSnapshotPopover = ({ method, triggerProps = {}, onOpenChange, ...props }) => {
|
||||
const { travel_agency_id, product_id, price_id, use_year } = props;
|
||||
|
||||
const { t } = useTranslation('products');
|
||||
const [open, setOpen] = useState(false);
|
||||
const [logData, setLogData] = useState([]);
|
||||
|
||||
const { title, subTitle, btnText: methodBtnText, fetchData } = useLogMethod(method);
|
||||
|
||||
const tablePagination = useMemo(() => method === 'history' ? { pageSize: 5, position: ['bottomLeft']} : { pageSize: 10, position: ['bottomLeft']}, [method]);
|
||||
|
||||
const [viewSnapshotItem, setViewSnapshotItem] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const getData = async () => {
|
||||
setLoading(true);
|
||||
const { data } = await fetchData({ travel_agency_id, product_id, price_id, use_year });
|
||||
setLogData(data);
|
||||
invokeOpenChange(true);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const invokeOpenChange = (_open) => {
|
||||
if (typeof onOpenChange === 'function') {
|
||||
onOpenChange(_open);
|
||||
}
|
||||
};
|
||||
|
||||
const onClickSnapshotItem = (item) => {
|
||||
console.log(item)
|
||||
setViewSnapshotItem(item);
|
||||
console.log('cc\n');
|
||||
const chunk = chunkBy(2025, [{...item, quotation: item.quotation.map(q => ({...q, WPI_SN: product_id })), info: { id: product_id }}], ['quote_season', 'quote_size']);
|
||||
console.log(chunk)
|
||||
};
|
||||
|
||||
const columns = [...columnsSets(t, false), { title: '时间', dataIndex: 'updatetime', key: 'updatetime' }];
|
||||
return (
|
||||
<Popover
|
||||
placement='bottom'
|
||||
className=''
|
||||
rootClassName='w-5/6'
|
||||
{...props}
|
||||
title={
|
||||
<div className='flex mt-0 gap-4 items-center '>
|
||||
<Typography.Text strong>{title}</Typography.Text>
|
||||
{subTitle && <Typography.Text type='secondary'>{subTitle}</Typography.Text>}
|
||||
<Button
|
||||
size='small' className='ml-auto'
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
invokeOpenChange(false);
|
||||
}}>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
content={
|
||||
<>
|
||||
<Flex direction='column' gap='small'>
|
||||
<List
|
||||
bordered
|
||||
dataSource={logData}
|
||||
loading={loading}
|
||||
renderItem={(item) => (
|
||||
<List.Item onClick={() => onClickSnapshotItem(item)} className={viewSnapshotItem.version === item.version ? 'active' : ''}>
|
||||
{item.version}
|
||||
</List.Item>
|
||||
)}
|
||||
pagination={{ pageSize: 5, size: 'small', showLessItems: true, simple: { readOnly: true } }}
|
||||
className=' cursor-pointer basis-48 flex flex-col [&>*:first-child]:flex-1 [&_.ant-list-pagination]:m-1 [&_.ant-list-item]:py-1 [&_.ant-list-item.active]:bg-blue-100'
|
||||
/>
|
||||
<div className='flex-auto'>
|
||||
<Table columns={columns} dataSource={viewSnapshotItem.quotation} rowKey={'id'} size='small' loading={loading} pagination={tablePagination} />
|
||||
</div>
|
||||
</Flex>
|
||||
</>
|
||||
}
|
||||
trigger={['click']}
|
||||
open={open}
|
||||
onOpenChange={(v) => {
|
||||
setOpen(v);
|
||||
invokeOpenChange(v);
|
||||
if (v === false) {
|
||||
setLogData([]);
|
||||
setViewSnapshotItem([]);
|
||||
}
|
||||
}}>
|
||||
<Button {...triggerProps} onClick={getData} title={title}>
|
||||
{props.btnText || methodBtnText}
|
||||
</Button>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
export default ProductQuotationSnapshotPopover;
|
||||
@ -1,212 +0,0 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import { Tree, Input, Divider } from 'antd';
|
||||
import { CaretDownOutlined } from '@ant-design/icons';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useProductsStore from '@/stores/Products/Index';
|
||||
import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
|
||||
import { groupBy, isEmpty, sortBy } from '@/utils/commons';
|
||||
import NewProductModal from './NewProductModal';
|
||||
import ContractRemarksModal from './ContractRemarksModal'
|
||||
|
||||
const flattenTreeFun = (tree) => {
|
||||
let flatList = [];
|
||||
const flatten = (nodes) => {
|
||||
nodes.forEach((node) => {
|
||||
flatList.push({ title: node.title, key: node.key });
|
||||
if (node.children) {
|
||||
flatten(node.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
flatten(tree);
|
||||
return flatList;
|
||||
};
|
||||
|
||||
const getParentKey = (key, tree) => {
|
||||
let parentKey;
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i];
|
||||
if (node.children) {
|
||||
if (node.children.some((item) => item.key === key)) {
|
||||
parentKey = node.key;
|
||||
} else {
|
||||
const pKey = getParentKey(key, node.children);
|
||||
if (pKey) {
|
||||
parentKey = pKey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return parentKey;
|
||||
};
|
||||
|
||||
const ProductsTree = ({ onNodeSelect, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const location = useLocation();
|
||||
const isEditPage = location.pathname.includes('edit');
|
||||
const [agencyProducts, editingProduct, setEditingProduct] = useProductsStore((state) => [state.agencyProducts, state.editingProduct, state.setEditingProduct]);
|
||||
const [activeAgency] = useProductsStore((state) => [state.activeAgency]);
|
||||
const productsTypes = useProductsTypes();
|
||||
|
||||
const [treeData, setTreeData] = useState([]); // render data
|
||||
const [rawTreeData, setRawTreeData] = useState([]);
|
||||
const [flattenTreeData, setFlattenTreeData] = useState([]);
|
||||
const [expandedKeys, setExpandedKeys] = useState([]);
|
||||
const [selectedKeys, setSelectedKeys] = useState([]);
|
||||
const [autoExpandParent, setAutoExpandParent] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
setExpandedKeys(productsTypes.map((item) => item.key)); // 全部展开
|
||||
return () => {}
|
||||
}, [productsTypes, activeAgency]);
|
||||
|
||||
useEffect(() => {
|
||||
// 只显示有产品的类型;
|
||||
// const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
|
||||
const hasDataTypes = Object.keys(agencyProducts);
|
||||
// const cityData = groupBy(productsSortByHT, (row) => `${row.info.city_id}-${row.info.city_name}`);
|
||||
const copyAgencyProducts = structuredClone(agencyProducts);
|
||||
Object.keys(copyAgencyProducts).map((key) => {
|
||||
const _cityProductsData = groupBy(copyAgencyProducts[key], (row) => `${row.info.city_name || '(空)'}`);
|
||||
copyAgencyProducts[key] = _cityProductsData;
|
||||
});
|
||||
// console.log(copyAgencyProducts);
|
||||
const _show = productsTypes
|
||||
.filter((kk) => hasDataTypes.includes(kk.value))
|
||||
.map((ele) => ({
|
||||
...ele,
|
||||
title: ele.label,
|
||||
key: ele.value,
|
||||
children: (agencyProducts[ele.value] || []).reduce((arr, product) => {
|
||||
const lgc_map = product.lgc_details.reduce((rlgc, clgc) => ({ ...rlgc, [clgc.lgc]: clgc }), {});
|
||||
// const combindCityList = product.info.city_list.indexOf(city => city.id === product.info.city_id) !== -1 ? product.info.city_list : [...product.info.city_list, { id: product.info.city_id, name: product.info.city_name }];
|
||||
// const cityListName = product.info.city_list.reduce((acc, city) => {
|
||||
// return acc.concat([city.name]);
|
||||
// }, []).join(',');
|
||||
const hasCityList = !isEmpty(product.info.city_list) && product.info.city_list.some(cc => cc.id !== product.info.city_id) ? `【含多城市】` : ``;
|
||||
const combindCityList = [{ id: product.info.city_id, name: product.info.city_name }];
|
||||
const flatCityP = combindCityList.map(city => ({
|
||||
title: `【${city.name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || product.info.product_title || '') + `${hasCityList}`,
|
||||
// key: `${ele.value}-${product.info.id}`,
|
||||
key: `${product.info.id}-${city.id}`,
|
||||
_raw: product,
|
||||
isLeaf: true,
|
||||
}));
|
||||
return arr.concat(flatCityP);
|
||||
}, []),
|
||||
// 增加`城市`层级
|
||||
// _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
|
||||
// return {
|
||||
// title: city,
|
||||
// key: `${ele.value}-${city}`,
|
||||
// children: copyAgencyProducts[ele.value][city],
|
||||
// };
|
||||
// }),
|
||||
}));
|
||||
setTreeData(_show);
|
||||
setRawTreeData(_show);
|
||||
setFlattenTreeData(flattenTreeFun(_show));
|
||||
|
||||
// setExpandedKeys(productsTypes.map((item) => item.key)); // 全部展开
|
||||
|
||||
// setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);
|
||||
return () => {};
|
||||
}, [productsTypes, agencyProducts]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isEmpty(editingProduct)) {
|
||||
return () => {};
|
||||
}
|
||||
const allKeysWithCity = [...(editingProduct.info?.city_list || []), { id: editingProduct.info.city_id, name: editingProduct.info.city_name }].map(
|
||||
(city) => `${editingProduct.info.id}-${city.id}`
|
||||
);
|
||||
setSelectedKeys(allKeysWithCity);
|
||||
|
||||
return () => {};
|
||||
}, [editingProduct?.info?.id]);
|
||||
|
||||
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const onSearch = ({ target: { value } }) => {
|
||||
// const { value } = e.target;
|
||||
if (isEmpty(value)) {
|
||||
setTreeData(rawTreeData);
|
||||
setSearchValue(value);
|
||||
return;
|
||||
}
|
||||
const newExpandedKeys = flattenTreeData
|
||||
.filter((item) => item.title.includes(value))
|
||||
.map((item) => getParentKey(item.key, rawTreeData))
|
||||
.filter((item, i, self) => item && self.indexOf(item) === i);
|
||||
setExpandedKeys(newExpandedKeys);
|
||||
setSearchValue(value);
|
||||
setAutoExpandParent(true);
|
||||
const matchTree = rawTreeData.map(node1 => {
|
||||
const _find = node1.children.filter(node2 => node2.title.includes(value));
|
||||
return _find.length > 0 ? {...node1, children: _find} : null;
|
||||
}).filter(node => node);
|
||||
setTreeData(matchTree);
|
||||
};
|
||||
const handleNodeSelect = (selectedKeys, { node }) => {
|
||||
if (node._raw) {
|
||||
setEditingProduct(node._raw);
|
||||
const allKeysWithCity = [...node._raw.info.city_list, { id: node._raw.info.city_id, name: node._raw.info.city_name }].map((city) => `${node._raw.info.id}-${city.id}`);
|
||||
setSelectedKeys(allKeysWithCity);
|
||||
} else {
|
||||
// 单击: 折叠/展开
|
||||
// const isExpand = expandedKeys.includes(selectedKeys[0]);
|
||||
// const _keys = isExpand ? expandedKeys.filter(k => k !== node.key) : [].concat(expandedKeys, selectedKeys);
|
||||
// setExpandedKeys(_keys);
|
||||
}
|
||||
if (typeof onNodeSelect === 'function') {
|
||||
onNodeSelect(selectedKeys, { node });
|
||||
}
|
||||
};
|
||||
const onExpand = (keys) => {
|
||||
setExpandedKeys(keys);
|
||||
setAutoExpandParent(false);
|
||||
};
|
||||
|
||||
const titleRender = (node) => {
|
||||
const index = node.title.indexOf(searchValue);
|
||||
const beforeStr = node.title.substr(0, index);
|
||||
const afterStr = node.title.substr(index + searchValue.length);
|
||||
const highlighted = <span style={{ color: 'red' }}>{searchValue}</span>;
|
||||
|
||||
return index > -1 ? (
|
||||
<span>
|
||||
{beforeStr}
|
||||
{highlighted}
|
||||
{afterStr}
|
||||
</span>
|
||||
) : (
|
||||
<span>{node.title}</span>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`${props.className} relative`} style={props.style}>
|
||||
<Input.Search placeholder='Search' onChange={onSearch} allowClear className='sticky top-1 z-20 mb-3' />
|
||||
{/* 编辑 */}
|
||||
{isEditPage && (
|
||||
<NewProductModal />
|
||||
)}
|
||||
<Divider type='vertical' />
|
||||
<ContractRemarksModal />
|
||||
<Tree
|
||||
blockNode
|
||||
showLine defaultExpandAll expandAction={'doubleClick'}
|
||||
selectedKeys={selectedKeys} multiple
|
||||
switcherIcon={<CaretDownOutlined />}
|
||||
onSelect={handleNodeSelect}
|
||||
treeData={treeData}
|
||||
expandedKeys={expandedKeys}
|
||||
autoExpandParent={autoExpandParent}
|
||||
onExpand={onExpand}
|
||||
titleRender={titleRender}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default ProductsTree;
|
||||
@ -1,40 +0,0 @@
|
||||
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('2022-01-01')}
|
||||
maxDate={dayjs().add(2, "year")}
|
||||
allowClear={false}
|
||||
picker="year"
|
||||
open={true}
|
||||
onOk={(date) => {
|
||||
const useYear = date.year();
|
||||
navigate(`/products/${travelAgencyId}/${useYear}/all/edit`);
|
||||
}}
|
||||
/>
|
||||
</Flex>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
}
|
||||
export default PickYear;
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,65 +0,0 @@
|
||||
import { Button } from 'antd';
|
||||
import { useProductsAuditStatesMapVal, useProductsTypesMapVal } from '@/hooks/useProductsSets';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import useProductsStore, { getAgencyAllExtrasAction } from '@/stores/Products/Index';
|
||||
import RequireAuth from '@/components/RequireAuth';
|
||||
import { PERM_PRODUCTS_OFFER_AUDIT } from '@/config';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import AgencyContract from '../Print/AgencyContract';
|
||||
import { saveAs } from 'file-saver';
|
||||
import { Packer } from 'docx';
|
||||
import { isEmpty } from '@/utils/commons';
|
||||
|
||||
const ExportDocxBtn = ({ params = { travel_agency_id: '', use_year: '', audit_state: '' }, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const [agencyProducts] = useProductsStore((state) => [state.agencyProducts]);
|
||||
const [activeAgency] = useProductsStore((state) => [state.activeAgency]);
|
||||
const { travel_agency_id, use_year, audit_state } = params;
|
||||
|
||||
const auditStatesMap = useProductsAuditStatesMapVal();
|
||||
const productsTypesMapVal = useProductsTypesMapVal();
|
||||
|
||||
const { getRemarkList } = useProductsStore((selector) => ({
|
||||
getRemarkList: selector.getRemarkList,
|
||||
}));
|
||||
const handleDownload = async () => {
|
||||
// await refresh();
|
||||
const _agencyExtras = await getAgencyAllExtrasAction(params);
|
||||
const agencyExtras = Object.keys(_agencyExtras).reduce((acc, pid) => {
|
||||
const pitemExtras = _agencyExtras[pid];
|
||||
const _pitem = (pitemExtras || []).map(eitem => ({ ...eitem, info: { ...eitem.info, product_type_name_txt: productsTypesMapVal[eitem.info.product_type_id]?.label || eitem.info.product_type_name } } ));
|
||||
return { ...acc, [pid]: _pitem };
|
||||
}, {});
|
||||
const remarks = await getRemarkList();
|
||||
const remarksMappedByType = remarks.reduce((r, v) => ({ ...r, [v.product_type_id]: v }), {});
|
||||
const documentCreator = new AgencyContract();
|
||||
const doc = documentCreator.create([
|
||||
params,
|
||||
activeAgency,
|
||||
agencyProducts,
|
||||
agencyExtras,
|
||||
// remarks,
|
||||
remarksMappedByType,
|
||||
]);
|
||||
|
||||
const _d = dayjs().format('YYYYMMDD_HH.mm.ss.SSS'); // Date.now().toString(32)
|
||||
// console.log(params);
|
||||
const _state = isEmpty(audit_state) ? '' : auditStatesMap[audit_state].label;
|
||||
Packer.toBlob(doc).then((blob) => {
|
||||
saveAs(blob, `${activeAgency.travel_agency_name}${use_year}年地接合同-${_state}-${_d}.docx`);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{/* todo: export, 审核完成之后才能导出 */}
|
||||
<RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
|
||||
<Button size='small' onClick={handleDownload}>
|
||||
{t('Export')} .docx
|
||||
</Button>
|
||||
{/* <PrintContractPDF /> */}
|
||||
</RequireAuth>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ExportDocxBtn;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue