添加合同审批详情页

src/pages/ContractManager/detail.js

@@ -0,0 +1,438 @@
+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;