Merge remote-tracking branch 'origin/feature/price_manager' into feature/price_manager

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) => (
+                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                        <Input
+                            value={record[`${peopleRange}_adultPrice`]}
+                            onChange={(e) => handleCellChange(e.target.value, record.dateRange, peopleRange, 'adultPrice')}
+                            placeholder="成人价"
+                            style={{ width: '45%' }}
+                            suffix={`${currency}/${type}`}
+                        />
+                        <Input
+                            value={record[`${peopleRange}_childPrice`]}
+                            onChange={(e) => handleCellChange(e.target.value, record.dateRange, peopleRange, 'childPrice')}
+                            placeholder="儿童价"
+                            style={{ width: '45%' }}
+                            suffix={`${currency}/${type}`}
+                        />
+                    </div>
+                ),
+            }
+        ])),
+    ];
+
+    return (
+        <>
+
+            <Row>
+                <Col span={4}>
+                    <Select value={currency} onChange={value => setCurrency(value)} style={{ width: '100%', marginTop: 10 }}>
+                        <Option value="RMB">RMB</Option>
+                        <Option value="MY">MY</Option>
+                    </Select>
+                </Col>
+                <Col span={4}>
+                    <Select value={type} onChange={value => setType(value)} style={{ width: '100%', marginTop: 10 }}>
+                        <Option value="每人">每人</Option>
+                        <Option value="美团">美团</Option>
+                    </Select>
+                </Col>
+            </Row>
+            <Row gutter={16}>
+                <Col span={8}>
+                    <RangePicker
+                        onChange={(dates) => {
+                            if (dates && dates.length === 2) {
+                                setStartDate(dates[0]);
+                                setEndDate(dates[1]);
+                            } else {
+                                setStartDate(null);
+                                setEndDate(null);
+                            }
+                        }}
+                    />
+                </Col>
+                <Button onClick={handleAddDateRange} type="primary">记录有效期</Button>
+            </Row>
+            <Row gutter={16}>
+                <Col span={8}>
+                    <Input.Group compact style={{ marginTop: 10 }}>
+                        <Input
+                            style={{ width: 100, textAlign: 'center' }}
+                            placeholder="Start"
+                            value={startPeople}
+                            onChange={(e) => setStartPeople(parseInt(e.target.value, 10))}
+                        />
+                        <Input
+                            style={{ width: 30, borderLeft: 0, pointerEvents: 'none', backgroundColor: '#fff' }}
+                            placeholder="~"
+                            disabled
+                        />
+                        <Input
+                            style={{ width: 100, textAlign: 'center', borderLeft: 0 }}
+                            placeholder="End"
+                            value={endPeople}
+                            onChange={(e) => setEndPeople(parseInt(e.target.value, 10))}
+                        />
+                    </Input.Group>
+                </Col>
+                <Button onClick={handleAddPeopleRange} type="primary" style={{ marginTop: 10 }}>记录人等</Button>
+            </Row>
+            <Button onClick={handleGenerateTable} type="primary" style={{ marginTop: 10 }}>生成表格</Button>
+
+
+            <Row gutter={16} style={{ marginTop: '16px' }}>
+                <Col span={24}>
+                    {dateRanges.map((dateRange, index) => (
+                        <Tag key={index} closable onClose={() => handleRemoveTag(index, 'date')}>
+                            {`${dateRange.startDate.format('YYYY-MM-DD')} ~ ${dateRange.endDate.format('YYYY-MM-DD')}`}
+                        </Tag>
+                    ))}
+                    {peopleRanges.map((peopleRange, index) => (
+                        <Tag key={index} closable onClose={() => handleRemoveTag(index, 'people')}>
+                            {peopleRange}
+                        </Tag>
+                    ))}
+                </Col>
+            </Row>
+            <Table
+                columns={columns}
+                dataSource={tableData}
+                bordered
+                pagination={false}
+                style={{ marginTop: '16px' }}
+            />
+        </>
+    );
+};
+
+export default BatchImportPrice;
+
+
+

src/components/date.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DatePicker, Button } from 'antd';
 
-const DateComponent = ({ onDateChange }) => {
+const Date = ({ onDateChange }) => {
   const dateFormat = 'YYYY/MM/DD';
   const { RangePicker } = DatePicker;
   const [dateRange, setDateRange] = useState(null);
@@ -48,4 +48,4 @@ const DateComponent = ({ onDateChange }) => {
   );
 };
 
-export default DateComponent;
+export default Date;

src/views/products/Detail.jsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef,useMemo  } from 'react';
+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 DateComponent from '@/components/date';
+import Date from '@/components/date';
 import { searchAgencyAction, getAgencyProductsAction } from '@/stores/Products/Index';
 import { useProductsTypes } from '@/hooks/useProductsSets';
 import Extras from './Detail/Extras';
@@ -10,7 +10,8 @@ import { groupBy } from '@/utils/commons';
 import { useParams } from 'react-router-dom';
 import { useHTLanguageSets } from '@/hooks/useHTLanguageSets';
 import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
-function Index() {
+import BatchImportPrice from '@/components/BatchImportPrice';
+function Detail() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [editingid, setEditingid] = useState('');
@@ -19,20 +20,80 @@ function Index() {
   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);
-  const [lgc_details,setLgc_details] = useState(null);
+  const [lgc_details, setLgc_details] = useState(null);
-  const [languageLabel,setLanguageLabel] = useState(null);
+  const [languageLabel, setLanguageLabel] = useState(null);
   const { travel_agency_id } = useParams();
-  const {language} = useDefaultLgc();
+  const { language } = useDefaultLgc();
   const HTLanguageSets = useHTLanguageSets();
+  const { Search } = Input;
+
+
+  const [expandedKeys, setExpandedKeys] = useState([]);
+  const [searchValue, setSearchValue] = useState('');
+  const [autoExpandParent, setAutoExpandParent] = useState(true);
+  const [dataList, setDataList] = useState([]);
+  const [defaultData, setDefaultData] = useState([]);
+
+
+  const productProject = {
+    "6": [],
+    "B": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+      { code: "km", name: t('products:KM') },
+      { code: "remarks", name: t('products:Remarks') }
+    ],
+    "J": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+      { code: "recommends_rate", name: t('products:recommendationRate') },
+      { code: "duration", name: t('products:Duration') },
+      { code: "dept_name", name: t('products:Dept') },
+      { code: "display_to_c", name: t('products:DisplayToC') },
+      { code: "remarks", name: t('products:Remarks') },
+    ],
+    "Q": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+      { code: "recommends_rate", name: t('products:recommendationRate') },
+      { code: "duration", name: t('products:Duration') },
+      { code: "dept_name", name: t('products:Dept') },
+      { code: "display_to_c", name: t('products:DisplayToC') },
+      { code: "remarks", name: t('products:Remarks') },
+    ],
+    "D": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+      { code: "recommends_rate", name: t('products:recommendationRate') },
+      { code: "duration", name: t('products:Duration') },
+      { code: "dept_name", name: t('products:Dept') },
+      { code: "display_to_c", name: t('products:DisplayToC') },
+      { code: "remarks", name: t('products:Remarks') },
+    ],
+    "7": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+      { code: "recommends_rate", name: t('products:recommendationRate') },
+      { code: "duration", name: t('products:Duration') },
+      { code: "open_weekdays", name: t('products:OpenWeekdays') },
+      { code: "remarks", name: t('products:Remarks') },
+    ],
+    "R": [
+      { code: "code", name: t('products:Code') },
+      { code: "city_name", name: t('products:City') },
+    ]
+  }
+  const [selectedCategory, setSelectedCategory] = useState(productProject.B);
 
   useEffect(() => {
     setLanguageStatus(language);
@@ -40,46 +101,108 @@ function Index() {
     const languageLabel = matchedLanguage.label
     // setTags([languageLabel])
     setLanguageLabel(languageLabel)
+    setSelectedTag(languageLabel)
     setRemainderLanguage(HTLanguageSets.filter(item => item.key !== language.toString()))
   }, []);
 
-  
 
-  const fetchData = async () => {
-    const a = { travel_agency_id };
-    const res = await getAgencyProductsAction(a);
-    const groupedProducts = groupBy(res.products, (row) => row.info.product_type_id);
-    
-    const generateTreeData = (productsTypes, productsData) => {
-      return productsTypes.map(type => ({
-        title: type.label,
-        key: type.value,
-        selectable: false,
-        children: (productsData[type.value] || []).map(product => ({
-          title: product.info.title,
-          key: `${type.value}-${product.info.id}`,
-        }))
-      }));
-    };
 
-    const treeData = generateTreeData(productsTypes, groupedProducts);
-    setProductsData(groupedProducts);
-    setTreeData1(treeData);
-  };
-  
 
   useEffect(() => {
+    const fetchData = async () => {
+      const a = { travel_agency_id };
+      const res = await getAgencyProductsAction(a);
+      const groupedProducts = groupBy(res.products, (row) => row.info.product_type_id);
+
+      const generateTreeData = (productsTypes, productsData) => {
+        return productsTypes.map(type => ({
+          title: type.label,
+          key: type.value,
+          selectable: false,
+          children: (productsData[type.value] || []).map(product => ({
+            title: product.info.title,
+            key: `${type.value}-${product.info.id}`,
+          }))
+        }));
+      };
+
+      const treeData = generateTreeData(productsTypes, groupedProducts);
+      setTreeData(treeData);
+      setProductsData(groupedProducts);
+      setDefaultData(treeData);
+      setDataList(flattenTreeData(treeData));
+    };
+
     fetchData();
   }, [productsTypes]);
 
+  const flattenTreeData = (tree) => {
+    let flatList = [];
+    const flatten = (nodes) => {
+      nodes.forEach((node) => {
+        flatList.push({ title: node.title, key: node.key });
+        if (node.children) {
+          flatten(node.children);
+        }
+      });
+    };
+    flatten(tree);
+    return flatList;
+  };
 
-  const productProject = [
+  const getParentKey = (key, tree) => {
-    { code: "code", name: t('products:Code') },
+    let parentKey;
-    { code: "city_name", name: t('products:City') },
+    for (let i = 0; i < tree.length; i++) {
-    { code: "remarks", name: t('products:Remarks') },
+      const node = tree[i];
-    { code: "open_hours", name: t('products:tourTime') },
+      if (node.children) {
-    { code: "recommends_rate", name: t('products:recommendationRate') }
+        if (node.children.some((item) => item.key === key)) {
-  ];
+          parentKey = node.key;
+        } else {
+          const pKey = getParentKey(key, node.children);
+          if (pKey) {
+            parentKey = pKey;
+          }
+        }
+      }
+    }
+    return parentKey;
+  };
+
+  const titleRender = (node) => {
+    const index = node.title.indexOf(searchValue);
+    const beforeStr = node.title.substr(0, index);
+    const afterStr = node.title.substr(index + searchValue.length);
+    const highlighted = (
+      <span style={{ color: 'red' }}>{searchValue}</span>
+    );
+
+    return index > -1 ? (
+      <span>
+        {beforeStr}
+        {highlighted}
+        {afterStr}
+      </span>
+    ) : (
+      <span>{node.title}</span>
+    );
+  };
+
+  const onChange = (e) => {
+    const { value } = e.target;
+    const newExpandedKeys = dataList
+      .filter(item => item.title.includes(value))
+      .map(item => getParentKey(item.key, defaultData))
+      .filter((item, i, self) => item && self.indexOf(item) === i);
+    console.log("newExpandedKeys", newExpandedKeys)
+    setExpandedKeys(newExpandedKeys);
+    setSearchValue(value);
+    setAutoExpandParent(true);
+  };
+
+  const onExpand = (keys) => {
+    setExpandedKeys(keys);
+    setAutoExpandParent(false);
+  };
 
   const isEditing = (record) => record.id === editingid;
 
@@ -136,6 +259,10 @@ function Index() {
     setQuotation([...quotation, newData]);
   };
 
+  const handleBatchImport = () => {
+    setBatchImportPriceVisible(true);
+  }
+
   const handleDateSelect = (id) => {
     setCurrentid(id);
     setDatePickerVisible(true);
@@ -177,6 +304,11 @@ function Index() {
     setDatePickerVisible(false);
   }
 
+const handleBatchImportOK = () => {
+  setBatchImportPriceVisible(false);
+}
+  
+
   const EditableCell = ({ editing, dataIndex, title, inputType, record, children, handleDateSelect, ...restProps }) => {
     let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
     if (dataIndex === 'validityPeriod' && editing) {
@@ -330,8 +462,8 @@ function Index() {
     const key = matchedLanguage ? matchedLanguage.key : null;
     form.setFieldsValue({
       lgc_details: {
-      title: lgc_details[key] ? lgc_details[key].title : '',
+        title: lgc_details[key] ? lgc_details[key].title : '',
-      descriptions: lgc_details[key] ? lgc_details[key].descriptions : ''
+        descriptions: lgc_details[key] ? lgc_details[key].descriptions : ''
       }
     });
     setLanguageStatus(key)
@@ -341,10 +473,15 @@ function Index() {
   const showModal = () => setIsModalVisible(true);
 
   const handleOk = () => {
-
+    if (!selectedTag) return;
-    setTags([...tags,selectedTag])
+    if (!remainderLanguage.some(item => item.label === selectedTag)) return;
-
+    if (remainderLanguage.includes(selectedTag)) return;
-    console.log("handleOkvalue")
+    let tempRemainderLanguage = remainderLanguage.filter((item)=>{
+      return item.label !== selectedTag;
+    })
+    setRemainderLanguage(tempRemainderLanguage)
+    setTags([...tags, selectedTag])
+    setSelectedTag(null);
     setIsModalVisible(false);
   }
 
@@ -352,46 +489,33 @@ function Index() {
 
 
   const handleTagChange = (value) => {
-    console.log("handleTagChange",value)
+    console.log("handleTagChange", value)
     setSelectedTag(value);
-    console.log("setSelectedTag",selectedTag)
+    console.log("setSelectedTag", selectedTag)
-    // setLanguageStatus()
-
-
-    // if (!tags.includes(value)) {
-    //   setTags([...tags, value]);
-    //   setLanguageStatus([...languageStatus, { [value]: { title: "", descriptions: "" } }]);
-    // }
-    // setSelectedTag(value);
-    // setIsModalVisible(false);
   };
 
   const handleChange = (field, value) => {
-    console.log("languageStatus",languageStatus)
+    console.log("languageStatus", languageStatus)
-    console.log("...lgc_details[languageStatus]",{...lgc_details[languageStatus]})
+    console.log("...lgc_details[languageStatus]", { ...lgc_details[languageStatus] })
-  // 更新整个 lgc_details 对象
+    // 更新整个 lgc_details 对象
-  const updatedLgcDetails = {
+    const updatedLgcDetails = {
-    ...lgc_details,
+      ...lgc_details,
-    [languageStatus]:{...lgc_details[languageStatus],[field]: value,lgc:languageStatus}
+      [languageStatus]: { ...lgc_details[languageStatus], [field]: value, lgc: languageStatus }
-  };
+    };
-  setLgc_details(updatedLgcDetails)
+    setLgc_details(updatedLgcDetails)
-  console.log("AAAAAAAAAAAAAA", lgc_details);
+    console.log("AAAAAAAAAAAAAA", lgc_details);
-
-  };
 
-  const findLanguageDetails = (tag) => {
-    const lang = languageStatus.find(lang => lang[tag]);
-    return lang ? lang[tag] : { title: "", descriptions: "" };
   };
 
-
   //树组件方法
   const handleNodeSelect = (_, { node }) => {
     setTags([languageLabel])
     // 如果点击的是同一个节点，不做任何操作
     if (selectedNodeid === node.key) return;
-  
     const fatherKey = node.key.split('-')[0];
+    setSelectedCategory(productProject[fatherKey])
+    
+    console.log("remainderLanguage",remainderLanguage)
     let initialQuotationData = null;
     let infoData = null;
     let lgcDetailsData = null;
@@ -403,229 +527,65 @@ function Index() {
         return true;
       }
     });
-  
+
+    console.log("infoData", infoData)
+
     // 累积 lgc_details 数据
     let newLgcDetails = {};
     lgcDetailsData.forEach(element => {
       newLgcDetails[element.lgc] = element;
     });
-    
+
     // 一次性更新 lgc_details
     setLgc_details(newLgcDetails);
-  
+
     setQuotation(initialQuotationData);
-  
+
-    console.log("descriptions",lgc_details)
+    console.log("descriptions", lgc_details)
     // 使用 setTimeout 确保 lgc_details 已经更新
-      form.setFieldsValue({
+    form.setFieldsValue({
-        info: {
+      info: {
-          title: infoData.title,
+        title: infoData.title,
-          code: infoData.code,
+        code: infoData.code,
-          product_type_name: infoData.product_type_name,
+        product_type_name: infoData.product_type_name,
-          city_name: infoData.city_name,
+        city_name: infoData.city_name,
-          remarks: infoData.remarks,
+        remarks: infoData.remarks,
-          open_weekdays: infoData.open_weekdays,
+        open_weekdays: infoData.open_weekdays,
-          recommends_rate: infoData.recommends_rate,
+        recommends_rate: infoData.recommends_rate,
-          unit_name: infoData.unit_name
+        duration: infoData.duration,
-        },
+        dept: infoData.dept,
-        lgc_details: {
+        km: infoData.km,
-          title: newLgcDetails[language]?.title || '',
+        dept_name: infoData.dept_name
-          descriptions: newLgcDetails[language]?.descriptions || ''
+      },
-        }
+      lgc_details: {
-      });
+        title: newLgcDetails[language]?.title || '',
+        descriptions: newLgcDetails[language]?.descriptions || ''
+      }
+    });
   };
-  
-
-
-
-
 
   const onSave = (values) => {
     const tempData = values;
     tempData['quotation'] = quotation;
-    tempData['extras'] = bindingData;
+    // tempData['extras'] = bindingData;
     // tempData['lgc_details'] = languageStatus;
     setSaveData(tempData);
     console.log("保存的数据", tempData)
   };
 
-
-  //绑定产品
-  const initBindingData = [
-    { id: '1', title: '英文导游', value: "100", age_type: '每人' },
-    { id: '2', title: '中文导游', value: "200", age_type: '每团' },
-    { id: '3', title: '可陪餐费', value: "400", age_type: '每人' },
-  ]
-  const [bindingData, setBindingData] = useState(initBindingData);
-  const isEditingBinding = (record) => record.id === editingidBinding;
-  const [editingidBinding, setEditingidBinding] = useState('');
-
-  const editBinding = (record) => {
-    form.setFieldsValue({ ...record });
-    setEditingidBinding(record.id);
-  };
-  const cancelBinding = () => {
-    setEditingidBinding('');
-  };
-  const EditableCellBinding = ({
-    editing,
-    dataIndex,
-    title,
-    inputType,
-    record,
-    index,
-    children,
-    ...restProps
-  }) => {
-    let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
-
-    if (dataIndex === 'unit_name' && editing) {
-      inputNode = (
-        <Select>
-          <Select.Option value="每人">每人</Select.Option>
-          <Select.Option value="每团">每团</Select.Option>
-        </Select>
-      );
-    }
-    return (
-      <td {...restProps}>
-        {editing ? (
-          <Form.Item
-            name={dataIndex}
-            style={{ margin: 0 }}
-            rules={[{ required: true, message: `请输入${title}！` }]}
-          >
-            {inputNode}
-          </Form.Item>
-        ) : (
-          children
-        )}
-      </td>
-    );
-  };
-  const bindingColums = [
-    { title: t('products:Name'), dataIndex: 'title', width: '25%', editable: true },
-    { title: t('products:price'), dataIndex: 'value', width: '25%', editable: true },
-    { title: t('products:Types'), dataIndex: 'age_type', width: '25%', editable: true },
-    {
-      title: t('products:operation'),
-      dataIndex: 'operation',
-      render: (_, record) => {
-        const editable = isEditingBinding(record);
-        return editable ? (
-          <span>
-            <a href="#!" onClick={() => handleSaveBinding(record.id)} style={{ marginRight: 8 }}>{t('products:save')}</a>
-            <Popconfirm title={t('products:sureCancel')} onConfirm={cancelBinding}><a>{t('products:cancel')}</a></Popconfirm>
-          </span>
-        ) : (
-          <span>
-            <a disabled={editingidBinding !== ''} onClick={() => editBinding(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
-            <Popconfirm title={t('products:sureDelete')} onConfirm={() => handleDeleteBinding(record.id)}>
-              <a>{t('products:delete')}</a>
-            </Popconfirm>
-          </span>
-        );
-      },
-    },
-  ].map(col => {
-    if (!col.editable) {
-      return col;
-    }
-    return {
-      ...col,
-      onCell: record => ({
-        record,
-        inputType: col.dataIndex === 'value' ? 'number' : 'text',
-        dataIndex: col.dataIndex,
-        title: col.title,
-        editing: isEditingBinding(record),
-      }),
-    };
-  });
-
-
-
-  const handleAddBinding = () => {
-    const newData = {
-      id: `${bindingData.length + 1}`,
-      title: '',
-      value: '',
-      age_type: '',
-    };
-    setBindingData([...bindingData, newData]);
-    setEditingidBinding(''); // 添加这一行
-  };
-
-  const handleSaveBinding = async (id) => {
-    try {
-      const row = await form.validateFields();
-      const newData = [...bindingData];
-      const { value, title, age_type } = row
-      const index = newData.findIndex((item) => id === item.id);
-      if (index > -1) {
-        const item = newData[index];
-        newData.splice(index, 1, { ...item, value, title, age_type });
-
-        setBindingData(newData);
-        setEditingidBinding('');
-      } else {
-        newData.push(row);
-        setBindingData(newData);
-        setEditingidBinding('');
-      }
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-    }
-  };
-
-
-  const handleDeleteBinding = (id) => {
-    const newData = [...bindingData];
-    const index = newData.findIndex((item) => id === item.id);
-    newData.splice(index, 1);
-    setBindingData(newData);
-  };
-
-  const componentsBinding = {
-    body: {
-      cell: EditableCellBinding,
-    },
-  };
-
-  const treeData = [
-    {
-      title: '综费',
-      // id: 'zf',
-      selectable: false,
-      children: [{ title: '北京怡然假日', id: 'bjyrjr' }]
-    },
-    {
-      title: '车费',
-      // id: 'cf',
-      selectable: false,
-      children: [
-        { title: '北京', id: 'bj' },
-        { title: '天津', id: 'tj' },
-        { title: '北京-天津', id: 'bj-tj-3-5' }
-      ]
-    }
-  ]
-
-  //Effect
-  useEffect(() => {
-    if (saveData) {
-
-    }
-  }, [saveData]);
-
   return (
     <div>
       <Row>
         <Col span={6}>
-          <Card style={{ width: "20%", position: "fixed",maxHeight: "80vh", overflowY: "auto"}}>
+          <Card style={{ width: "20%", position: "fixed", maxHeight: "80vh", overflowY: "auto" }}>
+            <Search style={{ marginBottom: 8 }} placeholder="Search" onChange={onChange} />
             <Tree
               onSelect={handleNodeSelect}
-              treeData={treeData1}
+              treeData={treeData}
+              expandedKeys={expandedKeys}
+              autoExpandParent={autoExpandParent}
+              onExpand={onExpand}
+              titleRender={titleRender}
             />
           </Card>
         </Col>
@@ -644,10 +604,14 @@ function Index() {
             >
               <h2>{t('products:productProject')}</h2>
               <Row gutter={16}>
-                {productProject.map((item, index) => (
+                {selectedCategory.map((item, index) => (
                   <Col span={8} id={index}>
                     <Form.Item name={['info', item.code]} label={item.name}>
-                      <Input />
+                      {item.code === "duration" ? (
+                        <Input suffix="H"/>
+                      ) : (
+                        <Input />
+                      )}
                     </Form.Item>
                   </Col>
                 ))}
@@ -675,14 +639,15 @@ function Index() {
                     placeholder="选择语言"
                     optionFilterProp="children"
                     onChange={handleTagChange}
-                  >
+                    value={remainderLanguage.some((item) => item.label === selectedTag) ? selectedTag : undefined}
-                 
+                    >
+
                     {
-                    remainderLanguage.map((value, label) => (
+                      remainderLanguage.map((value, label) => (
-                      <Select.Option key={value.label} value={value.label}>
+                        <Select.Option key={value.label} value={value.label}>
-                        {value.label}
+                          {value.label}
-                      </Select.Option>
+                        </Select.Option>
-                    ))
+                      ))
                     }
                   </Select>
                 </Modal>
@@ -690,13 +655,13 @@ function Index() {
                 <Form.Item label={t('products:Name')} name={['lgc_details', 'title']}>
                   <Input
                     style={{ width: "30%" }}
-                  onChange={(e) => handleChange('title', e.target.value)}
+                    onChange={(e) => handleChange('title', e.target.value)}
                   />
                 </Form.Item>
                 <Form.Item label={t('products:Description')} name={['lgc_details', 'descriptions']}>
                   <Input.TextArea
                     rows={4}
-                  onChange={(e) => handleChange('descriptions', e.target.value)}
+                    onChange={(e) => handleChange('descriptions', e.target.value)}
                   />
                 </Form.Item>
               </Card>
@@ -716,24 +681,12 @@ function Index() {
                 <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
                   {t('products:addQuotation')}
                 </Button>
+                
+                <Button onClick={handleBatchImport} type="primary" style={{ marginBottom: 16 }}>批量添加</Button>
               </Form.Item>
             </Card>
 
             <Card style={{ width: "80%" }}>
-              {/* <h2>{t('products:bindingProducts')}</h2>
-              <Form.Item name="extras">
-                <Table
-                  components={componentsBinding}
-                  bordered
-                  dataSource={bindingData}
-                  columns={bindingColums}
-                  rowClassName="editable-row"
-                  pagination={{ onChange: cancelBinding }}
-                />
-                <Button onClick={handleAddBinding} type="primary" style={{ marginBottom: 16 }}>
-                  {t('products:addBinding')}
-                </Button>
-              </Form.Item> */}
               <Extras productId={2} />
             </Card>
 
@@ -755,12 +708,26 @@ function Index() {
           onOk={handleDateOk}
           onCancel={() => setDatePickerVisible(false)}
         >
-          <DateComponent onDateChange={handleDateChange} />
+          <Date onDateChange={handleDateChange} />
         </Modal>
       )}
+
+      {
+        batchImportPriceVisible && (
+          <Modal
+            title="批量添加价格"
+            visible={batchImportPriceVisible}
+            onOk={handleBatchImportOK}
+            onCancel={() => setBatchImportPriceVisible(false)}
+            width="80%"
+          >
+              <BatchImportPrice/>
+          </Modal>
+        )
+      }
     </div>
   );
 }
-export default Index;
+export default Detail;