synchronization

src/components/DDComponents/DDDateField/index.js

@@ -5,7 +5,7 @@ function DDDateField(props) {
   const { format = '', disabled, onChange } = props;
 
   const handleChange = date => {
-    onChange?.(date.format('YYYY-MM-DD'));
+    onChange?.(date.format('YYYY-MM-DD HH:mm:ss'), props.id, props.label);
   };
   return (
     <DatePicker

src/components/DDComponents/DDSelectField/index.js

@@ -12,7 +12,7 @@ function DDSelectField(props) {
       disabled={disabled}
       defaultValue={defaultValue}
       onChange={value => {
-        onChange(String(value));
+        onChange(String(value), props.id, props.label);
       }}
     >
       {options?.map(cur => {

src/components/DDComponents/DIYTable/index.tsx

@@ -167,7 +167,7 @@ function DIYTable(props: IProps) {
   };
 
   const handleRowChange = () => {
-    setTableData([...tableData, { index: tableData.length }]);
+    setTableData([...tableData, { index: tableData.length + 1 }]);
   };
 
   useEffect(() => {

src/components/DDComponents/NumberField/index.js

@@ -11,7 +11,7 @@ function NumberField(props) {
       disabled={disabled}
       formatter={value => `${value}${unit || ''}`}
       onChange={e => {
-        onChange?.(String(e));
+        onChange?.(e ? String(e) : 0, props.id, props.label);
       }}
     />
   );

src/pages/Detail/AuditDetailed.js

@@ -1,46 +1,32 @@
 import DDComponents from '@/components/DDComponents';
-import React, {useMemo, useState} from 'react';
-import {Form} from '@ant-design/compatible';
-import '@ant-design/compatible/assets/index.css';
-
-const layout = {
-  labelCol: {
-    span: 8,
-  },
-  wrapperCol: {
-    span: 16,
-  },
-};
+import React, { useMemo, useState } from 'react';
+import { Button, Form } from 'antd';
+import { FormulaType } from '@/components/AuditForm/FormulaModal';
 
 const AuditDetailed = props => {
-  // const [form] = Form.useForm();
-  const {items, form} = props;
+  const { allValues = [], items, form, onValuesChange, onTableValChange } = props;
+  const depId = useMemo(() => {
+    const id = items.find(item => item.componentName == 'DepartmentField')?.props.id;
+    const value = allValues.find(item => item.id == id)?.value;
+    if (value) return value[0];
+  }, [allValues, items]);
 
-  const behavior = useMemo(() => {
-    let data = {};
+  const data = useMemo(() => {
+    let linkedData = {};
     items.forEach(d => {
       const item = d.props;
-      if (item.behaviorLinkage) {
-        const key = item.id;
-        const options = item.options.map(o => {
-          let data;
-          try {
-            data = JSON.parse(o);
-          } catch (error) {
-            data = {key: o, value: o};
-          }
-          return data;
-        });
-        item.behaviorLinkage.forEach(b => {
-          const value = b.value;
-          b.targets.forEach(t => {
-            data[t.fieldId] = {key, value: options.find(o => o.key == value)?.value};
-          });
-        });
+      if (item.linked) {
+        linkedData = { ...linkedData, [item.id]: item.linked };
       }
     });
-
-    return data;
+    const linkedList =
+      items
+        ?.map(item => {
+          const linked = item.props.linked;
+          return linked ? Object.values(linked).flat() : [];
+        })
+        .flat() || [];
+    return { linkedData, linkedList };
   }, [items]);
 
   const onFinish = values => {
@@ -48,51 +34,25 @@ const AuditDetailed = props => {
   };
 
   const GetComponent = item => {
-    const {
-      id,
-      label,
-      bizAlias,
-      required,
-      placeholder,
-      options,
-      align,
-      statField,
-      hideLabel,
-      objOptions,
-      format,
-      pushToAttendance,
-      labelEditableFreeze,
-      requiredEditableFreeze,
-      unit,
-      extract,
-      link,
-      payEnable,
-      bizType,
-      childFieldVisible,
-      notPrint,
-      verticalPrint,
-      hiddenInApprovalDetail,
-      disabled,
-      notUpper,
-      children, // 子控件
-    } = item.props;
-    // 判断是否属于关联项
-    if (behavior[id]) {
-      const {key, value} = behavior[id];
-      let currentValue = form.getFieldValue(key);
-      try {
-        currentValue = JSON.parse(currentValue);
-      } catch (error) {
-      }
-      // 判断是否需要渲染
-      if (currentValue instanceof Array) {
-        if (currentValue?.indexOf(value) == -1) return null;
-      } else {
-        if (currentValue != value) return null;
-      }
+    const { id, label, bizAlias, required, notUpper } = item.props;
+    //判断是否关联项
+    if (data.linkedList.findIndex(curId => curId == id) !== -1) {
+      let control = null; //当前空间是否显示的条件 当id为control.id的组件选择的选项值为control.value 时显示
+      Object.keys(data.linkedData).forEach(ctlIs => {
+        const linked = data.linkedData[ctlIs];
+        Object.keys(linked).forEach(value => {
+          const ids = linked[value];
+          if (ids.findIndex(curId => curId == id) !== -1) {
+            control = { id: ctlIs, value };
+          }
+        });
+      });
+      let currentValue = form.getFieldValue(control?.id);
+      if (currentValue != control?.value) return null;
     }
+
     let formLabel;
-    if (bizAlias) {
+    if (bizAlias !== undefined) {
       formLabel = bizAlias;
     } else {
       try {
@@ -103,26 +63,51 @@ const AuditDetailed = props => {
       }
     }
 
-    const component = DDComponents({item});
-    if (!component) return null;
+    const renderComponents = () => {
+      let content = '';
+      if (item.componentName === 'CodeField') {
+        content = <DDComponents item={item} depId={depId} />;
+      } else if (item.componentName === 'FormulaField') {
+        const strList = item.props?.formula?.map(formu => {
+          if (formu.type == FormulaType.Filed) {
+            const numItem = allValues?.find(item => item.id == formu.id);
+            return numItem?.value[0] || 0;
+          } else {
+            return formu.label;
+          }
+        });
+        console.log('-------44444-------------', item, strList);
+        const evalStr = strList?.join('');
+        content = <DDComponents item={item} evalStr={evalStr} />;
+      } else {
+        content = <DDComponents item={item} />;
+      }
+      return content;
+    };
+
+    // const component = DDComponents({ item });
+    // if (!component) return null;
     return (
-      <Form.Item label={formLabel}>
-        {typeof component == 'string'
-          ? component
-          : form.getFieldDecorator(id, {
-            rules: [{required}],
-            initialValue: item.props.defaultValue
-          })(component)}
-        {notUpper == 1 && <p>大写</p>}
-      </Form.Item>
+      <>
+        {item?.isTable === undefined ? (
+          <Form.Item key={id} name={id} label={formLabel} rules={[{ required }]}>
+            {renderComponents()}
+          </Form.Item>
+        ) : (
+          <DDComponents item={item} onChange={onTableValChange} />
+        )}
+      </>
     );
   };
 
   return (
     <Form
-      style={{height: '400px', overflowY: 'scroll', paddingRight: 20}}
+      form={form}
+      style={{ minHeight: '80vh', overflowY: 'auto', paddingRight: 20 }}
       layout="vertical"
       autoComplete="off"
+      onValuesChange={onValuesChange}
+      onFinish={onFinish}
     >
       {items.map(item => GetComponent(item))}
     </Form>

src/pages/Detail/CommitAuditModal.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useRef, useMemo, useCallback} from 'react';
+import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
 import '@ant-design/compatible/assets/index.css';
 import {
   Modal,
@@ -19,11 +19,11 @@ import {
   Divider,
   Collapse,
 } from 'antd';
-import {PlusOutlined, UploadOutlined} from '@ant-design/icons';
-import {connect} from 'dva';
-import {isArray, result, set} from 'lodash';
-import {useForm} from 'rc-field-form';
-import {async} from '@antv/x6/lib/registry/marker/async';
+import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
+import { connect } from 'dva';
+import { isArray, result, set } from 'lodash';
+import { useForm } from 'rc-field-form';
+import { async } from '@antv/x6/lib/registry/marker/async';
 import AuditDetailed from './AuditDetailed';
 import AuditFlow from './AuditFlow';
 import {
@@ -32,22 +32,22 @@ import {
   queryProcessFlows,
   querySaveBomForm,
 } from '@/services/boom';
-import {Form as Form3x} from '@ant-design/compatible';
-import {getCurrentUser} from '@/utils/authority';
+import { Form as Form3x } from '@ant-design/compatible';
+import { getCurrentUser } from '@/utils/authority';
 import DDCode from '@/components/DDComponents/DDCode';
-import {uploadFile, queryUserListByRoleID} from '@/services/boom';
+import { uploadFile, queryUserListByRoleID } from '@/services/boom';
 import ApprovalProcess from './ApprovalProcess';
-import {uuidv4} from '@antv/xflow';
+import { uuidv4 } from '@antv/xflow';
 import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
 import AttachmentTable from '@/components/AttachmentTable';
-import {getToken} from '@/utils/utils';
+import { getToken } from '@/utils/utils';
 import LuckyExcel from 'luckyexcel';
-import DDComponents from "@/components/DDComponents";
+import DDComponents from '@/components/DDComponents';
 
-const {TextArea} = Input;
-const {Option} = Select;
-const {TabPane} = Tabs;
-const {Step} = Steps;
+const { TextArea } = Input;
+const { Option } = Select;
+const { TabPane } = Tabs;
+const { Step } = Steps;
 
 // 提交
 function CommitAuditModal(props) {
@@ -65,7 +65,7 @@ function CommitAuditModal(props) {
     templateId,
     OSSData,
   } = props;
-  // console.log(loading);
+
   const [auditId, setAuditId] = useState();
   const [data, setData] = useState([]);
   const [length, setLength] = useState(1);
@@ -76,19 +76,26 @@ function CommitAuditModal(props) {
   const [approvalProcess, setApprovalProcess] = useState({});
   const [selectUserList, setSelectUserList] = useState([]);
   const [curNodeIdx, setCurNodeIdx] = useState(-1);
+  const [currentTab, setCurrentTab] = useState(0);
 
   const [dataSource, setDataSource] = useState([]);
   const [loading, setLoading] = useState(false);
+
   const uploadList = useRef([]);
+  const formValueRef = useRef({
+    form: [],
+  });
+  console.log(formComponentValues);
 
   useEffect(() => {
     if (!visible) return;
-    const {edges, nodes} = flowDetail;
-    // initFormList().then(approvalProcess => {
+
+    const { edges, nodes } = flowDetail;
+
     let Id = version.template_node_id;
     const currentId = flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
     const data = treeData(currentId);
-    console.log('===============审批节点======', data);
+    // console.log('===============审批节点======', data);
     const nextNodes = getNextNodes(currentId, 'custom-rect');
     if (data.length <= 0 || nextNodes.length > 0) {
       setAuditId(currentId);
@@ -106,7 +113,7 @@ function CommitAuditModal(props) {
       // 设置延迟，等待组件渲染
       setTimeout(async () => {
         form.setFieldsValue(defaultValues);
-        const initForm = await initFormList()
+        const initForm = await initFormList();
         const approvalProcess = initForm?.approvalProcess ? initForm.approvalProcess : {};
         Object.values(defaultValues).forEach(value => onChange(value, approvalProcess));
       }, 200);
@@ -130,17 +137,24 @@ function CommitAuditModal(props) {
     setAuditList([]);
   }, [visible]);
 
+  useEffect(() => {
+    if (!visible) {
+      // 清空数据
+      uploadList.current = [];
+    }
+  }, [visible]);
+
   // const OnModelFileDone = file => {
   //   var path = OSSData.host + '/' + file.url;
   //   uploadList.current = [...uploadList.current, path];
   //   console.log(uploadList.current);
   // };
+
   const setUploadList = files => {
     uploadList.current = files.map(file => OSSData.host + '/' + file.url);
-    console.log(uploadList.current);
-  };
-  const OnUploading = file => {
+    // console.log(uploadList.current);
   };
+  const OnUploading = file => {};
   const uploadProps = {
     OSSData: OSSData,
     // onDone: OnModelFileDone,
@@ -200,6 +214,7 @@ function CommitAuditModal(props) {
     setAuditId(currentNodeId);
     return flowDetail.nodes.find?.(item => item.Id == Id)?.node_id;
   }, [flowDetail, version]);
+
   /**
    *
    * @param {*} currentId 当前节点
@@ -207,19 +222,19 @@ function CommitAuditModal(props) {
    * @returns
    */
   const getNextNodes = (currentId, type) => {
-    const {edges, nodes} = flowDetail;
+    const { edges, nodes } = flowDetail;
     if (!currentId) return [];
-    //删除虚线通向的节点
+    // 删除虚线通向的节点
     // let targetIds = edges
     //   .filter(edge => {
     //     let line = edge.attrs?.line?.strokeDasharray?.split(' ');
     //     return edge.source.cell == currentId && line && line[0] == '0';
     //   })
     //   .map(item => item.target.cell);
-    console.log(
-      '---------',
-      edges.filter(edge => edge.source.cell == currentId)
-    );
+    // console.log(
+    //   '---------',
+    //   edges.filter(edge => edge.source.cell == currentId)
+    // );
     let targetIds = edges
       .filter(edge => edge.source.cell == currentId)
       .map(item => item.target.cell);
@@ -257,13 +272,14 @@ function CommitAuditModal(props) {
     // 加载之前提交的form数据
     const resFormData = await initFormList();
     const resData = resFormData?.formList;
-    const prevFormData = resData && resData.length ? resData.map(resItem => JSON.parse(resItem)) : null;
+    const prevFormData =
+      resData && resData.length ? resData.map(resItem => JSON.parse(resItem)) : null;
     if (prevFormData && prevFormData.length) {
-      const formValues = {}
+      const formValues = {};
       prevFormData.forEach(pItem => {
-        formValues[pItem.template_node_id] = [...pItem.formComponentValues]
-      })
-      setFormComponentValues(formValues)
+        formValues[pItem.template_node_id] = [...pItem.formComponentValues];
+      });
+      setFormComponentValues(formValues);
     }
 
     if (value) {
@@ -288,9 +304,9 @@ function CommitAuditModal(props) {
     return false;
   };
 
-  //填写表单实时计算审批流程
+  // 填写表单实时计算审批流程
   const advanceSubmit = async () => {
-    console.log('重重新计算审批流程');
+    // console.log('重重新计算审批流程');
     var fieldsValue = await form.validateFields();
     let hasFlowId = true; //是否都绑定审批节点
 
@@ -328,7 +344,135 @@ function CommitAuditModal(props) {
     });
   };
 
-  //处理tabs页
+  const handleTabChange = key => {
+    const index = Number(key.split('_')[0]);
+    setCurrentTab(index);
+  };
+
+  const onDIYTableChange = (value, id, label) => {
+    const currentNodeID = auditList[currentTab].nodeId;
+    const oldData = [...formComponentValues[currentNodeID]] || [];
+    console.log(oldData);
+
+    const ids = id.split(';');
+    const [rowIndex, colIndex] = ids[0].split(',').map(item => Number(item));
+    const [columnID, tableID] = ids[1].split('>');
+    const [columnLabel, tableLabel] = label.split('>');
+
+    const cell = {
+      name: columnLabel,
+      id: columnID,
+      type: columnID.split('_')[0],
+      value: [value],
+    };
+    // 组装可能用到的数据
+    const cols = [];
+    cols[colIndex] = cell;
+    const rows = [];
+    rows[rowIndex] = cols;
+
+    if (oldData && oldData.length) {
+      const table = oldData.find(item => item.id === tableID);
+      console.log(table);
+      if (table) {
+        const oldRows = table.value;
+        debugger;
+        if (oldRows) {
+          const oldCols = oldRows[rowIndex];
+          if (oldCols) {
+            // 记录可编辑控件
+            table.value[rowIndex][colIndex] = cell;
+            const newData = oldData.map(item => {
+              if (item.id === table.id) {
+                return table;
+              }
+              return item;
+            });
+            setFormComponentValues(prevState => {
+              return { ...prevState, [currentNodeID]: newData };
+            });
+          } else {
+            table.value[rowIndex] = cols;
+            const newData = oldData.map(item => {
+              if (item.id === table.id) {
+                return table;
+              }
+              return item;
+            });
+            setFormComponentValues(prevState => {
+              return { ...prevState, [currentNodeID]: newData };
+            });
+          }
+        } else {
+          table.value = rows;
+          const newData = oldData.map(item => {
+            if (item.id === table.id) {
+              return table;
+            }
+            return item;
+          });
+          setFormComponentValues(prevState => {
+            return { ...prevState, [currentNodeID]: newData };
+          });
+        }
+      } else {
+        const newData = [
+          ...oldData,
+          {
+            name: tableLabel,
+            id: tableID,
+            type: tableID.split('_')[0],
+            value: rows,
+          },
+        ];
+        setFormComponentValues(prevState => {
+          return { ...prevState, [currentNodeID]: newData };
+        });
+      }
+    } else {
+      const newData = [{ name: tableLabel, id: tableID, type: tableID.split('_')[0], value: rows }];
+      setFormComponentValues(prevState => {
+        return { ...prevState, [currentNodeID]: newData };
+      });
+    }
+  };
+
+  const onFormValueChange = (changedFields, 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);
+    if (componentValue.length) {
+      for (let index = 0; index < componentValue.length; index++) {
+        const item = componentValue[index];
+        if (item.id === currentFieldID) {
+          componentValue[index] = {
+            name: formItem.props.label,
+            id: currentFieldID,
+            value: [changedFields[currentFieldID]],
+          };
+          break;
+        } else if (index === componentValue.length - 1) {
+          componentValue.push({
+            name: formItem.props.label,
+            id: currentFieldID,
+            value: [changedFields[currentFieldID]],
+          });
+        }
+      }
+    } else {
+      componentValue.push({
+        name: formItem.props.label,
+        id: currentFieldID,
+        value: [changedFields[currentFieldID]],
+      });
+    }
+    console.log(formComponentValues);
+    setFormComponentValues({ ...formComponentValues, [currentNodeID]: componentValue });
+  };
+
+  // 处理tabs页
   const setAuditListFun = async (approvalProcess = {}, prevFormData = []) => {
     var fieldsValue = await form.validateFields();
     let addAuditList = [];
@@ -344,7 +488,7 @@ function CommitAuditModal(props) {
       })
       .filter(item => item);
     let flowIds = [...new Set(nodeList.map(item => item.flow_id))].join(',');
-    let data = await queryProcessFlows({ids: flowIds});
+    let data = await queryProcessFlows({ ids: flowIds });
     if (data && data?.length > 0) {
       let newlist = nodeList.map(node => {
         let curData = data.find(item => item.id == node.flow_id);
@@ -358,24 +502,27 @@ function CommitAuditModal(props) {
       });
       addAuditList = [...addAuditList, ...newlist];
     }
-    addAuditList.forEach((item, index) => {
-      // 回填历史数据
+    addAuditList.forEach((addAuditItem, index) => {
+      // 回填部分组件的历史数据
       if (prevFormData.length) {
-        const currentForm = prevFormData.find(pItem => pItem.template_node_id === item.nodeId);
-        item.items.forEach((DDComponent) => {
-          const prevValue = currentForm?.formComponentValues?.find(cItem => cItem.id === DDComponent.props.id)
-          DDComponent.props.defaultValue = prevValue?.value || prevValue?.defaultValue
-
-        })
+        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;
+        });
       }
-      let Components = Form3x.create({
+      const tempFormComponentValues = JSON.parse(JSON.stringify(formComponentValues));
+      const Components = Form3x.create({
         onValuesChange: (props, changedValues, allValues) => {
-          const {items} = props;
-          console.log(allValues)
-          formComponentValues[item.nodeId] = items
-            .map(item => {
-              const itemProps = item.props;
-              let val = allValues[itemProps.id];
+          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 {
@@ -391,13 +538,14 @@ function CommitAuditModal(props) {
                 };
               }
             })
-            .filter(item => item);
-          if (getReComputeAudit(items, changedValues)) advanceSubmit();
-          console.log(formComponentValues)
-          setFormComponentValues({...formComponentValues});
+            .filter(formItem => formItem);
+          if (getReComputeAudit(allFormItem, changedValues)) advanceSubmit();
+          console.log(tempFormComponentValues);
+          setFormComponentValues({ ...tempFormComponentValues });
         },
       })(AuditDetailed);
-      item.FormComponents = <Components items={item.items}/>;
+
+      addAuditItem.FormComponents = <Components items={addAuditItem.items} />;
     });
     setAuditList(addAuditList);
     advanceSubmit();
@@ -422,7 +570,9 @@ function CommitAuditModal(props) {
     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 : []
+      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 = [];
@@ -443,32 +593,32 @@ function CommitAuditModal(props) {
     return result;
   };
 
-  const getFlowPath = node => {
-    //[134, 135]
-    let itemData = {};
-    const Function = (curId, index) => {
-      if (!curId) return;
-      let data = {};
-      let approvalNode = flowDetail.nodes.find?.(item => item.Id == curId);
-      data.template_id = version.template_id;
-      data.flow_id = approvalNode?.flow_id || 0;
-      data.node_level_id = approvalNode?.flow_id ? 1 : 0;
-      data.template_node_id = approvalNode?.Id;
-      index++;
-      if (approvalNode?.Id) {
-        if (!approvalNode?.flow_id) {
-          hasFlowId = false;
-        }
-      }
-      const res = Function(node[index], index);
-      if (res) {
-        data.flow_path = [res];
-      }
-      return data;
-    };
-    itemData = Function(node[0], 0);
-    return itemData;
-  };
+  // const getFlowPath = node => {
+  //   //[134, 135]
+  //   let itemData = {};
+  //   const Function = (curId, index) => {
+  //     if (!curId) return;
+  //     let data = {};
+  //     let approvalNode = flowDetail.nodes.find?.(item => item.Id == curId);
+  //     data.template_id = version.template_id;
+  //     data.flow_id = approvalNode?.flow_id || 0;
+  //     data.node_level_id = approvalNode?.flow_id ? 1 : 0;
+  //     data.template_node_id = approvalNode?.Id;
+  //     index++;
+  //     if (approvalNode?.Id) {
+  //       if (!approvalNode?.flow_id) {
+  //         hasFlowId = false;
+  //       }
+  //     }
+  //     const res = Function(node[index], index);
+  //     if (res) {
+  //       data.flow_path = [res];
+  //     }
+  //     return data;
+  //   };
+  //   itemData = Function(node[0], 0);
+  //   return itemData;
+  // };
 
   const onFinish = async () => {
     const isOk = Object.values(approvalProcess).every(item => {
@@ -546,7 +696,7 @@ function CommitAuditModal(props) {
         params.data = await uploadExcelByUrl(serviceNode.node_type_psr, version.id);
       }
       // params.data = await uploadExcelByUrl(3, version.id);
-      console.log(params);
+      // console.log(params);
 
       if (result.length <= 0) {
         //直接走业务节点
@@ -575,7 +725,7 @@ function CommitAuditModal(props) {
       await querySaveBomForm({
         project_id: version.project_id,
         node_id: version.template_node_id,
-        json: JSON.stringify({approvalProcess, formList}),
+        json: JSON.stringify({ approvalProcess, formList }),
       });
       params.audit_series = uuidv4();
       params.files = uploadList.current.join(',');
@@ -584,6 +734,7 @@ function CommitAuditModal(props) {
       console.error(error);
     }
   };
+
   const onSubmitNextNode = values => {
     dispatch({
       type: 'detail/submitNextNode',
@@ -601,60 +752,55 @@ function CommitAuditModal(props) {
       },
     });
   };
+
   const CascaderNode = index => {
     return (
       <Form.Item
-        labelCol={{span: 7}}
-        wrapperCol={{span: 15}}
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 15 }}
         label={`审批节点${index + 1}`}
         name={`circle${index}`}
         key={`circle${index}`}
       >
-        <Cascader style={{width: '100%'}} options={data} onChange={onChange}/>
+        <Cascader style={{ width: '100%' }} options={data} onChange={onChange} />
       </Form.Item>
     );
   };
-  const upload = async () => {
-    let blob = await luckysheet.current.getExcelBolb();
-    let formData = new FormData();
-    formData.append('userid', currentUser.DingUserId);
-    formData.append('file', new File([blob], `${version.version_name}_${version.version_no}.xlsx`));
-
-    try {
-      let res = await uploadFile(formData);
-      let data = JSON.parse(res.dentry);
-      return [
-        {
-          spaceId: String(data.spaceId),
-          fileName: data.name,
-          fileSize: String(data.spaceId),
-          fileType: data.extension,
-          fileId: data.id,
-        },
-      ];
-    } catch (error) {
-      message.error('附件上传失败');
-    }
-  };
-
-  const columns = [
-    {
-      title: '文件名称',
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: '操作',
-      render: record => <a>删除</a>,
-    },
-  ];
 
-  useEffect(() => {
-    if (!visible) {
-      // 清空数据
-      uploadList.current = [];
-    }
-  }, [visible]);
+  // const upload = async () => {
+  //   let blob = await luckysheet.current.getExcelBolb();
+  //   let formData = new FormData();
+  //   formData.append('userid', currentUser.DingUserId);
+  //   formData.append('file', new File([blob], `${version.version_name}_${version.version_no}.xlsx`));
+  //
+  //   try {
+  //     let res = await uploadFile(formData);
+  //     let data = JSON.parse(res.dentry);
+  //     return [
+  //       {
+  //         spaceId: String(data.spaceId),
+  //         fileName: data.name,
+  //         fileSize: String(data.spaceId),
+  //         fileType: data.extension,
+  //         fileId: data.id,
+  //       },
+  //     ];
+  //   } catch (error) {
+  //     message.error('附件上传失败');
+  //   }
+  // };
+  //
+  // const columns = [
+  //   {
+  //     title: '文件名称',
+  //     dataIndex: 'name',
+  //     key: 'name',
+  //   },
+  //   {
+  //     title: '操作',
+  //     render: record => <a>删除</a>,
+  //   },
+  // ];
 
   return (
     <Modal
@@ -672,38 +818,46 @@ function CommitAuditModal(props) {
       <Form form={form}>
         {data.map((item, idx) => (data.length == 1 ? CascaderNode('') : CascaderNode(idx)))}
         <Form.Item
-          labelCol={{span: 7}}
-          wrapperCol={{span: 15}}
+          labelCol={{ span: 7 }}
+          wrapperCol={{ span: 15 }}
           label="业务节点"
           name="next_template_node_id"
           // rules={[{ required: true, message: '请选择业务节点' }]}
         >
-          <Select style={{width: '100%'}}>
+          <Select style={{ width: '100%' }}>
             {nextNodesList.map(item => (
               <Option key={item.value}>{item.label}</Option>
             ))}
           </Select>
         </Form.Item>
-        <Form.Item labelCol={{span: 7}} wrapperCol={{span: 15}} label="备注信息" name="desc">
-          <Input.TextArea/>
+        <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="备注信息" name="desc">
+          <Input.TextArea />
         </Form.Item>
-        <Form.Item labelCol={{span: 7}} wrapperCol={{span: 15}} label="附件">
-          {OSSData.host && <AliyunOSSUpload {...uploadProps} directory={false} label="上传文件"/>}
+        <Form.Item labelCol={{ span: 7 }} wrapperCol={{ span: 15 }} label="附件">
+          {OSSData.host && <AliyunOSSUpload {...uploadProps} directory={false} label="上传文件" />}
         </Form.Item>
       </Form>
-      <Collapse style={{marginTop: 20}}>
+      <Collapse style={{ marginTop: 20 }}>
         <Collapse.Panel header="已上传附件" key="1">
-          <AttachmentTable version={version} canDelete={version.last_version == 0}/>
+          <AttachmentTable version={version} canDelete={version.last_version == 0} />
         </Collapse.Panel>
       </Collapse>
-      <Tabs defaultActiveKey="1">
+      <Tabs defaultActiveKey="1" onChange={handleTabChange}>
         {auditList.map((item, idx) => (
-          <TabPane tab={item.name} key={`${idx}_${item.title}`}>
+          <TabPane tab={item.name} key={`${idx}_${item.name}`}>
             <Row>
-              <Col span={17}>{item.FormComponents}</Col>
+              <Col span={17}>
+                <AuditDetailed
+                  allValues={formValueRef.current.form}
+                  items={item.items}
+                  form={form}
+                  onValuesChange={onFormValueChange}
+                  onTableValChange={onDIYTableChange}
+                />
+              </Col>
               <Col offset={1} span={6}>
                 {!approvalProcess[item.nodeId] ? ( //!formComponentValues[item.nodeId] ||
-                  <Empty description="请先填写表单"/>
+                  <Empty description="请先填写表单" />
                 ) : (
                   <ApprovalProcess
                     id={item.nodeId}
@@ -745,7 +899,7 @@ const uploadExcelByUrl = (nodeType, versionId) => {
 
         let len = exportJson.sheets.length;
         const excelData = exportJson.sheets?.map(item => {
-          return {...item, order: Number(item.order)};
+          return { ...item, order: Number(item.order) };
         });
         delete record.id;
         record.order = len;
@@ -753,7 +907,7 @@ const uploadExcelByUrl = (nodeType, versionId) => {
         record.status = '0';
         record.name = '投标成本';
         var res = [...excelData, record];
-        console.log(res);
+        // console.log(res);
         reslove(JSON.stringify(res));
       }
     );
@@ -773,7 +927,7 @@ async function getExcel(gridKey) {
   return JSON.parse(JSON.parse(res));
 }
 
-export default connect(({xflow, detail, user}) => ({
+export default connect(({ xflow, detail, user }) => ({
   flowDetail: xflow.flowDetail,
   versionList: detail.versionList,
   currentUser: user.currentUser,