diff --git a/src/views/products/Detail.jsx b/src/views/products/Detail.jsx index 5939a51..997348a 100644 --- a/src/views/products/Detail.jsx +++ b/src/views/products/Detail.jsx @@ -1213,11 +1213,11 @@ function Detail() { setBatchImportPriceVisible(false)} - width="80%" + width={620} > diff --git a/src/views/products/Detail/BatchImportPrice.jsx b/src/views/products/Detail/BatchImportPrice.jsx index 723d481..5f3dbcc 100644 --- a/src/views/products/Detail/BatchImportPrice.jsx +++ b/src/views/products/Detail/BatchImportPrice.jsx @@ -1,574 +1,301 @@ -import { useEffect, useState } from 'react'; -import { Button, Card, Checkbox, Col, DatePicker, Typography, Form, Input, Row, Select, Space, Tag, Table, InputNumber } from 'antd'; +import { useState } from 'react'; +import { Button, Card, Checkbox, Col, Flex, DatePicker, Typography, Form, Input, Row, Select, Space } from 'antd'; +import dayjs from "dayjs"; import { CloseOutlined } from '@ant-design/icons'; import { useDatePresets } from '@/hooks/useDatePresets'; const { Option } = Select; const { RangePicker } = DatePicker; const BatchImportPrice = ({ onBatchImportData }) => { - const [form] = Form.useForm(); - const [peopleForm] = Form.useForm(); - - const [tags, setTags] = useState([]); - const [minPeople, setMinPeople] = useState(''); - const [maxPeople, setMaxPeople] = useState(''); - const [checkedDays, setCheckedDays] = useState([]); - const [tableData, setTableData] = useState([]); - const [sendData, setSendData] = useState(null); - const presets = useDatePresets(); - - useEffect(() => { - peopleForm.setFieldValue({ - "items": [ - { - "weekend": [ - "5", - "6", - "7" - ], - "peopleList": [ - { - "peoplePrice": "22", - "numberStart": "1", - "numberEnd": "2", - "audultPrice": "23", - "childrenPrice": "44" - }, - { - "numberStart": "3", - "numberEnd": "5", - "audultPrice": "24", - "childrenPrice": "12" - } - ] - } - ] + const [priceForm] = Form.useForm(); + const presets = useDatePresets(); + + const PriceInput = (props) => { + const { id, value = {}, onChange } = props + const [numberStart, setNumberStart] = useState(0) + const [numberEnd, setNumberEnd] = useState(0) + const [audultPrice, setAudultPrice] = useState(0) + const [childrenPrice, setChildrenPrice] = useState(0) + const triggerChange = (changedValue) => { + onChange?.({ + numberStart, + numberEnd, + audultPrice, + childrenPrice, + ...value, + ...changedValue, }) - }) - - const handleTagClose = (removedTag) => { - setTags(tags.filter(tag => tag !== removedTag)); - }; - - const handleInputConfirm = () => { - if (minPeople && maxPeople) { - const tag = `${minPeople}-${maxPeople}`; - if (tags.indexOf(tag) === -1) { - setTags([...tags, tag]); - } - } - setMinPeople(''); - setMaxPeople(''); - }; - - const handleCheckboxChange = (checkedValues) => { - setCheckedDays(checkedValues); - }; - - const generateTableData = () => { - const values = form.getFieldsValue(); - const weekdays = checkedDays.join(','); - let tempSendData = []; - console.log("values",values) - // 遍历 items - values.items.forEach((item, index) => { - // 遍历 validPeriods - let tempValidPeriods = [] - item.validPeriods?.forEach((period) => { - console.log("period",period) - const validPeriod = period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~'); - tempValidPeriods.push(validPeriod) - // 更新 tempSendData 中每一个 tag 的值 - }); - const priceType = `批量设置价格 ${index + 1} ${item.currency}/${item.type}` - let tempData = [] - const unit_name = item.type - const currency = item.currency - tags.forEach((tag) => { - tempValidPeriods.forEach(validPeriod => { - const group_size_min = tag.split('-')[0] - const group_size_max = tag.split('-')[1] - let unit_id = null - const use_dates_start = validPeriod.split('~')[0] - const use_dates_end = validPeriod.split('~')[1] - if (unit_name === "每人") { - unit_id = 0 - } else { - unit_id = 1 - } - tempData.push({ group_size_min, group_size_max, validPeriod, unit_id, unit_name, use_dates_start, use_dates_end, currency, weekdays, tag, priceType }) - }); - }) - console.log("tempData", tempData) - tempSendData.push(...tempData) - - }); - - // 设置最终的发送数据 - setSendData([...tempSendData]); // 使用展开操作符确保传递给 setSendData 的是一个新对象 - const data = []; - values.items.forEach((item, index) => { - item.validPeriods?.forEach((period, idx) => { - const row = { - key: `${index}-${idx}`, - priceType: `批量设置价格 ${index + 1} ${item.currency}/${item.type}`, - validPeriod: period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~'), - currency: item.currency, - type: item.type, - }; - tags.forEach((tag, tagIndex) => { - row[`adultPrice${tagIndex + 1}`] = 0; // Initialize with 0 - row[`childrenPrice${tagIndex + 1}`] = 0; // Initialize with 0 - }); - data.push(row); - }); - }); - // setSendData([...tempSendData,data]); - setTableData(data); - // onBatchImportData(data); // 将生成的初始表格数据传递回父组件 - }; - - - - const handleTableChange = (age_type, value, tag, priceType) => { - if (age_type === 'adult_cost') { - console.log("sendData", sendData) - const updatedSendData = sendData.map((item) => { - console.log("item.priceType === priceType", item.priceType === priceType) - console.log("item.priceType", item.priceType) - console.log("priceType", priceType) - if (item.priceType === priceType && item.tag === tag) { - return { - ...item, - adult_cost: value, // 更新对应的 adult_cost 属性 - }; - } - return item; // 对于不匹配的项，保持不变 - }); - // 更新 sendData - console.log("updatedSendData", updatedSendData) - onBatchImportData(updatedSendData); - setSendData(updatedSendData); - } else { - const updatedSendData = sendData.map((item) => { - if (item.priceType === priceType && item.tag === tag) { - return { - ...item, - child_cost: value, // 更新对应的 child_cost 属性 - }; - } - return item; // 对于不匹配的项，保持不变 - }); - // 更新 sendData - onBatchImportData(updatedSendData); - setSendData(updatedSendData); - } - }; - - - const generatePeopleColumns = () => { - const columns = []; - tags.forEach((tag, index) => { - columns.push({ - title: tag, - children: [ - { - title: '成人价', - dataIndex: `adultPrice${index + 1}`, - key: `adultPrice${index + 1}`, - render: (text, record, rowIndex) => { - const sameTagRecords = tableData.filter(item => item.priceType === record.priceType); - const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].validPeriod); - - if (rowIndex === firstTagIndex) { - return { - children: ( - `${value}`} - parser={value => value.replace(/[^\d]/g, '')} - onChange={(value) => handleTableChange('adult_cost', value, tag, record.priceType)} - /> - ), - props: { - rowSpan: sameTagRecords.length, - }, - }; - } else { - return { - props: { - rowSpan: 0, - }, - }; - } - }, - }, - { - title: '儿童价', - dataIndex: `childrenPrice${index + 1}`, - key: `childrenPrice${index + 1}`, - render: (text, record, rowIndex) => { - const sameTagRecords = tableData.filter(item => item.priceType === record.priceType); - const firstTagIndex = tableData.findIndex(item => item.priceType === record.priceType && item.validPeriod === sameTagRecords[0].validPeriod); - - if (rowIndex === firstTagIndex) { - return { - children: ( - `${value}`} - parser={value => value.replace(/[^\d]/g, '')} - onChange={(value) => handleTableChange('child_cost', value, tag, record.priceType)} - /> - ), - props: { - rowSpan: sameTagRecords.length, - }, - }; - } else { - return { - props: { - rowSpan: 0, - }, - }; - } - }, - } - ] - }); - }); - return columns; - }; - - - const columns = [ - { - title: ' ', - dataIndex: 'priceType', - key: 'priceType', - width: "10%", - render: (text, record, index) => { - const obj = { - children: text, - props: {}, - }; - if (index > 0 && text === tableData[index - 1].priceType) { - obj.props.rowSpan = 0; - } else { - obj.props.rowSpan = tableData.filter(item => item.priceType === text).length; - } - return obj; - }, - }, - { - title: '有效期\\人等', - dataIndex: 'validPeriod', - key: 'validPeriod', - width: "15%" - }, - ...generatePeopleColumns(), - ]; - - const PriceInput = (props) => { - const { id, value = {}, onChange } = props - const [numberStart, setNumberStart] = useState(0) - const [numberEnd, setNumberEnd] = useState(0) - const [audultPrice, setAudultPrice] = useState(0) - const [childrenPrice, setChildrenPrice] = useState(0) - const triggerChange = (changedValue) => { - onChange?.({ - numberStart, - numberEnd, - audultPrice, - childrenPrice, - ...value, - ...changedValue, - }) + } + const onNumberStartChange = (e) => { + const newNumber = parseInt(e.target.value || '0', 10) + if (Number.isNaN(numberStart)) { + return + } + if (!('numberStart' in value)) { + setNumberStart(newNumber); } - const onNumberStartChange = (e) => { - const newNumber = parseInt(e.target.value || '0', 10) - if (Number.isNaN(numberStart)) { - return - } - if (!('numberStart' in value)) { - setNumberStart(newNumber); - } - triggerChange({ - numberStart: newNumber, - }) + triggerChange({ + numberStart: newNumber, + }) + } + const onNumberEndChange = (e) => { + const newNumber = parseInt(e.target.value || '0', 10) + if (Number.isNaN(numberEnd)) { + return } - const onNumberEndChange = (e) => { - const newNumber = parseInt(e.target.value || '0', 10) - if (Number.isNaN(numberEnd)) { - return - } - if (!('numberEnd' in value)) { - setNumberEnd(newNumber) - } - triggerChange({ - numberEnd: newNumber, - }); - }; - const onAudultPriceChange = (e) => { - const newNumber = parseInt(e.target.value || '0', 10) - if (Number.isNaN(audultPrice)) { - return - } - if (!('audultPrice' in value)) { - setAudultPrice(newNumber) - } - triggerChange({ - audultPrice: newNumber, - }) + if (!('numberEnd' in value)) { + setNumberEnd(newNumber) } - const onChildrenPriceChange = (e) => { - const newNumber = parseInt(e.target.value || '0', 10) - if (Number.isNaN(childrenPrice)) { - return - } - if (!('childrenPrice' in value)) { - setChildrenPrice(newNumber) - } - triggerChange({ - childrenPrice: newNumber, - }) - }; - return ( - - - - - - - ) + triggerChange({ + numberEnd: newNumber, + }); + }; + const onAudultPriceChange = (e) => { + const newNumber = parseInt(e.target.value || '0', 10) + if (Number.isNaN(audultPrice)) { + return + } + if (!('audultPrice' in value)) { + setAudultPrice(newNumber) + } + triggerChange({ + audultPrice: newNumber, + }) } - + const onChildrenPriceChange = (e) => { + const newNumber = parseInt(e.target.value || '0', 10) + if (Number.isNaN(childrenPrice)) { + return + } + if (!('childrenPrice' in value)) { + setChildrenPrice(newNumber) + } + triggerChange({ + childrenPrice: newNumber, + }) + }; return ( - - -
- - {(fields, { add, remove }) => ( -
- {fields.map((field, index) => ( - - - - - - - - - - {(priceFields, priceOpt) => ( - <> - {priceFields.map((priceField) => ( - - - + + + + + + + ) + } + + const priceInitialValues = { + "items": [ + // 旺季 + { + "useDate": [ + dayjs().add(1, 'year').startOf("y"), dayjs().add(1, 'year').endOf("y") + ], + "unitName": "每人", + "currency": "CNY", + "weekend": [ + "5", + "6" + ], + "prieceList": [ + { + "priceInput": { + "numberStart": 1, + "numberEnd": 2, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 3, + "numberEnd": 4, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 5, + "numberEnd": 6, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 7, + "numberEnd": 9, + "audultPrice": 0, + "childrenPrice": 0 + } + } + ] + }, + // 淡季 + { + "useDate": [ + dayjs().add(1, 'year').subtract(2, "M").startOf("M"), dayjs().add(1, 'year').endOf("M") + ], + "unitName": "每人", + "currency": "CNY", + + "weekend": [ + "5", + "6" + ], + + "prieceList": [ + { + "priceInput": { + "numberStart": 1, + "numberEnd": 2, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 3, + "numberEnd": 4, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 5, + "numberEnd": 6, + "audultPrice": 0, + "childrenPrice": 0 + } + }, + { + "priceInput": { + "numberStart": 7, + "numberEnd": 9, + "audultPrice": 0, + "childrenPrice": 0 + } + } + ] + } + ] + } + + return ( + + + + + {(fields, { add, remove }) => ( + + {fields.map((field, index) => ( + { + remove(field.name) + }} />} + > + + - priceOpt.remove(priceField.name)} /> - - ))} - - - )} - - - - - - ))} -
- )} - - - {() => ( - - 
{JSON.stringify(peopleForm.getFieldsValue(), null, 2)}
- - )} - -
- - - -
- - {(fields, { add, remove }) => ( -
- {fields.map((field, index) => ( - remove(field.name)} />} - > - - - - - - - - - - - {(periodFields, periodOpt) => ( -
- {periodFields.map((periodField, idx) => ( - - - - - periodOpt.remove(periodField.name)} /> - - ))} - -
- )} - - - + + + + + + + + + + + + {(prieceFieldList, priceOptList) => ( + + {prieceFieldList.map((priceField) => ( + + + + + priceOptList.remove(priceField.name)} /> + ))} - -
- )} - - - {() => ( - - 
{JSON.stringify(form.getFieldsValue(), null, 2)}
- - )} - -
- - - - {tableData.length > 0 && ( -
- - + + )} + + + + ))} + + + )} + + + {() => ( + + 
{JSON.stringify(priceForm.getFieldsValue(), null, 2)}
+ )} - - - ); + + + + + ); }; export default BatchImportPrice;