改-首页-无人机出租-设备类目接口修改

改-设备租赁-设备类目接口修改

components/filter/api/index.ts

@@ -18,6 +18,9 @@ export default {
   category: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request("/pms/webProductMall/category");
   },
+  categoryId: (): Promise<Response<Array<FilterOptionResp>>> => {
+    return request("/pms/webDevice/category");
+  },
   brand: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request("/pms/webDevice/brand");
   },

components/filter/compoents/category/index.tsx

+import { Space, Button, Select, Collapse } from 'antd';
+import styles from '../../index.module.scss';
+import api, { FilterOptionResp } from "../../api";
+import { useState, useEffect } from 'react';
+
+type Props = {
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function Category(props: Props) {
+  const [data, setData] = useState<FilterOptionResp[]>([]);
+
+  useEffect(() => {
+    api.categoryId().then((res) => {
+      setData(res?.result || []);
+    });
+  }, []);
+
+  const onClick = (item: FilterOptionResp) => {
+    props.onChange({
+      id: item.id,
+      name: "类目：" + item.name,
+    });
+  };
+
+  return (
+    <div className={styles.filterItem}>
+      <div className={styles.filterItemTitle}>类目：</div>
+      <div
+        className={`${styles.filterItemMain} ${
+          data.length <= 10 && styles.disabled
+        }`}
+      >
+        <Collapse ghost collapsible="icon" expandIconPosition="end">
+          <Collapse.Panel
+            header={
+              <Space size={40}>
+                {data.slice(0, 10).map((item) => {
+                  return (
+                    <Button
+                      type="link"
+                      key={item.id}
+                      onClick={(e) => onClick(item)}
+                    >
+                      {item.name}
+                    </Button>
+                  );
+                })}
+              </Space>
+            }
+            key="1"
+          >
+            <Space size={40}>
+              {data.slice(10).map((item) => {
+                return (
+                  <Button
+                    type="link"
+                    key={item.id}
+                    onClick={(e) => onClick(item)}
+                  >
+                    {item.name}
+                  </Button>
+                );
+              })}
+            </Space>
+          </Collapse.Panel>
+        </Collapse>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

components/filter/index.tsx

 import CategoryItem from "./compoents/categoryItem";
+import Category from "./compoents/category";
 import { FilterOptionResp, RegionResp } from "./api";
 import ResultItem from "./compoents/resultItem";
 import RegionItem from "./compoents/regionItem";
@@ -207,9 +208,9 @@ const Filter = (props: Props, ref: Ref<any>) => {
           ></CategoryItem>
         )}
         {props.types.includes("设备类目") && (
-          <CategoryItem
+          <Category
             onChange={(item: FilterOptionResp) => onChange(item, "categoryId")}
-          ></CategoryItem>
+          ></Category>
         )}
         {props.types.includes("部件") && (
           <PartItem

pages/home/waterfallFlowBody/api/index.ts

@@ -42,12 +42,12 @@ export interface RegionResp {
 }
 
 export const equipmentLeasingApi = {
-  deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
-    return request("/pms/webProductMall/category");
-  },
   deviceBrand: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request("/pms/webDevice/deviceBrand");
   },
+  deviceCategory: (): Promise<Response<Array<FilterOptionResp>>> => {
+    return request("/pms/webDevice/category");
+  },
   deviceModel: (): Promise<Response<Array<FilterOptionResp>>> => {
     return request("/pms/webDevice/deviceModel");
   },

pages/home/waterfallFlowBody/index.tsx

@@ -109,8 +109,8 @@ export default function WaterfallFlowBody() {
   const [rightTopDomList, setRightTopDomList] = useState<JSX.Element>();
   const [rightBottomDomList, setRightBottomDomList] = useState<JSX.Element>();
 
-  const { deviceCategory, deviceBrand, deviceModel } = equipmentLeasingApi;
-  const eqApiTypeList = ["categoryId", "brandId", "modelId"];
+  const { deviceBrand , deviceCategory, deviceModel } = equipmentLeasingApi;
+  const eqApiTypeList = ["brandId", "categoryId", "modelId"];
 
   const { listAllModel , listAllBrand , listAllCategory, listAllParts, listAllQuality } = mallApi;
   const mallApiTypeList = [
@@ -138,8 +138,8 @@ export default function WaterfallFlowBody() {
   useEffect(() => {
     (async () => {
       let res1 = await Promise.all([
-        deviceCategory(),
         deviceBrand(),
+        deviceCategory(),
         deviceModel(),
       ]);
       let res2 = await Promise.all([