perf: 地接首页先选年份再展示

src/views/products/Detail.jsx

@@ -21,11 +21,15 @@ function Detail() {
 
   const { travelAgencyId } = usingStorage();
   const handleGetAgencyProducts = async ({ pick_year, pick_agency, pick_state } = {}) => {
-    const year = pick_year || use_year || switchParams.use_year || dayjs().year();
+    const year = pick_year || use_year || switchParams.use_year ; //|| dayjs().year();
     const agency = pick_agency || travel_agency_id || travelAgencyId;
     const state = pick_state ?? audit_state;
     const param = { travel_agency_id: agency, use_year: year, audit_state: state };
+    // console.log('✅', param)
     // setEditingProduct({});
+    if (isEmpty(param.travel_agency_id) || isEmpty(param.use_year)) {
+      return false;
+    }
     getAgencyProducts(param).catch((ex) => {
       setLoading(false);
       notification.error({

src/views/products/Detail/Header.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useParams, Link, useNavigate, useLocation } from "react-router-dom";
-import { App, Button, Divider, Popconfirm, Select } from "antd";
+import { App, Button, Divider, Popconfirm, Select, Typography } from "antd";
 import { ReloadOutlined } from "@ant-design/icons";
 import { useProductsAuditStatesMapVal } from "@/hooks/useProductsSets";
 import { useTranslation } from "react-i18next";
@@ -30,6 +30,7 @@ const Header = ({ refresh, ...props }) => {
   const showEditA = !location.pathname.includes("edit");
   const showAuditA = !location.pathname.includes("audit");
   const { travel_agency_id, use_year, audit_state } = useParams();
+  // console.log('📕',  travel_agency_id, use_year, audit_state )
   const { travelAgencyId } = usingStorage();
   const { t } = useTranslation();
   const isPermitted = useAuthStore((state) => state.isPermitted);
@@ -48,11 +49,12 @@ const Header = ({ refresh, ...props }) => {
   const navigate = useNavigate();
 
   const yearOptions = [];
-  const currentYear = switchParams.use_year || dayjs().year();
+  const currentYear = dayjs().year();
   const baseYear = use_year
-    ? Number(use_year === "all" ? currentYear : use_year)
-    : currentYear;
-  for (let i = currentYear - 5; i <= baseYear + 5; i++) {
+    ? Number(use_year === "all" ? switchParams.use_year : use_year)
+    : switchParams.use_year;
+  // console.log('🔰', baseYear, )
+  for (let i = currentYear - 5; i <= (currentYear + 2); i++) {
     yearOptions.push({ label: i, value: i });
   }
 
@@ -190,8 +192,8 @@ const Header = ({ refresh, ...props }) => {
 
   return (
     <div className="flex justify-end items-center gap-4 h-full">
-      <div className="grow">
-        <h2 className="m-0 leading-tight">
+      {/* <div className="grow"> */}
+        <h2 className="m-0 leading-tight me-auto flex items-center">
           {isPermitted(PERM_PRODUCTS_OFFER_AUDIT) ? (
             <VendorSelector
               value={{
@@ -212,10 +214,11 @@ const Header = ({ refresh, ...props }) => {
           <Select
             options={yearOptions}
             variant={"borderless"}
-            className="w-24"
+            className={"w-24"}
             size="large"
             value={pickYear}
             onChange={handleYearChange}
+            placeholder="年份"
           />
           <Divider type={"vertical"} />
           <AuditStateSelector
@@ -233,8 +236,9 @@ const Header = ({ refresh, ...props }) => {
             className="text-primary round-none"
             icon={<ReloadOutlined />}
           />
+          {isEmpty(pickYear) && <Typography.Text type="danger" className="font-normal text-sm ms-1">请选择年份</Typography.Text>}
         </h2>
-      </div>
+      {/* </div> */}
       {/* todo: export, 审核完成之后才能导出 */}
       <RequireAuth subject={PERM_PRODUCTS_OFFER_AUDIT}>
         <Button size="small" onClick={handleDownload}>