AuthModal.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. import React, { useState, useEffect, useMemo } from 'react';
  2. import { Button, Form, Modal, Steps } from 'antd';
  3. const { Step } = Steps;
  4. // 新建
  5. function AuthModal(props) {
  6. const {
  7. visible,
  8. onClose,
  9. onAuth,
  10. form,
  11. data,
  12. flowList = [],
  13. canAuth,
  14. loading,
  15. } = props;
  16. const flow = useMemo(() => {
  17. if (!data.flow_id) return {};
  18. return flowList.find((item) => item.id == data.flow_id) || {};
  19. }, [flowList, data]);
  20. const current = useMemo(() => {
  21. if (!data.node_id) return 0;
  22. return flow.Nodes?.findIndex((item) => item.id == data.node_id);
  23. }, [flowList, data]);
  24. const getAudits = (nodeInfo) => {
  25. switch (nodeInfo.id) {
  26. case 11:
  27. return '执行项目经理';
  28. case 12:
  29. return '运营经理';
  30. case 13:
  31. return '执行项目经理';
  32. case 14:
  33. return '质保经理';
  34. default:
  35. return (nodeInfo.NodeAudits || [])
  36. .map((item) => item.AuthorRoleInfo.Name)
  37. .join(',');
  38. }
  39. };
  40. const renderFooter = () => {
  41. return (
  42. <>
  43. <Button onClick={onClose}>取消</Button>
  44. {canAuth && (
  45. <>
  46. <Button onClick={() => onAuth(3)} type="primary">
  47. 审核通过
  48. </Button>
  49. <Button onClick={() => onAuth(2)} type="danger">
  50. 审核拒绝
  51. </Button>
  52. </>
  53. )}
  54. </>
  55. );
  56. };
  57. return (
  58. <Modal
  59. title="审核详情"
  60. width={800}
  61. open={visible}
  62. onCancel={onClose}
  63. footer={renderFooter()}
  64. >
  65. <Steps current={current}>
  66. {/* <Steps current={data?.node_id}> */}
  67. {(flow.Nodes || []).map((item) => (
  68. <Step
  69. key={item.id}
  70. title={item.node}
  71. description={`审批人:${getAudits(item)}`}
  72. />
  73. ))}
  74. </Steps>
  75. </Modal>
  76. );
  77. }
  78. export default AuthModal;