feat(carinsur): 贷款期客户保险优化筛选

徐欣
1 parent 5eead9b7
Showing 2 changed files with 45 additions and 61 deletions
src/components/Condition/BrandToSeries/index.tsx
src/pages/carinsur/LoanClientRequires/components/Filter/index.tsx
@@ -5,47 +5,50 @@ import * as API from &#39;./api&#39;;
  
 interface BrandToSeriesProps extends CascaderProps {
   /** 第一层 品牌列表 */
-  brandList?: API.Brand[] | API.optionItem[],
-  labelInValue?: boolean,
-  value?: any[],
-  onChange?: (value: any, ...other: any) => any,
+  brandList?: API.Brand[] | API.optionItem[];
+  labelInValue?: boolean;
+  value?: any[];
+  onChange?: (value: any, ...other: any) => any;
   /** 是否授权品牌（授权品牌接口是admin，非授权品牌接口是oop） */
-  authBrand?: boolean
+  authBrand?: boolean;
+  placeholder?: string;
 }
  
 /**
  * 基于Cascader封装的品牌车系级联选择框
  */
 export default function BrandToSeries(props: BrandToSeriesProps) {
-  const { value = [], onChange, labelInValue, brandList, placeholder = "请选择品牌/车系", authBrand, ...other } = props;
+  const { value = [], onChange, labelInValue, brandList, placeholder = '请选择品牌/车系', authBrand, ...other } = props;
   const [options, setOptions] = useState<any[]>([]);
   const [selected, setSelected] = useState<any[]>([]);
  
   useEffect(() => {
     if (!brandList) {
       const brandApi: any = authBrand ? API.authBrandsApi : API.brandByOopApi;
-      brandApi().then(res => {
-        const { data = [] } = res;
-        const _data = data.map(brand => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false }));
-        setOptions([..._data]);
-      }).catch(e => {
-        message.error(e.message);
-      });
+      brandApi()
+        .then((res) => {
+          const { data = [] } = res;
+          const _data = data.map((brand) => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false }));
+          setOptions([..._data]);
+        })
+        .catch((e) => {
+          message.error(e.message);
+        });
     } else {
-      setOptions(brandList.map(brand => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false })))
+      setOptions(brandList.map((brand) => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false })));
     }
-  }, [])
+  }, []);
  
   useEffect(() => {
     if (selected.length === 0 && value.length > 0) {
       const valueBrandId = labelInValue ? value[0].id : value[0];
-      loadData(options.filter(item => item.id === valueBrandId));
+      loadData(options.filter((item) => item.id === valueBrandId));
     }
     if (value[1] !== selected[1]) {
-      const _value = labelInValue ? value.map(item => item.id) : value;
+      const _value = labelInValue ? value.map((item) => item.id) : value;
       setSelected(_value);
     }
-  }, [value[1]])
+  }, [value[1]]);
  
   function loadData(selectedOptions?: CascaderOptionType[]) {
     if (selectedOptions && selectedOptions.length > 0) {
@@ -53,23 +56,25 @@ export default function BrandToSeries(props: BrandToSeriesProps) {
       const targetOption = selectedOptions[length - 1];
       targetOption.loading = true;
       if (length === 1) {
-        API.getSeriesApi(targetOption.id).then(res => {
-          const { data = [] } = res;
-          targetOption.loading = false;
-          targetOption.children = data.map((list, index) => ({
-            id: list.id,
-            name: list.name,
-          }));
-          setOptions([...options])
-        }).catch(e => {
-          message.error(e.message);
-        });
+        API.getSeriesApi(targetOption.id)
+          .then((res) => {
+            const { data = [] } = res;
+            targetOption.loading = false;
+            targetOption.children = data.map((list, index) => ({
+              id: list.id,
+              name: list.name,
+            }));
+            setOptions([...options]);
+          })
+          .catch((e) => {
+            message.error(e.message);
+          });
       }
     }
   }
  
   function _onChange(value: string[], selectedOptions: any[] = []) {
-    const _value = labelInValue ? selectedOptions.map(item => ({ id: item.id, name: item.name })) : value;
+    const _value = labelInValue ? selectedOptions.map((item) => ({ id: item.id, name: item.name })) : value;
     setSelected(value || []);
     onChange && onChange(_value || [], selectedOptions);
   }
@@ -82,9 +87,8 @@ export default function BrandToSeries(props: BrandToSeriesProps) {
       loadData={loadData}
       value={selected.length <= 0 ? undefined : selected}
       onChange={_onChange}
-      fieldNames={{ value: 'id', label: 'name', }}
+      fieldNames={{ value: 'id', label: 'name' }}
       notFoundContent="暂无数据"
     />
-
   );
 }
-import React from 'react';
+import React, { memo } from 'react';
 import { Row, Select } from 'antd';
 import _ from 'lodash';
 import type { PageParams } from '../../api';
-import { getBrandFilterApi, getSaleSeries, getShopApi } from '@/common/api';
+import { getShopApi } from '@/common/api';
 import useInitial from '@/hooks/useInitail';
+import BrandToSeries from '@/components/Condition/BrandToSeries';
  
 interface Props {
   innerParams?: any;
@@ -11,8 +12,6 @@ interface Props {
 }
  
 function Filter({ innerParams, setParams }: Props) {
-  const { data: brands } = useInitial(getBrandFilterApi, [], {});
-  const { data: series } = useInitial(getSaleSeries, [], {});
   const { data: shops } = useInitial<CommonApi.OptionVO[], undefined>(getShopApi, [], undefined);
  
   const onChange = _.debounce((newParams) => {
@@ -21,35 +20,16 @@ function Filter({ innerParams, setParams }: Props) {
  
   return (
     <Row style={{ display: 'flex', flex: 1 }}>
-      <Select
-        style={{ width: 200 }}
-        showSearch
-        allowClear
-        // optionFilterProp="children"
-        placeholder="筛选品牌"
-        options={brands}
-        fieldNames={{ label: 'name', value: 'id' }}
-        onChange={(value) => {
-          onChange({ brandId: value });
-        }}
-      />
-      <Select
-        style={{ width: 200, marginLeft: 20 }}
-        showSearch
-        allowClear
-        // optionFilterProp="children"
-        placeholder="筛选车系"
-        options={series}
-        fieldNames={{ label: 'name', value: 'id' }}
-        onChange={(value) => {
-          onChange({ seriesId: value });
-        }}
+      <BrandToSeries
+        //@ts-ignore
+        style={{ width: 260 }}
+        placeholder="筛选品牌车系"
+        onChange={(v) => onChange({ brandId: v[0], seriesId: v && v.length === 2 ? v[1] : undefined })}
       />
       <Select
-        style={{ width: 200, marginLeft: 20 }}
+        style={{ width: 260, marginLeft: 20 }}
         showSearch
         allowClear
-        // optionFilterProp="children"
         placeholder="筛选门店"
         options={shops}
         fieldNames={{ label: 'name', value: 'id' }}