BomWeb/src/pages/Detail/TimeNode.js

import React, {useEffect, useState, useRef} from 'react';
import {Form} from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import {connect} from 'dva';
import {Steps, Button, Modal, Tooltip} from 'antd';
import styles from './Index.less';
import {getCurrentUser} from '@/utils/authority';

const {Step} = Steps;

// 时间节点
function TimeNode(props) {
  const {
    isAuditor,
    flowDetail,
    style,
    flow,
    versionList,
    version,
    templateId,
    setAuditVisible,
    projectId,
    dispatch,
    stepDirection,
    currentUser,
  } = props;
  const {current, list, active} = flow;
  console.log(list.FlowNodes)


  function calculateHoursDifference(date1, date2) {
    const timestamp1 = date1.getTime(); // 获取第一个Date对象的时间戳（以毫秒为单位）
    const timestamp2 = date2.getTime(); // 获取第二个Date对象的时间戳（以毫秒为单位）

    const timeDifferenceInMillis = Math.abs(timestamp2 - timestamp1); // 计算时间戳之间的差值（毫秒数）
    const hoursDifference = timeDifferenceInMillis / (1000 * 60 * 60); // 将差值转换为小时数

    return hoursDifference.toFixed(2);
  }

  const getDescription = (node, prevNode) => {
    let str = node?.AuditRoleInfo
      ? `审批人：${node?.AuditRoleInfo.Name || '-'}`
      : `审批人：${node?.AuditorUser.CName || '-'}`;
    const date = new Date(node.audit_time)
    const auditTime = node.audit_time === '0001-01-01T00:00:00Z' ? '-' : date.toLocaleDateString('zh-CN', {
      format: 'YYYY-MM-DD hh:mm:ss'
    })
    // const residenceTime = auditTime === '-' ? '-' : calculateHoursDifference(date, new Date(prevNode.audit_time))
    return (
      <div>
        {str}
        <div>
          <span style={{color: '#1A73E8', textDecoration: 'undeline'}}>
            审批意见：{node.desc || '-'}
          </span>
        </div>
        <div>
          <span>
            审批时间：{auditTime}
          </span>
        </div>
        {/* <div> */}
        {/*   <span> */}
        {/*     滞留时间：{`${residenceTime}小时`} */}
        {/*   </span> */}
        {/* </div> */}
      </div>
    );

    // return str;
  };

  if (!list || list.FlowNodes?.length != 0) {
    return (
      <div style={style}>
        <Steps
          direction={stepDirection || 'horizontal'}
          current={current}
          status={active == 0 ? 'error' : 'process'}
        >
          {list.FlowNodes.map(( item) => {
            return <Step key={item.id} title={item.node} description={getDescription(item)} />
          })}
        </Steps>
        {isAuditor && active != 0 && (
          <div className={styles.btns} style={{margin: '40px 0'}}>
            <Button type="primary" onClick={() => setAuditVisible(1)}>
              审批通过
            </Button>
            <Button onClick={() => setAuditVisible(2)} danger>
              审批拒绝
            </Button>
          </div>
        )}
      </div>
    );
  }
  // else {
  //   if (!flowDetail?.nodes) return;
  //   const node = flowDetail.nodes.find(item => item.Id == nodeId);
  //   return `当前节点：${node?.label || '-'}`;
  // }
  return null;
}

export default connect(({user, detail}) => ({
  currentUser: user.currentUser,
  versionList: detail.versionList,
}))(TimeNode);