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