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

import React, { useMemo, useEffect, useState, useRef } from 'react';
import { Steps, Popover, Alert, Button, Spin } from 'antd';
import styles from './Index.less';
import { queryDDProcessesForecast } from '@/services/boom';
import { connect } from 'dva';

const { Step } = Steps;

function AuditFlow(props) {
  const {
    processCode,
    deptId,
    userId,
    formComponentValues,
    // activityId,
    direction,
    status,
    tasks,
    userList,
    cc_userids = [],
    canShowAudit = false,
    onApprove,
  } = props;
  const [flow, setFlow] = useState({ workflowActivityRules: [] });
  const [loading, setLoading] = useState(false);
  const timerRef = useRef({
    id: '',
    status: false,
  });
  const current = useMemo(() => {
    if (!tasks || tasks.length == 0) {
      return false;
    } else {
      let current = 0;
      flow.workflowActivityRules.forEach((item, index) => {
        let task = tasks.find(task => task.activity_id == item.activityId);
        if (task) {
          if (task.task_status == 'COMPLETED') {
            // 完成时节点为下一级
            current = index + 1;
          } else {
            // 未完成则为当前节点
            current = index;
          }
        }
      });
      return current;
    }
  }, [tasks, flow]);

  const showAduit = useMemo(() => {
    if (!canShowAudit) return false;
    //当前处理中的审批人和登录人是一个人显示审批通过和拒绝
    if (!tasks || tasks.length == 0) {
      return false;
    } else {
      // 查询处于RUNNING的task activityId
      const runningTask = tasks.filter(item => item.task_status == 'RUNNING');
      // const task = tasks.find(task => task.activity_id == activityId);
      if (runningTask.length == 0) return false;
      // if (task.task_status == 'RUNNING' && task.userid == userId) return true;
      return runningTask.find(task => task.userid == userId);
    }
  }, [tasks, userId]);

  const getTaskId = () => {
    const runningTask = tasks.find(item => item.task_status == 'RUNNING' && item.userid == userId);
    if (runningTask) return runningTask.taskid;
  };

  const getDesc = item => {
    const { activityId } = item;
    if (!tasks || tasks.length == 0) return '';
    if (item.activityName == '抄送人') {
      let names = cc_userids
        .map(userId => {
          let user = userList.find(u => u.DingUserId == userId);
          return user?.CName;
        })
        .filter(item => item);
      return names.join('，');
    } else {
      const task = tasks.find(task => task.activity_id == activityId);
      if (!task) return;
      const user = userList.find(user => task.userid == user.DingUserId);
      let result = null;
      if (task.task_result !== 'NONE') {
        result = (
          <>
            <br />
            审批结果: {TASK_RESULT[task.task_result]}
            <br />
          </>
        );
      }
      return (
        <>
          {user?.CName || '未知操作人'}（{TASK_STATUS[task.task_status]}）{result}
        </>
      );
    }
  };
  const renderAlert = () => {
    // const audit_comment = history.list[0]?.audit_comment;
    let item = '';
    switch (status) {
      case -1:
        item = <Alert message="已失效" type="error" />;
        break;
      case 0:
        if (!flow.list || flow.list.FlowNodes?.length == 0) return;
        item = <Alert message="审批拒绝" type="error" />;
        break;
      case 1:
        item = <Alert message="等待审核中" type="info" />;
        break;
      case 2:
        item = <Alert message={`审批被拒绝`} type="error" />;
        break;
      case 3:
        item = <Alert message="审批通过" type="success" />;
        break;
      case -1:
        item = <Alert message="已失效" type="error" />;
        break;
    }

    return <div style={{ margin: '20px auto' }}>{item}</div>;
  };
  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 (!deptId || !userId) {
      console.log('depId或userId不存在！');
      return;
    }
    if (!timerRef.current.status) {
      // 上锁
      timerRef.current.status = true;
      setLoading(true);
      try {
        let flow = await queryDDProcessesForecast({
          processCode,
          deptId,
          userId,
          formComponentValues,
        });
        setFlow(flow);
        console.log(flow);
      } catch (error) {}
      setLoading(false);
      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 (
    <Spin spinning={loading}>
      <div className={styles.top}>
        <Steps current={current} progressDot={customDot} direction={direction}>
          {flow.workflowActivityRules.map(item => (
            <Step key={item.activityId} title={item?.activityName} description={getDesc(item)} />
          ))}
          {/* <Step key={item.activityId} title={item?.activityName} description={renderDesc(item)} /> */}
        </Steps>
        {showAduit && status != -1 && (
          <div className={styles.btns} style={{ marginLeft: 80 }}>
            <Button type="primary" onClick={() => onApprove(true, getTaskId())}>
              审批通过
            </Button>
            <Button onClick={() => onApprove(false, getTaskId())} danger>
              审批拒绝
            </Button>
          </div>
        )}
      </div>
      {status !== undefined && renderAlert()}
    </Spin>
  );
}

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: '指定审批人',
};
const OPERATION_RESULT = {
  AGREE: '同意',
  REFUSE: '拒绝',
  NONE: '未处理',
};
const OPERATION_TYPE = {
  EXECUTE_TASK_NORMAL: '正常执行任务',
  EXECUTE_TASK_AGENT: '代理人执行任务',
  APPEND_TASK_BEFORE: '前加签任务',
  APPEND_TASK_AFTER: '后加签任务',
  REDIRECT_TASK: '转交任务',
  START_PROCESS_INSTANCE: '发起流程实例',
  TERMINATE_PROCESS_INSTANCE: '终止(撤销)流程实例',
  FINISH_PROCESS_INSTANCE: '结束流程实例',
  ADD_REMARK: '添加评论',
  REDIRECT_PROCESS: '审批退回',
  PROCESS_CC: '抄送',
};

const TASK_STATUS = {
  NEW: '未启动',
  RUNNING: '处理中',
  PAUSED: '暂停',
  CANCELED: '取消',
  COMPLETED: '完成',
  TERMINATED: '终止',
};

const TASK_RESULT = {
  AGREE: '同意',
  REFUSE: '拒绝',
  REDIRECTED: '转交',
  NONE: '未处理',
};

export default connect(({ user }) => ({
  userList: user.list,
}))(AuditFlow);