fix: DIYTable 变更走Form onChange 事件

src/components/DDComponents/DIYTable/index.tsx

@@ -30,14 +30,76 @@ function DIYTable(props: IProps) {
   const { table, columns, displayOnly, onChange } = props;
   // table数据
   const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
-  // table 列配置
-  const [tableColumnDef, setTableColumnDef] = useState<ColumnsType<any>>([
+
+  // 列配置
+  const tableColumnDef: ColumnsType<any> = [
     {
       title: '序号',
       dataIndex: 'index',
       className: 'hidden',
     },
-  ]);
+  ];
+
+  const [commitValue, setCommitValue] = useState<any[]>([]);
+
+  const handleValueChange = (value: any, id: string, label: string) => {
+    let ids = id.split(';');
+    let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
+    let [columnID, tableID] = ids[1].split('>');
+    let [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;
+
+    const newValues = JSON.parse(JSON.stringify(commitValue)) || [];
+
+    if (newValues.length !== 0 && newValues[rowIndex] !== undefined) {
+      newValues.forEach((row: any, rindex: number) => {
+        if (rindex === rowIndex) {
+          if (row[colIndex] !== undefined) {
+            row.forEach((_col: any, cindex: number) => {
+              if (cindex === colIndex) {
+                row[colIndex] = cell;
+              }
+            });
+          } else {
+            row[colIndex] = cell;
+          }
+        }
+      });
+    } else {
+      newValues[rowIndex] = cols;
+    }
+
+    const textNode = columns?.find((item) => item.componentName === 'TextNote');
+    if (textNode) {
+      const textNodeIndex = columns?.findIndex(
+        (item) => item.componentName === 'TextNote',
+      );
+      const textCell = {
+        name: textNode.props.label,
+        id: textNode.props.id,
+        type: textNode.componentName,
+        value: [textNode.props.placeholder],
+      };
+      newValues.forEach((item) => {
+        if (textNodeIndex !== -1) {
+          item[textNodeIndex] = textCell;
+        }
+      });
+    }
+    setCommitValue(newValues);
+    onChange(newValues);
+  };
 
   // 表单填写时的表格生成
   const handleGenerateTable = () => {
@@ -63,7 +125,13 @@ function DIYTable(props: IProps) {
                   style={{ padding: '0', margin: '0' }}
                   options={column.props.options}
                   disabled={column.props.disabled}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -81,7 +149,13 @@ function DIYTable(props: IProps) {
                   placeholder={column.props.placeholder}
                   format={column.props.format}
                   disabled={column.props.disabled}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -99,7 +173,13 @@ function DIYTable(props: IProps) {
                   style={{ padding: '4px 11px' }}
                   disabled={column.props.disabled}
                   unit={column.props.unit}
-                  onChange={onChange}
+                  onChange={(value: any) => {
+                    handleValueChange(
+                      value,
+                      id,
+                      columnLabel + '>' + table.props.label,
+                    );
+                  }}
                 />
               );
             };
@@ -112,13 +192,13 @@ function DIYTable(props: IProps) {
                 <Input
                   disabled={column.props.disabled}
                   placeholder={column.props.placeholder}
-                  onChange={(e) =>
-                    onChange?.(
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                    handleValueChange(
                       e.target.value,
                       id,
                       columnLabel + '>' + table.props.label,
-                    )
-                  }
+                    );
+                  }}
                 />
               );
             };
@@ -146,30 +226,25 @@ function DIYTable(props: IProps) {
   // 当仅用作展示时
   const handleDisplayOnly = () => {
     const rows = columns;
-    const newTableData = [];
-    const newColumnDef: ColumnsType<any> = [];
-    if (rows && columns.length) {
+    if (rows && rows.length) {
       for (let index = 0; index < rows.length; index++) {
         // 把每一行的数据提出来到一个对象里
         if (rows) {
           const row = rows[index];
-
           if (index === 0) {
             // 列配置
             row.forEach((col: any) => {
-              newColumnDef.push({ title: col.name, dataIndex: col.type });
+              if (col) {
+                tableColumnDef.push({
+                  title: col?.name || '',
+                  dataIndex: col?.type || '',
+                  className: '',
+                });
+              }
             });
           }
-          let rowData: any = {};
-          row.forEach((col: any) => {
-            rowData[col.type] = col.value[0];
-            rowData.key = col.id + index;
-          });
-          newTableData.push(rowData);
         }
       }
-      setTableColumnDef(newColumnDef);
-      setTableData(newTableData);
     }
   };
 
@@ -177,17 +252,48 @@ function DIYTable(props: IProps) {
     setTableData([...tableData, { index: tableData.length }]);
   };
 
+  if (displayOnly) {
+    handleDisplayOnly();
+  } else {
+    handleGenerateTable();
+  }
+
   useEffect(() => {
-    if (displayOnly) {
-      handleDisplayOnly();
-    } else {
-      handleGenerateTable();
+    if (columns?.length === 0) {
+      return;
+    }
+    const rows = columns;
+    const newTableData = [];
+    if (rows && rows.length) {
+      if (displayOnly) {
+        for (let index = 0; index < rows.length; index++) {
+          // 把每一行的数据提出来到一个对象里
+          const row = rows[index];
+          const rowData: any = {};
+          if (displayOnly) {
+            row.forEach((col: any) => {
+              if (col) {
+                rowData.index = index + 1;
+                // eslint-disable-next-line prefer-destructuring
+                rowData[col.type] = col.value[0];
+                rowData.key = col.id + index;
+              }
+            });
+            newTableData.push(rowData);
+          }
+        }
+      } else {
+        newTableData.push({
+          index: 1,
+        });
+      }
+      setTableData(newTableData);
     }
-  }, []);
+  }, [columns]);
 
   return (
     <>
-      {table.name ? table.name : table.props.label}
+      {/* {table.name ? table.name : table.props.label} */}
       <Table
         style={displayOnly ? { margin: '10px 24px 10px 0' } : {}}
         columns={tableColumnDef}

src/pages/Flow/OaDetail.js

@@ -57,7 +57,7 @@ const OaDetail = () => {
 
   //填写表单实时计算审批流程
   const advanceSubmit = async (changedFields, allValues) => {
-    console.log(changedFields, allValues);
+    // console.log(changedFields, allValues);
     let formValues = (data?.formData || [])
       .map((item) => {
         const itemProps = item.props;
@@ -68,6 +68,7 @@ const OaDetail = () => {
           return {
             name: itemProps.label,
             id: itemProps.id,
+            type: item.componentName,
             value: [...val],
           };
         } else if (allValues[itemProps.id]) {
@@ -87,122 +88,123 @@ const OaDetail = () => {
       formComponentValues: formValues,
       audit_list: [],
     };
+
     formValueRef.current.form = formValues;
     run(params);
   };
 
-  const handleTableValChange = (value, id, label) => {
-    let ids = id.split(';');
-    let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
-    let [columnID, tableID] = ids[1].split('>');
-    let [columnLabel, tableLabel] = label.split('>');
+  // const handleTableValChange = (value, id, label) => {
+  //   let ids = id.split(';');
+  //   let [rowIndex, colIndex] = ids[0].split(',').map((item) => Number(item));
+  //   let [columnID, tableID] = ids[1].split('>');
+  //   let [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;
-    // 如果已经有数据
-    let oldTableData = [];
-    // 这里不知道为什么不能直接读取state（tableData）
-    setTableData((prevState) => {
-      oldTableData = prevState;
-      return prevState;
-    });
-    if (oldTableData && oldTableData.length > 0) {
-      let table = oldTableData.find((item) => item.id === tableID);
-      // 如果某个表格数据存在
-      if (table) {
-        const oldRows = table.value;
-        // 如果某个表格的行数据存在
-        if (oldRows) {
-          let odlCols = oldRows[rowIndex];
-          // 如果某个表格的某个行数据存在
-          if (odlCols) {
-            // 记录可编辑控件
-            table.value[rowIndex][colIndex] = cell;
-            // 不可编辑控件
-            table.value[rowIndex] = addUnEditableColumn(
-              table.value[rowIndex],
-              tableID,
-            );
-            const newTableData = oldTableData.map((item) => {
-              if (item.id === table.id) {
-                return table;
-              }
-              return item;
-            });
+  //   const cell = {
+  //     name: columnLabel,
+  //     id: columnID,
+  //     type: columnID.split('_')[0],
+  //     value: [value],
+  //   };
+  //   // 组装可能用到的数据
+  //   const cols = [];
+  //   cols[colIndex] = cell;
+  //   const rows = [];
+  //   rows[rowIndex] = cols;
+  //   // 如果已经有数据
+  //   let oldTableData = [];
+  //   // 这里不知道为什么不能直接读取state（tableData）
+  //   setTableData((prevState) => {
+  //     oldTableData = prevState;
+  //     return prevState;
+  //   });
+  //   if (oldTableData && oldTableData.length > 0) {
+  //     let table = oldTableData.find((item) => item.id === tableID);
+  //     // 如果某个表格数据存在
+  //     if (table) {
+  //       const oldRows = table.value;
+  //       // 如果某个表格的行数据存在
+  //       if (oldRows) {
+  //         let odlCols = oldRows[rowIndex];
+  //         // 如果某个表格的某个行数据存在
+  //         if (odlCols) {
+  //           // 记录可编辑控件
+  //           table.value[rowIndex][colIndex] = cell;
+  //           // 不可编辑控件
+  //           table.value[rowIndex] = addUnEditableColumn(
+  //             table.value[rowIndex],
+  //             tableID,
+  //           );
+  //           const newTableData = oldTableData.map((item) => {
+  //             if (item.id === table.id) {
+  //               return table;
+  //             }
+  //             return item;
+  //           });
 
-            setTableData(newTableData);
-          } else {
-            // 如果某个表格的某个行数据不存在
-            // 写入可编辑控件
-            table.value[rowIndex] = cols;
-            // 写入不可编辑控件的值
-            table.value[rowIndex] = addUnEditableColumn(
-              table.value[rowIndex],
-              tableID,
-            );
-            const newTableData = oldTableData.map((item) => {
-              if (item.id === table.id) {
-                return table;
-              }
-              return item;
-            });
-            setTableData([]);
-            setTableData(newTableData);
-          }
-        } else {
-          // 如果某个表格的行数据不存在
-          // 写入可编辑控件
-          table.value = rows;
-          // 写入不可编辑控件
-          table.value[rowIndex] = addUnEditableColumn(
-            table.value[rowIndex],
-            tableID,
-          );
-          const newTableData = oldTableData.map((item) => {
-            if (item.id === table.id) {
-              return table;
-            }
-            return item;
-          });
-          setTableData(newTableData);
-        }
-      } else {
-        // 如果某个table的数据不存在
-        rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
-        const newTableData = [
-          {
-            name: tableLabel,
-            id: tableID,
-            type: tableID.split('_')[0],
-            value: rows,
-          },
-        ];
-        setTableData([...oldTableData, ...newTableData]);
-      }
-    } else {
-      // 如果没有数据
-      // 添加不可编辑控件
-      rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
-      const newTableData = [
-        {
-          name: tableLabel,
-          id: tableID,
-          type: tableID.split('_')[0],
-          value: rows,
-        },
-      ];
-      setTableData(newTableData);
-    }
-  };
+  //           setTableData(newTableData);
+  //         } else {
+  //           // 如果某个表格的某个行数据不存在
+  //           // 写入可编辑控件
+  //           table.value[rowIndex] = cols;
+  //           // 写入不可编辑控件的值
+  //           table.value[rowIndex] = addUnEditableColumn(
+  //             table.value[rowIndex],
+  //             tableID,
+  //           );
+  //           const newTableData = oldTableData.map((item) => {
+  //             if (item.id === table.id) {
+  //               return table;
+  //             }
+  //             return item;
+  //           });
+  //           setTableData([]);
+  //           setTableData(newTableData);
+  //         }
+  //       } else {
+  //         // 如果某个表格的行数据不存在
+  //         // 写入可编辑控件
+  //         table.value = rows;
+  //         // 写入不可编辑控件
+  //         table.value[rowIndex] = addUnEditableColumn(
+  //           table.value[rowIndex],
+  //           tableID,
+  //         );
+  //         const newTableData = oldTableData.map((item) => {
+  //           if (item.id === table.id) {
+  //             return table;
+  //           }
+  //           return item;
+  //         });
+  //         setTableData(newTableData);
+  //       }
+  //     } else {
+  //       // 如果某个table的数据不存在
+  //       rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
+  //       const newTableData = [
+  //         {
+  //           name: tableLabel,
+  //           id: tableID,
+  //           type: tableID.split('_')[0],
+  //           value: rows,
+  //         },
+  //       ];
+  //       setTableData([...oldTableData, ...newTableData]);
+  //     }
+  //   } else {
+  //     // 如果没有数据
+  //     // 添加不可编辑控件
+  //     rows[rowIndex] = addUnEditableColumn(rows[rowIndex], tableID);
+  //     const newTableData = [
+  //       {
+  //         name: tableLabel,
+  //         id: tableID,
+  //         type: tableID.split('_')[0],
+  //         value: rows,
+  //       },
+  //     ];
+  //     setTableData(newTableData);
+  //   }
+  // };
 
   const addUnEditableColumn = (rows, tableID) => {
     const { columns: originColumns } = data.formData.find(
@@ -310,7 +312,6 @@ const OaDetail = () => {
             form={form}
             items={data?.formData}
             onValuesChange={advanceSubmit}
-            onTableValChange={handleTableValChange}
           />
         </Col>
         <Col span={12}>

src/pages/Flow/components/AuditDetailed.js

@@ -5,13 +5,7 @@ import { FormulaType } from '@/components/AuditForm/FormulaModal';
 
 const AuditDetailed = (props) => {
   // const [form] = Form.useForm();
-  const {
-    allValues = [],
-    items,
-    form,
-    onValuesChange,
-    onTableValChange,
-  } = props;
+  const { allValues = [], items, form, onValuesChange } = props;
 
   const depId = useMemo(() => {
     const id = items.find((item) => item.componentName == 'DepartmentField')
@@ -20,7 +14,7 @@ const AuditDetailed = (props) => {
     if (value) return value[0];
   }, [allValues, items]);
 
-  console.log(items, allValues);
+  // console.log(items, allValues);
   const data = useMemo(() => {
     let linkedData = {};
     items.forEach((d) => {
@@ -86,7 +80,7 @@ const AuditDetailed = (props) => {
             return formu.label;
           }
         });
-        console.log('-------44444-------------', item, strList);
+        // console.log('-------44444-------------', item, strList);
         const evalStr = strList?.join('');
         content = <DDComponents item={item} evalStr={evalStr} />;
       } else {
@@ -99,18 +93,14 @@ const AuditDetailed = (props) => {
     // if (!component) return null;
     return (
       <>
-        {item?.isTable === undefined ? (
-          <Form.Item
-            key={id}
-            name={id}
-            label={formLabel}
-            rules={[{ required: required }]}
-          >
-            {renderComponents()}
-          </Form.Item>
-        ) : (
-          <DDComponents item={item} onChange={onTableValChange} />
-        )}
+        <Form.Item
+          key={id}
+          name={id}
+          label={formLabel}
+          rules={[{ required: required }]}
+        >
+          {renderComponents()}
+        </Form.Item>
       </>
     );
   };

src/pages/Flow/components/FormAndFilesNode.js

@@ -6,13 +6,17 @@ import AttachmentTable from '@/components/AttachmentTable';
 import InnerContactField from '@/components/DDComponents/InnerContactField';
 import DepartmentField from '@/components/DDComponents/DepartmentField';
 import ProjectField from '@/components/DDComponents/ProjectField';
-import DIYTable from '../../../components/DDComponents/DIYTable';
+import DIYTable from '@/components/DDComponents/DIYTable';
 
 const FormAndFilesNode = (props) => {
   const { formData, fileList } = props;
 
   const renderFormItem = (type, value, item) => {
     switch (type) {
+      case 'DIYTable':
+        return (
+          <DIYTable table={item} columns={item.value} displayOnly={true} />
+        );
       case 'InnerContactField':
         return <InnerContactField value={value} disabled={true} />;
       case 'DepartmentField':
@@ -48,25 +52,15 @@ const FormAndFilesNode = (props) => {
             const value = item.value.join(',');
             return (
               <>
-                {item.type !== 'DIYTable' ? (
-                  <Form.Item
-                    key={`FormAndFilesNode_${idx}`}
-                    labelCol={{ span: 4 }}
-                    wrapperCol={{ span: 14 }}
-                    label={item.name}
-                    labelAlign="left"
-                  >
-                    {renderFormItem(item.type, value, item)}
-                  </Form.Item>
-                ) : (
-                  <div style={{ marginBottom: '24px' }}>
-                    <DIYTable
-                      table={item}
-                      columns={item.value}
-                      displayOnly={true}
-                    ></DIYTable>
-                  </div>
-                )}
+                <Form.Item
+                  key={`FormAndFilesNode_${idx}`}
+                  labelCol={{ span: 4 }}
+                  wrapperCol={{ span: 14 }}
+                  label={item.name}
+                  labelAlign="left"
+                >
+                  {renderFormItem(item.type, value, item)}
+                </Form.Item>
               </>
             );
           })}