GtDigManageWeb/src/pages/ContractManager/component/AuditSteps.jsx

import { Steps } from 'antd';
const AuditSteps = (props) => {
  // const data =
  //   '[{"id":13,"desc":"","auditor":7,"AuditorUser":{"UserName":"admin","CName":"管理员","Title":"","Mobile":"13426370450","Email":"123123@qq.com","Status":1,"IsSuper":true,"DepId":"undefined","Dep":null,"Password":"4297f44b13955235245b2497399d7a93","QyWxUserId":"HanTangHeYing","DingUserId":"","Role":null,"RoleNames":"","ID":7,"CreatedBy":0,"CreatedOn":"2019-10-04T16:48:04+08:00","UpdatedBy":0,"UpdatedOn":"2022-06-17T14:23:15+08:00","DeletedBy":0,"DeletedOn":null,"DeletedFlag":0,"DefaultProject":"","ForbiddenModule":0,"IsDepLeader":0,"UserType":0,"Permission":null,"Permissions":null,"is_leader":0,"is_accountant":0,"is_opt_mgr":0,"is_wty_mgr":0},"seq":1,"oa_id":7,"seq_name":"审批1","audit_time":"1970-01-01T08:00:00+08:00"},{"id":14,"desc":"","auditor":7,"AuditorUser":{"UserName":"admin","CName":"管理员","Title":"","Mobile":"13426370450","Email":"123123@qq.com","Status":1,"IsSuper":true,"DepId":"undefined","Dep":null,"Password":"4297f44b13955235245b2497399d7a93","QyWxUserId":"HanTangHeYing","DingUserId":"","Role":null,"RoleNames":"","ID":7,"CreatedBy":0,"CreatedOn":"2019-10-04T16:48:04+08:00","UpdatedBy":0,"UpdatedOn":"2022-06-17T14:23:15+08:00","DeletedBy":0,"DeletedOn":null,"DeletedFlag":0,"DefaultProject":"","ForbiddenModule":0,"IsDepLeader":0,"UserType":0,"Permission":null,"Permissions":null,"is_leader":0,"is_accountant":0,"is_opt_mgr":0,"is_wty_mgr":0},"seq":2,"oa_id":7,"seq_name":"审批2","audit_time":"1970-01-01T08:00:00+08:00"}]';
  // const OaAuditList1 = JSON.parse(data);
  // const audit_status1 = 0;
  // const current_seq1 = 1;

  const { OaAuditList, audit_status, current_seq, statusText } = props;

  const getDescription = (node) => {
    let str = node?.AuditRoleInfo
      ? `审批人：${node?.AuditRoleInfo.Name || '-'}`
      : `审批人：${node?.AuditorUser.CName || '-'}`;
    if (node.desc) {
      return (
        <div>
          {str}
          <div>
            <Tooltip title={node.desc}>
              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
                审批意见
              </span>
            </Tooltip>
          </div>
        </div>
      );
    }
    return str;
  };

  return (
    <div style={{ display: 'flex' }}>
      <Steps
        style={{ marginBottom: 20 }}
        current={audit_status == 3 ? OaAuditList?.length : current_seq - 1}
        status={audit_status == 2 ? 'error' : 'process'}
        items={OaAuditList?.map((item) => ({
          title: item.seq_name,
          description: getDescription(item),
        }))}
      />
      {audit_status == 3 && (
        <div
          style={{ marginLeft: '40px', fontSize: '28px', whiteSpace: 'nowrap' }}
        >
          {statusText}
        </div>
      )}
    </div>
  );
};

export default AuditSteps;