fix: 修复控件提交后文本说明控件信息丢失问题

src/components/DDComponents/DIYTable/index.tsx

@@ -10,10 +10,10 @@ import TextNote from '@/components/DDComponents/TextNote';
 import { PlusOutlined } from '@ant-design/icons';
 
 interface IProps {
-  table?: any;
-  columns?: Array<any>;
-  onChange?: (e?: any, id?: string, label?: string) => void;
-  displayOnly?: boolean;
+  table?: any; // 整个表格
+  columns?: Array<any>; // 当前列配置
+  onChange?: (e?: any, id?: string, label?: string) => void; // 表格修改后的值
+  displayOnly?: boolean; // 是否仅用于展示
 }
 
 type TableDataType = {
@@ -28,9 +28,9 @@ type TableDataType = {
 
 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>>([
     {
       title: '序号',
@@ -39,6 +39,7 @@ function DIYTable(props: IProps) {
     },
   ]);
 
+  // 表单填写时的表格生成
   const handleGenerateTable = () => {
     if (columns !== undefined && columns.length) {
       for (let index = 0; index < columns.length; index++) {
@@ -50,21 +51,14 @@ function DIYTable(props: IProps) {
           title: columnLabel || column.name,
           className: 'p-8',
         };
-
         switch (column.componentName) {
           case 'DDSelectField':
             colDef.render = (_: any, __: any, rowIndex: number) => {
+              let id =
+                rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
               return (
                 <DDSelectField
-                  id={
-                    rowIndex +
-                    ',' +
-                    index +
-                    ';' +
-                    columnID +
-                    '>' +
-                    table.props.id
-                  }
+                  id={id}
                   label={columnLabel + '>' + table.props.label}
                   style={{ padding: '0', margin: '0' }}
                   options={column.props.options}
@@ -76,17 +70,11 @@ function DIYTable(props: IProps) {
             break;
           case 'DDDateField':
             colDef.render = (_: any, __: any, rowIndex: number) => {
+              let id =
+                rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
               return (
                 <DDDateField
-                  id={
-                    rowIndex +
-                    ',' +
-                    index +
-                    ';' +
-                    columnID +
-                    '>' +
-                    table.props.id
-                  }
+                  id={id}
                   label={columnLabel + '>' + table.props.label}
                   key={index + rowIndex + ''}
                   style={{ padding: '0', margin: '0' }}
@@ -100,17 +88,11 @@ function DIYTable(props: IProps) {
             break;
           case 'NumberField':
             colDef.render = (_: any, __: any, rowIndex: number) => {
+              let id =
+                rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
               return (
                 <NumberField
-                  id={
-                    rowIndex +
-                    ',' +
-                    index +
-                    ';' +
-                    columnID +
-                    '>' +
-                    table.props.id
-                  }
+                  id={id}
                   label={columnLabel + '>' + table.props.label}
                   size="small"
                   width="50%"
@@ -124,6 +106,8 @@ function DIYTable(props: IProps) {
             break;
           case 'TextField':
             colDef.render = (_: any, __: any, rowIndex: number) => {
+              let id =
+                rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
               return (
                 <Input
                   disabled={column.props.disabled}
@@ -131,13 +115,7 @@ function DIYTable(props: IProps) {
                   onChange={(e) =>
                     onChange?.(
                       e.target.value,
-                      rowIndex +
-                        ',' +
-                        index +
-                        ';' +
-                        columnID +
-                        '>' +
-                        table.props.id,
+                      id,
                       columnLabel + '>' + table.props.label,
                     )
                   }
@@ -148,17 +126,11 @@ function DIYTable(props: IProps) {
           case 'TextNote':
             colDef.title = '说明';
             colDef.render = (_: any, __: any, rowIndex: number) => {
+              let id =
+                rowIndex + ',' + index + ';' + columnID + '>' + table.props.id;
               return (
                 <TextNote
-                  id={
-                    rowIndex +
-                    ',' +
-                    index +
-                    ';' +
-                    columnID +
-                    '>' +
-                    table.props.id
-                  }
+                  id={id}
                   style={{ padding: '0', margin: '0' }}
                   value={column.props.placeholder}
                 />
@@ -171,6 +143,7 @@ function DIYTable(props: IProps) {
     }
   };
 
+  // 当仅用作展示时
   const handleDisplayOnly = () => {
     const rows = columns;
     const newTableData = [];
@@ -200,6 +173,10 @@ function DIYTable(props: IProps) {
     }
   };
 
+  const handleRowChange = () => {
+    setTableData([...tableData, { index: tableData.length }]);
+  };
+
   useEffect(() => {
     if (displayOnly) {
       handleDisplayOnly();
@@ -208,10 +185,6 @@ function DIYTable(props: IProps) {
     }
   }, []);
 
-  const handleRowChange = () => {
-    setTableData([...tableData, { index: tableData.length }]);
-  };
-
   return (
     <>
       {table.name ? table.name : table.props.label}

src/pages/Flow/OaDetail.js

@@ -97,6 +97,18 @@ const OaDetail = () => {
     let [columnID, tableID] = ids[1].split('>');
     let [columnLabel, tableLabel] = label.split('>');
 
+    const { columns: originColumns } = data.formData.find(
+      (item) => item.props.id === tableID,
+    );
+
+    // 检查是否有文字说明控件，有的话需要写入tableData
+    const allTextNote = originColumns.filter((item, index) => {
+      if (item.componentName === 'TextNote') {
+        item.index = index;
+        return true;
+      }
+    });
+
     const cell = {
       name: columnLabel,
       id: columnID,
@@ -106,25 +118,61 @@ const OaDetail = () => {
     // 组装可能用到的数据
     const cols = [];
     cols[colIndex] = cell;
+
+    // 对这个表格的每个第 allTextNote item 的 index 列写入
+    let textNoteCellList = [];
+    if (allTextNote && allTextNote.length) {
+      // 不可编辑控件
+      textNoteCellList = allTextNote.map((item) => {
+        return {
+          name: item.props.label,
+          id: item.props.id,
+          type: item.componentName,
+          value: [item.props.placeholder],
+          colIndex: item.index,
+        };
+      });
+    }
+
     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;
+            // 不可编辑控件
+            if (textNoteCellList.length) {
+              for (const note of textNoteCellList) {
+                table.value[rowIndex][note.colIndex] = note;
+              }
+            }
             const newTableData = tableData.map((item) => {
               if (item.id === table.id) {
                 return table;
               }
               return item;
             });
+
             setTableData(newTableData);
           } else {
+            // 如果某个表格的某个行数据不存在
+            // 写入可编辑控件
             table.value[rowIndex] = cols;
+            // 写入不可编辑控件的值
+            if (textNoteCellList.length) {
+              for (const note of textNoteCellList) {
+                table.value[rowIndex][note.colIndex] = note;
+              }
+            }
             const newTableData = tableData.map((item) => {
               if (item.id === table.id) {
                 return table;
@@ -134,7 +182,15 @@ const OaDetail = () => {
             setTableData(newTableData);
           }
         } else {
+          // 如果某个表格的行数据不存在
+          // 写入可编辑控件
           table.value = rows;
+          // 写入不可编辑控件
+          if (textNoteCellList.length) {
+            for (const note of textNoteCellList) {
+              table.value[rowIndex][note.colIndex] = note;
+            }
+          }
           const newTableData = tableData.map((item) => {
             if (item.id === table.id) {
               return table;
@@ -156,6 +212,11 @@ const OaDetail = () => {
         setTableData(newTableData);
       }
     } else {
+      if (textNoteCellList.length) {
+        for (const note of textNoteCellList) {
+          rows[rowIndex][note.colIndex] = note;
+        }
+      }
       const newTableData = [
         {
           name: tableLabel,
@@ -164,6 +225,7 @@ const OaDetail = () => {
           value: rows,
         },
       ];
+      console.log(newTableData);
       setTableData(newTableData);
     }
   };