fix: 去除上次提交时保存的值对本次提交的影响，记录所有form的值而不是只变更的值

src/pages/Detail/CommitAuditModal.js

@@ -157,41 +157,209 @@ function CommitAuditModal(props) {
   const treeData = currentId => {
     const list = getNextNodes(currentId, 'custom-circle');
     const fun = nodes => {
-      const re = nodes?.forEach((item, idx) => {
-        const data = getNextNodes(item.Id, 'custom-circle');
-        if (data || data.length > 0) list.push(...data);
-        fun(data);
+      const re = nodes?.forEach(item => {
+        const nextNodes = getNextNodes(item.Id, 'custom-circle');
+        if (nextNodes || nextNodes.length > 0) list.push(...nextNodes);
+        fun(nextNodes);
       });
     };
     fun(list);
 
-    const fun2 = list => {
-      const parents = list.filter(item => list.findIndex(node => node.Id == item.parentId) == -1);
-      let translator = (parents, children) => {
+    const fun2 = listParams => {
+      const parents = listParams.filter(
+        item => listParams.findIndex(node => node.Id == item.parentId) == -1
+      );
+      const translator = (p, children) => {
         setLength(length + 1);
-        parents.forEach(parent => {
+        p.forEach(parent => {
           children.forEach((current, index) => {
             if (current.parentId === parent.Id) {
-              let temp = JSON.parse(JSON.stringify(children));
+              const temp = JSON.parse(JSON.stringify(children));
               temp.splice(index, 1);
               translator([current], temp);
-              if (!parent.children.find(item => item.Id == current.Id))
+              if (!parent.children.find(item => item.Id === current.Id))
                 parent.children.push(current);
             }
           });
         });
       };
-      translator(parents, list);
+      translator(parents, listParams);
       return parents;
     };
     return fun2(list);
   };
 
+  const changeAudit = id => {
+    const node = flowDetail.nodes.find?.(item => item.Id === id);
+    setAuditId(node?.node_id);
+  };
+
+  const getFromData = idList => {
+    const data = formComponentValues;
+    const result = [];
+    //获取流转节点的层级关系
+    let len = 0;
+    let list = [];
+    idList.forEach(item => {
+      if (len < item.length) len = item.length;
+    });
+    for (let i = 0; i < len; i++) {
+      idList.forEach(item => {
+        if (item && item[i]) list.push(item[i]);
+      });
+    }
+    let firstList = [...new Set(list)];
+    // let attachment = await upload();
+    firstList.forEach(id => {
+      let approvalNode = flowDetail.nodes.find?.(item => item.Id == id);
+      if (!approvalNode) return;
+      const prevValues = data.length
+        ? data.find(item => item.template_node_id === approvalNode.Id).formComponentValues
+        : [];
+      let values = data[approvalNode.Id] || prevValues || [];
+      let audit_list = [],
+        cc_list = [];
+      approvalProcess[approvalNode.Id]?.forEach(item => {
+        let arr = item[0].is_cc == 1 ? cc_list : audit_list;
+        if (item[0].type == 'role') return arr.push(item[0].nowValue);
+        return arr.push(item[0].value);
+      });
+      const formItem = {
+        flow_id: approvalNode.flow_id,
+        template_node_id: approvalNode.Id,
+        formComponentValues: [...values], // { name: '附件', value: JSON.stringify(attachment) }
+        audit_list,
+        cc_list,
+      };
+      result.push(JSON.stringify(formItem));
+    });
+    return result;
+  };
+
+  // 填写表单实时计算审批流程
+  const advanceSubmit = async () => {
+    // console.log('重重新计算审批流程');
+    const fieldsValue = await form.validateFields();
+    let hasFlowId = true; //是否都绑定审批节点
+
+    const result = Object.values(fieldsValue)
+      .map(item => {
+        if (item && Array.isArray(item)) return item;
+      })
+      .filter(item => item);
+    const formList = await getFromData(result);
+    let params = {
+      desc: fieldsValue.desc,
+      // 审核流程id
+      flow_id: 0,
+      node_level_id: 0,
+      id: version.id,
+      project_id: version.project_id,
+      cur_template_node_id: version.template_node_id * 1, // 当前节点
+      next_template_node_id: 0, // 审核完成后的业务节点
+      template_node_id: null, // 将要流转的节点审批节点
+      flow_path: null, // 审批节点数组
+      // 模板id.一致就行
+      template_id: version.template_id,
+      cur_template_id: version.template_id,
+      next_template_id: version.template_id,
+      form_list: formList,
+    };
+    dispatch({
+      type: 'detail/advanceSubmitNextNode',
+      payload: params, // values,
+      callback: data => {
+        if (data) {
+          setApprovalProcess(data);
+        }
+      },
+    });
+  };
+
+  // 处理tabs页
+  const setAuditListFun = async (approvalProcess = {}, prevFormData = []) => {
+    const fieldsValue = await form.validateFields();
+    let addAuditList = [];
+    const result = Object.values(fieldsValue)
+      .map(item => {
+        if (item && Array.isArray(item)) return item;
+      })
+      .filter(item => item)
+      .flat(Infinity);
+    const nodeList = [...new Set(result)]
+      .map(Id => {
+        return flowDetail.nodes.find?.(item => item.Id == Id);
+      })
+      .filter(item => item);
+    const flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
+    const processFlows = await queryProcessFlows({ ids: flowIds });
+    if (processFlows && processFlows?.length > 0) {
+      const newlist = nodeList.map(node => {
+        const curData = processFlows.find(item => item.id === node.flow_id);
+        const newItem = {
+          name: curData?.name,
+          nodeId: node.Id,
+          items: JSON.parse(curData?.form_json || '[]'),
+        };
+        return newItem;
+      });
+      addAuditList = [...addAuditList, ...newlist];
+    }
+    addAuditList.forEach(addAuditItem => {
+      // 回填部分组件的历史数据
+      if (prevFormData.length) {
+        const currentForm = prevFormData.find(
+          pItem => pItem.template_node_id === addAuditItem.nodeId
+        );
+        addAuditItem.items.forEach(DDComponent => {
+          const prevValue = currentForm?.formComponentValues?.find(
+            cItem => cItem.id === DDComponent.props.id
+          );
+          DDComponent.props.defaultValue = prevValue?.value || prevValue?.defaultValue;
+        });
+      }
+      // 回填之前的值结束后需要把formComponentValues清空 防止提交之前的值
+      setFormComponentValues([]);
+      // const tempFormComponentValues = JSON.parse(JSON.stringify(formComponentValues));
+      // const Components = Form3x.create({
+      //   onValuesChange: (props, changedValues, allValues) => {
+      //     const { items: allFormItem } = props;
+      //     tempFormComponentValues[addAuditItem.nodeId] = allFormItem
+      //       .map(formItem => {
+      //         const itemProps = formItem.props;
+      //         const val = allValues[itemProps.id];
+      //         if (!itemProps.label || val === '') return;
+      //         if (val instanceof Object) {
+      //           return {
+      //             name: itemProps.label,
+      //             id: itemProps.id,
+      //             value: [...val],
+      //           };
+      //         } else if (allValues[itemProps.id]) {
+      //           return {
+      //             name: itemProps.label,
+      //             id: itemProps.id,
+      //             value: [allValues[itemProps.id]] || undefined,
+      //           };
+      //         }
+      //       })
+      //       .filter(formItem => formItem);
+      //     if (getReComputeAudit(allFormItem, changedValues)) advanceSubmit();
+      //     console.log(tempFormComponentValues);
+      //     setFormComponentValues({ ...tempFormComponentValues });
+      //   },
+      // })(AuditDetailed);
+
+      // addAuditItem.FormComponents = <Components items={addAuditItem.items} />;
+    });
+    setAuditList(addAuditList);
+    advanceSubmit();
+  };
+
   const onChange = async (value, approvalProcess) => {
     // 加载之前提交的form数据
     const resFormData = await initFormList();
     const resData = resFormData?.formList;
-    debugger;
     const prevFormData =
       resData && resData.length ? resData.map(resItem => JSON.parse(resItem)) : null;
     if (prevFormData && prevFormData.length) {
@@ -304,11 +472,6 @@ function CommitAuditModal(props) {
     return getNextNodes(auditId || currentNodeId, 'custom-rect');
   }, [auditId, currentNodeId, flowDetail]);
 
-  const changeAudit = id => {
-    let node = flowDetail.nodes.find?.(item => item.Id == id);
-    setAuditId(node?.node_id);
-  };
-
   const getReComputeAudit = (items, changedValues) => {
     const id = Object.keys(changedValues)[0];
     const formItem = items?.find(item => item.props.id == id);
@@ -316,46 +479,6 @@ function CommitAuditModal(props) {
     return false;
   };
 
-  // 填写表单实时计算审批流程
-  const advanceSubmit = async () => {
-    // console.log('重重新计算审批流程');
-    var fieldsValue = await form.validateFields();
-    let hasFlowId = true; //是否都绑定审批节点
-
-    let result = Object.values(fieldsValue)
-      .map(item => {
-        if (item && Array.isArray(item)) return item;
-      })
-      .filter(item => item);
-    const formList = await getFromData(result);
-    let params = {
-      desc: fieldsValue.desc,
-      // 审核流程id
-      flow_id: 0,
-      node_level_id: 0,
-      id: version.id,
-      project_id: version.project_id,
-      cur_template_node_id: version.template_node_id * 1, // 当前节点
-      next_template_node_id: 0, // 审核完成后的业务节点
-      template_node_id: null, // 将要流转的节点审批节点
-      flow_path: null, //审批节点数组
-      // 模板id.一致就行
-      template_id: version.template_id,
-      cur_template_id: version.template_id,
-      next_template_id: version.template_id,
-      form_list: formList,
-    };
-    dispatch({
-      type: 'detail/advanceSubmitNextNode',
-      payload: params, //values,
-      callback: data => {
-        if (data) {
-          setApprovalProcess(data);
-        }
-      },
-    });
-  };
-
   const handleTabChange = key => {
     const index = Number(key.split('_')[0]);
     setCurrentTab(index);
@@ -454,12 +577,32 @@ function CommitAuditModal(props) {
   };
 
   const onFormValueChange = (changedFields, allValues) => {
-    console.log(allValues);
     const currentNodeID = auditList[currentTab].nodeId;
     const allFormItem = auditList[currentTab].items;
     const componentValue = formComponentValues[currentNodeID] || [];
     const currentFieldID = Object.keys(changedFields)[0];
     const formItem = allFormItem.find(item => item.props.id === currentFieldID);
+
+    // 记录TextNote的值
+    for (let index = 0; index < allFormItem.length; index++) {
+      const tempFormItem = allFormItem[index];
+      // 没找到就给默认值
+      if (!componentValue.find(item => item.id === tempFormItem.props.id)) {
+        if (tempFormItem.componentName === 'TextNote') {
+          componentValue.push({
+            name: tempFormItem.props.label,
+            id: tempFormItem.props.id,
+            value: [tempFormItem.props.placeholder],
+          });
+        } else {
+          componentValue.push({
+            name: tempFormItem.props.label,
+            id: tempFormItem.props.id,
+            value: [],
+          });
+        }
+      }
+    }
     // 记录变更的formItem值
     if (componentValue.length) {
       for (let index = 0; index < componentValue.length; index++) {
@@ -486,6 +629,7 @@ function CommitAuditModal(props) {
         value: [changedFields[currentFieldID]],
       });
     }
+    console.log(componentValue);
     setFormComponentValues({
       ...formComponentValues,
       [currentNodeID]: componentValue,
@@ -494,127 +638,6 @@ function CommitAuditModal(props) {
     advanceSubmit();
   };
 
-  // 处理tabs页
-  const setAuditListFun = async (approvalProcess = {}, prevFormData = []) => {
-    const fieldsValue = await form.validateFields();
-    let addAuditList = [];
-    const result = Object.values(fieldsValue)
-      .map(item => {
-        if (item && Array.isArray(item)) return item;
-      })
-      .filter(item => item)
-      .flat(Infinity);
-    const nodeList = [...new Set(result)]
-      .map(Id => {
-        return flowDetail.nodes.find?.(item => item.Id == Id);
-      })
-      .filter(item => item);
-    const flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
-    const processFlows = await queryProcessFlows({ ids: flowIds });
-    if (processFlows && processFlows?.length > 0) {
-      const newlist = nodeList.map(node => {
-        const curData = processFlows.find(item => item.id === node.flow_id);
-        const newItem = {
-          name: curData?.name,
-          nodeId: node.Id,
-          items: JSON.parse(curData?.form_json || '[]'),
-        };
-
-        return newItem;
-      });
-      addAuditList = [...addAuditList, ...newlist];
-    }
-    addAuditList.forEach(addAuditItem => {
-      // 回填部分组件的历史数据
-      if (prevFormData.length) {
-        const currentForm = prevFormData.find(
-          pItem => pItem.template_node_id === addAuditItem.nodeId
-        );
-        addAuditItem.items.forEach(DDComponent => {
-          const prevValue = currentForm?.formComponentValues?.find(
-            cItem => cItem.id === DDComponent.props.id
-          );
-          DDComponent.props.defaultValue = prevValue?.value || prevValue?.defaultValue;
-        });
-      }
-      // const tempFormComponentValues = JSON.parse(JSON.stringify(formComponentValues));
-      // const Components = Form3x.create({
-      //   onValuesChange: (props, changedValues, allValues) => {
-      //     const { items: allFormItem } = props;
-      //     tempFormComponentValues[addAuditItem.nodeId] = allFormItem
-      //       .map(formItem => {
-      //         const itemProps = formItem.props;
-      //         const val = allValues[itemProps.id];
-      //         if (!itemProps.label || val === '') return;
-      //         if (val instanceof Object) {
-      //           return {
-      //             name: itemProps.label,
-      //             id: itemProps.id,
-      //             value: [...val],
-      //           };
-      //         } else if (allValues[itemProps.id]) {
-      //           return {
-      //             name: itemProps.label,
-      //             id: itemProps.id,
-      //             value: [allValues[itemProps.id]] || undefined,
-      //           };
-      //         }
-      //       })
-      //       .filter(formItem => formItem);
-      //     if (getReComputeAudit(allFormItem, changedValues)) advanceSubmit();
-      //     console.log(tempFormComponentValues);
-      //     setFormComponentValues({ ...tempFormComponentValues });
-      //   },
-      // })(AuditDetailed);
-
-      // addAuditItem.FormComponents = <Components items={addAuditItem.items} />;
-    });
-    setAuditList(addAuditList);
-    advanceSubmit();
-  };
-
-  const getFromData = idList => {
-    const data = formComponentValues;
-    const result = [];
-    //获取流转节点的层级关系
-    let len = 0;
-    let list = [];
-    idList.forEach(item => {
-      if (len < item.length) len = item.length;
-    });
-    for (let i = 0; i < len; i++) {
-      idList.forEach(item => {
-        if (item && item[i]) list.push(item[i]);
-      });
-    }
-    let firstList = [...new Set(list)];
-    // let attachment = await upload();
-    firstList.forEach(id => {
-      let approvalNode = flowDetail.nodes.find?.(item => item.Id == id);
-      if (!approvalNode) return;
-      const prevValues = data.length
-        ? data.find(item => item.template_node_id === approvalNode.Id).formComponentValues
-        : [];
-      let values = data[approvalNode.Id] || prevValues || [];
-      let audit_list = [],
-        cc_list = [];
-      approvalProcess[approvalNode.Id]?.forEach(item => {
-        let arr = item[0].is_cc == 1 ? cc_list : audit_list;
-        if (item[0].type == 'role') return arr.push(item[0].nowValue);
-        return arr.push(item[0].value);
-      });
-      const formItem = {
-        flow_id: approvalNode.flow_id,
-        template_node_id: approvalNode.Id,
-        formComponentValues: [...values], //{ name: '附件', value: JSON.stringify(attachment) }
-        audit_list,
-        cc_list,
-      };
-      result.push(JSON.stringify(formItem));
-    });
-    return result;
-  };
-
   // const getFlowPath = node => {
   //   //[134, 135]
   //   let itemData = {};