feat: 完成表格审核时的展示

src/components/DDComponents/DIYTable/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 // @ts-ignore
 import { Button, Input, Table } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
@@ -12,7 +12,8 @@ import { PlusOutlined } from '@ant-design/icons';
 interface IProps {
   table?: any;
   columns?: Array<any>;
-  onChange: (e?: any, id?: string, label?: string) => void;
+  onChange?: (e?: any, id?: string, label?: string) => void;
+  displayOnly?: boolean;
 }
 
 type TableDataType = {
@@ -26,143 +27,186 @@ type TableDataType = {
 };
 
 function DIYTable(props: IProps) {
-  const { table, columns, onChange } = props;
+  const { table, columns, displayOnly, onChange } = props;
 
   const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
-  // 列配置
-  const tableColumnDef: ColumnsType<any> = [
+
+  const [tableColumnDef, setTableColumnDef] = useState<ColumnsType<any>>([
     {
       title: '序号',
       dataIndex: 'index',
       className: 'hidden',
     },
-  ];
-  if (columns !== undefined && columns.length) {
-    for (let index = 0; index < columns.length; index++) {
-      let column = columns[index];
-      let colDef: any = {
-        dataIndex: 'col' + (index + 1),
-        title: column.props.label,
-        className: 'p-8',
-      };
-      switch (column.componentName) {
-        case 'DDSelectField':
-          colDef.render = (_: any, __: any, rowIndex: number) => {
-            return (
-              <DDSelectField
-                id={
-                  rowIndex +
-                  ',' +
-                  index +
-                  ';' +
-                  column.props.id +
-                  '>' +
-                  table.props.id
-                }
-                label={column.props.label + '>' + table.props.label}
-                style={{ padding: '0', margin: '0' }}
-                options={column.props.options}
-                disabled={column.props.disabled}
-                onChange={onChange}
-              />
-            );
-          };
-          break;
-        case 'DDDateField':
-          colDef.render = (_: any, __: any, rowIndex: number) => {
-            return (
-              <DDDateField
-                id={
-                  rowIndex +
-                  ',' +
-                  index +
-                  ';' +
-                  column.props.id +
-                  '>' +
-                  table.props.id
-                }
-                label={column.props.label + '>' + table.props.label}
-                key={index + rowIndex + ''}
-                style={{ padding: '0', margin: '0' }}
-                placeholder={column.props.placeholder}
-                format={column.props.format}
-                disabled={column.props.disabled}
-                onChange={onChange}
-              />
-            );
-          };
-          break;
-        case 'NumberField':
-          colDef.render = (_: any, __: any, rowIndex: number) => {
-            return (
-              <NumberField
-                id={
-                  rowIndex +
-                  ',' +
-                  index +
-                  ';' +
-                  column.props.id +
-                  '>' +
-                  table.props.id
-                }
-                label={column.props.label + '>' + table.props.label}
-                size="small"
-                width="50%"
-                style={{ padding: '4px 11px' }}
-                disabled={column.props.disabled}
-                unit={column.props.unit}
-                onChange={onChange}
-              />
-            );
-          };
-          break;
-        case 'TextField':
-          colDef.render = (_: any, __: any, rowIndex: number) => {
-            return (
-              <Input
-                disabled={column.props.disabled}
-                placeholder={column.props.placeholder}
-                onChange={(e) =>
-                  onChange?.(
-                    e.target.value,
+  ]);
+
+  const handleGenerateTable = () => {
+    if (columns !== undefined && columns.length) {
+      for (let index = 0; index < columns.length; index++) {
+        let column = columns[index];
+        let columnID = column.props.id;
+        let columnLabel = column.props.label;
+        let colDef: any = {
+          dataIndex: 'col' + (index + 1),
+          title: columnLabel || column.name,
+          className: 'p-8',
+        };
+
+        switch (column.componentName) {
+          case 'DDSelectField':
+            colDef.render = (_: any, __: any, rowIndex: number) => {
+              return (
+                <DDSelectField
+                  id={
+                    rowIndex +
+                    ',' +
+                    index +
+                    ';' +
+                    columnID +
+                    '>' +
+                    table.props.id
+                  }
+                  label={columnLabel + '>' + table.props.label}
+                  style={{ padding: '0', margin: '0' }}
+                  options={column.props.options}
+                  disabled={column.props.disabled}
+                  onChange={onChange}
+                />
+              );
+            };
+            break;
+          case 'DDDateField':
+            colDef.render = (_: any, __: any, rowIndex: number) => {
+              return (
+                <DDDateField
+                  id={
                     rowIndex +
-                      ',' +
-                      index +
-                      ';' +
-                      column.props.id +
-                      '>' +
-                      table.props.id,
-                    column.props.label + '>' + table.props.label,
-                  )
-                }
-              />
-            );
-          };
-          break;
-        case 'TextNote':
-          colDef.title = '说明';
-          colDef.render = (_: any, __: any, rowIndex: number) => {
-            return (
-              <TextNote
-                id={
-                  rowIndex +
-                  ',' +
-                  index +
-                  ';' +
-                  column.props.id +
-                  '>' +
-                  table.props.id
-                }
-                style={{ padding: '0', margin: '0' }}
-                value={column.props.placeholder}
-              />
-            );
-          };
-          break;
+                    ',' +
+                    index +
+                    ';' +
+                    columnID +
+                    '>' +
+                    table.props.id
+                  }
+                  label={columnLabel + '>' + table.props.label}
+                  key={index + rowIndex + ''}
+                  style={{ padding: '0', margin: '0' }}
+                  placeholder={column.props.placeholder}
+                  format={column.props.format}
+                  disabled={column.props.disabled}
+                  onChange={onChange}
+                />
+              );
+            };
+            break;
+          case 'NumberField':
+            colDef.render = (_: any, __: any, rowIndex: number) => {
+              return (
+                <NumberField
+                  id={
+                    rowIndex +
+                    ',' +
+                    index +
+                    ';' +
+                    columnID +
+                    '>' +
+                    table.props.id
+                  }
+                  label={columnLabel + '>' + table.props.label}
+                  size="small"
+                  width="50%"
+                  style={{ padding: '4px 11px' }}
+                  disabled={column.props.disabled}
+                  unit={column.props.unit}
+                  onChange={onChange}
+                />
+              );
+            };
+            break;
+          case 'TextField':
+            colDef.render = (_: any, __: any, rowIndex: number) => {
+              return (
+                <Input
+                  disabled={column.props.disabled}
+                  placeholder={column.props.placeholder}
+                  onChange={(e) =>
+                    onChange?.(
+                      e.target.value,
+                      rowIndex +
+                        ',' +
+                        index +
+                        ';' +
+                        columnID +
+                        '>' +
+                        table.props.id,
+                      columnLabel + '>' + table.props.label,
+                    )
+                  }
+                />
+              );
+            };
+            break;
+          case 'TextNote':
+            colDef.title = '说明';
+            colDef.render = (_: any, __: any, rowIndex: number) => {
+              return (
+                <TextNote
+                  id={
+                    rowIndex +
+                    ',' +
+                    index +
+                    ';' +
+                    columnID +
+                    '>' +
+                    table.props.id
+                  }
+                  style={{ padding: '0', margin: '0' }}
+                  value={column.props.placeholder}
+                />
+              );
+            };
+            break;
+        }
+        tableColumnDef.push(colDef);
+      }
+    }
+  };
+
+  const handleDisplayOnly = () => {
+    const rows = columns;
+    const newTableData = [];
+    const newColumnDef: ColumnsType<any> = [];
+    if (rows && columns.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 });
+            });
+          }
+          let rowData: any = {};
+          row.forEach((col: any) => {
+            rowData[col.type] = col.value[0];
+            rowData.key = col.id + index;
+          });
+          newTableData.push(rowData);
+        }
       }
-      tableColumnDef.push(colDef);
+      setTableColumnDef(newColumnDef);
+      setTableData(newTableData);
+    }
+  };
+
+  useEffect(() => {
+    if (displayOnly) {
+      handleDisplayOnly();
+    } else {
+      handleGenerateTable();
     }
-  }
+  }, []);
 
   const handleRowChange = () => {
     setTableData([...tableData, { index: tableData.length }]);
@@ -170,8 +214,9 @@ function DIYTable(props: IProps) {
 
   return (
     <>
-      {table.props.label}
+      {table.name ? table.name : table.props.label}
       <Table
+        style={displayOnly ? { margin: '10px 24px 10px 0' } : {}}
         columns={tableColumnDef}
         dataSource={tableData}
         pagination={false}
@@ -181,6 +226,7 @@ function DIYTable(props: IProps) {
         icon={<PlusOutlined />}
         block
         onClick={handleRowChange}
+        style={displayOnly ? { display: 'none' } : {}}
       >
         新增行
       </Button>

src/pages/Flow/OaAuditDetail.js

@@ -13,10 +13,8 @@ import { Type } from '../Profile';
 import { queryContractDetail } from '../../services/contract';
 
 function OaAuditDetail() {
-  const {
-    initialState,
-  } = useModel('@@initialState');
-  const user = initialState?.user || {}
+  const { initialState } = useModel('@@initialState');
+  const user = initialState?.user || {};
   const [auditVisible, setAuditVisible] = useState(false);
   const location = useLocation();
   const {

src/pages/Flow/components/FormAndFilesNode.js

@@ -1,16 +1,17 @@
 import { Card, Col, Row, Empty } from 'antd';
-import { Form } from 'antd';
+import { Form, Table } from 'antd';
 import { useMemo, useState } from 'react';
 import { useModel } from 'umi';
 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';
 
 const FormAndFilesNode = (props) => {
   const { formData, fileList } = props;
 
-  const renderFormItem = (type, value) => {
+  const renderFormItem = (type, value, item) => {
     switch (type) {
       case 'InnerContactField':
         return <InnerContactField value={value} disabled={true} />;
@@ -40,20 +41,33 @@ const FormAndFilesNode = (props) => {
     if (!data) return <Empty description="没有表单信息" />;
     try {
       const formData = JSON.parse(data);
-      if (formData.length == 0) return <Empty description="没有表单信息" />;
+      if (formData.length === 0) return <Empty description="没有表单信息" />;
       return (
         <>
           {formData.map((item, idx) => {
             const value = item.value.join(',');
             return (
-              <Form.Item
-                key={`FormAndFilesNode_${idx}`}
-                labelCol={{ span: 4 }}
-                wrapperCol={{ span: 14 }}
-                label={item.name}
-              >
-                {renderFormItem(item.type, value)}
-              </Form.Item>
+              <>
+                {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>
+                )}
+              </>
             );
           })}
         </>