feat(审批流): 修改表格控件保存时的数据结构

src/components/DDComponents/DIYTable/index.tsx

@@ -59,7 +59,7 @@ function DIYTable(props: IProps) {
                   '>' +
                   table.props.id
                 }
-                label={column.props.label + ';' + rowIndex + ',' + index}
+                label={column.props.label + '>' + table.props.label}
                 style={{ padding: '0', margin: '0' }}
                 options={column.props.options}
                 disabled={column.props.disabled}
@@ -81,7 +81,7 @@ function DIYTable(props: IProps) {
                   '>' +
                   table.props.id
                 }
-                label={column.props.label + ';' + rowIndex + ',' + index}
+                label={column.props.label + '>' + table.props.label}
                 key={index + rowIndex + ''}
                 style={{ padding: '0', margin: '0' }}
                 placeholder={column.props.placeholder}
@@ -105,7 +105,7 @@ function DIYTable(props: IProps) {
                   '>' +
                   table.props.id
                 }
-                label={column.props.label + ';' + rowIndex + ',' + index}
+                label={column.props.label + '>' + table.props.label}
                 size="small"
                 width="50%"
                 style={{ padding: '4px 11px' }}
@@ -132,7 +132,7 @@ function DIYTable(props: IProps) {
                       column.props.id +
                       '>' +
                       table.props.id,
-                    column.props.label + ';' + rowIndex + ',' + index,
+                    column.props.label + '>' + table.props.label,
                   )
                 }
               />

src/pages/Flow/OaDetail.js

@@ -12,13 +12,14 @@ import {
   queryLeader,
 } from '@/services/boom';
 import { useParams, useRequest, useNavigate } from 'umi';
+import table from '../Table';
 
 const OaDetail = () => {
   const [form] = Form.useForm();
 
   const [approvalProcess, setApprovalProcess] = useState([]);
   const [auditCheck, setAuditCheck] = useState([]);
-  const [tableData, setTableData] = useState({});
+  const [tableData, setTableData] = useState([]);
 
   const { oaId } = useParams();
   const formValueRef = useRef({
@@ -94,48 +95,77 @@ const OaDetail = () => {
     let ids = id.split(';');
     let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
     let [columnID, tableID] = ids[1].split('>');
-    let cell = { [columnID]: value + '|' + label };
-    let rows = [];
-    rows[rowIndex] = cell;
-    let table = { [tableID]: rows };
-    if (tableData) {
-      if (tableData[tableID]) {
-        if (tableData[tableID][rowIndex]) {
-          tableData[tableID][rowIndex][columnID] = value + '|' + label;
-        } else {
-          tableData[tableID][rowIndex] = cell;
-        }
-      } else {
-        tableData[tableID] = rows;
-      }
-      setTableData(tableData);
-    } else {
-      setTableData(table);
-    }
-  };
+    let [columnLabel, tableLabel] = label.split('>');
 
-  const convertTableData = () => {
-    let result = [];
-    for (const tableKey in tableData) {
-      if (Object.hasOwn(tableData, tableKey)) {
-        for (const rows of tableData[tableKey]) {
-          if (rows) {
-            for (const rowKey in rows) {
-              if (Object.hasOwn(rows, rowKey)) {
-                let [value, label] = rows[rowKey].split('|');
-                result.push({
-                  id: tableKey + '<' + rowKey,
-                  name: label,
-                  type: rowKey.split('_')[0],
-                  value: [value],
-                });
+    const cell = {
+      name: columnLabel,
+      id: columnID,
+      type: columnID.split('_')[0],
+      value: [value],
+    };
+    // 组装可能用到的数据
+    const cols = [];
+    cols[colIndex] = cell;
+    const rows = [];
+    rows[rowIndex] = cols;
+    if (tableData.length > 0) {
+      let table = tableData.find((item) => item.id === tableID);
+      if (table) {
+        const oldRows = table.value;
+        if (oldRows) {
+          let odlCols = oldRows[rowIndex];
+          if (odlCols) {
+            table.value[rowIndex][colIndex] = cell;
+            const newTableData = tableData.map((item) => {
+              if (item.id === table.id) {
+                return table;
               }
-            }
+              return item;
+            });
+            setTableData(newTableData);
+          } else {
+            table.value[rowIndex] = cols;
+            const newTableData = tableData.map((item) => {
+              if (item.id === table.id) {
+                return table;
+              }
+              return item;
+            });
+            setTableData(newTableData);
           }
+        } else {
+          table.value = rows;
+          const newTableData = tableData.map((item) => {
+            if (item.id === table.id) {
+              return table;
+            }
+            return item;
+          });
+          setTableData(newTableData);
         }
+      } else {
+        const newTableData = [
+          ...tableData,
+          {
+            name: tableLabel,
+            id: tableID,
+            type: tableID.split('_')[0],
+            value: rows,
+          },
+        ];
+        setTableData(newTableData);
       }
+    } else {
+      const newTableData = [
+        {
+          name: tableLabel,
+          id: tableID,
+          type: tableID.split('_')[0],
+          value: rows,
+        },
+      ];
+      setTableData(newTableData);
     }
-    return result;
   };
 
   const submit = async () => {
@@ -163,7 +193,15 @@ const OaDetail = () => {
         }
       });
 
-      formData = formData.concat(...convertTableData());
+      // 根据表格在原来的form中的顺序插入
+      const tableIndex = tableData.map((table) => {
+        return data.formData.findIndex((item) => item.props.id === table.id);
+      });
+
+      // 按保存的顺序把表格再插入进去
+      tableIndex.forEach((item, index) => {
+        formData.splice(item, 0, tableData[index]);
+      });
 
       createRun({
         flow_id: Number(oaId),