diff --git a/src/views/products/Detail.jsx b/src/views/products/Detail.jsx index 7655105..f624d56 100644 --- a/src/views/products/Detail.jsx +++ b/src/views/products/Detail.jsx @@ -2,19 +2,15 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'; import { Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree, FloatButton, DatePicker } from 'antd'; import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import AddValidityWithWeekend from '@/views/products/Detail/addValidityWithWeekend'; -import { getAgencyProductsAction } from '@/stores/Products/Index'; import { useProductsTypes } from '@/hooks/useProductsSets'; import Extras from './Detail/Extras'; -import { groupBy } from '@/utils/commons'; import { useParams } from 'react-router-dom'; import useProductsStore from '@/stores/Products/Index'; import { useHTLanguageSets } from '@/hooks/useHTLanguageSets'; import { useDefaultLgc } from '@/i18n/LanguageSwitcher'; -import BatchImportPrice from './Detail/BatchImportPrice1'; +import BatchImportPrice from './Detail/BatchImportPrice'; import dayjs from 'dayjs'; import { PlusCircleFilled } from '@ant-design/icons'; -import { info } from 'autoprefixer'; import { DeptSelector } from '@/components/DeptSelector'; import { useDatePresets } from '@/hooks/useDatePresets'; @@ -27,7 +23,6 @@ function Detail() { const [isModalVisible, setIsModalVisible] = useState(false); const [selectedTag, setSelectedTag] = useState(null); const [saveData, setSaveData] = useState(null); - const [datePickerVisible, setDatePickerVisible] = useState(false); const [batchImportPriceVisible, setBatchImportPriceVisible] = useState(false); const [quotationTableVisible, setQuotationTableVisible] = useState(false) const [currentid, setCurrentid] = useState(null); @@ -61,7 +56,22 @@ function Detail() { const [dataFetched, setDataFetched] = useState(false); // 添加一个标志位 const [selectedNodeKey, setSelectedNodeKey] = useState(null); const [selectedDays, setSelectedDays] = useState([]); - const [currentQuotationRecord, setCurrentQuotationRecord] = useState(null); + const [weekdays,setWeekdays] = useState([]); + const [currentQuotationRecord, setCurrentQuotationRecord] = useState({ + use_dates_start: null, + use_dates_end: null + }); + const formatDate = (date) => (date ? dayjs(date) : null); + + + const startDate = currentQuotationRecord.use_dates_start && dayjs(currentQuotationRecord.use_dates_start).isValid() + ? formatDate(currentQuotationRecord.use_dates_start) + : null; + const endDate = currentQuotationRecord.use_dates_end && dayjs(currentQuotationRecord.use_dates_end).isValid() + ? formatDate(currentQuotationRecord.use_dates_end) + : null; + + const [editIndex, setEditIndex] = useState(null); const presets = useDatePresets(); const handleBatchImportData = (data) => { setBatchImportData(data); @@ -158,11 +168,13 @@ function Detail() { })) })); }; - + const tempExpandedKeys = productsTypes.map(item => item.key) + console.log("tempExpandedKeys", tempExpandedKeys) const treeData = generateTreeData(productsTypes, agencyProducts); console.log("treeData", treeData) setDataFetched(true); // 设置标志位为 true，表示数据已获取 setTreeData(treeData); + setExpandedKeys(tempExpandedKeys) setProductsData(agencyProducts); setDefaultData(treeData); setDataList(flattenTreeData(treeData)); @@ -173,6 +185,7 @@ function Detail() { fetchData(); }, [agencyProducts, dataFetched]); + const flattenTreeData = (tree) => { let flatList = []; const flatten = (nodes) => { @@ -224,6 +237,7 @@ function Detail() { ); }; + const onChange = (e) => { const { value } = e.target; const newExpandedKeys = dataList @@ -243,72 +257,40 @@ function Detail() { const isEditing = (record) => record.id === editingid; - const edit = (record) => { - // setQuotationTableVisible(true); - // setCurrentQuotationRecord(record); - console.log("record", record) - form.setFieldsValue({ ...record }); - setEditingid(record.id); + const edit = (record, index) => { + setQuotationTableVisible(true); + setEditIndex(index); + // record.use_dates_start = dayjs(record.use_dates_start); + // record.use_dates_end = dayjs(record.use_dates_end); + setCurrentQuotationRecord(record); }; const cancel = () => { setEditingid(''); }; - const handleSave = async (id) => { - try { - const { info, ...restRow } = await form.validateFields(); - const newData = [...quotation]; - const index = newData.findIndex((item) => id === item.id); - if (index > -1) { - const item = newData[index]; - newData.splice(index, 1, { ...item, ...restRow }); - delete newData[index].quotation - delete newData[index].extras - console.log("newData", newData) - - //按人等范围排序 - const sortedData = [...newData].sort((a, b) => { - // 首先按照 group_size_min 升序排序 - if (a.group_size_min !== b.group_size_min) { - return a.group_size_min - b.group_size_min; - } - // 如果 group_size_min 相同，则按照 group_size_max 升序排序 - return a.group_size_max - b.group_size_max; - }); - setQuotation(sortedData); - setEditingid(''); - } else { - newData.push(restRow); - setQuotation(newData); - setEditingid(''); - } - } catch (errInfo) { - console.log('Validate Failed:', errInfo); - } - }; - const handleDelete = (id) => { const newData = [...quotation]; const index = newData.findIndex((item) => id === item.id); newData.splice(index, 1); - //按人等范围排序 const sortedData = [...newData].sort((a, b) => { - // 首先按照 group_size_min 升序排序 - if (a.group_size_min !== b.group_size_min) { - return a.group_size_min - b.group_size_min; + 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; } - // 如果 group_size_min 相同，则按照 group_size_max 升序排序 - return a.group_size_max - b.group_size_max; - }); + 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); }; const handleAdd = () => { const newData = { - // id: `${quotation.length + 1}`, value: '', currency: '', unit_name: '', @@ -331,164 +313,60 @@ function Detail() { }; 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') + console.log("currentQuotationRecord", currentQuotationRecord); + console.log("qqqqq", quotation) + const tempQuotation = [...quotation]; + tempQuotation[editIndex] = { ...currentQuotationRecord,weekdays:weekdays }; + console.log("tempQuotation", tempQuotation) + 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; + }); + console.log("sortedData",sortedData) + + setQuotation(sortedData); setQuotationTableVisible(false); } const quotationTableVisibleCancel = () => { setQuotationTableVisible(false); } - const handleDateChange = ({ dateRange, selectedDays }) => { - - console.log("dateRange", dateRange) - console.log("selectedDays", selectedDays) - - // 计算周末 - const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; - let weekDayCount = selectedDays.map(day => weekdays.indexOf(day) + 1).sort().join(','); - if (!weekDayCount || weekDayCount.length === 0) { - weekDayCount = "全年"; - } - const newData = [...quotation]; - const index = newData.findIndex((item) => currentid === item.id); - if (index > -1) { - newData[index].weekdays = weekDayCount; - setQuotation(newData); - } - - setSelectedDateData({ dateRange, selectedDays }) - }; - - const handleDateOk = () => { - let { dateRange } = selectedDateData; - console.log("handleDateOk_dateRange", dateRange) - const use_dates_start = dateRange[0]; - const use_dates_end = dateRange[1]; - if (currentid !== null) { - const newData = [...quotation]; - const index = newData.findIndex((item) => currentid === item.id); - if (index > -1) { - newData[index].use_dates_start = use_dates_start; - newData[index].use_dates_end = use_dates_end; - console.log("newData", newData) - setQuotation(newData); - setCurrentid(null); - } - } - setSelectedDateData({ dateRange: null, selectedDays: [] }) - setDatePickerVisible(false); - } 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; // 返回剩余的属性 + return rest; }); - // 将剩余的属性添加到 quotation 中 const newData = [...quotation, ...tempBatchImportData]; - - //按人等范围排序 const sortedData = [...newData].sort((a, b) => { - // 首先按照 group_size_min 升序排序 if (a.group_size_min !== b.group_size_min) { return a.group_size_min - b.group_size_min; } - // 如果 group_size_min 相同，则按照 group_size_max 升序排序 + return a.group_size_max - b.group_size_max; }); - // 更新状态来更新页面 + setQuotation(sortedData); setBatchImportPriceVisible(false); } - const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => { - let inputNode = inputType === 'number' ? : ; - if (dataIndex === 'validityPeriod' && editing) { - return ( - - {children} - - - ); - } - - if (dataIndex === 'unit_name' && editing) { - inputNode = ( - - ); - } - - if (dataIndex === 'currency' && editing) { - inputNode = ( - - ); - } - - if (dataIndex === 'group_size' && editing) { - return ( - - handleInputGroupSize('group_size_min', record.id, 'group_size', value)} - style={{ width: '50%', marginRight: '10px' }} - /> - - - handleInputGroupSize('group_size_max', record.id, 'group_size', value)} - style={{ width: '50%', marginLeft: '10px' }} - /> - - ); - } - - return ( - - {editing ? ( - - {inputNode} - - ) : ( - children - )} - - ); - }; - - const handleInputGroupSize = (name, id, dataIndex, value) => { - - const newData = [...quotation]; - const index = newData.findIndex((item) => id === item.id); - if (index > -1) { - const item = newData[index]; - newData[index] = { ...item, } - if (name === 'group_size_min') { - newData[index] = { ...item, group_size_min: value }; - } else { - newData[index] = { ...item, group_size_max: value }; - } - setQuotation(newData); - } - - } const columns = [ { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%', editable: true }, @@ -516,43 +394,37 @@ function Detail() { { title: t('products:operation'), dataIndex: 'operation', - render: (_, record) => { - const editable = isEditing(record); - return editable ? ( - - - - - ) : ( + render: (_, record, index) => { + return ( - edit(record)} style={{ marginRight: 8 }}>{t('Edit')} + edit(record, index)} style={{ marginRight: 8 }}>{t('Edit')} handleDelete(record.id)}> {t('Delete')} - ); + ) }, }, ]; - const mergedColumns = columns.map((col) => { - if (!col.editable) { - return col; - } - return { - ...col, - onCell: (record) => ({ - record, - inputType: col.dataIndex === 'age' ? 'number' : 'text', - dataIndex: col.dataIndex, - title: col.title, - editing: isEditing(record), - handleDateSelect: handleDateSelect, - }), - }; - }); + // const mergedColumns = columns.map((col) => { + // if (!col.editable) { + // return col; + // } + // return { + // ...col, + // onCell: (record) => ({ + // record, + // inputType: col.dataIndex === 'age' ? 'number' : 'text', + // dataIndex: col.dataIndex, + // title: col.title, + // editing: isEditing(record), + // handleDateSelect: handleDateSelect, + // }), + // }; + // }); const handleTagClick = (tag) => { setSelectedTag(tag); @@ -618,11 +490,17 @@ function Detail() { }; - const handleDayClick = (day) => { + const handleDayClick = (dayIndex) => { + const dayOfWeek = (dayIndex % 7) + 1; + setSelectedDays((prevSelectedDays) => { - const updatedDays = prevSelectedDays.includes(day) - ? prevSelectedDays.filter((d) => d !== day) - : [...prevSelectedDays, day]; + const updatedDays = prevSelectedDays.includes(dayOfWeek) + ? prevSelectedDays.filter((d) => d !== dayOfWeek) + : [...prevSelectedDays, dayOfWeek]; + console.log("updatedDays",updatedDays); + const weekdaysString = updatedDays.sort().join(','); + console.log("weekdaysString",weekdaysString) + setWeekdays(weekdaysString) return updatedDays; }); }; @@ -631,6 +509,7 @@ function Detail() { const handleNodeSelect = (_, { node }) => { if (!node._raw.info.id) { console.log("nodeNoID", node) + setQuotation([]) const infoData = node._raw.info const newLgcDetails = node._raw.lgc_details const fatherKey = node.key.split('-')[0]; @@ -715,9 +594,26 @@ function Detail() { setInfoDataForId(infoData.id) } setLgc_details(newLgcDetails); - setQuotation(initialQuotationData); - // 使用 setTimeout 确保 lgc_details 已经更新 + + const sortedData = [...initialQuotationData].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); + if (node._raw.info.id) { form.setFieldsValue({ info: { @@ -870,12 +766,12 @@ function Detail() {
- + - {t('products:supplierQuotation')} @@ -1010,18 +905,6 @@ function Detail() { - {datePickerVisible && ( - setDatePickerVisible(false)} - > - - - )} - - { batchImportPriceVisible && (

成人价

- + setCurrentQuotationRecord({ ...currentQuotationRecord, adult_cost: e })} />

儿童价

- + setCurrentQuotationRecord({ ...currentQuotationRecord, child_cost: e })} />

币种

- setCurrentQuotationRecord({ ...currentQuotationRecord, currency: e })}> + RMB USD

类型

- setCurrentQuotationRecord({ ...currentQuotationRecord, unit_name: e })}> 每人 每团 @@ -1093,26 +976,39 @@ function Detail() { -

有效期

- -

周末

+

有效期

+ { + setCurrentQuotationRecord({ + ...currentQuotationRecord, + use_dates_start: dates[0], + use_dates_end: dates[1] + }); + }} + /> +

周末

{days.map((day, index) => (
handleInputGroupSize('group_size_min', currentQuotationRecord.id, 'group_size', value)} + defaultValue={currentQuotationRecord.group_size_min} + onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_min: e })} style={{ width: '50%', marginRight: '10px' }} /> - handleInputGroupSize('group_size_max', currentQuotationRecord.id, 'group_size', value)} + defaultValue={currentQuotationRecord.group_size_max} + onChange={(e) => setCurrentQuotationRecord({ ...currentQuotationRecord, group_size_max: e })} style={{ width: '50%', marginLeft: '10px' }} />