GtDigManageWeb/src/pages/PurchaseList/Approval/AuthModal.js

import React, { useState, useEffect, useMemo } from 'react';
import { Button, Form, Modal, Steps } from 'antd';

const { Step } = Steps;
// 新建
function AuthModal(props) {
  const {
    visible,
    onClose,
    onAuth,
    form,
    data,
    flowList = [],
    canAuth,
    loading,
  } = props;

  const flow = useMemo(() => {
    if (!data.flow_id) return {};
    return flowList.find((item) => item.id == data.flow_id) || {};
  }, [flowList, data]);

  const current = useMemo(() => {
    if (!data.node_id) return 0;
    return flow.Nodes?.findIndex((item) => item.id == data.node_id);
  }, [flowList, data]);

  const getAudits = (nodeInfo) => {
    switch (nodeInfo.id) {
      case 11:
        return '执行项目经理';
      case 12:
        return '运营经理';
      case 13:
        return '执行项目经理';
      case 14:
        return '质保经理';
      default:
        return (nodeInfo.NodeAudits || [])
          .map((item) => item.AuthorRoleInfo.Name)
          .join('，');
    }
  };

  const renderFooter = () => {
    return (
      <>
        <Button onClick={onClose}>取消</Button>
        {canAuth && (
          <>
            <Button onClick={() => onAuth(3)} type="primary">
              审核通过
            </Button>
            <Button onClick={() => onAuth(2)} type="danger">
              审核拒绝
            </Button>
          </>
        )}
      </>
    );
  };

  return (
    <Modal
      title="审核详情"
      width={800}
      open={visible}
      onCancel={onClose}
      footer={renderFooter()}
    >
      <Steps current={current}>
        {/* <Steps current={data?.node_id}> */}
        {(flow.Nodes || []).map((item) => (
          <Step
            key={item.id}
            title={item.node}
            description={`审批人：${getAudits(item)}`}
          />
        ))}
      </Steps>
    </Modal>
  );
}
export default AuthModal;