1.怎加批量录入价格功能
黄文强@HWQ-PC
1 year ago
parent
551b082168
commit
71c24be596
@ -1,243 +0,0 @@
|
||||
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