GtDigManageWeb/src/pages/Flow/OaDetail.js

import React, { useRef, useState } from 'react';
import { Button, Col, Empty, Form, Row, message } from 'antd';
import ApprovalProcess from './components/ApprovalProcess';
import AuditDetailed from './components/AuditDetailed';
import PageContent from '@/components/PageContent';
// import AliyunOSSUpload from '@/components/OssUpload/AliyunOssUploader';
import {
  queryProcessFlows,
  createAduit,
  advanceSubmitNextNode,
  // queryOSSData,
  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 { oaId } = useParams();
  const formValueRef = useRef({
    form: '',
  });
  const uploadList = useRef([]);
  const navigate = useNavigate();
  const { data, loading } = useRequest(queryProcessFlows, {
    defaultParams: [{ ids: oaId }],
    onSuccess() {
      advanceSubmit(null, {});
    },
  });
  // const { data: OSSData } = useRequest(queryOSSData, {
  //   defaultParams: [{ ids: oaId }],
  // });

  const { loading: createLoadin, run: createRun } = useRequest(createAduit, {
    manual: true,
    onSuccess() {
      message.success('申请审批成功');
      navigate(-1);
    },
  });

  const { run } = useRequest(advanceSubmitNextNode, {
    debounceInterval: 500,
    manual: true,
    formatResult(res) {
      setApprovalProcess(res.data[0]);
    },
  });

  const { data: leaderData } = useRequest(queryLeader, {});

  //填写表单实时计算审批流程
  const advanceSubmit = async (changedFields, allValues) => {
    console.log(changedFields, allValues);
    let formValues = (data?.formData || [])
      .map((item) => {
        const itemProps = item.props;
        let val = allValues[itemProps.id];
        if (!itemProps.label) return;
        if (!val && val !== 0) return;
        if (val instanceof Object) {
          return {
            name: itemProps.label,
            id: itemProps.id,
            value: [...val],
          };
        } else if (allValues[itemProps.id]) {
          return {
            name: itemProps.label,
            id: itemProps.id,
            type: item.componentName,
            value: [allValues[itemProps.id]] || undefined,
          };
        }
      })
      .filter((item) => item);

    let params = {
      flow_id: Number(oaId),
      template_node_id: 0,
      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 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;
    });
    console.clear();
    console.log(oldTableData);
    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);
    }
  };

  const addUnEditableColumn = (rows, tableID) => {
    const { columns: originColumns } = data.formData.find(
      (item) => item.props.id === tableID,
    );
    // 检查是否有文字说明控件，有的话需要添加在第几列的index后写入tableData
    const allTextNote = originColumns.filter((item, index) => {
      if (item.componentName === 'TextNote') {
        item.index = index;
        return true;
      }
      return false;
    });
    // 对这个表格的每个第 (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,
        };
      });
    }
    if (textNoteCellList.length) {
      for (const note of textNoteCellList) {
        rows[note.colIndex] = note;
      }
    }
    return rows;
  };

  const submit = async () => {
    form.validateFields().then((values) => {
      const { form: formCur } = formValueRef.current;
      let audit_list = [];
      let cc_list = [];
      approvalProcess?.forEach((item, index) => {
        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')
          arr.push(
            ...leaderData.slice(0, item[0].value).map((leader) => leader.ID),
          );
        else arr.push(item.map((cur) => cur.value));
      });
      let files = [];
      let formData = [];
      formCur.forEach((item) => {
        if (item.type === 'DDAttachment') {
          files = files.concat(item.value);
        } else {
          formData.push(item);
        }
      });

      // 根据表格在原来的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),
        form: JSON.stringify(formData),
        audit_list: audit_list.flat(),
        cc_list: cc_list.flat(),
        files: files.join(','),
      });
    });
  };
  // const OnModelFileDone = (file) => {
  //   var path = OSSData.host + '/' + file.url;
  //   uploadList.current = [...uploadList.current, path];
  // };

  return (
    <PageContent
      loading={loading}
      footer={[
        <Button onClick={submit} type="primary" loading={createLoadin}>
          提交审批
        </Button>,
      ]}
    >
      <Row gutter={24}>
        <Col span={12}>
          {/* {OSSData && (
              <AliyunOSSUpload
                OSSData={OSSData}
                onDone={OnModelFileDone}
                directory={false}
                noStyle={false}
                label="上传文件"
              />
            )} */}
          <AuditDetailed
            allValues={formValueRef.current.form}
            form={form}
            items={data?.formData}
            onValuesChange={advanceSubmit}
            onTableValChange={handleTableValChange}
          />
        </Col>
        <Col span={12}>
          {approvalProcess.length == 0 ? (
            <Empty description="请先填写表单" />
          ) : (
            <ApprovalProcess
              leaderData={leaderData}
              approvalProcess={approvalProcess}
              onChange={setAuditCheck}
            />
          )}
        </Col>
      </Row>
    </PageContent>
  );
};

export default OaDetail;