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