增加批量添加报价界面
黄文强@HWQ-PC
1 year ago
parent
e3727db78f
commit
11b5a80986
@ -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;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue