GtDigManageWeb/src/pages/Flow/OaAuditDetail.js

// 审批详情
import React, { useState, useMemo, useEffect } from 'react';
import { Steps, Button, Tooltip, message, Spin, Upload } from 'antd';
import { useRequest, useModel, useLocation } from 'umi';
import AuditModal from './components/AuditModal';
import AddCCModal from './components/AddCCModal';
import FormAndFilesNode from './components/FormAndFilesNode';
import {
  queryAuditDetail,
  updateAuditList,
  updateCCList,
  uploadAttachment,
} from '@/services/boom';
import { queryGetContractList } from '@/services/contract';
import PageContent from '@/components/PageContent';
import SignModal from './components/SignModal';
import ContractDetail from '../ContractManager/detail';
import { Type } from '../Profile';
import { queryContractDetail } from '../../services/contract';
import { queryCadInfo } from '../../services/cad';
import CadOADetail from '../Cad/components/CadOADetail';

function OaAuditDetail(props) {
  const { initialState } = useModel('@@initialState');
  const user = initialState?.user || {};
  const { userList, run: runUserList } = useModel('userList');
  const [auditVisible, setAuditVisible] = useState(false);
  const [visible, setVisible] = useState(false);
  const [ccVisible, setCCVisible] = useState(false);

  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  // 使用queryParams来获取特定查询参数
  const id = queryParams.get('id');
  const code = queryParams.get('code');
  const type = queryParams.get('type') * 1 || Type.OA;
  const token = queryParams.get('JWT-TOKEN');
  if (!localStorage['JWT-TOKEN']) {
    localStorage['JWT-TOKEN'] = token;
  }

  // const type = code ? Type.CON : Type.OA;

  useEffect(() => {
    runUserList();
  }, []);

  useEffect(() => {
    if (type == Type.CON) {
      runCon({ code });
    } else if (type == Type.CAD) {
      runCad({ cad_id: code * 1 });
    }
  }, [type]);

  const { data, loading, refresh } = useRequest(queryAuditDetail, {
    defaultParams: [{ id }],
  });
  const {
    current_seq,
    form,
    OaAuditList,
    OaCcs,
    Files = [],
    audit_status,
    AuditorInfo,
  } = data || {};
  // if (OaAuditList) console.log(JSON.stringify(OaAuditList));

  const {
    data: conData,
    run: runCon,
    loading: conLoading,
  } = useRequest((data) => queryContractDetail(data), {
    manual: true,
    formatResult: (res) => {
      return res?.data?.detail;
    },
  });

  const {
    data: cadData,
    run: runCad,
    loading: loadingCad,
  } = useRequest(queryCadInfo, {
    manual: true,
    formatResult: (res) => {
      console.log(res);
      return res?.data?.info;
    },
  });

  const getDescription = (node, idx) => {
    let str = node?.AuditRoleInfo
      ? `审批人：${node?.AuditRoleInfo.Name || '-'}`
      : `审批人：${node?.AuditorUser.CName || '-'}`;

    //最后一个审批节点显示抄送人信息
    const showCCList = idx == OaAuditList?.length - 1 && OaCcs.length > 0;
    return (
      <div>
        {str}
        {node.desc && (
          <div>
            <Tooltip title={node.desc}>
              <span style={{ color: '#1A73E8', textDecoration: 'undeline' }}>
                审批意见
              </span>
            </Tooltip>
          </div>
        )}
        {showCCList && (
          <div>
            抄送人：
            {OaCcs?.map((item) => item.User?.CName).join(',')}
          </div>
        )}
      </div>
    );
  };
  const updateRes = useRequest(
    (values) => {
      let list = OaAuditList.map((item) => item.auditor);
      if (values.type == 'before') {
        list.splice(current_seq - 1, 0, values.approver);
      } else {
        list.splice(current_seq, 0, values.approver);
      }
      return updateAuditList(
        {
          oa_id: Number(id),
          audit_list: list,
        },
        values.type == 'after',
      );
    },
    {
      manual: true,
      onSuccess() {
        message.success('加签成功');
        setVisible(false);
        refresh();
      },
    },
  );

  //加抄送人
  const { run: runCC, loading: loadingCC } = useRequest(
    (ids) =>
      updateCCList({
        oa_id: Number(id),
        audit_list: ids,
      }),
    {
      manual: true,
      onSuccess() {
        message.success('添加抄送人成功');
        setCCVisible(false);
        refresh();
      },
    },
  );

  //上传附件
  const { run: runAttach, loading: loadingAttach } = useRequest(
    uploadAttachment,
    {
      manual: true,
      onSuccess() {
        message.success('上传成功');
      },
    },
  );

  const handleUploadClick = () => {};
  const UploadProps = {
    showUploadList: false,
    action: `/api/v1/oa/attachment/${id}`,
    headers: {
      'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
    },
    onChange({ file, fileList }) {
      if (file.status !== 'uploading') {
        console.log(fileList);
        message.success('上传成功');
      }
    },
  };

  const btns = useMemo(() => {
    if (!user || !data) return;
    if (
      user.ID == AuditorInfo?.ID &&
      // 0 待审核； 1  上级审批通过
      (audit_status === 0 || audit_status === 1)
    ) {
      return [
        <Button
          key={1}
          style={{ marginRight: 10 }}
          type="primary"
          onClick={() => setAuditVisible(1)}
        >
          审批通过
        </Button>,
        <Button key={2} onClick={() => setAuditVisible(2)} danger>
          审批拒绝
        </Button>,
        <Button key={3} onClick={() => setVisible(true)}>
          加签
        </Button>,
        <Button key={4} onClick={() => setCCVisible(true)}>
          加抄送人
        </Button>,
        <Upload {...UploadProps}>
          <Button>上传附件</Button>
        </Upload>,
        // <Button key={5} onClick={handleUploadClick}>
        //   上传附件
        // </Button>,
      ];
    }
    return [];
  }, [user, data]);

  const renderDetail = () => {
    let content = '';
    switch (type) {
      case Type.CAD:
        content = <CadOADetail data={cadData} fileList={Files} />;
        break;
      case Type.CON:
        content = <ContractDetail data={conData} />;
        break;
      default:
        content = <FormAndFilesNode formData={form} fileList={Files} />;
    }
    return content;
  };

  return (
    <PageContent extra={btns} loading={loading && conLoading}>
      <Steps
        style={{ marginBottom: 20 }}
        current={audit_status == 3 ? OaAuditList?.length : current_seq - 1}
        status={audit_status == 2 ? 'error' : 'process'}
        items={OaAuditList?.map((item, idx) => ({
          title: item.seq_name,
          description: getDescription(item, idx),
        }))}
      ></Steps>

      {renderDetail()}

      <AddCCModal
        userList={userList}
        visible={ccVisible}
        onCancel={() => setCCVisible(false)}
        onCreate={runCC}
        loading={loadingCC}
      />

      <AuditModal
        id={id}
        visible={auditVisible}
        onClose={() => setAuditVisible(false)}
        onOk={refresh}
      />
      <SignModal
        userList={userList}
        visible={visible}
        onCancel={() => setVisible(false)}
        onCreate={(values) => updateRes.run(values)}
        loading={updateRes.loading}
      />
    </PageContent>
  );
}

export default OaAuditDetail;