增加Header，把提交审核按钮和增加产品按钮移到Header

src/views/products/Detail.jsx

@@ -1,9 +1,13 @@
 import React, { useState, useEffect } from 'react';
-import { Tooltip, Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree, FloatButton, DatePicker, Spin, message, Divider } from 'antd';
+import { Tooltip, Button, Card, Col, Row, Breadcrumb, Table, Popconfirm, Form, Input, InputNumber, Tag, Modal, Select, Tree, FloatButton, DatePicker, Spin, message, Divider,Empty } from 'antd';
 import { Link, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
 import Extras from './Detail/Extras';
+import { isEmpty } from '@/utils/commons';
+import SecondHeaderWrapper from '@/components/SecondHeaderWrapper';
+import Header from './Detail/Header';
+import YearSelector from './Detail/YearSelector'
 import { useParams } from 'react-router-dom';
 import useProductsStore from '@/stores/Products/Index';
 import postProductsSave from '@/stores/Products/Index';
@@ -79,6 +83,8 @@ function Detail() {
     getAgencyProducts({ travel_agency_id: agency, use_year: year, audit_state });
     console.log("loading",loading);
     console.log("AgencyProducts",agencyProducts);
+    // navigate(`/products/${agency}/${year}/${audit_state}/edit`);
+
   };
   const travel_agency_name = activeAgency.travel_agency_name;
   const audit_state_id = activeAgency.audit_state_id;
@@ -1013,29 +1019,47 @@ function Detail() {
 
   };
 
+  //提交审核方法
+  const submitReview = async () => {
+    const formData = new FormData();
+    formData.append('use_year', use_year);
+    formData.append('travel_agency_id', travel_agency_id);
+    try {
+      const { errcode, result } = await postForm(`${HT_HOST}/Service_BaseInfoWeb/agency_submit`, formData);
+      console.log("errcode", errcode);
+      if (errcode === 0) {
+        message.success("提交审核成功");
+        navigate(`/products/${travel_agency_id}/${use_year}/${audit_state}/audit`);
+      } else {
+        message.error("提交审核失败");
+      }
+      console.log("result", result);
+    } catch (error) {
+      console.error("提交审核请求失败", error);
+      message.error("提交审核请求失败");
+    }
+  };
+
+  const handleStateChange = (newState) => {
+    console.log("newState",newState)
+    if(newState === 'addProducts'){
+      setAddProductVisible(true);
+    }
+    if(newState === 'submitReview'){
+      submitReview();
+    }
+  };
+
   return (
-    <Spin spinning={treeData.length === 0}>
+
-      <div>
+    // <Spin spinning={treeData.length === 0}>
+      <SecondHeaderWrapper loading={loading} backTo={`/products`} header={<YearSelector title={activeAgency.travel_agency_name} refresh={handleGetAgencyProducts} onStateChange={handleStateChange}/>}>
+      {isEmpty(agencyProducts) ? <Empty /> :<div>
         <Row>
           <Col span={6} className=' relative'>
             <Card className='w-[inherit] fixed overflow-y-auto max-h-[80%] max-w-[22%] overflow-x-auto'>
               <Row>
-                <Col>
                   <Search placeholder="Search" onChange={onChange} />
-                </Col>
-                <Col>
-                  <Divider type="vertical" />
-                </Col>
-                <Col>
-                  <Select
-                    options={yearOptions}
-                    // variant="borderless"
-                    className="w-24"
-                    size="middle"
-                    value={pickYear}
-                    onChange={handleYearChange}
-                  />
-                </Col>
               </Row>
               <Tree
                 style={{ overflowX: 'auto' }}
@@ -1076,7 +1100,6 @@ function Detail() {
                   })}
                 </Row>
 
-                {/* <Card title={ */}
                 <div style={{ marginBottom: "1%", marginLeft: "3%" }}>
                   {tags.map(tag => (
                     <Tag
@@ -1091,7 +1114,6 @@ function Detail() {
                   ))}
                   <Tag onClick={showModal} style={{ cursor: 'pointer' }}>+</Tag>
                 </div>
-                {/* }> */}
                 <Modal title="选择语言" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                   <Select
                     showSearch
@@ -1291,8 +1313,9 @@ function Detail() {
             </Button>
           ))}
         </Modal>
-      </div>
+      </div>}
-    </Spin>
+      </SecondHeaderWrapper>
+    // </Spin>
   );
 }
 export default Detail;

src/views/products/Detail/YearSelector.jsx

@@ -0,0 +1,81 @@
+import { useEffect, useState } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { App, Button, Divider, Select } from 'antd';
+import { useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
+import { useTranslation } from 'react-i18next';
+import useProductsStore, { postProductsQuoteAuditAction, } from '@/stores/Products/Index';
+import { isEmpty } from '@/utils/commons';
+import useAuthStore from '@/stores/Auth';
+import RequireAuth from '@/components/RequireAuth';
+// import PrintContractPDF from './PrintContractPDF';
+import { PERM_PRODUCTS_OFFER_AUDIT, PERM_PRODUCTS_OFFER_PUT } from '@/config';
+import dayjs from 'dayjs';
+import AuditStateSelector from '@/components/AuditStateSelector';
+const YearSelector = ({ refresh,onStateChange  }) => {
+  const { travel_agency_id, use_year, audit_state  } = useParams();
+  const { t } = useTranslation();
+  const stateMapVal = useProductsAuditStatesMapVal();
+  const navigate = useNavigate();
+
+  const yearOptions = [];
+  const currentYear = dayjs().year();
+  const baseYear = Number(use_year === 'all' ? currentYear : use_year);
+  for (let i = baseYear - 3; i <= baseYear + 3; i++) {
+    yearOptions.push({ label: i, value: i, });
+  }
+
+  const [param, setParam] = useState({ pick_year: baseYear, pick_agency: travel_agency_id, });
+  const [pickYear, setPickYear] = useState(baseYear);
+  const [pickAuditState, setPickAuditState] = useState();
+  useEffect(() => {
+    refresh(param);
+
+    return () => {};
+  }, [param]);
+
+  const emptyPickState = { value: '', label: t('products:State') };
+  useEffect(() => {
+    const baseState = audit_state === 'all' ? emptyPickState : stateMapVal[`${audit_state}`];
+    if (isEmpty(pickAuditState)) {
+      setPickAuditState(baseState);
+    }
+    return () => {};
+  }, [audit_state, stateMapVal])
+
+
+  const handleYearChange = (value) => {
+    setPickYear(value);
+    setParam((pre) => ({ ...pre, ...{ pick_year: value } }));
+  };
+  const handleAuditStateChange = (labelValue) => {
+    const { value } = labelValue || emptyPickState;
+    setPickAuditState(labelValue || emptyPickState);
+    setParam((pre) => ({ ...pre, ...{ pick_state: value } }));
+  };
+  const addproducts = () => {
+    onStateChange('addProducts');
+  };
+  const submitreview = () => {
+    onStateChange('submitReview');
+  }
+  return (
+    <div className='flex justify-end items-center gap-4 h-full'>
+      <div className='grow'>
+        <h2 className='m-0 leading-tight'>
+          <Divider type={'vertical'} />
+          <Select options={yearOptions} variant={'borderless'} className='w-24' size='large' value={pickYear} onChange={handleYearChange} />
+          <Divider type={'vertical'} />
+          <AuditStateSelector variant={'borderless'} className='w-32' size='large' value={pickAuditState} onChange={handleAuditStateChange} />
+        </h2>
+      </div>
+
+      <Button size='small' type={'primary'} onClick={addproducts}>
+          增加产品
+      </Button>
+      <Button size='small' type={'primary'} onClick={submitreview}>
+          提交审核
+      </Button>
+    </div>
+  );
+};
+export default YearSelector;