WorkloadWeb/src/pages/PurchaseAdmin/PurchaseList/Detail/AuditFlow.js

import React, { useMemo } from 'react';
import { Steps } from 'antd';
import styles from './Index.less';
import { queryDDProcessesForecast } from '@/services/boom';

const { Step } = Steps;

const ACTOR_TYPE = {
  approver: '审批人',
  notifier: '抄送人',
  audit: '办理人',
};
const APPROVAL_TYPE = {
  MANUAL: '人工审批',
  AUTO_AGREE: '自动通过',
  AUTO_REFUSE: '自动拒绝',
};
const APPROVAL_METHOD = {
  ONE_BY_ONE: '依次审批',
  AND: '会签审批',
  OR: '或签审批',
};
const ACTIVITY_TYPE = {
  target_select: '自选审批人',
  target_approval: '指定审批人',
};

let timer = {
  id: '',
  status: false,
};

function AuditFlow(props) {
  const {
    processCode,
    deptId = '14169890',
    userId = '16569001414345099',
    formComponentValues,
    activityId,
    direction,
  } = props;
  const flow = {
    workflowActivityRules: [
      {
        activityId: 'xi0m_sJzp',
        prevActivityId: 'sid-startevent',
        workflowActor: {
          actorType: 'approver',
          approvalType: 'MANUAL',
          actorActivateType: 'ONE_BY_ONE',
          approvalMethod: 'ONE_BY_ONE',
          allowedMulti: true,
          actorSelectionRange: {},
          required: false,
        },
        isTargetSelect: false,
        activityName: '连续多级主管',
        activityType: 'target_approval',
      },
      {
        activityId: 'a890_1358',
        prevActivityId: 'xi0m_sJzp',
        workflowActor: {
          actorType: 'approver',
          approvalType: 'MANUAL',
          actorActivateType: 'ONE_BY_ONE',
          approvalMethod: 'ONE_BY_ONE',
          allowedMulti: true,
          actorSelectionRange: {},
          required: false,
        },
        isTargetSelect: false,
        activityName: '审批人',
        activityType: 'target_approval',
      },
    ],
    workflowForecastNodes: [
      {
        activityId: 'sid-startevent',
        outId: 'line-random-sid-startevent-xi0m_sJzp',
      },
      {
        activityId: 'xi0m_sJzp',
        outId: 'line-random-xi0m_sJzp-a890_1358',
      },
      {
        activityId: 'a890_1358',
        outId: 'line-random-a890_1358-endId',
      },
      {
        activityId: 'endId',
      },
    ],
    processId: 64338972901,
    processCode: 'PROC-F2AD61A8-25CF-47AB-96EA-E0D0850BBE35',
    isForecastSuccess: true,
    userId: '16569001414345099',
    isStaticWorkflow: true,
  };
  const current = useMemo(() => {
    if (!activityId) {
      return flow.workflowActivityRules.length;
    } else {
      return flow.workflowActivityRules.findIndex(item => item.activityId == activityId);
    }
  }, [activityId]);

  const renderDesc = item => {
    return <></>;
  };

  const customDot = (dot, { status, index }) => {
    let item = flow.workflowActivityRules[index];

    return (
      <Popover
        content={
          <div>
            节点类型：{ACTIVITY_TYPE[item.activityType]}
            <br />
            操作人类型：{ACTOR_TYPE[item.workflowActor?.actorType]}
            <br />
            审批类型：{APPROVAL_TYPE[item.workflowActor?.approvalType]}
            <br />
            审批方式：{APPROVAL_METHOD[item.workflowActor?.approvalMethod]}
          </div>
        }
      >
        {dot}
      </Popover>
    );
  };

  const getDetail = async () => {
    if (!timer.status) {
      // 上锁
      timer.status = true;
      let flow = await queryDDProcessesForecast({
        processCode,
        deptId,
        userId,
        formComponentValues,
      });
      // 解锁
      timer.status = false;
    } else {
      clearTimeout(timer.id);
      // 延迟调用
      timer.id = setTimeout(() => {
        getDetail();
      }, 2000);
    }
  };

  useEffect(() => {
    getDetail();
  }, [processCode, formComponentValues]);

  return (
    <div className={styles.top}>
      <Steps current={current} progressDot={customDot} direction={direction}>
        {flow.workflowActivityRules.map(item => (
          <Step key={item.activityId} title={item?.activityName} />
        ))}
        {/* <Step key={item.activityId} title={item?.activityName} description={renderDesc(item)} /> */}
      </Steps>
    </div>
  );
}

export default AuditFlow;