unsure(审批流-生成): 完成表格控件的生成和保存

src/components/DDComponents/DDDateField/index.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { DatePicker } from 'antd';
 
 function DDDateField(props) {
-  const { format = "", disabled, onChange, placeholder } = props;
+  const { format = '', disabled, onChange, placeholder } = props;
 
   const handleChange = (date) => {
-    onChange?.(date.format('YYYY-MM-DD HH:mm:ss'));
+    onChange?.(date.format('YYYY-MM-DD HH:mm:ss'), props.id, props.label);
   };
   return (
     <DatePicker

src/components/DDComponents/DDSelectField/index.js

@@ -10,11 +10,11 @@ function DDSelectField(props) {
     <Select
       style={{ width: '100%' }}
       disabled={disabled}
-      onChange={value => {
-        onChange(String(value));
+      onChange={(value) => {
+        onChange(String(value), props.id, props.label);
       }}
     >
-      {options?.map(cur => {
+      {options?.map((cur) => {
         return (
           <Option key={cur} value={cur}>
             {cur}

src/components/DDComponents/DIYTable/index.css

@@ -0,0 +1,7 @@
+.hidden {
+  display: none;
+}
+
+.p-8{
+  padding: 10px !important;
+}

src/components/DDComponents/DIYTable/index.tsx

@@ -0,0 +1,166 @@
+import React, { useState } from 'react';
+// @ts-ignore
+import { Button, Input, Table } from 'antd';
+import type { ColumnsType } from 'antd/lib/table';
+import DDSelectField from '@/components/DDComponents/DDSelectField';
+import './index.css';
+import DDDateField from '@/components/DDComponents/DDDateField';
+import NumberField from '@/components/DDComponents/NumberField';
+import TextNote from '@/components/DDComponents/TextNote';
+import { PlusOutlined } from '@ant-design/icons';
+
+interface IProps {
+  tableID?: string;
+  columns?: Array<any>;
+  onChange: (e?: any, id?: string, label?: string) => void;
+}
+
+type TableDataType = {
+  index: number;
+  id?: string;
+  col1?: any;
+  col2?: any;
+  col3?: any;
+  col4?: any;
+  col5?: any;
+};
+
+function DIYTable(props: IProps) {
+  const { tableID, columns, onChange } = props;
+
+  const [tableData, setTableData] = useState<TableDataType[]>([{ index: 1 }]);
+  // 列配置
+  const tableColumnDef: 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 + '>' + tableID
+                }
+                label={column.props.label + ';' + rowIndex + ',' + index}
+                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 + '>' + tableID
+                }
+                label={column.props.label + ';' + rowIndex + ',' + index}
+                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 + '>' + tableID
+                }
+                label={column.props.label + ';' + rowIndex + ',' + index}
+                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 +
+                      ';' +
+                      column.props.id +
+                      '>' +
+                      tableID,
+                    column.props.label + ';' + rowIndex + ',' + index,
+                  )
+                }
+              />
+            );
+          };
+          break;
+        case 'TextNote':
+          colDef.title = '说明';
+          colDef.render = (_: any, __: any, rowIndex: number) => {
+            return (
+              <TextNote
+                id={
+                  rowIndex + ',' + index + ';' + column.props.id + '>' + tableID
+                }
+                style={{ padding: '0', margin: '0' }}
+                value={column.props.placeholder}
+              />
+            );
+          };
+          break;
+      }
+      tableColumnDef.push(colDef);
+    }
+  }
+
+  const handleRowChange = () => {
+    setTableData([...tableData, { index: tableData.length }]);
+  };
+
+  return (
+    <>
+      <Table
+        columns={tableColumnDef}
+        dataSource={tableData}
+        pagination={false}
+      />
+      <Button
+        type="dashed"
+        icon={<PlusOutlined />}
+        block
+        onClick={handleRowChange}
+      >
+        新增行
+      </Button>
+    </>
+  );
+}
+
+export default DIYTable;

src/components/DDComponents/NumberField/index.js

@@ -2,15 +2,16 @@ import React from 'react';
 import { InputNumber } from 'antd';
 
 function NumberField(props) {
-  const { onChange, disabled, unit } = props;
+  const { onChange, disabled, unit, size, width } = props;
 
   return (
     <InputNumber
-      style={{ width: '100%' }}
+      size={size}
+      style={{ width: '100%', padding: size === 'small' ? '4px' : '0' }}
       disabled={disabled}
       formatter={(value) => `${value}${unit || ''}`}
       onChange={(e) => {
-        onChange?.(e ? String(e) : 0);
+        onChange?.(e ? String(e) : 0, props.id, props.label);
       }}
     />
   );

src/components/DDComponents/index.js

@@ -13,6 +13,7 @@ import DDDateField from './DDDateField';
 import DDDateRangeField from './DDDateRangeField';
 import DDAttachment from './DDAttachment';
 import TextNote from './TextNote';
+import DIYTable from './DIYTable';
 
 export default function DDComponents(props) {
   const { item, onChange } = props;
@@ -111,6 +112,15 @@ export default function DDComponents(props) {
     case 'ManufacturerField':
       component = <ManufacturerField onChange={onChange} />;
       break;
+    case 'DIYTable':
+      component = (
+        <DIYTable
+          tableID={item.props.id}
+          columns={item.columns}
+          onChange={onChange}
+        />
+      );
+      break;
     case 'RelateField': //关联审批单
       component = '关联审批单控件未渲染!';
       break;

src/pages/Flow/OaDetail.js

@@ -15,8 +15,11 @@ import { useParams, useRequest, useNavigate } from 'umi';
 
 const OaDetail = () => {
   const [form] = Form.useForm();
+
   const [approvalProcess, setApprovalProcess] = useState([]);
   const [auditCheck, setAuditCheck] = useState([]);
+  const [tableData, setTableData] = useState({});
+
   const { oaId } = useParams();
   const formValueRef = useRef({
     form: '',
@@ -87,31 +90,81 @@ const OaDetail = () => {
     run(params);
   };
 
-  const submit = () => {
+  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 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);
+    }
+  };
+
+  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],
+                });
+              }
+            }
+          }
+        }
+      }
+    }
+    return result;
+  };
+
+  const submit = async () => {
     form.validateFields().then((values) => {
       const { form: formCur } = formValueRef.current;
-      let audit_list = [],
-        cc_list = [];
+      let audit_list = [];
+      let cc_list = [];
       approvalProcess?.forEach((item, index) => {
-        let arr = item[0].is_cc == 1 ? cc_list : audit_list;
+        let arr = item[0].is_cc === 1 ? cc_list : audit_list;
 
-        if (item[0].type == 'role') arr.push(auditCheck[index]);
-        else if (item[0].type == 'leader')
+        if (item[0].type === 'role') arr.push(auditCheck[index]);
+        else if (item[0].type === 'leader')
           arr.push(
             ...leaderData.slice(0, item[0].value).map((leader) => leader.ID),
           );
         else arr.push(item.map((cur) => cur.value));
       });
-      let files = [],
-        formData = [];
+      let files = [];
+      let formData = [];
       formCur.forEach((item) => {
-        if (item.type == 'DDAttachment') {
+        if (item.type === 'DDAttachment') {
           files = files.concat(item.value);
         } else {
           formData.push(item);
         }
       });
-      console.log(audit_list, cc_list);
+
+      formData = formData.concat(...convertTableData());
+
       createRun({
         flow_id: Number(oaId),
         form: JSON.stringify(formData),
@@ -150,6 +203,7 @@ const OaDetail = () => {
             form={form}
             items={data?.formData}
             onValuesChange={advanceSubmit}
+            onTableValChange={handleTableValChange}
           />
         </Col>
         <Col span={12}>

src/pages/Flow/components/AuditDetailed.js

@@ -1,10 +1,11 @@
 import DDComponents from '@/components/DDComponents';
 import React, { useMemo, useState } from 'react';
 import { Button, Form } from 'antd';
+import tableField from '../../../components/DDComponents/TableField';
 
 const AuditDetailed = (props) => {
   // const [form] = Form.useForm();
-  const { items, form, onValuesChange } = props;
+  const { items, form, onValuesChange, onTableValChange } = props;
   const data = useMemo(() => {
     let linkedData = {};
     items.forEach((d) => {
@@ -57,17 +58,31 @@ const AuditDetailed = (props) => {
       }
     }
 
+    // const handleColumnChange = (value, id) => {
+    //   console.log(value, id);
+    //   let ids = id.split(';');
+    //   let position = ids[0].split(',').map((item) => Number(item));
+    //   let columnID = ids[1];
+    //   onColumnValChange(position, columnID);
+    // };
+
     // const component = DDComponents({ item });
     // if (!component) return null;
     return (
-      <Form.Item
-        key={id}
-        name={id}
-        label={formLabel}
-        rules={[{ required: required }]}
-      >
-        <DDComponents item={item} />
-      </Form.Item>
+      <>
+        {item?.isTable === undefined ? (
+          <Form.Item
+            key={id}
+            name={id}
+            label={formLabel}
+            rules={[{ required: required }]}
+          >
+            <DDComponents item={item} />
+          </Form.Item>
+        ) : (
+          <DDComponents item={item} onChange={onTableValChange} />
+        )}
+      </>
     );
   };