FEV2 / fw-cms

Commit 6d6595378c23f3fe03989e798909d59c65dbd66d

Authored by 莫红玲
2 parents 2d7d02aa 8fe06473

Merge branch 'Shinner-carinsur-loanClientRequires-better' into 'master' 

feat(carinsur): 贷款期客户保险要求优化文案



See merge request !706
Inline Side-by-side
Showing 10 changed files with 71 additions and 75 deletions
src/components/Condition/BrandToSeries/index.tsx
  View file @6d65953
... ... @@ -5,47 +5,50 @@ import * as API from './api';
5 5  
6 6 interface BrandToSeriesProps extends CascaderProps {
7 7 /** 第一层 品牌列表 */
8   - brandList?: API.Brand[] | API.optionItem[],
9   - labelInValue?: boolean,
10   - value?: any[],
11   - onChange?: (value: any, ...other: any) => any,
  8 + brandList?: API.Brand[] | API.optionItem[];
  9 + labelInValue?: boolean;
  10 + value?: any[];
  11 + onChange?: (value: any, ...other: any) => any;
12 12 /** 是否授权品牌（授权品牌接口是admin，非授权品牌接口是oop） */
13   - authBrand?: boolean
  13 + authBrand?: boolean;
  14 + placeholder?: string;
14 15 }
15 16  
16 17 /**
17 18 * 基于Cascader封装的品牌车系级联选择框
18 19 */
19 20 export default function BrandToSeries(props: BrandToSeriesProps) {
20   - const { value = [], onChange, labelInValue, brandList, placeholder = "请选择品牌/车系", authBrand, ...other } = props;
  21 + const { value = [], onChange, labelInValue, brandList, placeholder = '请选择品牌/车系', authBrand, ...other } = props;
21 22 const [options, setOptions] = useState<any[]>([]);
22 23 const [selected, setSelected] = useState<any[]>([]);
23 24  
24 25 useEffect(() => {
25 26 if (!brandList) {
26 27 const brandApi: any = authBrand ? API.authBrandsApi : API.brandByOopApi;
27   - brandApi().then(res => {
28   - const { data = [] } = res;
29   - const _data = data.map(brand => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false }));
30   - setOptions([..._data]);
31   - }).catch(e => {
32   - message.error(e.message);
33   - });
  28 + brandApi()
  29 + .then((res) => {
  30 + const { data = [] } = res;
  31 + const _data = data.map((brand) => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false }));
  32 + setOptions([..._data]);
  33 + })
  34 + .catch((e) => {
  35 + message.error(e.message);
  36 + });
34 37 } else {
35   - setOptions(brandList.map(brand => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false })))
  38 + setOptions(brandList.map((brand) => ({ id: brand.brandId || brand.id, name: brand.brandName || brand.name, isLeaf: false })));
36 39 }
37   - }, [])
  40 + }, []);
38 41  
39 42 useEffect(() => {
40 43 if (selected.length === 0 && value.length > 0) {
41 44 const valueBrandId = labelInValue ? value[0].id : value[0];
42   - loadData(options.filter(item => item.id === valueBrandId));
  45 + loadData(options.filter((item) => item.id === valueBrandId));
43 46 }
44 47 if (value[1] !== selected[1]) {
45   - const _value = labelInValue ? value.map(item => item.id) : value;
  48 + const _value = labelInValue ? value.map((item) => item.id) : value;
46 49 setSelected(_value);
47 50 }
48   - }, [value[1]])
  51 + }, [value[1]]);
49 52  
50 53 function loadData(selectedOptions?: CascaderOptionType[]) {
51 54 if (selectedOptions && selectedOptions.length > 0) {
... ... @@ -53,23 +56,25 @@ export default function BrandToSeries(props: BrandToSeriesProps) {
53 56 const targetOption = selectedOptions[length - 1];
54 57 targetOption.loading = true;
55 58 if (length === 1) {
56   - API.getSeriesApi(targetOption.id).then(res => {
57   - const { data = [] } = res;
58   - targetOption.loading = false;
59   - targetOption.children = data.map((list, index) => ({
60   - id: list.id,
61   - name: list.name,
62   - }));
63   - setOptions([...options])
64   - }).catch(e => {
65   - message.error(e.message);
66   - });
  59 + API.getSeriesApi(targetOption.id)
  60 + .then((res) => {
  61 + const { data = [] } = res;
  62 + targetOption.loading = false;
  63 + targetOption.children = data.map((list, index) => ({
  64 + id: list.id,
  65 + name: list.name,
  66 + }));
  67 + setOptions([...options]);
  68 + })
  69 + .catch((e) => {
  70 + message.error(e.message);
  71 + });
67 72 }
68 73 }
69 74 }
70 75  
71 76 function _onChange(value: string[], selectedOptions: any[] = []) {
72   - const _value = labelInValue ? selectedOptions.map(item => ({ id: item.id, name: item.name })) : value;
  77 + const _value = labelInValue ? selectedOptions.map((item) => ({ id: item.id, name: item.name })) : value;
73 78 setSelected(value || []);
74 79 onChange && onChange(_value || [], selectedOptions);
75 80 }
... ... @@ -82,9 +87,8 @@ export default function BrandToSeries(props: BrandToSeriesProps) {
82 87 loadData={loadData}
83 88 value={selected.length <= 0 ? undefined : selected}
84 89 onChange={_onChange}
85   - fieldNames={{ value: 'id', label: 'name', }}
  90 + fieldNames={{ value: 'id', label: 'name' }}
86 91 notFoundContent="暂无数据"
87 92 />
88   -
89 93 );
90 94 }
... ...
src/pages/carinsur/LoanClientRequires/components/AddModal/index.tsx
  View file @6d65953
... ... @@ -6,6 +6,7 @@ import BrandSeriesFormItem from &#39;../BrandSeriesFormItem&#39;;
6 6 import ShopSelectorByAll from '../ShopSelectorByAll';
7 7 import LoanTypeFormItem from '../LoanTypeFormItem';
8 8 import type { LabeledValue } from 'antd/lib/select';
  9 +import st from './style.less';
9 10  
10 11 interface Props {
11 12 visible: boolean;
... ... @@ -64,7 +65,7 @@ function AddModal({ visible, row, onCancel, onRefresh }: Props) {
64 65 <Form.Item label="适用品牌车系" name="allBrandSeries" rules={[{ required: true, message: '请选择' }]}>
65 66 <Radio.Group>
66 67 <Radio value={true}>全部品牌全部车系</Radio>
67   - <Radio value={false}>部分品牌部分车系</Radio>
  68 + <Radio value={false}>指定</Radio>
68 69 </Radio.Group>
69 70 </Form.Item>
70 71 <Form.Item
... ... @@ -80,7 +81,7 @@ function AddModal({ visible, row, onCancel, onRefresh }: Props) {
80 81 return null;
81 82 }
82 83 return (
83   - <Form.Item label="部分品牌部分车系" name="brandSeries" rules={[{ required: true, message: '请选择' }]}>
  84 + <Form.Item className={st.hidden} label={<></>} name="brandSeries" rules={[{ required: true, message: '请至少添加一种适应品牌车系' }]}>
84 85 <BrandSeriesFormItem />
85 86 </Form.Item>
86 87 );
... ...
src/pages/carinsur/LoanClientRequires/components/AddModal/style.less 0 → 100644
  View file @6d65953
  1 +.hidden {
  2 + :global {
  3 + .ant-form-item-required {
  4 + visibility: hidden;
  5 + }
  6 + }
  7 +}
0 8 \ No newline at end of file
... ...
src/pages/carinsur/LoanClientRequires/components/BrandSeriesAddModal.tsx
  View file @6d65953
... ... @@ -46,7 +46,7 @@ export default function Index({ brands, visible, value, onCancel, onChange }: Pr
46 46 }
47 47  
48 48 return (
49   - <Modal title={`${value ? '编辑' : '新增'}品牌车系`} style={{ width: 600 }} open={visible} onCancel={closeModal} onOk={form.submit}>
  49 + <Modal title={`${value ? '编辑' : '添加'}适用品牌车系`} style={{ width: 600 }} open={visible} onCancel={closeModal} onOk={form.submit}>
50 50 <Form form={form} labelCol={{ span: '6' }} onFinish={handleSave}>
51 51 <FormItem label="品牌" name="brand" rules={[{ required: true, message: '请选择品牌' }]}>
52 52 <Select
... ...
src/pages/carinsur/LoanClientRequires/components/BrandSeriesFormItem.tsx
  View file @6d65953
... ... @@ -77,7 +77,7 @@ export default function Index({ readOnly = false, value = [], onChange }: Props)
77 77 });
78 78 }}
79 79 >
80   - 新增
  80 + 添加
81 81 </Button>
82 82 </Row>
83 83 )}
... ...
src/pages/carinsur/LoanClientRequires/components/BrandSeriesModal.tsx
  View file @6d65953
... ... @@ -11,7 +11,7 @@ interface Props {
11 11 export default function Index({ brandSeriesModal, onCancel }: Props) {
12 12 const { visible, brandSeries = [] } = brandSeriesModal;
13 13 return (
14   - <Modal title="部分品牌部分车系" open={visible} onCancel={() => onCancel()} footer={null} width={600}>
  14 + <Modal title="适用品牌车系" open={visible} onCancel={() => onCancel()} footer={null} width={600}>
15 15 <BrandSeriesFormItem value={brandSeries} readOnly />
16 16 </Modal>
17 17 );
... ...
src/pages/carinsur/LoanClientRequires/components/Filter/index.tsx
  View file @6d65953
1   -import React from 'react';
  1 +import React, { memo } from 'react';
2 2 import { Row, Select } from 'antd';
3 3 import _ from 'lodash';
4 4 import type { PageParams } from '../../api';
5   -import { getBrandFilterApi, getSaleSeries, getShopApi } from '@/common/api';
  5 +import { getShopApi } from '@/common/api';
6 6 import useInitial from '@/hooks/useInitail';
  7 +import BrandToSeries from '@/components/Condition/BrandToSeries';
7 8  
8 9 interface Props {
9 10 innerParams?: any;
... ... @@ -11,8 +12,6 @@ interface Props {
11 12 }
12 13  
13 14 function Filter({ innerParams, setParams }: Props) {
14   - const { data: brands } = useInitial(getBrandFilterApi, [], {});
15   - const { data: series } = useInitial(getSaleSeries, [], {});
16 15 const { data: shops } = useInitial<CommonApi.OptionVO[], undefined>(getShopApi, [], undefined);
17 16  
18 17 const onChange = _.debounce((newParams) => {
... ... @@ -21,35 +20,16 @@ function Filter({ innerParams, setParams }: Props) {
21 20  
22 21 return (
23 22 <Row style={{ display: 'flex', flex: 1 }}>
24   - <Select
25   - style={{ width: 200 }}
26   - showSearch
27   - allowClear
28   - // optionFilterProp="children"
29   - placeholder="筛选品牌"
30   - options={brands}
31   - fieldNames={{ label: 'name', value: 'id' }}
32   - onChange={(value) => {
33   - onChange({ brandId: value });
34   - }}
35   - />
36   - <Select
37   - style={{ width: 200, marginLeft: 20 }}
38   - showSearch
39   - allowClear
40   - // optionFilterProp="children"
41   - placeholder="筛选车系"
42   - options={series}
43   - fieldNames={{ label: 'name', value: 'id' }}
44   - onChange={(value) => {
45   - onChange({ seriesId: value });
46   - }}
  23 + <BrandToSeries
  24 + //@ts-ignore
  25 + style={{ width: 260 }}
  26 + placeholder="筛选品牌车系"
  27 + onChange={(v) => onChange({ brandId: v[0], seriesId: v && v.length === 2 ? v[1] : undefined })}
47 28 />
48 29 <Select
49   - style={{ width: 200, marginLeft: 20 }}
  30 + style={{ width: 260, marginLeft: 20 }}
50 31 showSearch
51 32 allowClear
52   - // optionFilterProp="children"
53 33 placeholder="筛选门店"
54 34 options={shops}
55 35 fieldNames={{ label: 'name', value: 'id' }}
... ...
src/pages/carinsur/LoanClientRequires/components/LoanTypeFormItem.tsx
  View file @6d65953
... ... @@ -12,14 +12,15 @@ export default function Index({ form, name, label }: Props) {
12 12 return (
13 13 <Form.Item label={label} name={[name, 'type']} rules={[{ required: true, message: '请选择' }]}>
14 14 <Radio.Group>
  15 + <Radio value={LoanTypeEnum.无要求}>无要求</Radio>
15 16 <Radio value={LoanTypeEnum.购买即可}>购买即可</Radio>
16   - <Radio value={LoanTypeEnum.购保要求金额}>
  17 + <Radio value={LoanTypeEnum.保费有要求}>
17 18 <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'row' }}>
18   - <span>购保要求金额</span>
  19 + <span>保费有要求</span>
19 20 <Form.Item
20 21 noStyle
21 22 shouldUpdate={(prev, curr) => {
22   - if (prev[name] && curr[name] && prev[name].type !== curr[name].type && curr[name].type !== LoanTypeEnum.购保要求金额) {
  23 + if (prev[name] && curr[name] && prev[name].type !== curr[name].type && curr[name].type !== LoanTypeEnum.保费有要求) {
23 24 form.setFieldValue([name, 'amount'], undefined);
24 25 }
25 26 return prev[name] !== curr[name];
... ... @@ -27,7 +28,7 @@ export default function Index({ form, name, label }: Props) {
27 28 >
28 29 {({ getFieldValue }) => {
29 30 const type = (getFieldValue(name) ?? {}).type;
30   - if (type !== LoanTypeEnum.购保要求金额) return null;
  31 + if (type !== LoanTypeEnum.保费有要求) return null;
31 32 return (
32 33 <Form.Item
33 34 style={{ marginBottom: 0, marginLeft: 10 }}
... ... @@ -35,14 +36,13 @@ export default function Index({ form, name, label }: Props) {
35 36 required
36 37 rules={[{ required: true, message: '请填写金额' }]}
37 38 >
38   - <InputNumber addonBefore="≥" addonAfter="元" style={{ minWidth: 120 }} min={0.01} precision={2} placeholder="请填写金额" />
  39 + <InputNumber addonBefore="≥" addonAfter="元" style={{ width: 200 }} min={0.01} precision={2} placeholder="请填写金额" />
39 40 </Form.Item>
40 41 );
41 42 }}
42 43 </Form.Item>
43 44 </div>
44 45 </Radio>
45   - <Radio value={LoanTypeEnum.无要求}>无要求</Radio>
46 46 </Radio.Group>
47 47 </Form.Item>
48 48 );
... ...
src/pages/carinsur/LoanClientRequires/index.tsx
  View file @6d65953
... ... @@ -53,7 +53,7 @@ export default function Index() {
53 53 };
54 54  
55 55 const renderLoanTypeEle = (value: API.LoanType) => {
56   - return value ? (value.type !== LoanTypeEnum.购保要求金额 ? LoanTypeEnum[value.type] : `保费 ≥ ${value.amount}元`) : '--';
  56 + return value ? (value.type !== LoanTypeEnum.保费有要求 ? LoanTypeEnum[value.type] : `保费 ≥ ${value.amount}元`) : '--';
57 57 };
58 58  
59 59 return (
... ... @@ -100,7 +100,11 @@ export default function Index() {
100 100 )
101 101 }
102 102 />
103   - <Column title="适用门店" dataIndex="useShopIds" render={(value) => <TextWithMore title="适用门店" dataIndex="shopName" list={value} />} />
  103 + <Column
  104 + title="适用门店"
  105 + dataIndex="useShopIds"
  106 + render={(value) => <TextWithMore title="适用门店" dataIndex="shopName" list={value} unit="个门店" />}
  107 + />
104 108 <Column title="新保交强险" dataIndex="newTci" render={renderLoanTypeEle} />
105 109 <Column title="新保商业险" dataIndex="newVci" render={renderLoanTypeEle} />
106 110 <Column title="新保驾意险" dataIndex="newTai" render={renderLoanTypeEle} />
... ...
src/pages/carinsur/entity.ts
  View file @6d65953
... ... @@ -8,6 +8,6 @@ export interface IdNameOption {
8 8 }
9 9 export enum LoanTypeEnum {
10 10 '购买即可' = 1,
11   - '购保要求金额',
  11 + '保费有要求',
12 12 '无要求',
13 13 }
14 14 \ No newline at end of file
... ...