fix: 修改初始化数据

src/components/CustomTree/CTreeNode.jsx

 import React, { forwardRef } from 'react';
 import { Checkbox } from 'antd';
-import { CaretRightOutlined, CaretDownOutlined, LoadingOutlined } from '@ant-design/icons';
+import { RightOutlined, DownOutlined, LoadingOutlined } from '@ant-design/icons';
 import debounce from 'lodash/debounce';
 import styles from './index.less';
 
@@ -8,11 +8,12 @@ const CustomTree = forwardRef(props => {
   const { treeData } = props;
 
   const onChange = () => {
-    props.onChange(treeData.key, !treeData.checked, treeData.level);
+    props.onChange(treeData.key, !treeData.checked, treeData.level, treeData.children);
   };
 
   const onVisible = debounce(e => {
     e.persist();
+    if (treeData.isLoading) return;
     props.onVisibleChildren(
       treeData.key,
       !treeData.visibleChildren,
@@ -27,25 +28,28 @@ const CustomTree = forwardRef(props => {
     }
     if (treeData.isLeaf) {
       return (
-        <div onClick={onVisible}>
-          {treeData.visibleChildren ? <CaretDownOutlined /> : <CaretRightOutlined />}
+        <div onClick={onVisible} className={styles.CBIcon}>
+          {treeData.visibleChildren ? <DownOutlined /> : <RightOutlined />}
         </div>
       );
     }
     return <span />;
   };
   return (
-    <div className={styles['ccheck-wrapper']} key={`key${treeData.key}`}>
+    <div key={`key${treeData.key}`}>
       <div className={styles['ccheck-box']}>
         <div className={styles['ccheck-box--expand']}>{renderIcon()}</div>
         <Checkbox
           onChange={onChange}
           indeterminate={!treeData.checked && treeData.indeterminate}
           checked={treeData.checked}
-        >
+        />
+        <div className={styles['ccheck-box--label']} onClick={onVisible}>
           {props.label}
-          {treeData.value && treeData.value.length > 0 ? `(${treeData.value.length})` : ''}
-        </Checkbox>
+          {treeData.isLeaf && treeData.value && treeData.value.length > 0
+            ? `(${treeData.value.length})`
+            : ''}
+        </div>
       </div>
     </div>
   );

src/components/CustomTree/index.jsx

@@ -7,6 +7,15 @@ import CTreeNode from './CTreeNode';
 const CustomTree = forwardRef(props => {
   const [treeData, setTreeData] = useState([]);
   const [childrenList, setChildrenList] = useState([]);
+  const [initValue, setInitValue] = useState([]);
+
+  const initChildrenStatus = arr =>
+    arr.map(item => {
+      const obj = initValue.find(val => val.key === item.key) || {};
+      item.checked = obj.checked || item.checked || false;
+      item.indeterminate = obj.indeterminate || item.indeterminate || false;
+      return item;
+    });
 
   // 获取子列表
   const getChildrenList = list => {
@@ -14,7 +23,7 @@ const CustomTree = forwardRef(props => {
     const findArr = childrens => {
       childrens.forEach(node => {
         if (node.children && node.children.length) {
-          node.visibleChildren && arr.push(node.children);
+          node.visibleChildren && arr.push(initChildrenStatus(node.children, node.checked));
           findArr(node.children);
         }
       });
@@ -84,22 +93,30 @@ const CustomTree = forwardRef(props => {
     return list;
   };
 
+  // 更改子复选框状态
+  const updateChildren = (list, isChecked) => {
+    list.forEach(item => {
+      item.indeterminate = false;
+      item.checked = isChecked;
+      if (item.children && item.children.length) {
+        item.value = isChecked ? item.children.map(c => c.key) : [];
+        updateChildren(item.children, isChecked);
+      } else {
+        item.value = [];
+      }
+    });
+  };
+
   // 追加子树
-  const appendTreeData = (list, key, children) =>
-    list.map(node => {
+  const appendTreeData = (list, key, children, isChecked) =>
+    list.forEach(node => {
       if (node.key === key) {
-        return {
-          ...node,
-          children: children.length ? children : undefined,
-        };
-      }
-      if (node.children) {
-        return {
-          ...node,
-          children: appendTreeData(node.children, key, children),
-        };
+        node.children = children.length ? children : [];
+        isChecked && (node.value = children);
+        updateChildren(node.children, isChecked);
+      } else if (node.children && node.children.length) {
+        appendTreeData(node.children, key, children, isChecked);
       }
-      return node;
     });
 
   // 更新子树显示隐藏状态
@@ -136,36 +153,27 @@ const CustomTree = forwardRef(props => {
     return key;
   };
 
+  // 异步获取数据
+  const getSyncLoadChildrens = async (arr, ckey, parentChecked) => {
+    const res = await props.loadData({ key: ckey });
+    if (res && res.length) {
+      appendTreeData(arr, ckey, filterData(res, parentChecked), parentChecked);
+    }
+  };
+
   // 改变子树显示隐藏状态事件
   const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
-    let arr = [...treeData];
+    const arr = [...treeData];
     if (children && !children.length && typeof props.loadData === 'function') {
       ChangeVal(arr, ckey, true, 'isLoading');
       setTreeData(arr);
-      const res = await props.loadData({ key: ckey, children });
-      if (res && res.length) {
-        arr = appendTreeData(arr, ckey, filterData(res, parentChecked));
-      }
+      await getSyncLoadChildrens(arr, ckey, parentChecked);
     }
     updateVisible(arr, ckey, visible);
     setChildrenList(getChildrenList(arr));
     setTreeData(arr);
   };
 
-  // 更改子复选框状态
-  const updateChildren = (list, isChecked) => {
-    list.forEach(item => {
-      item.indeterminate = false;
-      item.checked = isChecked;
-      if (item.children && item.children.length) {
-        item.value = isChecked ? item.children.map(c => c.key) : [];
-        updateChildren(item.children, isChecked);
-      } else {
-        item.value = isChecked ? [item.key] : [];
-      }
-    });
-  };
-
   // 更改选中状态
   const changeChecked = (list, ckey, isChecked, pkey) => {
     let key = '';
@@ -180,9 +188,9 @@ const CustomTree = forwardRef(props => {
             node.checked = false;
           } else {
             node.checked = node.children.every(item => item.checked);
-            if (node.checked) {
-              node.value = [];
-            }
+            // if (node.checked) {
+            //   node.value = [];
+            // }
           }
           key = pkey;
         }
@@ -235,8 +243,11 @@ const CustomTree = forwardRef(props => {
   };
 
   // 切换选中状态事件
-  const onChange = (ckey, isChecked, level) => {
+  const onChange = async (ckey, isChecked, level, children) => {
     const datas = [...treeData];
+    if (isChecked && children && !children.length && typeof props.loadData === 'function') {
+      await getSyncLoadChildrens(datas, ckey, isChecked);
+    }
     changeChecked(datas, ckey, isChecked);
     const values = getCheckTreeValue(datas, isChecked);
     if (level === 1) {
@@ -266,36 +277,21 @@ const CustomTree = forwardRef(props => {
     }
   };
 
-  // const initTreeData = (arr = [], values = [], level) =>
-  //   arr.map(item => {
-  //     const valueObj = values.find(val => val.key === item.key) || {};
-  //     console.log('valueObj.children :>> ', valueObj.children);
-  //     const json = {
-  //       value: valueObj.children || item.value || [],
-  //       level,
-  //       visibleChildren: false,
-  //       checked: false,
-  //       indeterminate: false,
-  //       label: item[props.labelName || 'label'],
-  //       key: item[props.keyName || 'key'],
-  //       isLeaf: true,
-  //       isLoading: false,
-  //     };
-  //     getIsChecked(item.key, json);
-  //     if (item.children) {
-  //       json.children = initTreeData(item.children, valueObj.children, level + 1);
-  //     }
-  //     return json;
-  //   });
-
   // 初始化数初始化
-  const initTreeValue = (arr = [], values = [], parentChecked, level = 1) =>
+  const initTreeValue = (arr = [], values = [], parentChecked, level = 1) => {
+    const getValues = (item, valueObj) => {
+      if (item.checked && item.children && item.children.length) {
+        return item.children.map(c => c.key);
+      }
+      return (valueObj.children || []).map(c => c.key);
+    };
+
     arr.forEach(item => {
       const valueObj = values.find(val => val.key === item.key) || {};
       item.checked =
         (typeof parentChecked === 'boolean' && parentChecked) || valueObj.checked || false;
       item.indeterminate = valueObj.indeterminate || false;
-      item.value = valueObj.children || [];
+      item.value = getValues(item, valueObj);
       item.isLeaf = typeof item.isLeaf === 'boolean' ? item.isLeaf : true;
       item.isLoading = false;
       item.visibleChildren = item.visibleChildren || false;
@@ -304,11 +300,29 @@ const CustomTree = forwardRef(props => {
         initTreeValue(item.children, valueObj.children, item.checked, level + 1);
       }
     });
+  };
+  const getInitValue = () => {
+    const arr = [];
+    const getDeepValue = list => {
+      list.forEach(item => {
+        const obj = { ...item };
+        delete obj.children;
+        arr.push(obj);
+        if (item.children && item.children.length) {
+          getDeepValue(item.children);
+        }
+      });
+    };
+    getDeepValue(props.value);
+    return arr;
+  };
 
   useEffect(() => {
     const datas = [...treeData];
     initTreeValue(datas, props.value);
     setTreeData(datas);
+    const arr = getInitValue();
+    setInitValue(arr);
   }, [props.value]);
 
   useEffect(() => {

src/components/CustomTree/index.less

@@ -35,6 +35,13 @@
       margin-left: 0;
     }
   }
+  &--label {
+    padding: 0 10px;
+    cursor: pointer;
+  }
+}
+.CBIcon {
+  font-size: 12px;
 }
 .tree-children-box {
   position: absolute;

src/pages/distributionArea/addArea/index.jsx

@@ -86,13 +86,12 @@ const AddAreaModal = props => {
       }
     });
   };
-  const onLoadData = async ({ key, children }) => {
+  const onLoadData = async ({ key }) => {
     const res = await areaList({ parentId: key });
     return res || [];
   };
 
   useEffect(() => {
-    // getAreaList();
     if (props.templateData) {
       let arr = [];
       const dealData = list =>
@@ -118,7 +117,7 @@ const AddAreaModal = props => {
       title={props.templateData.status ? '编辑限制区域配送模板' : '添加限制区域配送模板'}
       maskClosable={false}
       visible={visible}
-      width="1000px"
+      width="800px"
       onCancel={() => onCancel()}
       onOk={() => handleOk()}
     >