todo: 产品编辑页面: 组件
Lei OT
1 year ago
parent
26d354e0ea
commit
2a193f9955
@ -0,0 +1,220 @@
|
||||
import { createContext, useEffect, useState } from 'react';
|
||||
import { Table, Form, Modal, Button, InputNumber, Select, DatePicker } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import dayjs from 'dayjs';
|
||||
import BatchImportPrice from './BatchImportPrice';
|
||||
import { useDatePresets } from '@/hooks/useDatePresets';
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
const ProductInfoQuotation = ({ formInstance, ...props }) => {
|
||||
const { t } = useTranslation();
|
||||
const presets = useDatePresets();
|
||||
const [batchImportPriceVisible, setBatchImportPriceVisible] = useState(false);
|
||||
const [quotationTableVisible, setQuotationTableVisible] = useState(false);
|
||||
const [editIndex, setEditIndex] = useState(null);
|
||||
const [quotation, setQuotation] = useState([]);
|
||||
const [batchImportData, setBatchImportData] = useState([]);
|
||||
const [weekdays, setWeekdays] = useState([]);
|
||||
const [selectedDays, setSelectedDays] = useState([]);
|
||||
const [currentQuotationRecord, setCurrentQuotationRecord] = useState({
|
||||
use_dates_start: null,
|
||||
use_dates_end: null,
|
||||
});
|
||||
const edit = (record, index) => {
|
||||
setQuotationTableVisible(true);
|
||||
setEditIndex(index);
|
||||
setCurrentQuotationRecord(record);
|
||||
};
|
||||
const handleAdd = () => {
|
||||
const newData = {
|
||||
adult_cost: 0,
|
||||
child_cost: 0,
|
||||
currency: '',
|
||||
group_size_min: 0,
|
||||
group_size_max: 0,
|
||||
id: '',
|
||||
lastedit_changed: '',
|
||||
use_dates_start: '',
|
||||
use_dates_end: '',
|
||||
weekdays: '',
|
||||
tempKey: Math.random(),
|
||||
};
|
||||
setQuotation([...quotation, newData]);
|
||||
const index = [...quotation, newData].length - 1;
|
||||
edit(newData, index);
|
||||
};
|
||||
const handleBatchImportData = (data) => {
|
||||
setBatchImportData(data);
|
||||
};
|
||||
|
||||
const handleBatchImport = () => {
|
||||
setBatchImportPriceVisible(true);
|
||||
};
|
||||
const handleBatchImportOK = () => {
|
||||
const tempBatchImportData = batchImportData.map((item) => {
|
||||
const { tag, validPeriod, ...rest } = item;
|
||||
return rest;
|
||||
});
|
||||
const newData = [...quotation, ...tempBatchImportData];
|
||||
const sortedData = [...newData].sort((a, b) => {
|
||||
if (a.group_size_min !== b.group_size_min) {
|
||||
return a.group_size_min - b.group_size_min;
|
||||
}
|
||||
|
||||
return a.group_size_max - b.group_size_max;
|
||||
});
|
||||
|
||||
setQuotation(sortedData);
|
||||
setBatchImportPriceVisible(false);
|
||||
};
|
||||
const quotationTableVisibleOK = () => {
|
||||
currentQuotationRecord.use_dates_start = dayjs(currentQuotationRecord.use_dates_start).format('YYYY-MM-DD');
|
||||
currentQuotationRecord.use_dates_end = dayjs(currentQuotationRecord.use_dates_end).format('YYYY-MM-DD');
|
||||
const tempQuotation = [...quotation];
|
||||
tempQuotation[editIndex] = { ...currentQuotationRecord, weekdays: weekdays };
|
||||
const sortedData = [...tempQuotation].sort((a, b) => {
|
||||
const aValidPeriod = dayjs(a.use_dates_end).diff(dayjs(a.use_dates_start));
|
||||
const bValidPeriod = dayjs(b.use_dates_end).diff(dayjs(b.use_dates_start));
|
||||
|
||||
if (aValidPeriod !== bValidPeriod) {
|
||||
return aValidPeriod - bValidPeriod;
|
||||
}
|
||||
const aGroupSize = a.group_size_max - a.group_size_min;
|
||||
const bGroupSize = b.group_size_max - b.group_size_min;
|
||||
|
||||
return aGroupSize - bGroupSize;
|
||||
});
|
||||
setQuotation(sortedData);
|
||||
setQuotationTableVisible(false);
|
||||
};
|
||||
const quotationTableVisibleCancel = () => {
|
||||
setQuotationTableVisible(false);
|
||||
};
|
||||
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
||||
const handleDayClick = (dayIndex) => {
|
||||
const dayOfWeek = (dayIndex % 7) + 1;
|
||||
|
||||
setSelectedDays((prevSelectedDays) => {
|
||||
const updatedDays = prevSelectedDays.includes(dayOfWeek) ? prevSelectedDays.filter((d) => d !== dayOfWeek) : [...prevSelectedDays, dayOfWeek];
|
||||
const weekdaysString = updatedDays.sort().join(',');
|
||||
setWeekdays(weekdaysString);
|
||||
return updatedDays;
|
||||
});
|
||||
};
|
||||
const columns = [
|
||||
{ title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%', editable: true },
|
||||
{ title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '10%', editable: true },
|
||||
{ title: t('products:currency'), dataIndex: 'currency', width: '10%', editable: true },
|
||||
{
|
||||
title: t('products:Types'),
|
||||
dataIndex: 'unit',
|
||||
width: '10%',
|
||||
editable: true,
|
||||
render: (text) => (text === '0' ? '每人' : text === '1' ? '每团' : text),
|
||||
},
|
||||
{
|
||||
title: t('products:number'),
|
||||
dataIndex: 'group_size',
|
||||
width: '20%',
|
||||
editable: true,
|
||||
render: (_, record) => `${record.group_size_min}-${record.group_size_max}`,
|
||||
},
|
||||
|
||||
{
|
||||
title: t('products:validityPeriod'),
|
||||
dataIndex: 'validityPeriod',
|
||||
width: '20%',
|
||||
editable: true,
|
||||
render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`,
|
||||
},
|
||||
|
||||
{ title: t('products:Weekdays'), dataIndex: 'weekdays', width: '10%' },
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<h2>{t('products:EditComponents.Quotation')}</h2>
|
||||
<Form.Item name='quotation'>
|
||||
<Table
|
||||
rowKey={'tempKey'}
|
||||
bordered
|
||||
dataSource={quotation}
|
||||
columns={columns}
|
||||
rowClassName='editable-row'
|
||||
// pagination={{ onChange: cancel }}
|
||||
/>
|
||||
{
|
||||
// !isCanEditable &&
|
||||
<Button onClick={handleAdd} type='primary' ghost style={{ marginTop: 16 }}>
|
||||
{t('products:addQuotation')}
|
||||
</Button>
|
||||
}
|
||||
|
||||
{
|
||||
<Button onClick={handleBatchImport} type='primary' ghost style={{ marginTop: 16, marginLeft: 16 }}>
|
||||
批量添加
|
||||
</Button>
|
||||
}
|
||||
</Form.Item>
|
||||
|
||||
<Modal title='批量设置价格' open={batchImportPriceVisible} onOk={handleBatchImportOK} onCancel={() => setBatchImportPriceVisible(false)} width={'90%'}>
|
||||
<BatchImportPrice onBatchImportData={handleBatchImportData} />
|
||||
</Modal>
|
||||
|
||||
<Modal title='编辑供应商报价' open={quotationTableVisible} onOk={quotationTableVisibleOK} onCancel={quotationTableVisibleCancel}>
|
||||
<h3>成人价</h3>
|
||||
<InputNumber value={currentQuotationRecord.adult_cost} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, adult_cost: e })} />
|
||||
<h3>儿童价</h3>
|
||||
<InputNumber value={currentQuotationRecord.child_cost} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, child_cost: e })} />
|
||||
<h3>币种</h3>
|
||||
<Select style={{ width: '30%' }} value={currentQuotationRecord.currency} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, currency: e })}>
|
||||
<Select.Option value='rmb'>rmb</Select.Option>
|
||||
<Select.Option value='usd'>usd</Select.Option>
|
||||
</Select>
|
||||
<h3>类型</h3>
|
||||
<Select style={{ width: '30%' }} value={currentQuotationRecord.unit} onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, unit: e })}>
|
||||
<Select.Option value='0'>每人</Select.Option>
|
||||
<Select.Option value='1'>每团</Select.Option>
|
||||
</Select>
|
||||
|
||||
<h3>人等</h3>
|
||||
<td style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<InputNumber
|
||||
min={0}
|
||||
value={currentQuotationRecord.group_size_min}
|
||||
onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_min: e })}
|
||||
style={{ width: '50%', marginRight: '10px' }}
|
||||
/>
|
||||
<span>-</span>
|
||||
<InputNumber
|
||||
min={0}
|
||||
value={currentQuotationRecord.group_size_max}
|
||||
onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_max: e })}
|
||||
style={{ width: '50%', marginLeft: '10px' }}
|
||||
/>
|
||||
</td>
|
||||
<h3>有效期</h3>
|
||||
<RangePicker
|
||||
allowClear={true}
|
||||
inputReadOnly={true}
|
||||
presets={presets}
|
||||
placeholder={['From', 'Thru']}
|
||||
// value={startDate && endDate ? [startDate, endDate] : null}
|
||||
onChange={(dates) => {
|
||||
setCurrentQuotationRecord({
|
||||
...currentQuotationRecord,
|
||||
use_dates_start: dates[0],
|
||||
use_dates_end: dates[1],
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<h3>周末</h3>
|
||||
{days.map((day, index) => (
|
||||
<Button key={index} type={selectedDays.includes((index % 7) + 1) ? 'primary' : 'default'} onClick={() => handleDayClick(index)} style={{ margin: '5px' }}>
|
||||
{day}
|
||||
</Button>
|
||||
))}
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default ProductInfoQuotation;
|
||||
Loading…
Reference in New Issue