feat(carinsur): 新增贷款期客户保险配置功能

徐欣
1 parent 1857800c
Showing 7 changed files with 86 additions and 30 deletions
src/pages/carinsur/LoanClientRequires/api.ts
src/pages/carinsur/LoanClientRequires/components/AddModal/index.tsx
src/pages/carinsur/LoanClientRequires/components/BrandSeriesAddModal.tsx
src/pages/carinsur/LoanClientRequires/components/BrandSeriesFormItem.tsx
src/pages/carinsur/LoanClientRequires/components/BrandSeriesModal.tsx
src/pages/carinsur/LoanClientRequires/components/SeriesSelectorByAll.tsx
src/pages/carinsur/LoanClientRequires/index.tsx
@@ -4,7 +4,7 @@ import type { IdNameOption, ShopOption } from &#39;../entity&#39;;
 import { ANGEL_Host } from '@/utils/host';
 import type { Pagination } from '@/typing/common';
  
-export interface InsuranceItem {
+export interface LoanType {
   type: number;
   amount: number;
 }
@@ -18,12 +18,12 @@ export interface Item {
   allBrandSeries: boolean;
   brandSeries: brandSeriesItem[];
   useShopIds: ShopOption[];
-  newTci: InsuranceItem;
-  newVci: InsuranceItem;
-  newTai: InsuranceItem;
-  reNewTci: InsuranceItem;
-  reNewVci: InsuranceItem;
-  reNewTai: InsuranceItem;
+  newTci: LoanType;
+  newVci: LoanType;
+  newTai: LoanType;
+  reNewTci: LoanType;
+  reNewVci: LoanType;
+  reNewTai: LoanType;
 }
  
 export interface PageParams extends Pagination {
@@ -5,7 +5,7 @@ import { useRequest } from &#39;umi&#39;;
 import BrandSeriesFormItem from '../BrandSeriesFormItem';
 import ShopSelectorByAll from '../ShopSelectorByAll';
 import LoanTypeFormItem from '../LoanTypeFormItem';
-import { LabeledValue } from 'antd/lib/select';
+import type { LabeledValue } from 'antd/lib/select';
  
 interface Props {
   visible: boolean;
@@ -83,12 +83,12 @@ function AddModal({ visible, row, onCancel, onRefresh }: Props) {
         <Form.Item label="适用门店" name="useShopIds" rules={[{ required: true, message: '请选择' }]}>
           <ShopSelectorByAll />
         </Form.Item>
-        <LoanTypeFormItem form={form} name="newTci" label="新保交强险" />
-        <LoanTypeFormItem form={form} name="newVci" label="新保商业险" />
-        <LoanTypeFormItem form={form} name="newTai" label="新保驾意险" />
-        <LoanTypeFormItem form={form} name="reNewTci" label="续保交强险" />
-        <LoanTypeFormItem form={form} name="reNewVci" label="续保商业险" />
-        <LoanTypeFormItem form={form} name="reNewTai" label="续保驾意险" />
+        <LoanTypeFormItem form={form} key="newTci" name="newTci" label="新保交强险" />
+        <LoanTypeFormItem form={form} key="newVci" name="newVci" label="新保商业险" />
+        <LoanTypeFormItem form={form} key="newTai" name="newTai" label="新保驾意险" />
+        <LoanTypeFormItem form={form} key="reNewTci" name="reNewTci" label="续保交强险" />
+        <LoanTypeFormItem form={form} key="reNewVci" name="reNewVci" label="续保商业险" />
+        <LoanTypeFormItem form={form} key="reNewTai" name="reNewTai" label="续保驾意险" />
       </Form>
     </Modal>
   );
@@ -3,6 +3,7 @@ import { Modal, Form, Select } from &#39;antd&#39;;
 import type { brandSeriesItem } from '../api';
 import type { LabeledValue } from 'antd/lib/select';
 import SeriesSelectorByAll from './SeriesSelectorByAll';
+import _ from 'lodash';
  
 interface Props {
   brands?: CommonApi.OptionVO[];
@@ -49,6 +50,7 @@ export default function Index({ brands, visible, value, onCancel, onChange }: Pr
       <Form form={form} labelCol={{ span: '6' }} onFinish={handleSave}>
         <FormItem label="品牌" name="brand" rules={[{ required: true, message: '请选择品牌' }]}>
           <Select
+            disabled={!!value} // 编辑时不可编辑品牌
             placeholder="请选择"
             options={brands}
             fieldNames={{ label: 'name', value: 'id' }}
@@ -60,17 +62,21 @@ export default function Index({ brands, visible, value, onCancel, onChange }: Pr
         <Form.Item
           noStyle
           shouldUpdate={(prev, curr) => {
-            if (prev.brand !== curr.brand) {
-              form.setFieldValue('series', []);
+            if (!_.isEqual(prev.brand, curr.brand)) {
+              if (value) {
+                form.setFieldValue('series', value.id === curr.brand.value ? value.series.map((i) => ({ label: i.name, value: i.id })) : []);
+              } else {
+                form.setFieldValue('series', []);
+              }
             }
-            return prev.brand !== curr.brand;
+            return !_.isEqual(prev.brand, curr.brand);
           }}
         >
           {({ getFieldValue }) => {
             const brandId = (getFieldValue('brand') ?? {}).value;
             return (
               <FormItem label="车系" name="series" rules={[{ required: true, message: '请选择车系' }]}>
-                <SeriesSelectorByAll brandId={brandId} />
+                <SeriesSelectorByAll brandId={brandId} disabled={!brandId} disabledTip="请先选择品牌" />
               </FormItem>
             );
           }}
@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from &#39;react&#39;;
 import { Table, Divider, Popconfirm, Button, Row } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 import BrandSeriesAddModal from './BrandSeriesAddModal';
-import { geneRandomNum } from '@/utils/tools';
 import type { brandSeriesItem } from '../api';
 import TextWithMore from '@/components/TextWithMore';
 import useInitial from '@/hooks/useInitail';
@@ -56,12 +55,11 @@ export default function Index({ readOnly = false, value = [], onChange }: Props)
  
   const handleUpdate = (res: brandSeriesItem) => {
     const newVal = [...value];
-    if (res.id) {
-      const currIdx = newVal.findIndex((i) => i.id === res.id);
+    const currIdx = newVal.findIndex((i) => i.id === res.id); // 品牌 id
+    if (currIdx > -1) {
       newVal[currIdx] = res;
     } else {
-      const randomId = geneRandomNum(50000, 10000000, 1);
-      newVal.push({ ...res, id: randomId });
+      newVal.push(res);
     }
     onChange && onChange(newVal);
   };
+import React from 'react';
+import { Modal } from 'antd';
+import BrandSeriesFormItem from './BrandSeriesFormItem';
+import type { brandSeriesItem } from '../api';
+
+interface Props {
+  brandSeriesModal: { visible: boolean; brandSeries?: brandSeriesItem[] };
+  onCancel: () => void;
+}
+
+export default function Index({ brandSeriesModal, onCancel }: Props) {
+  const { visible, brandSeries = [] } = brandSeriesModal;
+  return (
+    <Modal title="部分品牌部分车系" open={visible} onCancel={() => onCancel()} footer={null} width={600}>
+      <BrandSeriesFormItem value={brandSeries} readOnly />
+    </Modal>
+  );
+}
@@ -28,6 +28,13 @@ export default function Index({
   const { data: list, setParams, loading } = useInitial<CommonApi.OptionVO[], number>(getSeriesApi, [], brandId, delay);
  
   useEffect(() => {
+    if (brandId) {
+      setParams(brandId, true);
+      setDelay(false);
+    }
+  }, [brandId]);
+
+  useEffect(() => {
     if (list && list.length > 0) {
       // @ts-ignore
       const newPostList = [{ id: -1, name: '全部车系' }].concat(list); // 前端手动在列表头部增加一个 {id: -1, name: '全部车系'} 的选项
@@ -37,11 +44,6 @@ export default function Index({
     }
   }, [list]);
  
-  useEffect(() => {
-    setParams(brandId, true);
-    setDelay(false);
-  }, []);
-
   return (
     <Spin spinning={loading && !disabled}>
       <Select
@@ -10,6 +10,7 @@ import * as API from &#39;./api&#39;;
 import _ from 'lodash';
 import TextWithMore from '@/components/TextWithMore';
 import { LoanTypeEnum } from '../entity';
+import BrandSeriesModal from './components/BrandSeriesModal';
  
 const { Column } = Table;
  
@@ -21,6 +22,14 @@ export default function Index() {
   }>({
     visible: false,
   });
+  // 查看部分品牌车系
+  const [brandSeriesModal, setBrandSeriesModal] = useState<{
+    visible: boolean;
+    brandSeries?: API.brandSeriesItem[];
+  }>({
+    visible: false,
+    brandSeries: [],
+  });
  
   const { list, paginationConfig, loading, innerParams, setParams } = usePagination<API.Item>(API.getLCRPage);
  
@@ -43,7 +52,7 @@ export default function Index() {
     });
   };
  
-  const renderLoanTypeEle = (value: API.InsuranceItem) => {
+  const renderLoanTypeEle = (value: API.LoanType) => {
     return value ? (value.type !== LoanTypeEnum.购保要求金额 ? LoanTypeEnum[value.type] : `保费 ≥ ${value.amount}元`) : '--';
   };
  
@@ -73,7 +82,24 @@ export default function Index() {
             rowKey="id"
             onChange={(_pagination) => setParams({ ..._pagination }, true)}
           >
-            <Column title="适用品牌车系" dataIndex="allBrandSeries" render={(value) => (value ? '全部品牌全部车系' : '查看 todo')} />
+            <Column
+              title="适用品牌车系"
+              dataIndex="allBrandSeries"
+              render={(value, row: API.Item) =>
+                value ? (
+                  '全部品牌全部车系'
+                ) : (
+                  <a
+                    onClick={(e) => {
+                      e.preventDefault();
+                      setBrandSeriesModal({ visible: true, brandSeries: row.brandSeries });
+                    }}
+                  >
+                    查看
+                  </a>
+                )
+              }
+            />
             <Column title="适用门店" dataIndex="useShopIds" render={(value) => <TextWithMore title="适用门店" dataIndex="shopName" list={value} />} />
             <Column title="新保交强险" dataIndex="newTci" render={renderLoanTypeEle} />
             <Column title="新保商业险" dataIndex="newVci" render={renderLoanTypeEle} />
@@ -118,6 +144,12 @@ export default function Index() {
           }}
           onRefresh={() => setParams({ ...innerParams }, true)}
         />
+        <BrandSeriesModal
+          brandSeriesModal={brandSeriesModal}
+          onCancel={() => {
+            setBrandSeriesModal({ visible: false });
+          }}
+        />
       </ConfigProvider>
     </PageHeaderWrapper>
   );