1.优化界面显示

2.对接供应商编辑接口

public/locales/zh/products.json

@@ -43,7 +43,7 @@
   "AuditDate": "审核时间",
 
   "productProject": "产品项目",
-  "Code": "代码",
+  "Code": "简码",
   "City": "城市",
   "Remarks": "备注",
   "tourTime": "游览时间",

src/views/products/Audit.jsx

@@ -152,7 +152,6 @@ const TypesPanels = (props) => {
     setShowTypes(_show);
 
     setActiveKey(isEmpty(_show) ? [] : [_show[0].key]);
-
     return () => {};
   }, [productsTypes, agencyProducts]);
 

src/views/products/Detail.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } 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';
@@ -6,26 +6,63 @@ import DateComponent from '@/components/date';
 import { fetchJSON } from "@/utils/request";
 import { type } from 'windicss/utils';
 import { searchAgencyAction, 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 { useHTLanguageSets } from '@/hooks/useHTLanguageSets';
+// import { useDefaultLgc } from '@/i18n/LanguageSwitcher';
 function Index() {
   const { t } = useTranslation();
   const [form] = Form.useForm();
   const [editingid, setEditingid] = useState('');
   const [tags, setTags] = useState(['中文', 'English']);
   const [isModalVisible, setIsModalVisible] = useState(false);
-  const [selectedTag, setSelectedTag] = useState('中文');
+  const [selectedTag, setSelectedTag] = useState(2);
   const [saveData, setSaveData] = useState(null);
   const [datePickerVisible, setDatePickerVisible] = useState(false);
   const [currentid, setCurrentid] = useState(null);
   const [languageStatus, setLanguageStatus] = useState([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
-  const [formState, setFormState] = useState({});
   const [selectedNodeid, setSelectedNodeid] = useState(null);
   const [selectedDateData, setSelectedDateData] = useState({ dateRange: null, selectedDays: [] });
-  const [startValue,setStartValue] = useState(null);
+  const [treeData1, setTreeData1] = useState([]);
-  const [endValue,setEndValue] = useState(null);
+  const productsTypes = useProductsTypes();
+  const [productsData, setProductsData] = useState(null);
+  const [quotation, setQuotation] = useState(null);
+  const [lgc_details,setLgc_details] = useState(null);
+  const { travel_agency_id } = useParams();
+
+
+  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);
+
+    console.log("setTreeData1", treeData);
+  };
+  
+
+  useEffect(() => {
+    fetchData();
+  }, [productsTypes]);
+
 
   const productProject = [
     { code: "code", name: t('products:Code') },
@@ -35,13 +72,6 @@ function Index() {
     { code: "recommends_rate", name: t('products:recommendationRate') }
   ];
 
-  const initialData = [
-    { id: '1', adult_cost: '1000', child_cost: "800", currency: 'RMB', age_type: '每人', group_size_min: 4, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
-    { id: '2', adult_cost: '1200', child_cost: "900", currency: 'RMB', age_type: '每人', group_size_min: 3, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
-    { id: '3', adult_cost: '1500', child_cost: "1200", currency: 'RMB', age_type: '每人', group_size_min: 2, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
-    { id: '4', adult_cost: '1100', child_cost: "700", currency: 'RMB', age_type: '每人', group_size_min: 1, group_size_max: 5, use_dates_start: '2024/06/12',use_dates_end: '2024/07/22', weekdays: '' },
-  ];
-  const [quotation, setQuotation] = useState(initialData);
   const isEditing = (record) => record.id === editingid;
 
   const edit = (record) => {
@@ -87,12 +117,12 @@ function Index() {
       id: `${quotation.length + 1}`,
       value: '',
       currency: '',
-      age_type: '',
+      unit_name: '',
       weekdays: '',
       use_dates_start: '',
       use_dates_end: '',
-      group_size_min:'',
+      group_size_min: '',
-      group_size_max:''
+      group_size_max: ''
     };
     setQuotation([...quotation, newData]);
   };
@@ -105,9 +135,8 @@ function Index() {
   const handleDateChange = ({ dateRange, selectedDays }) => {
 
     // 计算周末
-    const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday','Sunday'];
+    const weekdays = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
     let weekDayCount = selectedDays.map(day => weekdays.indexOf(day) + 1).sort().join(',');
-    console.log('Weekday Count:', weekDayCount);
     if (!weekDayCount || weekDayCount.length === 0) {
       weekDayCount = "全年";
     }
@@ -124,15 +153,10 @@ function Index() {
   const handleDateOk = () => {
     const { dateRange } = selectedDateData;
     const dateRangeList = dateRange.split('-');
-    console.log("dateRangeList",dateRangeList);
     const use_dates_start = dateRangeList[0];
     const use_dates_end = dateRangeList[1];
-
-    console.log("dateRange",dateRange)
-
     if (currentid !== null) {
       const newData = [...quotation];
-      console.log("newData",newData)
       const index = newData.findIndex((item) => currentid === item.id);
       if (index > -1) {
         newData[index].use_dates_start = use_dates_start;
@@ -155,7 +179,7 @@ function Index() {
       );
     }
 
-    if (dataIndex === 'age_type' && editing) {
+    if (dataIndex === 'unit_name' && editing) {
       inputNode = (
         <Select>
           <Select.Option value="每人">每人</Select.Option>
@@ -174,23 +198,22 @@ function Index() {
     }
 
     if (dataIndex === 'group_size' && editing) {
-      const groupSizeValue = `${record.group_size_min}-${record.group_size_max}`;
       return (
-        <td {...restProps} style={{ height: 80, display: 'flex', alignItems: 'center' }}>
+        <td {...restProps} style={{ height: 115, display: 'flex', alignItems: 'center' }}>
-      <InputNumber
+          <InputNumber
-        min={0}
+            min={0}
-        value={record.group_size_min}
+            value={record.group_size_min}
-        onChange={(value) => handleInputGroupSize('group_size_min', record.id, 'group_size', value)}
+            onChange={(value) => handleInputGroupSize('group_size_min', record.id, 'group_size', value)}
-        style={{ width: '50%', marginRight: '10px' }}
+            style={{ width: '50%', marginRight: '10px' }}
-      />
+          />
-      <span>-</span>
+          <span>-</span>
-      <InputNumber
+          <InputNumber
-        min={0}
+            min={0}
-        value={record.group_size_max}
+            value={record.group_size_max}
-        onChange={(value) => handleInputGroupSize('group_size_max', record.id, 'group_size', value)}
+            onChange={(value) => handleInputGroupSize('group_size_max', record.id, 'group_size', value)}
-        style={{ width: '50%', marginLeft: '10px' }}
+            style={{ width: '50%', marginLeft: '10px' }}
-      />
+          />
-    </td>
+        </td>
       );
     }
 
@@ -211,27 +234,19 @@ function Index() {
     );
   };
 
-  const handleInputGroupSize = (name,id, dataIndex, value ) => {
+  const handleInputGroupSize = (name, id, dataIndex, value) => {
-  
+
     const newData = [...quotation];
-    console.log("newData",newData);
-    console.log("value",value);
     const index = newData.findIndex((item) => id === item.id);
     if (index > -1) {
       const item = newData[index];
-      console.log("item",item)
+      newData[index] = { ...item, }
-      newData[index] = {...item,}
+      if (name === 'group_size_min') {
-      if(name==='group_size_min'){
         newData[index] = { ...item, group_size_min: value };
-        console.log("newData[index]",newData[index])
+      } else {
-      }else{
         newData[index] = { ...item, group_size_max: value };
-        console.log("newData[index]",newData[index])
       }
-      // const [groupSizeMin, groupSizeMax] = value.split('-').map(val => parseInt(val.trim()));
-      
       setQuotation(newData);
-      console.log("setQuotation",newData)
     }
 
   }
@@ -240,7 +255,7 @@ function Index() {
     { title: t('products:adultPrice'), dataIndex: 'adult_cost', width: '10%', editable: true },
     { title: t('products:childrenPrice'), dataIndex: 'child_cost', width: '10%', editable: true },
     { title: t('products:currency'), dataIndex: 'currency', width: '10%', editable: true },
-    { title: t('products:Types'), dataIndex: 'age_type', width: '10%', editable: true },
+    { title: t('products:Types'), dataIndex: 'unit_name', width: '10%', editable: true },
     {
       title: t('products:number'),
       dataIndex: 'group_size',
@@ -248,15 +263,16 @@ function Index() {
       editable: true,
       render: (_, record) => `${record.group_size_min}-${record.group_size_max}`
     },
-    
+
-    { title: t('products:validityPeriod'), 
+    {
-      dataIndex: 'validityPeriod', 
+      title: t('products:validityPeriod'),
-      width: '20%', 
+      dataIndex: 'validityPeriod',
+      width: '20%',
       editable: true,
       render: (_, record) => `${record.use_dates_start}-${record.use_dates_end}`
     },
 
-    { title: t('products:weekend'), dataIndex: 'weekdays', width: '10%' },
+    { title: t('products:Weekdays'), dataIndex: 'weekdays', width: '10%' },
 
     {
       title: t('products:operation'),
@@ -271,14 +287,14 @@ function Index() {
         ) : (
           <span>
             <a disabled={editingid !== ''} onClick={() => edit(record)} style={{ marginRight: 8 }}>{t('products:edit')}</a>
-            <Popconfirm title={t('products:sureCancel')} onConfirm={() => handleDelete(record.id)}>
+            <Popconfirm title={t('products:sureDelete')} onConfirm={() => handleDelete(record.id)}>
               <a>{t('products:delete')}</a>
             </Popconfirm>
           </span>
         );
       },
     },
-   
+
   ];
 
 
@@ -301,6 +317,10 @@ function Index() {
 
   const handleTagClick = (tag) => {
     setSelectedTag(tag);
+    console.log("handleTagClick",tag)
+    // form.setFieldsValue({
+
+    // })
 
   };
 
@@ -337,54 +357,68 @@ function Index() {
 
 
   //树组件方法
-  const handleNodeSelect = async (_, { node }) => {
+  const handleNodeSelect = (_, { node }) => {
-
+  
     // 如果点击的是同一个节点，不做任何操作
-    if (selectedNodeid === node.id) return;
+    if (selectedNodeid === node.key) return;
-
+  
-    // 保存当前表单数据
+    const fatherKey = node.key.split('-')[0];
-    if (selectedNodeid) {
+    let initialQuotationData = null;
-      await handleSaveForm();
+    let infoData = null;
-    }
+    let lgcDetailsData = null;
-
+    productsData[fatherKey].forEach(element => {
-    // 更新选中的节点
+      if (element.info.title === node.title) {
-    setSelectedNodeid(node.id);
+        initialQuotationData = element.quotation;
-
+        infoData = element.info;
-    // 加载新节点的表单数据
+        lgcDetailsData = element.lgc_details;
-    if (formState[node.id]) {
+        return true;
-      form.setFieldsValue(formState[node.id]);
+      }
-      setQuotation(formState[node.id].quotation || []);
+    });
-      setLanguageStatus(formState[node.id].lgc_details || languageStatus);
-    } else {
-      form.resetFields();
-      setQuotation(initialData);
-      setLanguageStatus([{ "中文": { title: "", description: "" } }, { "English": { title: "", description: "" } }]);
-    }
-  };
 
-  const handleSaveForm = async () => {
+    console.log("info",infoData)
-    try {
+  
-      const values = await form.validateFields();
+    // 累积 lgc_details 数据
-      const newFormState = {
+    let newLgcDetails = {};
-        ...formState,
+    lgcDetailsData.forEach(element => {
-        [selectedNodeid]: {
+      newLgcDetails[element.lgc] = element;
-          ...values,
+    });
-          quotation,
+    
-          lgc_details: languageStatus,
+    // 一次性更新 lgc_details
+    setLgc_details(newLgcDetails);
+  
+    setQuotation(initialQuotationData);
+  
+    // 使用 setTimeout 确保 lgc_details 已经更新
+    // setTimeout(() => {
+      form.setFieldsValue({
+        info: {
+          title: infoData.title,
+          code: infoData.code,
+          product_type_name: infoData.product_type_name,
+          city_name: infoData.city_name,
+          remarks: infoData.remarks,
+          open_weekdays: infoData.open_weekdays,
+          recommends_rate: infoData.recommends_rate,
+          unit_name: infoData.unit_name
         },
-      };
+        lgc_details: {
-      setFormState(newFormState);
+          title: newLgcDetails[selectedTag]?.title || '',
-    } catch (error) {
+          descriptions: newLgcDetails[selectedTag]?.descriptions || ''
-      console.error('Validation failed:', error);
+        }
-    }
+      });
+    // }, 0);
   };
+  
+
+
+
 
 
   const onSave = (values) => {
     const tempData = values;
     tempData['quotation'] = quotation;
     tempData['extras'] = bindingData;
-    tempData['lgc_details'] = languageStatus;
+    // tempData['lgc_details'] = languageStatus;
     setSaveData(tempData);
     console.log("保存的数据", tempData)
   };
@@ -419,7 +453,7 @@ function Index() {
   }) => {
     let inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
 
-    if (dataIndex === 'age_type' && editing) {
+    if (dataIndex === 'unit_name' && editing) {
       inputNode = (
         <Select>
           <Select.Option value="每人">每人</Select.Option>
@@ -551,8 +585,6 @@ function Index() {
     }
   ]
 
-
-
   //Effect
   useEffect(() => {
     if (saveData) {
@@ -560,39 +592,19 @@ function Index() {
     }
   }, [saveData]);
 
-  useEffect(() => {
-    searchAgencyAction('54,55').then((res)=>{
-      console.log("res",res)
-    })
-
-    const a = {
-      travel_agency_id:'1511'
-    }
-    getAgencyProductsAction(a).then((res1)=>{
-      console.log("res1",res1)
-    })
-  }, [])
-
-  useEffect(() => {
-    if (selectedNodeid) {
-      handleSaveForm();
-    }
-  }, [selectedNodeid]);
-
-
   return (
     <div>
       <Row>
-        <Col span={8}>
+        <Col span={6}>
-          <Card style={{ width: "20%", position: "fixed" }}>
+          <Card style={{ width: "20%", position: "fixed",maxHeight: "80vh", overflowY: "auto"}}>
             <Tree
               onSelect={handleNodeSelect}
-              treeData={treeData}
+              treeData={treeData1}
             />
           </Card>
         </Col>
 
-        <Col span={16}>
+        <Col span={18}>
           <Form form={form} name="control-hooks" onFinish={onSave}>
             <Card
               style={{ width: "80%" }}
@@ -647,18 +659,18 @@ function Index() {
                   </Select>
                 </Modal>
 
-                <Form.Item label={t('products:Name')}>
+                <Form.Item label={t('products:Name')} name={['lgc_details', 'title']}>
                   <Input
                     style={{ width: "30%" }}
-                    value={findLanguageDetails(selectedTag).title}
+                  // value={findLanguageDetails(selectedTag).title}
-                    onChange={(e) => handleChange('title', e.target.value)}
+                  // onChange={(e) => handleChange('title', e.target.value)}
                   />
                 </Form.Item>
-                <Form.Item label={t('products:Description')}>
+                <Form.Item label={t('products:Description')} name={['lgc_details', 'descriptions']}>
                   <Input.TextArea
                     rows={4}
-                    value={findLanguageDetails(selectedTag).description}
+                  // value={findLanguageDetails(selectedTag).description}
-                    onChange={(e) => handleChange('description', e.target.value)}
+                  // onChange={(e) => handleChange('description', e.target.value)}
                   />
                 </Form.Item>
               </Card>
@@ -703,8 +715,8 @@ function Index() {
             <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "20%" }}>
               {t('products:save')}
             </Button>
-            <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight:"5%" }}>
+            <Button type="primary" htmlType="submit" style={{ marginTop: 16, float: "right", marginRight: "5%" }}>
-               提交审核
+              提交审核
             </Button>
           </Form>
         </Col>