条件过滤组件开发

components/filter/api/index.ts

+import request, { Response } from '~/api/request';
+
+export interface FilterOptionResp {
+  id: number,
+  name: string
+}
+//商城接口
+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 const leasingApi = {
+  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');
+  },
+}
\ No newline at end of file

components/filter/compoents/brandItem/index.tsx

+import { Space, Button, Select } from 'antd';
+import styles from '../../index.module.scss';
+import { FilterOptionResp } from "../../api";
+
+type Props = {
+  data: Array<FilterOptionResp>;
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function BrandItem(props: Props) {
+  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}>
+        <Space size={40}>
+          {
+            props?.data?.map(item => {
+              return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
+            })
+          }
+        </Space>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

components/filter/compoents/categoryItem/index.tsx

+import { Space, Button, Select } from 'antd';
+import styles from '../../index.module.scss';
+import { FilterOptionResp } from "../../api";
+
+type Props = {
+  data: Array<FilterOptionResp>;
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function CategoryItem(props: Props) {
+  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}>
+        <Space size={40}>
+          {
+            props?.data?.map(item => {
+              return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
+            })
+          }
+        </Space>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

components/filter/compoents/modelItem/index.tsx

+import { Space, Button, Select } from 'antd';
+import styles from '../../index.module.scss';
+import { FilterOptionResp } from "../../api";
+
+type Props = {
+  data: Array<FilterOptionResp>;
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function ModelItem(props: Props) {
+  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}>
+        <Space size={40}>
+          {
+            props?.data?.map(item => {
+              return <Button type="link" key={item.id} onClick={(e) => onClick(item)}>{item.name}</Button>;
+            })
+          }
+        </Space>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

components/filter/compoents/partItem/index.tsx

+import { Space, Button, Select } from 'antd';
+import styles from '../../index.module.scss';
+import { FilterOptionResp } from "../../api";
+
+type Props = {
+  data: Array<FilterOptionResp>;
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function PartItem(props: Props) {
+  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}>
+        <Space size={40}>
+          {props?.data?.map((item) => {
+            return (
+              <Button type="link" key={item.id} onClick={(e) => onClick(item)}>
+                {item.name}
+              </Button>
+            );
+          })}
+        </Space>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file

components/filter/compoents/qualityItem/index.tsx

+import { Space, Button, Select } from 'antd';
+import styles from '../../index.module.scss';
+import { FilterOptionResp } from "../../api";
+
+type Props = {
+  data: Array<FilterOptionResp>;
+  onChange: (id: FilterOptionResp) => void;
+};
+
+export default function QualityItem(props: Props) {
+  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}>
+        <Space size={40}>
+          {props?.data?.map((item) => {
+            return (
+              <Button type="link" key={item.id} onClick={(e) => onClick(item)}>
+                {item.name}
+              </Button>
+            );
+          })}
+        </Space>
+      </div>
+    </div>
+  );
+}
\ 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';
+
+export default function RegionItem(){
+  const [productList, setProductList] = useState(Array<{}>);
+
+  useEffect(() => {
+    setProductList([{}, {}, {}, {}, {}, {}]);
+  }, []);
+
+  const onProvinceChange = (value: string) => {
+    console.log("省", value);
+  };
+
+  const onCityChange = (value: string) => {
+    console.log("市", value);
+  };
+  return (
+    <div className={styles.filterItem}>
+      <div className={styles.filterItemTitle}>地域：</div>
+      <div className={styles.filterItemMain}>
+        <Space size={40}>
+          <Select
+            bordered={false}
+            dropdownMatchSelectWidth={false}
+            placeholder="选择省"
+            onChange={onProvinceChange}
+            options={[
+              { value: "jack", label: "Jack" },
+              { value: "lucy", label: "Lucy" },
+              { value: "Yiminghe", label: "yiminghe" },
+              { value: "disabled", label: "Disabled", disabled: true },
+            ]}
+          />
+          <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 },
+            ]}
+          />
+        </Space>
+      </div>
+    </div>
+  ); 
+}

components/filter/compoents/resultItem/index.tsx

+import { Space, Tag } from "antd";
+import { FilterResult } from "../..";
+import styles from "../../index.module.scss";
+
+type Props = {
+  data: FilterResult;
+  onDel: (key: string) => void;
+};
+export default function ResultItem({data, onDel}: Props) {
+  return (
+    <div className={styles.filterItem}>
+      <div className={styles.filterItemTitle}>已选：</div>
+      <div className={styles.filterItemMain}>
+        <Space size={10}>
+          {data &&
+            Object.keys(data).map((key, i) => {
+              //@ts-ignore
+              let item = data[key];
+              return (
+                <Tag
+                  closable
+                  onClose={(e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                    onDel(key);
+                  }}
+                  key={i}
+                >
+                  {item?.name}
+                </Tag>
+              );
+            })}
+        </Space>
+      </div>
+    </div>
+  );
+}

components/filter/index.module.scss

+.filterWrap {
+  padding: 0px 32px;
+  background: #ffffff;
+  border-radius: 6px;
+
+  * {
+    font-size: 14px !important;
+  }
+}
+
+.filterItem {
+  height: 42px;
+  border-bottom: 1px dashed RGBA(222, 222, 222, 1);
+  display: flex;
+  align-items: center;
+
+  &:nth-last-child(1) {
+    border-bottom: none;
+  }
+
+  .filterItemTitle {
+    width: 80px;
+    margin-right: 8px;
+    font-family: MicrosoftYaHei;
+    color: rgba(153, 153, 153, 1);
+    line-height: 20px;
+  }
+
+  .filterItemMain {
+    flex: 1;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  :global .ant-select-selector {
+    padding: 0 12px 0 0;
+
+    .ant-select-selection-item,
+    .ant-select-selection-placeholder {
+      font-size: 16px;
+      font-family: MicrosoftYaHei;
+      color: #3e4149;
+    }
+  }
+
+  :global .ant-select-arrow {
+    color: #3e4149;
+  }
+
+  :global .ant-btn-link {
+    font-size: 16px;
+    font-family: MicrosoftYaHei;
+    color: #3e4149;
+    padding: 0;
+  }
+
+  :global .ant-tag {
+    padding: 4px 9px;
+  }
+}

components/filter/index.tsx

+import CategoryItem from "./compoents/categoryItem";
+import { FilterOptionResp, leasingApi, mallApi } from "./api";
+import ResultItem from "./compoents/resultItem";
+import RegionItem from "./compoents/regionItem";
+import styles from "./index.module.scss";
+import { useEffect, useState } from "react";
+import BrandItem from "./compoents/brandItem";
+import ModelItem from "./compoents/modelItem";
+import PartItem from "./compoents/partItem";
+import QualityItem from "./compoents/qualityItem";
+
+export type FilterResult = {
+  category?: FilterOptionResp | undefined;
+};
+
+type itemType = "类目" | "地域" | "品牌" | "部件" | "型号" | "成色";
+
+type Props = {
+  types: [itemType, itemType, itemType, itemType, itemType, itemType];
+  showResultItem: Boolean; //显示结果栏
+  categoryData?: Array<FilterOptionResp>;
+  regionData?: Array<FilterOptionResp>;
+  brandData?: Array<FilterOptionResp>;
+  modelData?: Array<FilterOptionResp>;
+  partData?: Array<FilterOptionResp>;
+  qualityData?: Array<FilterOptionResp>;
+  onChange: (filterResult: FilterResult) => void; //筛选条件更改事件
+};
+export default function Filter(props: Props) {
+  const [result, setResult] = useState<FilterResult>({});
+  const onChange = (item: FilterOptionResp, type: string) => {
+    let data: { [key: string]: FilterOptionResp } = {};
+    data[type] = item;
+    setResult({ ...result, ...data });
+  };
+
+  useEffect(() => {
+    props.onChange(result);
+  }, [result]);
+  const onDel = (key: string) => {
+    //@ts-ignore
+    delete result[key];
+    setResult({
+      ...result,
+    });
+  };
+  return (
+    <>
+      {props.types.includes("地域") && (
+        <div
+          className={styles.filterWrap}
+          style={{
+            marginBottom: 18,
+          }}
+        >
+          <RegionItem></RegionItem>
+        </div>
+      )}
+      <div className={styles.filterWrap}>
+        {props.types.includes("品牌") && (
+          <BrandItem
+            data={props.brandData || []}
+            onChange={(item: FilterOptionResp) => onChange(item, "brand")}
+          ></BrandItem>
+        )}
+        {props.types.includes("类目") && (
+          <CategoryItem
+            data={props.categoryData || []}
+            onChange={(item: FilterOptionResp) => onChange(item, "category")}
+          ></CategoryItem>
+        )}
+        {props.types.includes("部件") && (
+          <PartItem
+            data={props.partData || []}
+            onChange={(item: FilterOptionResp) => onChange(item, "part")}
+          ></PartItem>
+        )}
+        {props.types.includes("型号") && (
+          <ModelItem
+            data={props.modelData || []}
+            onChange={(item: FilterOptionResp) => onChange(item, "model")}
+          ></ModelItem>
+        )}
+        {props.types.includes("成色") && (
+          <QualityItem
+            data={props.qualityData || []}
+            onChange={(item: FilterOptionResp) => onChange(item, "quality")}
+          ></QualityItem>
+        )}
+
+        {props.showResultItem && (
+          <ResultItem data={result} onDel={onDel}></ResultItem>
+        )}
+      </div>
+    </>
+  );
+}
+
+Filter.mallApi = mallApi;
+Filter.leasingApi = leasingApi;