filter组件地区选择项开发

components/filter/api/index.ts

@@ -5,51 +5,15 @@ export interface FilterOptionResp {
   name: string
 }
 
-export default {
-  category: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/category');
-  },
-  brand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/brand');
-  },
-  model: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/model');
-  },
-  part: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/parts');
-  },
-  quality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/quality');
-  },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/getSecondDistrictInfo');
-  },
-}
-
-//商城接口
-export const mallApi = {
-  category: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/category');
-  },
-  brand: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/brand');
-  },
-  model: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/model');
-  },
-  part: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/parts');
-  },
-  quality: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webProductMall/quality');
-  },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request('/pms/webDevice/getSecondDistrictInfo');
-  },
+export interface RegionResp {
+  "childInfo": RegionResp[] | null,
+  "id": number,
+  "level": number,
+  "name": string,
+  "pid": number
 }
 
-//设备租赁接口
-export const leasingApi = {
+export default {
   category: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request('/pms/webProductMall/category');
   },
@@ -65,7 +29,7 @@ export const leasingApi = {
   quality: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request('/pms/webProductMall/quality');
   },
-  region: (): Promise<Response<Array<FilterOptionResp>>> => {
+  region: (): Promise<Response<Array<RegionResp>>> => {
     return request('/pms/webDevice/getSecondDistrictInfo');
   },
 }
\ No newline at end of file

components/filter/compoents/regionItem/index.tsx

-import { Space, Select } from 'antd';
-import { useEffect, useState } from 'react';
-import styles from '../../index.module.scss';
-import api from '../../api';
+import { Space, Select } from "antd";
+import { useEffect, useState } from "react";
+import styles from "../../index.module.scss";
+import api, { RegionResp } from "../../api";
 
-export default function RegionItem(){
-  const [productList, setProductList] = useState(Array<{}>);
+type Props = {
+  onChange: (item: RegionResp) => void;
+};
 
+export default function RegionItem(props: Props) {
+  const [provinceList, setProvinceList] = useState<RegionResp[]>([]);
+  const [cityList, setCityList] = useState<RegionResp[]>([]);
   useEffect(() => {
-    setProductList([{}, {}, {}, {}, {}, {}]);
+    api.region().then((res) => {
+      setProvinceList(res?.result || []);
+    });
   }, []);
 
-  const onProvinceChange = (value: string) => {
-    console.log("省", value);
+  const onProvinceChange = (value: number, item: any) => {
+    console.log("省", value, item);
+    setCityList(item.childInfo || []);
   };
 
-  const onCityChange = (value: string) => {
+  const onCityChange = (value: number, item: any) => {
     console.log("市", value);
+    props.onChange(item);
   };
   return (
     <div className={styles.filterItem}>
@@ -27,27 +35,29 @@ export default function RegionItem(){
             dropdownMatchSelectWidth={false}
             placeholder="选择省"
             onChange={onProvinceChange}
-            options={[
-              { value: "jack", label: "Jack" },
-              { value: "lucy", label: "Lucy" },
-              { value: "Yiminghe", label: "yiminghe" },
-              { value: "disabled", label: "Disabled", disabled: true },
-            ]}
+            options={provinceList.map((item) => {
+              return {
+                ...item,
+                value: item.id,
+                label: item.name,
+              };
+            })}
           />
           <Select
             bordered={false}
             dropdownMatchSelectWidth={false}
             placeholder="选择市"
             onChange={onCityChange}
-            options={[
-              { value: "jack", label: "Jack" },
-              { value: "lucy", label: "Lucy" },
-              { value: "Yiminghe", label: "yiminghe" },
-              { value: "disabled", label: "Disabled", disabled: true },
-            ]}
+            options={cityList.map((item) => {
+              return {
+                ...item,
+                value: item.id,
+                label: item.name,
+              };
+            })}
           />
         </Space>
       </div>
     </div>
-  ); 
+  );
 }

components/filter/index.tsx

@@ -47,7 +47,9 @@ export default function Filter(props: Props) {
             marginBottom: 18,
           }}
         >
-          <RegionItem></RegionItem>
+          <RegionItem
+            onChange={(item: FilterOptionResp) => onChange(item, "region")}
+          ></RegionItem>
         </div>
       )}
       <div className={styles.filterWrap}>