From 71c24be5964e93b1cfde49e236561ff29c6eb09a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=96=87=E5=BC=BA=40HWQ-PC?= Date: Thu, 4 Jul 2024 14:03:48 +0800 Subject: [PATCH] =?UTF-8?q?1.=E6=80=8E=E5=8A=A0=E6=89=B9=E9=87=8F=E5=BD=95?= =?UTF-8?q?=E5=85=A5=E4=BB=B7=E6=A0=BC=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BatchImportPrice.jsx | 243 ------------- src/views/products/Detail.jsx | 27 +- .../products/Detail/BatchImportPrice1.jsx | 324 ++++++++++++++++++ .../products/Detail}/date.jsx | 0 4 files changed, 347 insertions(+), 247 deletions(-) delete mode 100644 src/components/BatchImportPrice.jsx create mode 100644 src/views/products/Detail/BatchImportPrice1.jsx rename src/{components => views/products/Detail}/date.jsx (100%) diff --git a/src/components/BatchImportPrice.jsx b/src/components/BatchImportPrice.jsx deleted file mode 100644 index 0404beb..0000000 --- a/src/components/BatchImportPrice.jsx +++ /dev/null @@ -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) => ( -
- handleCellChange(e.target.value, record.dateRange, peopleRange, 'adultPrice')} - placeholder="成人价" - style={{ width: '45%' }} - suffix={`${currency}/${type}`} - /> - handleCellChange(e.target.value, record.dateRange, peopleRange, 'childPrice')} - placeholder="儿童价" - style={{ width: '45%' }} - suffix={`${currency}/${type}`} - /> -
- ), - } - ])), - ]; - - return ( - <> - - - - - - - - - - - - { - if (dates && dates.length === 2) { - setStartDate(dates[0]); - setEndDate(dates[1]); - } else { - setStartDate(null); - setEndDate(null); - } - }} - /> - - - - - - - setStartPeople(parseInt(e.target.value, 10))} - /> - - setEndPeople(parseInt(e.target.value, 10))} - /> - - - - - - - - - - {dateRanges.map((dateRange, index) => ( - handleRemoveTag(index, 'date')}> - {`${dateRange.startDate.format('YYYY-MM-DD')} ~ ${dateRange.endDate.format('YYYY-MM-DD')}`} - - ))} - {peopleRanges.map((peopleRange, index) => ( - handleRemoveTag(index, 'people')}> - {peopleRange} - - ))} - - - - - ); -}; - -export default BatchImportPrice; - - - diff --git a/src/views/products/Detail.jsx b/src/views/products/Detail.jsx index 57cd8e7..d1b701c 100644 --- a/src/views/products/Detail.jsx +++ b/src/views/products/Detail.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree } from 'antd'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import Date from '@/components/date'; +import Date from '@/views/products/Detail/date'; import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index'; import { useProductsTypes } from '@/hooks/useProductsSets'; import Extras from './Detail/Extras'; @@ -10,7 +10,7 @@ import { groupBy } from '@/utils/commons'; import { useParams } from 'react-router-dom'; import { useHTLanguageSets } from '@/hooks/useHTLanguageSets'; import { useDefaultLgc } from '@/i18n/LanguageSwitcher'; -import BatchImportPrice from '@/components/BatchImportPrice'; +import BatchImportPrice from './Detail/BatchImportPrice1'; function Detail() { const { t } = useTranslation(); const [form] = Form.useForm(); @@ -43,7 +43,10 @@ function Detail() { const [autoExpandParent, setAutoExpandParent] = useState(true); const [dataList, setDataList] = useState([]); const [defaultData, setDefaultData] = useState([]); - + const [batchImportData, setBatchImportData] = useState([]); + const handleBatchImportData = (data) => { + setBatchImportData(data); + }; const productProject = { "6": [], @@ -225,6 +228,7 @@ function Detail() { newData.splice(index, 1, { ...item, ...restRow }); delete newData[index].quotation delete newData[index].extras + console.log("newData",newData) setQuotation(newData); setEditingid(''); } else { @@ -305,6 +309,20 @@ function Detail() { } const handleBatchImportOK = () => { + console.log("quotation",quotation) + console.log('Batch Import Data:', batchImportData); + + + // 创建一个新的数据副本，删除 tag 和 validPeriod 属性 + const tempBatchImportData = batchImportData.map(item => { + const { tag, validPeriod, ...rest } = item; + return rest; // 返回剩余的属性 + }); + // 将剩余的属性添加到 quotation 中 + const newData = [...quotation, ...tempBatchImportData]; + + // 更新状态来更新页面 + setQuotation(newData); setBatchImportPriceVisible(false); } @@ -711,6 +729,7 @@ const handleBatchImportOK = () => { )} + { batchImportPriceVisible && ( @@ -721,7 +740,7 @@ const handleBatchImportOK = () => { onCancel={() => setBatchImportPriceVisible(false)} width="80%" > - + ) } diff --git a/src/views/products/Detail/BatchImportPrice1.jsx b/src/views/products/Detail/BatchImportPrice1.jsx new file mode 100644 index 0000000..27a4c79 --- /dev/null +++ b/src/views/products/Detail/BatchImportPrice1.jsx @@ -0,0 +1,324 @@ +import React, { useState } from 'react'; +import { Button, Card, Checkbox, Col, DatePicker, Form, Input, Row, Select, Space, Tag, Table, InputNumber } from 'antd'; +import { CloseOutlined } from '@ant-design/icons'; +const { Option } = Select; +const { RangePicker } = DatePicker; + +const BatchImportPrice = ({ onBatchImportData }) => { + const [form] = 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 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 = []; + + // 遍历 items + values.items.forEach((item) => { + // 遍历 validPeriods + let tempValidPeriods = [] + item.validPeriods?.forEach((period) => { + const validPeriod = period.validPeriod.map(date => date.format('YYYY-MM-DD')).join('~'); + tempValidPeriods.push(validPeriod) + // 更新 tempSendData 中每一个 tag 的值 + }); + + 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}) + }); + }) + 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); + }); + }); + setTableData(data); + onBatchImportData(data); // 将生成的初始表格数据传递回父组件 + }; + + + const handleTableChange = (age_type, value, tag, validPeriod) => { + if (age_type === 'adult_cost') { + const updatedSendData = sendData.map((item) => { + if (item.validPeriod === validPeriod && item.tag === tag) { + return { + ...item, + adult_cost: value, // 更新对应的 adult_cost 属性 + }; + } + return item; // 对于不匹配的项，保持不变 + }); + // 更新 sendDataole + onBatchImportData(updatedSendData); + setSendData(updatedSendData); + } else { + const updatedSendData = sendData.map((item) => { + if (item.validPeriod === validPeriod && 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) => ( + `${value}`} + parser={value => value.replace(/[^\d]/g, '')} + onChange={(value) => handleTableChange('adult_cost', value, tag, record.validPeriod)} + /> + ), + }, + { + title: '儿童价', + dataIndex: `childrenPrice${index + 1}`, + key: `childrenPrice${index + 1}`, + render: (text, record) => ( + `${value}`} + parser={value => value.replace(/[^\d]/g, '')} + onChange={(value) => handleTableChange('child_cost', value, tag, record.validPeriod)} + /> + ), + } + ] + }); + }); + 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(), + ]; + + return ( +
+ + +
+ + setMinPeople(e.target.value)} + /> + + setMaxPeople(e.target.value)} + /> + + + + + + + +
+ {tags.map((tag) => ( + handleTagClose(tag)}> + {tag} + + ))} +
+ + + + +
+ + {(fields, { add, remove }) => ( +
+ {fields.map((field, index) => ( + remove(field.name)} />} + > + + + + + + + + + + + {(periodFields, periodOpt) => ( +
+ {periodFields.map((periodField, idx) => ( + + + + + periodOpt.remove(periodField.name)} /> + + ))} + +
+ )} + + + + ))} + +
+ )} + + + + + + {tableData.length > 0 && ( +
+
+ + )} + + ); +}; + +export default BatchImportPrice; diff --git a/src/components/date.jsx b/src/views/products/Detail/date.jsx similarity index 100% rename from src/components/date.jsx rename to src/views/products/Detail/date.jsx