新增置换补贴

舒述军
1 parent dd3e22ff
Showing 1 changed file with 171 additions and 50 deletions
src/pages/order3/CarPurchaseSubsidy/ReplacementSubsidy/subpages/AddConfig/index.tsx
 import React, { useEffect, useState } from 'react';
-import { Table, Modal, Button, Form, Space, DatePicker, Tree, Input, message, Card, Row, Col} from 'antd';
-import CarSelect from '@/pages/order3/Common/CarSelect/index';
+import { Table, Button, Form, Space, DatePicker, Tree, Input, message, Card, Row, Col, Radio, Select, InputNumber} from 'antd';
 import {saveReplacementApi, ApplyData} from '@/pages/order3/CarPurchaseSubsidy/ReplacementSubsidy/api';
 import { getAllBrandApi, getSeriesApi } from "@/common/api";
 import useInitial from '@/hooks/useInitail';
 import NewDataModal from '@/pages/order3/Common/NewDataModal/index';
 import moment from 'moment';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import CarTableTreeAuth from '@/components/CarTableTreeAuth';
+import { PlusSquareOutlined } from '@ant-design/icons';
+import { CarAuthList } from '@/components/CarTableTreeAuth/entity';
+import { getShopApi, ShopVo, RequestShopParams } from '@/pages/order3/Common/api';
 import { isNil } from 'lodash';
 interface DataNode {
@@ -15,22 +18,21 @@ interface DataNode {
   isLeaf?: boolean;
   children?: DataNode[];
 }
+const Requirements = [{value: true, label: '必买'}, {value: false, label: '非必买'}];
 export default function ApplyModal() {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(false);
-  const [showTree, setShowTree] = useState<any[]>([]);
   const {data} = useInitial(getAllBrandApi, [], {});
-  const [subinfo, setSubinfo] = useState<number[]>([]);
-  const [afterCar, setAfterCar] = useState<number[]>([]);
-  const [hidden, setHidden] = useState<boolean>(true);
   const [treeData, setTreeData] = useState<any>([]);
   const [checked, setChecked] = useState<any[]>([]);
-  const [specKey, setSpecKey] = useState<any[]>([]);
-  const [brand, setBrand] = useState<any>();
   const [beforeData, setBeforeData] = useState<ApplyData[]>([]); // 前置资料
   const [afterData, setAfterData] = useState<ApplyData[]>([]); // 后置资料
   const [afterDay, setAfterDay] = useState<number>(); // 后置资料上传天数
+  const [shopList, setShopList] = useState<ShopVo[]>([]);
+  const [shopLoading, setShopLoading] = useState<boolean>(false);
+  const [carSelectData, setCarSelectData] = useState<CarAuthList[]>([]);
+  const [insure, setInsure] = useState<any>([{mustBuyTci: undefined, mustBuyVci: undefined, vciBuyAmount: undefined, id: 1}]);
   useEffect(() => {
     if (data.length) {
@@ -49,18 +51,6 @@ export default function ApplyModal() {
     }
   }, [checked.length]);
-  useEffect(() => {
-    brand && setChecked([brand]);
-  }, [brand]);
-
-  useEffect(() => {
-    if (subinfo.length>0) {
-      form.setFieldsValue({subsidyDataList: subinfo});
-    } else {
-      form.setFieldsValue({subsidyDataList: undefined});
-    }
-  }, [subinfo.length]);
-
 const onCheck = (value:any) => {
   setChecked(value);
 };
@@ -116,11 +106,7 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
     setTreeData((origin:any) => updateTreeData(origin, key, _childrenNode));
   };
   const handleCancel = () => {
-    setSpecKey([]);
-    setSubinfo([]);
-    setAfterCar([]);
     setChecked([]);
-    setHidden(true);
     setChecked([]);
   };
   const onFinsh = async () => {
@@ -137,6 +123,9 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
       applyShops: param.applyShops.map((item:any) => { return {shopId: item.value, shopName: item.label}; }), // 门店列表
       subsidyDataUploadApply: beforeData.map((v:any) => { return {applyUpload: 1, dataType: v.dataType, dataName: v.dataName}; }), // 申请时上传资料
       subsidyType: 2,
+      applyCarList: handleCarData(param.optionalAuth),
+      containOrder: param.containOrder,
+      insuranceRequire: param.insuranceRequire
     };
     if (checked.length === 0) {
       message.error("请选择本品牌范围！");
@@ -144,44 +133,35 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
     } else if (!isNil(afterDay) && afterData.length === 0) {
       message.error("请勾选交车后N天内上传的资料！");
       return;
-    } else if (param.applyCarType === 2 && param.applySeriesList.length === 0) { // 部分车系
-      message.error("请选择适用车辆！");
+    } else if (param.insuranceRequire && isNil(insure[0].mustBuyTci)) {
+      message.error("请选择是否购买交强险！");
+      return;
+    } else if (param.insuranceRequire && isNil(insure[0].mustBuyVci)) {
+      message.error("请选择商是否购买商业险购！");
       return;
-    } else if (param.applyCarType === 3 && showTree.length === 0) { // 部分车型
-      message.error("请选择适用车辆！");
+    } else if (param.insuranceRequire && isNil(insure[0].vciBuyAmount)) {
+      message.error("请选择输入商业险金额！");
       return;
     }
     if (!isNil(afterDay)) {
       _param.deliveryAfterDays = afterDay;
       _param.subsidyDataUploadNDay = afterData.map((item: any) => { return {applyUpload: 0, dataType: item.dataType, dataName: item.dateName}; });
     }
+    if (param.insuranceRequire) {
+      _param.mustBuyTci = insure[0].mustBuyTci;
+      _param.mustBuyVci = insure[0].mustBuyVci;
+      _param.vciBuyAmount = insure[0].vciBuyAmount;
+    }
     if (param.applyCarType === 2) {
       _param.applySpecList = param.applySeriesList.map((item:any) => { return {seriesId: item.value, seriesName: item.label}; });
     }
-    if (param.applyCarType === 3) {
-      const _showTree = JSON.parse(JSON.stringify(showTree));
-      _param.applySpecList = _showTree.map((item:any) => {
-        const _data = item.children.map((v:any) => {
-          return {
-            seriesId: item.key,
-            seriesName: item.title,
-            specId: v.key,
-            specName: v.title
-          };
-        });
-        return [..._data];
-      }).flat();
-    }
     const sameBrandRange = brandList(checked);
     _param.sameBrandRange = sameBrandRange;
     setLoading(true);
     saveReplacementApi(_param)
     .then(res => {
       message.success(res.result);
-      setSubinfo([]);
-      setAfterCar([]);
       setLoading(false);
-      setSpecKey([]);
     })
     .catch(e => {
       message.error(e.message);
@@ -189,10 +169,95 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
     });
   };
-  function onClose() {
-    form.resetFields();
-    setBrand(undefined);
-    setChecked([]);
+    /**
+   * 选择车辆范围回调
+   * @param value 车辆树形结构
+   */
+  function handleChange(value: CarAuthList[] = []) {
+    const brandIds: number[] = [];
+    const seriesIds: number[] = [];
+    const specIds: number[] = [];
+    value.forEach(v => {
+      if (v.children) {
+        v.children.forEach(k => {
+          if (k.children) {
+            const spec = k.children.map(q => q.specId);
+            specIds.push(...spec);
+          } else {
+            seriesIds.push(k.seriesId);
+          }
+        });
+      } else {
+        brandIds.push(v.brandId);
+      }
+    });
+    const parmas = {
+      brandIds,
+      seriesIds,
+      specIds
+    };
+    setCarSelectData(value || []);
+    getShopScope(parmas);
+    console.log(value);
+  }
+
+  /**
+   * 获取所选车辆的授权门店范围
+   * @param params 
+   */
+  function getShopScope(params: RequestShopParams) {
+    setShopLoading(true);
+    getShopApi(params)
+    .then(res => {
+      setShopLoading(false);
+      setShopList(res.data || []);
+    }).catch(e => {
+      setShopLoading(false);
+      setShopList([]);
+      message.error(e.message);
+    });
+  }
+
+  function handleInsureChange(name: string, value?: number) {
+    setInsure([{...insure[0], [name]: value}]);
+  }
+
+  function resetInsure() {
+    setInsure([{mustBuyTci: undefined, mustBuyVci: undefined, vciBuyAmount: undefined, id: 1}]);
+  }
+
+  /**
+   * 将树形车辆结构转换成扁平结构
+   * applyCarType为最细化层级的类型
+   * @param value 
+   * @returns 
+   */
+  function handleCarData(value: CarAuthList[]) {
+    const result: any = [];
+    let applyCarType = 1;
+    value.forEach(v => {
+      if (v.children) {
+        v.children.forEach(k => {
+          if (k.children) {
+            k.children.forEach(r => {
+              const item = {brandId: v.brandId, brandName: v.brandName, seriesId: k.seriesId, seriesName: k.seriesName, specId: r.specId, specName: r.specName};
+              result.push(item);
+              applyCarType = Math.max(applyCarType, 3);
+            });
+          } else {
+            const item = {brandId: v.brandId, brandName: v.brandName, seriesId: k.seriesId, seriesName: k.seriesName};
+            result.push(item);
+            applyCarType = Math.max(applyCarType, 2);
+          }
+        });
+      } else {
+        const item = { brandId: v.brandId, brandName: v.brandName, applyCarType: v.authType};
+        result.push(item);
+        applyCarType = Math.max(applyCarType, 1);
+      }
+    });
+    const _result = result.map((v: any) => ({...v, applyCarType}));
+    return _result;
   }
   return (
@@ -203,7 +268,22 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
             <Form
               form={form}
             >
-              {/* <CarSelect specKey={specKey} setSpecKey={setSpecKey} modalVis={visible} setFieldsValue={form.setFieldsValue} showTree={showTree} setShowTree={setShowTree} setBrand={setBrand} /> */}
+              <Form.Item
+                name="optionalAuth"
+                label="授权车辆范围"
+                rules={[{ required: true, message: "选择车辆" }]}
+                tooltip={<span style={{ color: '#ccc', fontSize: 12 }}>*点击图标<PlusSquareOutlined />展开授权详情</span>}
+              >
+                <CarTableTreeAuth value={carSelectData} onChange={handleChange} brandMultiple={false} />
+              </Form.Item>
+              <Form.Item
+                label="适用门店"
+                name="applyShops"
+                labelAlign="left"
+                rules={[{ required: true, message: "请选择适用门店" }]}
+              >
+                <Select mode="multiple" allowClear filterOption optionFilterProp="children" labelInValue placeholder="请选择" options={shopList.map(v => ({label: v.shopName, value: v.shopId}))} loading={shopLoading} />
+              </Form.Item>
               <Form.Item name="time" label="有效时间" rules={[{ type: 'array' as const, required: true, message: '请选择有效时间!' }]}>
                 <DatePicker.RangePicker showTime style={{width: "100%"}} />
               </Form.Item>
@@ -226,6 +306,47 @@ function updateTreeData(list: DataNode[], key: React.Key, children: DataNode[]):
               <Form.Item name="extraAmount" label="4S店老客户升级置换额外享受补贴" rules={[{required: true, pattern: /^(\d+|\d+\.\d{1,2})$/, message: "请输入正确的补贴值！"}]}>
                 <Input />
               </Form.Item>
+              <Form.Item labelAlign="left" label="保险要求" name="insuranceRequire" rules={[{required: true, message: "请选择保险要求！"}]}>
+                <Radio.Group onChange={resetInsure}>
+                  <Radio value={false}>无要求</Radio>
+                  <Radio value>有要求</Radio>
+                </Radio.Group>
+              </Form.Item>
+              <Form.Item
+                noStyle
+                shouldUpdate={(prevValues, curValues) => prevValues.insuranceRequire !== curValues.insuranceRequire}
+              >
+                {({ getFieldValue }) => {
+                const bool = getFieldValue('insuranceRequire');
+                return bool ? (
+                  <Card>
+                    <Table pagination={false} dataSource={insure} rowKey="id">
+                      <Table.Column
+                        title="交强险"
+                        dataIndex="mustBuyTci"
+                        render={(_text, record) => <Select value={_text} onChange={(e) => handleInsureChange("mustBuyTci", e)} placeholder="请选择" options={Requirements} />}
+                      />
+                      <Table.Column
+                        title="商业险"
+                        dataIndex="mustBuyVci"
+                        render={(_text, record) => <Select value={_text} onChange={e => handleInsureChange("mustBuyVci", e)} placeholder="请选择" options={Requirements} />}
+                      />
+                      <Table.Column
+                        title="商业险金额(≥元)"
+                        dataIndex="vciBuyAmount"
+                        render={(_text, record) => <InputNumber value={_text} onChange={e => handleInsureChange("vciBuyAmount", e)} controls={false} min={0} precision={2} placeholder="请输入金额" />}
+                      />
+                    </Table>
+                  </Card>
+                ) : null;
+              }}
+              </Form.Item>
+              <Form.Item labelAlign="left" label="政策适用范围" name="containOrder" rules={[{required: true, message: "请选择政策适用范围！"}]}>
+                <Radio.Group>
+                  <Radio value>是</Radio>
+                  <Radio value={false}>否</Radio>
+                </Radio.Group>
+              </Form.Item>
               <Form.Item
                 labelAlign="left"
                 label="置换补贴资料"