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

import React, { useMemo, useEffect, useState, useRef } from 'react';
import { Steps, Popover } 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: '指定审批人',
};

function AuditFlow(props) {
  const {
    processCode,
    deptId = '14169890',
    userId = '16569001414345099',
    formComponentValues,
    activityId,
    direction,
  } = props;
  const [flow, setFlow] = useState({ workflowActivityRules: [] });
  const timerRef = useRef({
    id: '',
    status: false,
  });
  const current = useMemo(() => {
    if (!activityId) {
      return flow.workflowActivityRules.length;
    } else {
      return flow.workflowActivityRules.findIndex(item => item.activityId == activityId);
    }
  }, [activityId, flow]);

  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 (!timerRef.current.status) {
      // 上锁
      timerRef.current.status = true;
      try {
        let flow = await queryDDProcessesForecast({
          processCode,
          deptId,
          userId,
          formComponentValues,
        });
        setFlow(flow);
      } catch (error) {}
      setTimeout(() => {
        // 延时解锁
        timerRef.current.status = false;
      }, 2000);
    } else {
      clearTimeout(timerRef.current.id);
      // 延迟调用
      timerRef.current.id = setTimeout(() => {
        getDetail();
      }, 2000);
    }
  };

  useEffect(() => {
    if (!processCode || !formComponentValues) return;
    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;