三级联动

src/pages/GoodsManage/SearchForm/index.jsx

-// import { Form } from '@ant-design/compatible';
-// import '@ant-design/compatible/assets/index.css';
 import { Form, Button, Input, Select, notification, Upload, Cascader, InputNumber } from 'antd';
-import '@ant-design/compatible/assets/index.css';
 import React, { Component } from 'react';
 import { connect } from 'dva';
 import styles from '../style.less';
@@ -14,6 +11,7 @@ const { Option } = Select;
 }))
 class goodsManage extends Component {
   formRef = React.createRef();
+
   componentDidMount() {
     this.props.onRef(this);
     this.handleSearch();
@@ -27,6 +25,7 @@ class goodsManage extends Component {
   handleSearch = () => {
     this.props.handleSearch(1);
   };
+
   valueMin = value => {
     const { getFieldValue, setFieldsValue } = this.formRef.current;
     const minVal = getFieldValue('supplyPriceMin');
@@ -34,11 +33,13 @@ class goodsManage extends Component {
       setFieldsValue({ supplyPriceMax: minVal });
     }
   };
+
   onReset = () => {
     const form = this.formRef.current;
     form.resetFields();
     this.props.onReset();
   };
+
   addSpu = () => {
     this.props.addSpu();
   };

src/pages/GoodsManage/TempleatModal/index.jsx

-import { Form, Modal, Input, Select, Cascader, Tag, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Select, Cascader, Tag, notification } from 'antd';
 import { da } from 'date-fns/locale';
 import React, { useState, useEffect } from 'react';
 import { getTemplate } from '../service';

src/pages/GoodsManage/createModal/index.jsx

@@ -2,13 +2,13 @@
 import { Form } from '@ant-design/compatible';
 
 import '@ant-design/compatible/assets/index.css';
+import { MinusCircleOutlined, PlusOutlined, RestOutlined } from '@ant-design/icons';
 import {
   Modal,
   Table,
   Button,
   Select,
   Input,
-  Icon,
   Row,
   Col,
   Checkbox,
@@ -680,9 +680,8 @@ class goodsManage extends Component {
                       />,
                     )}
                     {firstKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('firstKeys', k)}
                       />
                     ) : null}
@@ -695,7 +694,7 @@ class goodsManage extends Component {
                     onClick={() => this.add('firstKeys')}
                     style={{ textAlign: 'center' }}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -744,9 +743,8 @@ class goodsManage extends Component {
                       validateTrigger: ['onChange', 'onBlur'],
                     })(<Input key={k} style={{ width: '60%', marginRight: 8 }} />)}
                     {secondKeys.length > 0 ? (
-                      <Icon
+                      <MinusCircleOutlined
                         className="dynamic-delete-button"
-                        type="minus-circle-o"
                         onClick={() => this.remove('secondKeys', k)}
                       />
                     ) : null}
@@ -759,7 +757,7 @@ class goodsManage extends Component {
                     style={{ textAlign: 'center' }}
                     disabled={isJDGoods}
                   >
-                    <Icon type="plus" />
+                    <PlusOutlined />
                   </Button>
                 </FormItem>
               </Row>
@@ -815,7 +813,7 @@ class goodsManage extends Component {
                 size="small"
                 onClick={this.deleteImg}
                 style={{ marginTop: '10px' }}
-                icon="rest"
+                icon={<RestOutlined />}
               >
                 图片批量删除
               </Button>

src/pages/distributionArea/addArea/index.jsx

-import { Form, Modal, Input, Select, Cascader, Tag, notification } from 'antd';
+import { Form } from '@ant-design/compatible';
+import '@ant-design/compatible/assets/index.css';
+import { Modal, Input, Select, Cascader, Tag, notification } from 'antd';
 import React, { useState, useEffect } from 'react';
-import RcTreeSelect from 'rc-tree-select';
 import { el } from 'date-fns/locale';
 import { areaList, getAddTemplate, forbiddenAddress } from '../services';
 
@@ -9,10 +10,11 @@ const { Option } = Select;
 const AddAreaModal = props => {
   const {
     visible,
-    form: { getFieldDecorator, validateFields, resetFields },
+    form: { getFieldDecorator, validateFields, resetFields, setFieldsValue },
     templateData,
   } = props;
   const [addList, setAddList] = useState([]);
+  const [initList, setInitList] = useState([]);
   const [selectedList, setSelectedList] = useState([]);
   const [selected, setSelect] = useState([]);
   const a = [];
@@ -38,6 +40,7 @@ const AddAreaModal = props => {
         }),
       );
       setAddList(newData);
+      setInitList(newData);
     }
   };
 
@@ -59,14 +62,19 @@ const AddAreaModal = props => {
           value: itemData.addrId,
           addressId: itemData.addrId,
           addressLevel: itemData.addrLevel,
-          // isLeaf: itemData.addrLevel === 4,
           isLeaf: false,
         }),
       );
       targetOption.children = newData;
+      let checkedData = [];
+      if (targetOption.addressLevel > 1) {
+        checkedData = initList.concat(targetOption).concat(newData);
+      } else {
+        checkedData = initList.concat(newData);
+      }
+      targetOption.loading = false;
+      setAddList([...addList]);
     }
-    targetOption.loading = false;
-    setAddList([...addList]);
   };
   // 限制区域删除
   const preventDefault = val => {
@@ -119,45 +127,40 @@ const AddAreaModal = props => {
     });
   };
   // 判断是否重复
-  const getChilds = (data, { addressId }) => {
-    let flag = true;
+  const getChilds = (data, address) => {
     const arr = [];
-    function judgeChildren(dat) {
-      // eslint-disable-next-line no-plusplus
-      for (let i = 0; i < dat.length; i++) {
-        const item = dat[i];
-        if (!flag) {
-          return;
-        }
-        if (+item.addressId === +addressId) {
-          flag = false;
-        }
-        // if (item.children && item.children.length) {
-        //   judgeChildren(item.children);
-        // }
+    const reslutData = [];
+    for (let i = 0; i < data.length; i += 1) {
+      const item = data[i];
+      if (!item.addressName.includes(address.addressName)) {
+        arr.push(item);
       }
     }
-    judgeChildren(data);
-    return flag;
+    for (let i = 0; i < arr.length; i += 1) {
+      const item = arr[i];
+      if (!address.addressName.includes(item.addressName)) {
+        reslutData.push(item);
+      }
+    }
+    return reslutData;
   };
   const onPopupVisibleChange = labels => {
     if (!labels && selected?.length) {
+      let data = selectedList;
       const select = selected.slice(-1)[0];
       const arr = selected.map(x => x.label);
       select.addressName = arr.join('/');
-      const staust = getChilds(selectedList, select);
-      if (staust) {
-        selectedList.push(select);
-        // 用中文字符排序
-        const resultArray = selectedList.sort((param1, param2) =>
-          param1.addressName.localeCompare(param2.addressName, 'zh'),
-        );
-        setSelectedList([...resultArray]);
-        setSelect([]);
-      }
+      const staust = getChilds(data, select);
+      staust.push(select);
+      data = staust;
+      // 用中文字符排序
+      const resultArray = data.sort((param1, param2) =>
+        param1.addressName.localeCompare(param2.addressName, 'zh'),
+      );
+      setSelectedList([...resultArray]);
+      setSelect([]);
     }
   };
-
   useEffect(() => {
     getAreaList();
     if (props.templateData) {
@@ -189,9 +192,8 @@ const AddAreaModal = props => {
               loadData={loadData}
               onChange={(val, label) => onChange(val, label)}
               allowClear={false}
-              // expandTrigger="hover"
               changeOnSelect
-              onPopupVisibleChange={onPopupVisibleChange}
+              onDropdownVisibleChange={onPopupVisibleChange}
             />,
           )}
           {selectedList?.map((selItem, selIndex) => (