项目资讯省市、日期筛选与项目需求加载时优化

pages/projectInfo/components/requirements/index.tsx

+import { Empty, Pagination, Spin } from "antd";
 import React, { useState, useEffect } from "react";
 import api, { Item } from "./api";
 import styles from "./index.module.scss";
 
-export default function Requirements() {
+type Props = {
+  params?: {
+    cityCode: number; //市编码
+    date: string; //时间 2023-05-19
+    districtCode: number; //区编码
+    provinceCode: number; //省编码
+  };
+};
+
+export default function Requirements(props: Props) {
+  const [loading, setLoading] = useState(false);
   const [list, setList] = useState<Array<Item>>([]);
   const [pageParams, setPageParams] = useState({
     pageNo: 1,
@@ -15,12 +26,13 @@ export default function Requirements() {
     //中断前一次请求
     abort?.abort();
     setAbort(new AbortController());
-  }, [pageParams]);
+  }, [pageParams, props.params]);
 
   useEffect(() => {
     if (!abort) {
       return;
     }
+    setLoading(true);
     api
       .listPublishPage(
         {
@@ -33,27 +45,51 @@ export default function Requirements() {
       .then((res) => {
         setList(res.result?.list || []);
         setCount(res.result?.totalCount || 0);
+        setLoading(false);
       });
   }, [abort]);
 
+  const onPageChange = (page: number, pageSize: number) => {
+    setPageParams({
+      ...pageParams,
+      pageNo: page,
+    });
+  };
+
   return (
-    <div className={styles.requirements}>
-      {list.map((item) => {
-        return (
-          <div
-            className={`${styles.item} ${!item.solved && styles.noResolve}`}
-            key={item.id}
-          >
-            <div className={styles.logo}></div>
-            <div className={styles.info}>
-              <div className={styles.title}>项目需求：电力巡检需要5名飞手</div>
-              <div className={styles.desc}>
-                具体需求：{item.requireDescription}
+    <Spin spinning={loading} delay={500}>
+      <div className={styles.requirements} style={{ height: 557 }}>
+        {list.map((item) => {
+          return (
+            <div
+              className={`${styles.item} ${!item.solved && styles.noResolve}`}
+              key={item.id}
+            >
+              <div className={styles.logo}></div>
+              <div className={styles.info}>
+                <div className={styles.title}>
+                  项目需求：电力巡检需要5名飞手
+                </div>
+                <div className={styles.desc}>
+                  具体需求：{item.requireDescription}
+                </div>
               </div>
             </div>
-          </div>
-        );
-      })}
-    </div>
+          );
+        })}
+
+        {list.length === 0 && <Empty></Empty>}
+      </div>
+      <Pagination
+        current={pageParams.pageNo}
+        defaultPageSize={pageParams.pageSize}
+        showSizeChanger={false}
+        showQuickJumper
+        total={count}
+        onChange={onPageChange}
+        hideOnSinglePage={true}
+        style={{ marginTop: 20 }}
+      />
+    </Spin>
   );
 }

pages/projectInfo/index.page.tsx

@@ -13,70 +13,18 @@ import Requirements from "./components/requirements"; //项目需求
 import Bids from "./components/bids"; //招投标项目
 import Cases from "./components/cases"; //业务案例
 import News from "./components/news"; //行业新闻
+import commonApi, { RegionResp } from "~/api";
 
-interface Option {
-  value: string | number;
-  label: string;
-  children?: Option[];
+export interface Params {
+  cityCode?: number; //市编码
+  date?: string; //时间 2023-05-19
+  districtCode?: number; //区编码
+  provinceCode?: number; //省编码
 }
 
-const options: Option[] = [
-  {
-    value: "zhejiang",
-    label: "Zhejiang",
-    children: [
-      {
-        value: "hangzhou",
-        label: "Hangzhou",
-        children: [
-          {
-            value: "xihu",
-            label: "West Lake",
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: "jiangsu",
-    label: "Jiangsu",
-    children: [
-      {
-        value: "nanjing",
-        label: "Nanjing",
-        children: [
-          {
-            value: "zhonghuamen",
-            label: "Zhong Hua Men",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const onChange = (value: string) => {
-  console.log(value);
-};
-
-const onDateChange: DatePickerProps["onChange"] = (date, dateString) => {
-  console.log(date, dateString);
-};
-
-const operations = (
-  <Space size={8} style={{ marginRight: 25 }}>
-    {
-      <Cascader
-        options={options}
-        //@ts-ignore
-        onChange={onChange}
-        placeholder="Please select"
-        borderRadiusSM={6}
-      />
-    }
-    <DatePicker onChange={onDateChange} />
-  </Space>
-);
+interface RegionOptions extends RegionResp {
+  value: string;
+}
 
 const items = ["项目需求", "招投标项目", "业务案例", "行业新闻"].map(
   (value) => {
@@ -108,6 +56,37 @@ const items = ["项目需求", "招投标项目", "业务案例", "行业新闻"
 );
 
 export default function ProjectInfo() {
+  const [region, setRegion] = useState<Array<RegionOptions>>([]);
+  const [params, setParams] = useState<Params | null>({});
+
+  useEffect(() => {
+    commonApi.region().then((res) => {
+      let temp = res.result || [];
+      let temp1: Array<RegionOptions> = [];
+      if (res.result) {
+        temp1 = temp.map((item) => {
+          let t = {
+            ...item,
+            value: item.id + "," + item.level,
+          };
+          return t;
+        });
+      }
+      setRegion(temp1);
+    });
+  }, []);
+
+  const onRegionChange = (value: string) => {
+    console.log(value);
+  };
+
+  const onDateChange: DatePickerProps["onChange"] = (date, dateString) => {
+    console.log(date, dateString);
+    setParams({
+      ...params,
+      date: dateString,
+    });
+  };
   return (
     <Layout layoutStyle={{ backgroundColor: "#fff" }}>
       <div style={{ backgroundColor: "#fff", minHeight: 820 }}>
@@ -118,7 +97,26 @@ export default function ProjectInfo() {
 
           <Tabs
             className={styles.tabs}
-            tabBarExtraContent={operations}
+            tabBarExtraContent={
+              <Space size={8} style={{ marginRight: 25 }}>
+                {
+                  <Cascader
+                    options={region}
+                    //@ts-ignore
+                    onChange={onRegionChange}
+                    placeholder="选择省市"
+                    borderRadiusSM={6}
+                    fieldNames={{
+                      label: "name",
+                      value: "value",
+                      children: "childInfo",
+                    }}
+                    changeOnSelect
+                  />
+                }
+                <DatePicker onChange={onDateChange} />
+              </Space>
+            }
             items={items}
             tabBarGutter={41}
           />