fix: 修改物料审核流程选择物料组逻辑

src/pages/commodity/material/materialAuditProcessConfig/add.tsx

@@ -68,6 +68,7 @@ const Add = () => {
   const isEdit = lastTypeParams === '/edit' && id
   const isEditable = isAdd || isEdit;
   const [initialValue, setInitialValue] = useState(null);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     if (isAdd) {
@@ -90,14 +91,13 @@ const Add = () => {
 
         if (data.suitableMaterialType === GROUP) {
           const res = await getProductMaterialProcessTreeRelMaterialGroup({ processId: id });
-          console.log(res);
-          materialGroups = res.data.map((_item) => _item.materialGroupId)
+          materialGroups = res.data.map((_item) => _item.materialGroupId.toString())
         }
 
         setInitialValue({
           ...data,
           materials: materials,
-          materialGroups: ['2', '15']
+          materialGroups: materialGroups
         });
       }
     }
@@ -113,6 +113,7 @@ const Add = () => {
   }
 
   const handleSubmit = async (values: SubmitDataType) => {
+    setLoading(true);
     let tempData = {}
     if (values.suitableMaterialType === 2) {
       tempData = {
@@ -149,17 +150,35 @@ const Add = () => {
       : postProductMaterialProcessUpdate
 
     const { data, code } = await service(postData);
+    setLoading(false)
     if (code === 1000) {
       history.back();
     }
   }
 
+  const renderTitle = () => {
+    if (isAdd) {
+      return '新增物料审核流程配置'
+    }
+    if (isEdit) {
+      return '编辑物料审核流程配置'
+    }
+    return '查看物料审核流程配置'
+  }
+
   return (
     <AnchorPage
-      title={"新增物料"}
+      title={renderTitle()}
       anchors={anchorHeader}
       extra={
-        <Button onClick={() => formActions.submit()}>保存</Button>
+        (isAdd || isEdit) && (
+          <Button 
+            onClick={() => formActions.submit()}
+            loading={loading}
+          >
+            保存
+          </Button>
+        )
       }
     >
       <NiceForm

src/pages/commodity/material/materialAuditProcessConfig/components/formilyTransfer/index.tsx

 import { Transfer, Tree } from 'antd';
-import React, { useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 
 interface Iprops {
   dataSource: any[],
@@ -15,9 +15,57 @@ interface Iprops {
 /** 如果有其中一个未选，那么都选中 */
 // const isChecked = (selectedKeys, eventKey) => selectedKeys.some((_item) => !eventKey.includes(_item))
 
+/** 
+ * 将tree 转为双向链表
+*/
+// let treeMap = {};
+const traverseToDataNode = (treeData, depth, result) => {
+  for(let i = 0; i < treeData.length; i++) {
+    const current = treeData[i];
+    const children = current.children || [];
+    result[current.id] = {
+      ...current,
+      depth: depth,
+      parent: result[current.parentId] || null
+    }
+    if (children.length > 0) {
+      traverseToDataNode(children, depth + 1, result)
+    }
+  }
+}
+
 const FormilyTransfer: React.FC<Iprops> & { isFieldComponent: boolean } = (props: Iprops) => {
   const { value, mutators, ...restProps } = props;
   const dataSource = props.props?.enum || [];
+  console.log(value, "value");
+
+  const treeNodes = useMemo(() => {
+    let treeMap = {};
+    traverseToDataNode(dataSource, 0, treeMap);
+    return treeMap
+  }, [dataSource])
+
+  /** 分层 */
+  const levelSet = useMemo(() => {
+    const map = new Map();
+    let maxLevel = 0;
+    const keys = Object.keys(treeNodes);
+    keys.forEach((_item) => {
+      const { depth, children } = treeNodes[_item];
+      const currentLevel = map.get(depth) || []
+      maxLevel = Math.max(maxLevel, depth);
+      map.set(depth, currentLevel.concat(treeNodes[_item]))
+    })
+    return { maxLevel, levelMap: map };
+  }, [treeNodes])
+
+  console.log("levelSet", levelSet)
+
+  console.log(treeNodes, "treeNodes");
+
+  console.log(dataSource, "dataSource");
+  // let depth = 0;
+
   const transferDataSource = [];
   function flatten(list = []) {
     list.forEach(item => {
@@ -27,17 +75,18 @@ const FormilyTransfer: React.FC<Iprops> & { isFieldComponent: boolean } = (props
   }
   flatten(dataSource);
 
-  const generateTree = (treeNodes = [], checkedKeys = [], parentKey = '') => {
+  const generateTree = (treeNodes = [], checkedKeys = [], parentKey = '', depth = 0) => {
     return treeNodes.map(({ children, ...props }) => {
-      const { checked, ...rest } = props
-      return {
+      const { checked, ...rest } = props;
+      const result = {
         ...rest,
         key: `${props.id}`,
         title: props.title,
         fullKey: `${parentKey}${props.id}`,
         disabled: checkedKeys.includes(props.id),
-        children: generateTree(children, checkedKeys, `${parentKey}${props.id}-`),
+        children: generateTree(children, checkedKeys, `${parentKey}${props.id}-`, depth++),
       }
+      return result
     });
   }
 
@@ -45,6 +94,61 @@ const FormilyTransfer: React.FC<Iprops> & { isFieldComponent: boolean } = (props
     mutators.change(datas)
   }
 
+  const onChecked = (checkedKeys, info) => {
+    const { checked, node } = info;
+    const newCheckedKeys = [...checkedKeys, node.id];
+
+    // 从上到下， 联动勾选
+    for(let i = 0; i < levelSet.maxLevel; i++) {
+      const entities = levelSet.levelMap.get(i);
+
+      entities.forEach(entity => {
+        const { id, node, children = [] } = entity;
+
+        if (newCheckedKeys.includes(id)) {
+          children
+            .forEach(childEntity => {
+              newCheckedKeys.push(childEntity.id);
+            });
+        }
+      })
+    }
+
+    // 从下而上，联动勾选
+    const visitedKeys = new Set();
+    for (let level = levelSet.maxLevel; level >= 0; level -= 1) {
+      const entities = levelSet.levelMap.get(level) || new Set();
+      entities.forEach(entity => {
+        const { parent, node } = entity;
+
+        if (!entity.parent || visitedKeys.has(entity.parent.id)) {
+          return;
+        }
+
+        let allChecked = true;
+
+        (parent.children || [])
+          .forEach(({ id }) => {
+            const checked = newCheckedKeys.includes(id);
+            if (allChecked && !checked) {
+              allChecked = false;
+            }
+           
+          });
+
+        if (allChecked) {
+          newCheckedKeys.push(parent.id);
+        }
+
+        visitedKeys.add(parent.key);
+      });
+    }
+
+    console.log("newCheckedKeys", newCheckedKeys);
+    return newCheckedKeys
+  }
+
+
   return (
     <Transfer
       {...restProps}
@@ -69,9 +173,8 @@ const FormilyTransfer: React.FC<Iprops> & { isFieldComponent: boolean } = (props
               treeData={treeData}
               onCheck={(checkedKeysValue, e) => {
                 const isChecked = e.checked;
-                const halfChecked = e.halfCheckedKeys;
-                const newCheckedKeys = checkedKeysValue.filter((_item) => !halfChecked.includes(_item));
-                onItemSelectAll(newCheckedKeys, isChecked);
+                const newData = onChecked(checkedKeys, e)
+                onItemSelectAll(newData, isChecked);
               }}
             />
           );