AuditFlow.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import React, { useMemo, useEffect, useState, useRef } from 'react';
  2. import { Steps, Popover } from 'antd';
  3. import styles from './Index.less';
  4. import { queryDDProcessesForecast } from '@/services/boom';
  5. const { Step } = Steps;
  6. const ACTOR_TYPE = {
  7. approver: '审批人',
  8. notifier: '抄送人',
  9. audit: '办理人',
  10. };
  11. const APPROVAL_TYPE = {
  12. MANUAL: '人工审批',
  13. AUTO_AGREE: '自动通过',
  14. AUTO_REFUSE: '自动拒绝',
  15. };
  16. const APPROVAL_METHOD = {
  17. ONE_BY_ONE: '依次审批',
  18. AND: '会签审批',
  19. OR: '或签审批',
  20. };
  21. const ACTIVITY_TYPE = {
  22. target_select: '自选审批人',
  23. target_approval: '指定审批人',
  24. };
  25. function AuditFlow(props) {
  26. const {
  27. processCode,
  28. deptId = '14169890',
  29. userId = '16569001414345099',
  30. formComponentValues,
  31. activityId,
  32. direction,
  33. } = props;
  34. console.log('------------------------------', props);
  35. const [flow, setFlow] = useState({ workflowActivityRules: [] });
  36. const timerRef = useRef({
  37. id: '',
  38. status: false,
  39. });
  40. const current = useMemo(() => {
  41. if (!activityId) {
  42. return flow.workflowActivityRules.length;
  43. } else {
  44. return flow.workflowActivityRules.findIndex(item => item.activityId == activityId);
  45. }
  46. }, [activityId]);
  47. const renderDesc = item => {
  48. return <></>;
  49. };
  50. const customDot = (dot, { status, index }) => {
  51. let item = flow.workflowActivityRules[index];
  52. return (
  53. <Popover
  54. content={
  55. <div>
  56. 节点类型:{ACTIVITY_TYPE[item.activityType]}
  57. <br />
  58. 操作人类型:{ACTOR_TYPE[item.workflowActor?.actorType]}
  59. <br />
  60. 审批类型:{APPROVAL_TYPE[item.workflowActor?.approvalType]}
  61. <br />
  62. 审批方式:{APPROVAL_METHOD[item.workflowActor?.approvalMethod]}
  63. </div>
  64. }
  65. >
  66. {dot}
  67. </Popover>
  68. );
  69. };
  70. const getDetail = async () => {
  71. console.log(timerRef.current);
  72. if (!timerRef.current.status) {
  73. // 上锁
  74. timerRef.current.status = true;
  75. try {
  76. let flow = await queryDDProcessesForecast({
  77. processCode,
  78. deptId,
  79. userId,
  80. formComponentValues,
  81. });
  82. console.log(flow);
  83. setFlow(flow);
  84. } catch (error) {}
  85. setTimeout(() => {
  86. // 延时解锁
  87. timerRef.current.status = false;
  88. }, 2000);
  89. } else {
  90. clearTimeout(timerRef.current.id);
  91. // 延迟调用
  92. timerRef.current.id = setTimeout(() => {
  93. getDetail();
  94. }, 2000);
  95. }
  96. };
  97. useEffect(() => {
  98. if (!processCode || !formComponentValues) return;
  99. getDetail();
  100. }, [processCode, formComponentValues]);
  101. return (
  102. <div className={styles.top}>
  103. <Steps current={current} progressDot={customDot} direction={direction}>
  104. {flow.workflowActivityRules.map(item => (
  105. <Step key={item.activityId} title={item?.activityName} />
  106. ))}
  107. {/* <Step key={item.activityId} title={item?.activityName} description={renderDesc(item)} /> */}
  108. </Steps>
  109. </div>
  110. );
  111. }
  112. export default AuditFlow;