feat: 添加初始化tree

src/components/CustomTree/CTreeNode.jsx

@@ -8,7 +8,7 @@ const CustomTree = forwardRef(props => {
   const { treeData } = props;
 
   const onChange = () => {
-    props.onChange(treeData.key, !treeData.checked);
+    props.onChange(treeData.key, !treeData.checked, treeData.level);
   };
 
   const onVisible = debounce(e => {

src/components/CustomTree/index.jsx

@@ -3,13 +3,33 @@ import React, { useState, useEffect, forwardRef } from 'react';
 import { Row, Col } from 'antd';
 import styles from './index.less';
 import CTreeNode from './CTreeNode';
-// import { deepClone } from '@/utils/utils';
 
 const CustomTree = forwardRef(props => {
   const [treeData, setTreeData] = useState([]);
   const [childrenList, setChildrenList] = useState([]);
-  const [treeValue, setTreeValue] = useState([]);
 
+  const getChildrenList = list => {
+    const arr = [];
+    const findArr = childrens => {
+      childrens.forEach(node => {
+        if (node.children && node.children.length) {
+          node.visibleChildren && arr.push(node.children);
+          findArr(node.children);
+        }
+      });
+    };
+    findArr(list);
+    return arr;
+  };
+  const ChangeVal = (list, key, v, keyName) => {
+    list.forEach(node => {
+      if (node.key === key) {
+        node[keyName] = v;
+      } else if (node.children && node.children.length) {
+        ChangeVal(node.children, key, v);
+      }
+    });
+  };
   // 获取选中的值
   const getCheckValue = (list, isFrist) => {
     const arr = [];
@@ -24,14 +44,13 @@ const CustomTree = forwardRef(props => {
     };
     getChildrenCheckValue(list);
   };
-
   // 获取默认值是否选中
   const getIsChecked = (key, json) => {
     const checkfn = list => {
       list.forEach(item => {
         if (+item[props.valueKey || 'key'] === +key) {
           json.checked = !!item.checked;
-          json.indeterminate = true;
+          json.indeterminate = !item.checked;
           json.value = getCheckValue(item.children, 1);
         } else if (item.children) {
           checkfn(item.children);
@@ -40,69 +59,44 @@ const CustomTree = forwardRef(props => {
     };
     props.value && props.value.length && checkfn(props.value, json);
   };
-
-  const updateChildren = (list, isChecked) => {
-    list.forEach(item => {
-      item.indeterminate = isChecked;
-      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 filterData = (arr, parentChecked) => {
+    const list = [];
+    arr.forEach(item => {
+      const json = {
+        label: item.addrName,
+        key: +item.addrId,
+        level: item.addrLevel,
+        value: [],
+        checked: parentChecked || false,
+        indeterminate: false,
+        children: [],
+        isLeaf: true,
+        isLoading: false,
+      };
+      if (!parentChecked) {
+        getIsChecked(item.addrId, json);
       }
+      list.push(json);
     });
+    return list;
   };
 
-  const updateTreeData = list => {
-    list.forEach(node => {
-      let cksel = false;
-      let cklen = 0;
-      const value = [];
-      if (node.children && node.children.length) {
-        updateTreeData(node.children);
-        let indeterminate = false;
-        node.children.forEach(item => {
-          if (node.checked || item.checked) {
-            value.push(item.key);
-          }
-          item.indeterminate && (indeterminate = true);
-        });
-        cklen = value.length;
-        node.checked = cklen === node.children.length;
-        cksel = cklen === node.children.length || indeterminate;
+  const appendTreeData = (list, key, children) =>
+    list.map(node => {
+      if (node.key === key) {
+        return {
+          ...node,
+          children: children.length ? children : undefined,
+        };
       }
-      node.indeterminate = cklen > 0 || cksel;
-      node.value = value;
-    });
-  };
-
-  const changeChecked = (list, ckey, isChecked, pkey) => {
-    let key = '';
-    list.forEach(node => {
-      if (node.key === ckey) {
-        node.checked = isChecked;
-        const values = [...treeValue];
-        if (isChecked) {
-          const obj = { ...node };
-          obj.children = [];
-          values.push(obj);
-        } else {
-          key = pkey;
-          const index = treeValue.findIndex(item => item.key === node.key);
-          index > -1 && values.splice(index, 1);
-        }
-        setTreeValue(values);
-        node.children && node.children.length && updateChildren(node.children, isChecked);
-      } else if (node.children && node.children.length) {
-        if (changeChecked(node.children, ckey, isChecked, node.key) === node.key) {
-          node.checked = false;
-          key = pkey;
-        }
+      if (node.children) {
+        return {
+          ...node,
+          children: appendTreeData(node.children, key, children),
+        };
       }
+      return node;
     });
-    return key;
-  };
 
   const updateVisibleChildren = (list, visible) => {
     list.forEach(item => {
@@ -136,98 +130,107 @@ const CustomTree = forwardRef(props => {
     return key;
   };
 
-  const onChange = (ckey, isChecked) => {
-    const datas = [...treeData];
-    changeChecked(datas, ckey, isChecked);
-    updateTreeData(datas);
-    // updateVisible(datas, ckey, true);
-    console.log('datas :>> ', datas);
-    console.log('treeValue :>> ', treeValue);
-    // props.onChange(getCheckValue(datas));
-    setTreeData(datas);
-    // setTimeout(() => {
-    //   props.onChange(treeValue);
-    // }, 10);
-  };
-
-  const filterData = (arr, parentChecked) => {
-    const list = [];
-    arr.forEach(item => {
-      const json = {
-        label: item.addrName,
-        key: +item.addrId,
-        level: item.addrLevel,
-        value: [],
-        checked: parentChecked || false,
-        indeterminate: false,
-        children: [],
-        isLeaf: true,
-        isLoading: false,
-      };
-      if (!parentChecked) {
-        getIsChecked(item.addrId, json);
+  const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
+    let 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));
       }
-      list.push(json);
-    });
-    return list;
+    }
+    updateVisible(arr, ckey, visible);
+    setChildrenList(getChildrenList(arr));
+    setTreeData(arr);
   };
 
-  const appendTreeData = (list, key, children) =>
-    list.map(node => {
-      if (node.key === key) {
-        return {
-          ...node,
-          children: children.length ? children : undefined,
-        };
-      }
-      if (node.children) {
-        return {
-          ...node,
-          children: appendTreeData(node.children, key, children),
-        };
+  const updateChildren = (list, isChecked) => {
+    list.forEach(item => {
+      item.indeterminate = !isChecked;
+      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] : [];
       }
-      return node;
     });
+  };
 
-  const ChangeVal = (list, key, v, keyName) => {
+  const changeChecked = (list, ckey, isChecked, pkey) => {
+    let key = '';
     list.forEach(node => {
-      if (node.key === key) {
-        node[keyName] = v;
+      if (node.key === ckey) {
+        node.checked = isChecked;
+        key = pkey;
+        node.children && node.children.length && updateChildren(node.children, isChecked);
       } else if (node.children && node.children.length) {
-        ChangeVal(node.children, key, v);
+        if (changeChecked(node.children, ckey, isChecked, node.key) === node.key) {
+          if (!isChecked) {
+            node.checked = false;
+          } else {
+            node.checked = node.children.every(item => item.checked);
+            if (node.checked) {
+              node.value = [];
+              // updateChildren(node.children, true);
+              // console.log('node :>> ', ...node.children);
+            }
+          }
+          key = pkey;
+          node.indeterminate = !node.checked;
+        }
       }
     });
+    return key;
   };
 
-  const getChildrenList = list => {
+  // 获取选中的值
+  const getCheckTreeValue = list => {
     const arr = [];
-    const findArr = childrens => {
-      childrens.forEach(node => {
-        if (node.children && node.children.length) {
-          node.visibleChildren && arr.push(node.children);
-          findArr(node.children);
+    const getChildrenCheckValue = (childrens, json, values = []) => {
+      childrens.forEach(item => {
+        if (item.checked || item.indeterminate) {
+          const obj = { ...item };
+          obj.children = [];
+          json.children.push(obj);
+          if (!item.checked) {
+            const valueArr = values.find(val => val.key === item.key) || {};
+            if (item.children && item.children.length) {
+              getChildrenCheckValue(item.children, obj, valueArr.children);
+            } else if (valueArr && valueArr.key) {
+              obj.children = valueArr.children;
+            }
+          }
         }
       });
     };
-    findArr(list);
+    list.forEach(item => {
+      if (item.checked || item.indeterminate) {
+        const obj = { ...item };
+        obj.children = [];
+        if (!item.checked) {
+          const valueArr = props.value.find(val => val.key === item.key) || {};
+          if (item.children && item.children.length) {
+            getChildrenCheckValue(item.children, obj, valueArr.children);
+          } else if (valueArr && valueArr.key) {
+            obj.children = valueArr.children;
+          }
+        }
+        arr.push(obj);
+      }
+    });
     return arr;
   };
 
-  const onVisibleChildren = async (ckey, visible, children, parentChecked) => {
-    let arr = [...treeData];
-    console.log('arr :>> ', arr);
-    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));
-      }
+  const onChange = (ckey, isChecked, level) => {
+    const datas = [...treeData];
+    changeChecked(datas, ckey, isChecked);
+    const values = getCheckTreeValue(datas, isChecked);
+    if (level === 1) {
+      onVisibleChildren('', false);
     }
-    updateVisible(arr, ckey, visible);
-    updateTreeData(arr);
-    setChildrenList(getChildrenList(arr));
-    setTreeData(arr);
+    props.onChange(values);
   };
 
   const renderTreeNodes = data =>
@@ -249,25 +252,6 @@ const CustomTree = forwardRef(props => {
     }
   };
 
-  const fitTreeValue = () => {
-    const arr = [];
-    const fitChildrenTreeValue = list => {
-      list.forEach(item => {
-        if (typeof item.checked === 'boolean') {
-          if (item.checked) {
-            arr.push(item);
-          } else if (item.children && item.children.length) {
-            fitChildrenTreeValue(item.children);
-          }
-        } else {
-          arr.push(item);
-        }
-      });
-    };
-    fitChildrenTreeValue(props.value);
-    setTreeValue(arr);
-  };
-
   const initTreeData = (arr = [], level) =>
     arr.map(item => {
       const json = {
@@ -288,20 +272,21 @@ const CustomTree = forwardRef(props => {
       return json;
     });
 
-  const initTreeValue = (arr = []) =>
+  const initTreeValue = (arr = [], values = [], parentChecked) =>
     arr.forEach(item => {
-      item.checked = props.value.some(val => +val[props.valueKey || 'key'] === +item.key);
-      if (item.children) {
-        initTreeValue(item.children);
+      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 || [];
+      if (item.children && item.children.length) {
+        initTreeValue(item.children, valueObj.children, item.checked);
       }
     });
 
   useEffect(() => {
     const datas = [...treeData];
-    console.log('props.value :>> ', props.value);
-    fitTreeValue();
-    initTreeValue(datas);
-    updateTreeData(datas);
+    initTreeValue(datas, props.value);
     setTreeData(datas);
   }, [props.value]);
 
@@ -310,6 +295,7 @@ const CustomTree = forwardRef(props => {
     setTreeData(arr);
   }, [props.treeData]);
 
+  // 委托 - 点击别的地方关闭子层
   useEffect(() => {
     window.addEventListener('mouseup', handleMouseUp);
     return () => {
@@ -317,14 +303,6 @@ const CustomTree = forwardRef(props => {
     };
   }, [treeData]);
 
-  useEffect(
-    e => {
-      console.log('e :>> ', e);
-      // props.onChange(treeValue);
-    },
-    [treeValue],
-  );
-
   return (
     <div className={styles['tree-box']} id="my-custom-tree-box">
       <Row justify="space-between">

src/pages/distributionArea/addArea/index.jsx

@@ -48,15 +48,22 @@ const AddAreaModal = props => {
   const handleOk = () => {
     validateFields(async (error, fieldsValue) => {
       const newData = [];
-      console.log('fieldsValue :>> ', fieldsValue);
-      fieldsValue.list.map(itemData =>
-        newData.push({
-          addressId: itemData.key,
-          addressLevel: itemData.level,
-          addressName: itemData.label,
-        }),
-      );
+      const getValues = list => {
+        list.forEach(itemData => {
+          if (itemData.checked) {
+            newData.push({
+              addressId: itemData.key,
+              addressLevel: itemData.level,
+              addressName: itemData.label,
+            });
+          } else if (itemData.children && itemData.children.length) {
+            getValues(itemData.children);
+          }
+        });
+      };
       if (!error) {
+        console.log('fieldsValue :>> ', fieldsValue);
+        getValues(fieldsValue.list);
         if (props.templateData.status) {
           const data = await forbiddenAddress({
             templateId: props.templateData.id,
@@ -91,6 +98,9 @@ const AddAreaModal = props => {
       let arr = [];
       const dealData = list =>
         list.map(item => {
+          item.key = +item.addressId;
+          item.label = item.addressName;
+          item.indeterminate = !item.isForbidden;
           item.checked = item.isForbidden;
           item.children && item.children.length && dealData(item.children);
           return item;