GtDigManageWeb/src/pages/ContractManager/detail.js

import ModuleTitle from '@/components/ModuleTitle/moduleTitle';
import FileViewerModal from '@/components/FileViewerNew';
import {
  Divider,
  Form,
  Modal,
  Row,
  Col,
  Input,
  Radio,
  InputNumber,
  Card,
} from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { useParams, useRequest, useNavigate } from 'umi';
import { Status } from './component/Modal';
import styles from './index.less';
import AuditSteps from './component/AuditSteps';
import { queryAuditByCode } from '../../services/contract';

const ContractDetail = ({ data }) => {
  const [form] = Form.useForm();
  const FORMAT = 'YYYY-MM-DD';

  const [fileViewerVisible, setFileViewerVisible] = useState(false);
  const [fileViewerData, setFileViewerData] = useState();
  const [attachData, setAttachData] = useState({
    attach: [],
    attach_extend: [],
  });

  useEffect(() => {
    form.resetFields();
    if (data?.status >= Status.Checking) runAudit({ extend_code: data.code });
    let result = { attach: [], attach_extend: [] };
    if (data?.attach) {
      let att = JSON.parse(data.attach);
      result.attach = att.map((item, idx) => {
        return { ...item, uid: idx, status: 'done' };
      });
    }
    if (data?.attach_extend) {
      let att = JSON.parse(data.attach_extend);
      result.attach_extend = att.map((item, idx) => {
        return { ...item, uid: idx, status: 'done' };
      });
    }
    setAttachData(result);
  }, [data]);

  //获取OA 归档审批列表
  const { data: auditData, run: runAudit } = useRequest(
    (data) => queryAuditByCode({ ...data, extend_type: 0 }),
    {
      manual: true,
      formatResult: (res) => {
        if (res?.data) {
          return res.data;
        } else {
          if (data?.status == Status.CheckReject) {
            return { ...oldAuditList, audit_status: 2 };
          }
          return oldAuditList;
        }
      },
    },
  );

  const handlePreViewSingle = (data) => {
    if (!data) return;
    const arr = data.name.split('.');
    const type = arr[arr.length - 1];
    const dataItem = { url: data.url, name: data.name, type };
    setFileViewerData(dataItem);
    setFileViewerVisible(true);
  };

  return (
    <>
      <Card title={data?.status == Status.Checking ? '归档审批' : '作废审批'}>
        <Form
          form={form}
          // initialValues={data}
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 17 }}
        >
          <ModuleTitle title="存档人信息" />
          <Row>
            <Col span={10} offset={1}>
              <Form.Item
                name="created_name"
                initialValue={data?.created_name}
                label="存档人："
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="company_name"
                label="所属公司："
                tooltip="请选择该存档合同所属公司"
                initialValue={data?.company_name}
                rules={[
                  {
                    required: true,
                    message: '请填写所属公司',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item
                name="created_on"
                initialValue={data?.created_on || dayjs().format(FORMAT)}
                label="存档时间："
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="dep_id"
                label="所属部门："
                initialValue={data?.dep_name}
                rules={[
                  {
                    required: true,
                    message: '请选择所属部门',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <ModuleTitle title="经办人信息" />
          <Row>
            <Col span={10} offset={1}>
              <Form.Item
                name="deal_by"
                label="经办人："
                tooltip="经办人应负责合同审批流程、签字盖章、合同原件存档和电子档案存档。母公司的经办人为OA审批提交人，也是存档人。子公司经办人由子公司合同专员填写，一般是合同审批时的提交人或者是合同实际执行的负责人"
                initialValue={data?.deal_by}
                rules={[
                  {
                    required: true,
                    message: '请选择经办人',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item
                name="created_dep"
                label="签约承办部门："
                tooltip="请选择该存档合同的实际履行部门，一般为经办人所在部门"
                initialValue={data?.created_dep}
                rules={[
                  {
                    required: true,
                    message: '请选择签约承办部门',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <ModuleTitle title="合同信息" />

          <Row>
            <Col span={10} offset={1}>
              <Form.Item
                name="is_supplement"
                label="是否补充协议："
                tooltip="合同名称"
                initialValue={0}
                rules={[
                  {
                    required: true,
                    message: '请填写合同名称',
                  },
                ]}
              >
                <Radio.Group disabled>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>
              <Form.Item
                name="name"
                label="合同名称："
                tooltip="请与OA审批时填写的合同名称一致"
                initialValue={data?.name}
                rules={[
                  {
                    required: true,
                    message: '请填写合同名称',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="effect_on"
                label="合同签订日期："
                initialValue={data?.effect_on}
                tooltip="合同主体各方签字盖章完成之日，以最后签字盖章的为准"
                rules={[
                  {
                    required: true,
                    message: '请填写合同名称',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="project_name"
                label="项目名称："
                tooltip="不涉及项目请选“日常项目”"
                initialValue={data?.project_name}
                rules={[
                  {
                    required: true,
                    message: '请填写项目名称',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="party_a"
                label="甲方："
                tooltip="合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
                initialValue={data?.party_a}
                rules={[
                  {
                    required: true,
                    message: '请选择甲方',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item
                style={{ opacity: data?.is_supplement ? 1 : 0 }}
                name="parent_code"
                tooltip="请先查询原合同编号，原合同未录入本系统的，需先录入存档。"
                initialValue={data?.parent_code}
                label="原合同编号："
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="code"
                tooltip="合同编号按《合同管理办法》的合同编码规则编号。"
                initialValue={data?.code}
                label="合同编号："
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                label="合同总价款："
                name="amount"
                tooltip="请与OA审批时填写的“合同金额”一致。不涉及金额填“0”"
                initialValue={data?.amount}
                rules={[
                  {
                    required: true,
                    message: '请输入合同总价款',
                  },
                ]}
              >
                <InputNumber
                  style={{ width: '100%' }}
                  precision={2}
                  addonAfter="万元"
                  disabled
                />
              </Form.Item>

              <Form.Item
                name="project_code"
                initialValue={data?.project_code}
                label="项目编号："
              >
                <Input disabled />
              </Form.Item>
              <Form.Item
                name="party_b"
                label="乙方："
                tooltip="合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
                initialValue={data?.party_b}
                rules={[
                  {
                    required: true,
                    message: '请选择乙方',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
          </Row>
          <Form.Item
            name="party_c"
            label="丙方（及其他）："
            tooltip="可多选。合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
            initialValue={data?.party_c ? data?.party_c.split(',') : []}
            labelCol={{ span: 4 }}
          >
            <Input disabled />
          </Form.Item>
          <Form.Item
            name="perform"
            initialValue={data?.perform}
            label="合同履行情况："
            labelCol={{ span: 4 }}
          >
            <Input.TextArea disabled />
          </Form.Item>
          <Row>
            <Col span={10} offset={1}>
              <Form.Item
                label="合同及合同附件上传："
                tooltip="请上传合同正式盖章文本的扫描件（含技术协议、质保承诺等附件），不得用照片、图片格式，不得遗漏附件"
                name="attach"
                initialValue={attachData.attach}
              >
                <ul>
                  {data?.attach &&
                    JSON.parse(data?.attach)?.map((item, idx) => (
                      <li key={`${idx}_${item.name}`}>
                        <a onClick={() => handlePreViewSingle(item)}>
                          {item.name}
                        </a>
                      </li>
                    ))}
                </ul>
              </Form.Item>
              <Form.Item
                name="archives_dep"
                initialValue={data?.archives_dep}
                label="合同原件存档部门："
                tooltip="母公司财务部和采购部门的合同请选择“财务部”，其他部门请选择“行政部”，子公司合同选择“综合管理部”"
                rules={[
                  {
                    required: true,
                    message: '请选择合同原件存档部门',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </Col>
            <Col span={10}>
              <Form.Item
                name="attach_extend"
                label="合同相关资料上传："
                initialValue={attachData.attach_extend}
                tooltip={
                  <div>
                    依据《合同管理办法》，合同相关资料需要作为合同电子档案的一部分，包括：
                    <br />
                    1）合同会审纪要或投资决策通知书（如有）；
                    <br />
                    2）合同相对方的营业执照等资质证的复印件（首次签约的须加盖公章）、个人身份证复印件（合同一方为自然人时提供）；
                    <br />
                    3）合同相对方经办人员的授权委托书原件及其身份证复印件（如有）；
                    <br />
                    4）
                    涉及房屋或场地租赁的，还应提供房屋及场地的权属证明资料，但如果续签租赁合同，且房屋所有权人没有发生变更的，在附具相关说明后可不再提供上述资料；
                    <br />
                    5）其他资料。
                  </div>
                }
              >
                <ul>
                  {data?.attach_extend &&
                    JSON.parse(data?.attach_extend)?.map((item, idx) => (
                      <li key={`${idx}_${item.name}`}>
                        <a onClick={() => handlePreViewSingle(item)}>
                          {item.name}
                        </a>
                      </li>
                    ))}
                </ul>
              </Form.Item>
            </Col>
          </Row>

          {data?.status > Status.Checking && (
            <>
              <ModuleTitle title="归档流程" />
              <div className={styles.modelItem}>
                <AuditSteps {...auditData} statusText="已归档" />
              </div>
            </>
          )}

          {data?.status > Status.CalChecking && (
            <>
              <ModuleTitle title="作废信息" />
              <Form.Item
                name="cancel_desc"
                label="作废原因："
                initialValue={data?.cancel_desc}
                labelCol={{ span: 4 }}
                rules={[
                  {
                    required: true,
                    message: '请填写作废原因',
                  },
                ]}
              >
                <Input disabled />
              </Form.Item>
            </>
          )}
        </Form>
      </Card>
      <FileViewerModal
        data={fileViewerData}
        visible={fileViewerVisible}
        onCancel={() => {
          setFileViewerVisible(false);
        }}
      />
    </>
  );
};

export default ContractDetail;