From 11b5a80986aa7c551fdcff5d661aaf00d34eaaac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E6=96=87=E5=BC=BA=40HWQ-PC?= Date: Tue, 2 Jul 2024 14:00:56 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=8A=A5=E4=BB=B7=E7=95=8C=E9=9D=A2?= 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 | 82 +++++----- 2 files changed, 288 insertions(+), 37 deletions(-) create mode 100644 src/components/BatchImportPrice.jsx diff --git a/src/components/BatchImportPrice.jsx b/src/components/BatchImportPrice.jsx new file mode 100644 index 0000000..0404beb --- /dev/null +++ b/src/components/BatchImportPrice.jsx @@ -0,0 +1,243 @@ +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 74bac6a..57cd8e7 100644 --- a/src/views/products/Detail.jsx +++ b/src/views/products/Detail.jsx @@ -10,6 +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'; function Detail() { const { t } = useTranslation(); const [form] = Form.useForm(); @@ -19,12 +20,13 @@ function Detail() { const [selectedTag, setSelectedTag] = useState(null); const [saveData, setSaveData] = useState(null); const [datePickerVisible, setDatePickerVisible] = useState(false); + const [batchImportPriceVisible, setBatchImportPriceVisible] = useState(false); const [currentid, setCurrentid] = useState(null); const [languageStatus, setLanguageStatus] = useState(null); const [selectedNodeid, setSelectedNodeid] = useState(null); const [remainderLanguage, setRemainderLanguage] = useState([]) const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] }); - const [treeData1, setTreeData1] = useState([]); + const [treeData, setTreeData] = useState([]); const productsTypes = useProductsTypes(); const [productsData, setProductsData] = useState(null); const [quotation, setQuotation] = useState(null); @@ -99,6 +101,7 @@ function Detail() { const languageLabel = matchedLanguage.label // setTags([languageLabel]) setLanguageLabel(languageLabel) + setSelectedTag(languageLabel) setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString())) }, []); @@ -124,8 +127,7 @@ function Detail() { }; const treeData = generateTreeData(productsTypes, groupedProducts); - console.log("treeData", treeData) - setTreeData1(treeData); + setTreeData(treeData); setProductsData(groupedProducts); setDefaultData(treeData); setDataList(flattenTreeData(treeData)); @@ -202,17 +204,6 @@ function Detail() { setAutoExpandParent(false); }; - // const productProject = [ - - // { code: "code", name: t('products:Code') }, - // { code: "city_name", name: t('products:City') }, - // { code: "remarks", name: t('products:Remarks') }, - // { code: "open_hours", name: t('products:tourTime') }, - // { code: "recommends_rate", name: t('products:recommendationRate') } - // ]; - - - const isEditing = (record) => record.id === editingid; const edit = (record) => { @@ -268,6 +259,10 @@ function Detail() { setQuotation([...quotation, newData]); }; + const handleBatchImport = () => { + setBatchImportPriceVisible(true); + } + const handleDateSelect = (id) => { setCurrentid(id); setDatePickerVisible(true); @@ -309,6 +304,11 @@ function Detail() { setDatePickerVisible(false); } +const handleBatchImportOK = () => { + setBatchImportPriceVisible(false); +} + + const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => { let inputNode = inputType === 'number' ? : ; if (dataIndex === 'validityPeriod' && editing) { @@ -473,10 +473,15 @@ function Detail() { const showModal = () => setIsModalVisible(true); const handleOk = () => { - + if (!selectedTag) return; + if (!remainderLanguage.some(item => item.label === selectedTag)) return; + if (remainderLanguage.includes(selectedTag)) return; + let tempRemainderLanguage = remainderLanguage.filter((item)=>{ + return item.label !== selectedTag; + }) + setRemainderLanguage(tempRemainderLanguage) setTags([...tags, selectedTag]) - - console.log("handleOkvalue") + setSelectedTag(null); setIsModalVisible(false); } @@ -508,8 +513,9 @@ function Detail() { // 如果点击的是同一个节点，不做任何操作 if (selectedNodeid === node.key) return; const fatherKey = node.key.split('-')[0]; - console.log("fatherKey", fatherKey) setSelectedCategory(productProject[fatherKey]) + + console.log("remainderLanguage",remainderLanguage) let initialQuotationData = null; let infoData = null; let lgcDetailsData = null; @@ -558,30 +564,15 @@ function Detail() { }); }; - - - - - const onSave = (values) => { const tempData = values; tempData['quotation'] = quotation; - tempData['extras'] = bindingData; + // tempData['extras'] = bindingData; // tempData['lgc_details'] = languageStatus; setSaveData(tempData); console.log("保存的数据", tempData) }; - - - - //Effect - - - - - - return (
@@ -590,7 +581,7 @@ function Detail() { ))} - duration + @@ -648,7 +639,8 @@ function Detail() { placeholder="选择语言" optionFilterProp="children" onChange={handleTagChange} - > + value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined} + > { remainderLanguage.map((value, label) => ( @@ -689,6 +681,8 @@ function Detail() { + + @@ -717,6 +711,20 @@ function Detail() { )} + + { + batchImportPriceVisible && ( + setBatchImportPriceVisible(false)} + width="80%" + > + + + ) + }
); }