合同管理兼容旧审批流程

src/pages/ContractManager/component/Modal.jsx

@@ -32,6 +32,7 @@ import styles from '../index.less';
 import dayjs from 'dayjs';
 import { advanceSubmitNextNode, audit } from '@/services/boom';
 import AuditSteps from './AuditSteps';
+import FileViewerModal from '@/components/FileViewerNew';
 export const Type = {
   add: 0, //新增
   detail: 1, //详情
@@ -67,6 +68,8 @@ const ContractModal = (props) => {
   const { userList, run: userListRun } = useModel('userList');
   const { depList, run: depListRun } = useModel('depList');
   const [auditList, setAuditList] = useState([]);
+  const [fileViewerVisible, setFileViewerVisible] = useState(false);
+  const [fileViewerData, setFileViewerData] = useState();
   const FORMAT = 'YYYY-MM-DD';
   const {
     detail: data,
@@ -76,7 +79,6 @@ const ContractModal = (props) => {
     handleOk,
     handleCancel,
     parent_id,
-    handlePreView,
     handlerReCall,
   } = props;
   const title =
@@ -157,6 +159,27 @@ const ContractModal = (props) => {
     // audit_list:[],
   };
 
+  //旧审批流兼容
+  const oldAuditList = {
+    OaAuditList: [
+      {
+        id: 14,
+        auditor: 7,
+        AuditorUser: {
+          UserName: 'admin',
+          CName: '管理员',
+          IsSuper: true,
+          ID: 7,
+        },
+        seq: 1,
+        oa_id: 7,
+        seq_name: '审批1',
+      },
+    ],
+    audit_status: 3,
+    current_seq: 1,
+  };
+
   const { data: companyData, run: runCompany } = useRequest(queryCompany);
 
   //填写表单时计算审批流接口
@@ -215,17 +238,35 @@ const ContractModal = (props) => {
     (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;
+        }
+      },
     },
   );
-  console.log('-----------------------', auditData, auditList);
   //获取OA 作废审批列表
-  const {
-    data: auditCelData,
-    run: runCalAudit,
-    refresh,
-  } = useRequest((data) => queryAuditByCode({ ...data, extend_type: 1 }), {
-    manual: true,
-  });
+  const { data: auditCelData, run: runCalAudit } = useRequest(
+    (data) => queryAuditByCode({ ...data, extend_type: 1 }),
+    {
+      manual: true,
+      formatResult: (res) => {
+        if (res?.data) {
+          return res.data;
+        } else {
+          if (data?.status == Status.CalCheckReject) {
+            return { ...oldAuditList, audit_status: 2 };
+          }
+          return oldAuditList;
+        }
+      },
+    },
+  );
 
   useEffect(() => {
     if (!visible) {
@@ -494,10 +535,19 @@ const ContractModal = (props) => {
     return fun(depList);
   };
 
+  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);
+  };
+
   const renderFooter = () => {
     return (
       <Space>
-        {data?.status == Status.Checking && (
+        {data?.status == Status.Checking && type !== Type.check && (
           <Button onClick={() => handlerReCall(auditData?.id)}>撤回</Button>
         )}
         <Button onClick={handleCancel}>取消</Button>
@@ -507,641 +557,653 @@ const ContractModal = (props) => {
       </Space>
     );
   };
-
   return (
-    <Modal
-      width={'85%'}
-      title={title}
-      open={visible}
-      footer={renderFooter()}
-      onCancel={handleCancel}
-      destroyOnClose
-    >
-      <Divider />
-      <Form
-        form={form}
-        // initialValues={data}
-        labelCol={{ span: 7 }}
-        wrapperCol={{ span: 17 }}
+    <>
+      <Modal
+        width={'85%'}
+        title={title}
+        open={visible}
+        footer={renderFooter()}
+        onCancel={handleCancel}
+        destroyOnClose
       >
-        <ModuleTitle title="存档人信息" />
-        <Row>
-          <Col span={10} offset={1}>
-            <Form.Item
-              name="created_name"
-              initialValue={data?.created_name || user?.CName}
-              label="存档人："
-            >
-              <Input disabled />
-            </Form.Item>
-            <Form.Item
-              name="company_id"
-              label="所属公司："
-              tooltip="请选择该存档合同所属公司"
-              initialValue={data?.company_id}
-              rules={[
-                {
-                  required: true,
-                  message: '请填写所属公司',
-                },
-              ]}
-            >
-              <Select
-                showSearch
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                disabled={disableds.contract || disableds.recall}
-                filterOption={(input, option) =>
-                  (option?.label ?? '')
-                    .toLowerCase()
-                    .includes(input.toLowerCase())
-                }
-                options={companyData?.map((item) => {
-                  return {
-                    value: item.ID,
-                    label: item.Name,
-                  };
-                })}
-              />
-            </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_id}
-            >
-              <TreeSelect
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                showSearch
-                allowClear
-                fieldNames={{
-                  label: 'Name',
-                  value: 'ID',
-                  children: 'children',
-                }}
-                disabled={disableds.contract || disableds.recall}
-                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                treeData={companyDepList}
-              />
-            </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={!dealDisable} />
-            </Form.Item>
-          </Col>
-          <Col span={10}>
-            <Form.Item
-              name="created_dep"
-              label="签约承办部门："
-              tooltip="请选择该存档合同的实际履行部门，一般为经办人所在部门"
-              initialValue={data?.created_dep}
-              rules={[
-                {
-                  required: true,
-                  message: '请选择签约承办部门',
-                },
-              ]}
-            >
-              <TreeSelect
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                showSearch
-                allowClear
-                disabled={disableds.contract}
-                fieldNames={{
-                  label: 'Name',
-                  value: 'Name',
-                  children: 'children',
-                }}
-                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                treeData={companyDepList}
-              />
-            </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={disableds.contract || disableds.recall}>
-                <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={disableds.contract} />
-            </Form.Item>
-            <Form.Item
-              name="effect_on"
-              label="合同签订日期："
-              initialValue={data?.effect_on}
-              tooltip="合同主体各方签字盖章完成之日，以最后签字盖章的为准"
-              rules={[
-                {
-                  required: true,
-                  message: '请填写合同名称',
-                },
-              ]}
-            >
-              {type == Type.add ? (
-                <DatePicker
+        <Divider />
+        <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 || user?.CName}
+                label="存档人："
+              >
+                <Input disabled />
+              </Form.Item>
+              <Form.Item
+                name="company_id"
+                label="所属公司："
+                tooltip="请选择该存档合同所属公司"
+                initialValue={data?.company_id}
+                rules={[
+                  {
+                    required: true,
+                    message: '请填写所属公司',
+                  },
+                ]}
+              >
+                <Select
+                  showSearch
                   style={{ width: '100%' }}
+                  placeholder="请选择"
+                  disabled={disableds.contract || disableds.recall}
+                  filterOption={(input, option) =>
+                    (option?.label ?? '')
+                      .toLowerCase()
+                      .includes(input.toLowerCase())
+                  }
+                  options={companyData?.map((item) => {
+                    return {
+                      value: item.ID,
+                      label: item.Name,
+                    };
+                  })}
+                />
+              </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_id}
+              >
+                <TreeSelect
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  showSearch
+                  allowClear
+                  fieldNames={{
+                    label: 'Name',
+                    value: 'ID',
+                    children: 'children',
+                  }}
+                  disabled={disableds.contract || disableds.recall}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  treeData={companyDepList}
+                />
+              </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={!dealDisable} />
+              </Form.Item>
+            </Col>
+            <Col span={10}>
+              <Form.Item
+                name="created_dep"
+                label="签约承办部门："
+                tooltip="请选择该存档合同的实际履行部门，一般为经办人所在部门"
+                initialValue={data?.created_dep}
+                rules={[
+                  {
+                    required: true,
+                    message: '请选择签约承办部门',
+                  },
+                ]}
+              >
+                <TreeSelect
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  showSearch
+                  allowClear
                   disabled={disableds.contract}
+                  fieldNames={{
+                    label: 'Name',
+                    value: 'Name',
+                    children: 'children',
+                  }}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  treeData={companyDepList}
                 />
-              ) : (
-                <Input disabled={disableds.contract} />
-              )}
-            </Form.Item>
-            <Form.Item
-              name="project_name"
-              label="项目名称："
-              tooltip="不涉及项目请选“日常项目”"
-              initialValue={data?.project_name}
-              rules={[
-                {
-                  required: true,
-                  message: '请填写项目名称',
-                },
-              ]}
-            >
-              <Select
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                showSearch
-                options={projectList?.map((item) => {
-                  return {
-                    value: item.project_name,
-                    label: item.project_name,
-                  };
-                })}
-                disabled={disableds.contract}
-              />
-            </Form.Item>
-            <Form.Item
-              name="party_a"
-              label="甲方："
-              tooltip="合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
-              initialValue={data?.party_a}
-              rules={[
-                {
-                  required: true,
-                  message: '请选择甲方',
-                },
-              ]}
-            >
-              <TreeSelect
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                showSearch
-                allowClear
-                fieldNames={{
-                  label: 'Name',
-                  value: 'Name',
-                  children: 'children',
-                }}
-                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                treeData={supplyList}
-                disabled={disableds.contract}
-              />
-            </Form.Item>
-          </Col>
-          <Col span={10}>
-            <Form.Item
-              style={{ opacity: is_supplement ? 1 : 0 }}
-              name="parent_code"
-              tooltip="请先查询原合同编号，原合同未录入本系统的，需先录入存档。"
-              initialValue={data?.parent_code}
-              label="原合同编号："
-              rules={
-                is_supplement
-                  ? [
-                      {
-                        required: true,
-                        message: '请填写原合同编号',
-                      },
-                    ]
-                  : []
-              }
-            >
-              <Input
-                placeholder="请填写"
-                disabled={disableds.contract || disableds.recall}
-              />
-            </Form.Item>
-            <Form.Item
-              name="code"
-              tooltip="合同编号按《合同管理办法》的合同编码规则编号。"
-              initialValue={data?.code}
-              label="合同编号："
-            >
-              <Input placeholder="提交后自动生成" 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={disableds.contract}
-              />
-            </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: '请选择乙方',
-                },
-              ]}
-            >
-              <TreeSelect
-                style={{ width: '100%' }}
-                placeholder="请选择"
-                showSearch
-                allowClear
-                disabled={disableds.contract}
-                fieldNames={{
-                  label: 'Name',
-                  value: 'Name',
-                  children: 'children',
-                }}
-                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-                treeData={supplyList}
-              />
-            </Form.Item>
-          </Col>
-        </Row>
-        <Form.Item
-          name="party_c"
-          label="丙方（及其他）："
-          tooltip="可多选。合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
-          initialValue={data?.party_c ? data?.party_c.split(',') : []}
-          labelCol={{ span: 4 }}
-        >
-          <TreeSelect
-            style={{ width: '100%' }}
-            placeholder="请选择"
-            showSearch
-            multiple
-            allowClear
-            fieldNames={{
-              label: 'Name',
-              value: 'Name',
-              children: 'children',
-            }}
-            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
-            treeData={supplyList}
-            disabled={disableds.contract}
-          />
-        </Form.Item>
-        <Form.Item
-          name="perform"
-          initialValue={data?.perform}
-          label="合同履行情况："
-          labelCol={{ span: 4 }}
-        >
-          <Input.TextArea disabled={disableds.contract} />
-        </Form.Item>
-        <Row>
-          <Col span={10} offset={1}>
-            <Form.Item
-              label="合同及合同附件上传："
-              tooltip="请上传合同正式盖章文本的扫描件（含技术协议、质保承诺等附件），不得用照片、图片格式，不得遗漏附件"
-              name="attach"
-              rules={
-                disableds.contract
-                  ? []
-                  : [
-                      {
-                        required: true,
-                        message: '请上传合同及合同相关附件',
-                      },
-                    ]
-              }
-              initialValue={attachData.attach}
-            >
-              {type == Type.add || data?.status == Status.ReCall ? (
-                <Upload {...UploadProps}>
-                  <Button icon={<CloudUploadOutlined />}>Upload</Button>
-                </Upload>
-              ) : (
-                <ul>
-                  {data?.attach &&
-                    JSON.parse(data?.attach)?.map((item, idx) => (
-                      <li key={`${idx}_${item.name}`}>
-                        <a onClick={() => handlePreView(item)}>{item.name}</a>
-                      </li>
-                    ))}
-                </ul>
-              )}
-            </Form.Item>
-            <Form.Item
-              name="archives_dep"
-              initialValue={data?.archives_dep}
-              label="合同原件存档部门："
-              tooltip="母公司财务部和采购部门的合同请选择“财务部”，其他部门请选择“行政部”，子公司合同选择“综合管理部”"
-              rules={[
-                {
-                  required: true,
-                  message: '请选择合同原件存档部门',
-                },
-              ]}
-            >
-              <Select
-                style={{ width: '100%' }}
-                options={archivesDepList?.map((item) => {
-                  return { label: item.Name, value: item.ID };
-                })}
-                disabled={disableds.contract}
-              />
-            </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>
-              }
-            >
-              {type == Type.add ? (
-                <Upload {...UploadPropsExtend}>
-                  <Button icon={<CloudUploadOutlined />}>Upload</Button>
-                </Upload>
-              ) : (
-                <ul>
-                  {data?.attach_extend &&
-                    JSON.parse(data?.attach_extend)?.map((item, idx) => (
-                      <li key={`${idx}_${item.name}`}>
-                        <a onClick={() => handlePreView(item)}>{item.name}</a>
-                      </li>
-                    ))}
-                </ul>
-              )}
-            </Form.Item>
-          </Col>
-        </Row>
+              </Form.Item>
+            </Col>
+          </Row>
+          <ModuleTitle title="合同信息" />
 
-        {data?.status >= Status.Checking && (
-          <>
-            <ModuleTitle title="归档流程" />
-            <div className={styles.modelItem}>
-              <AuditSteps {...auditData} statusText="已归档" />
-            </div>
-          </>
-        )}
-        {isSuper && data.status == Status.Checking && (
-          <>
-            <ModuleTitle title="审核情况" />
-            <Row>
-              <Col span={10} offset={1}>
-                <Form.Item
-                  name="check_by"
-                  initialValue={user?.CName}
-                  label="审核人："
-                >
-                  <Input disabled />
-                </Form.Item>
-                <Form.Item name="is_pass" initialValue={1} label="审核意见：">
-                  <Select
-                    onChange={(e) => {
-                      setIsPass(e);
-                    }}
+          <Row>
+            <Col span={10} offset={1}>
+              <Form.Item
+                name="is_supplement"
+                label="是否补充协议："
+                tooltip="合同名称"
+                initialValue={0}
+                rules={[
+                  {
+                    required: true,
+                    message: '请填写合同名称',
+                  },
+                ]}
+              >
+                <Radio.Group disabled={disableds.contract || disableds.recall}>
+                  <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={disableds.contract} />
+              </Form.Item>
+              <Form.Item
+                name="effect_on"
+                label="合同签订日期："
+                initialValue={data?.effect_on}
+                tooltip="合同主体各方签字盖章完成之日，以最后签字盖章的为准"
+                rules={[
+                  {
+                    required: true,
+                    message: '请填写合同名称',
+                  },
+                ]}
+              >
+                {type == Type.add ? (
+                  <DatePicker
                     style={{ width: '100%' }}
-                    options={[
-                      {
-                        value: 1,
-                        label: '同意',
-                      },
-                      {
-                        value: 2,
-                        label: '拒绝',
-                      },
-                    ]}
+                    disabled={disableds.contract}
                   />
-                </Form.Item>
-              </Col>
-              <Col span={10}>
-                <Form.Item
-                  name="check_date"
-                  initialValue={dayjs().format(FORMAT)}
-                  label="审核时间："
-                >
-                  <Input disabled />
-                </Form.Item>
-              </Col>
-            </Row>
-            {isPass == 2 && (
+                ) : (
+                  <Input disabled={disableds.contract} />
+                )}
+              </Form.Item>
               <Form.Item
-                name="check_desc"
-                label="拒绝原因："
-                labelCol={{ span: 4 }}
+                name="project_name"
+                label="项目名称："
+                tooltip="不涉及项目请选“日常项目”"
+                initialValue={data?.project_name}
+                rules={[
+                  {
+                    required: true,
+                    message: '请填写项目名称',
+                  },
+                ]}
               >
-                <Input.TextArea />
+                <Select
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  showSearch
+                  options={projectList?.map((item) => {
+                    return {
+                      value: item.project_name,
+                      label: item.project_name,
+                    };
+                  })}
+                  disabled={disableds.contract}
+                />
               </Form.Item>
-            )}
-          </>
-        )}
-        {(type == Type.cancel || 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={type != Type.cancel} />
-            </Form.Item>
-          </>
-        )}
-        {type == Type.cancel && (
+              <Form.Item
+                name="party_a"
+                label="甲方："
+                tooltip="合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
+                initialValue={data?.party_a}
+                rules={[
+                  {
+                    required: true,
+                    message: '请选择甲方',
+                  },
+                ]}
+              >
+                <TreeSelect
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  showSearch
+                  allowClear
+                  fieldNames={{
+                    label: 'Name',
+                    value: 'Name',
+                    children: 'children',
+                  }}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  treeData={supplyList}
+                  disabled={disableds.contract}
+                />
+              </Form.Item>
+            </Col>
+            <Col span={10}>
+              <Form.Item
+                style={{ opacity: is_supplement ? 1 : 0 }}
+                name="parent_code"
+                tooltip="请先查询原合同编号，原合同未录入本系统的，需先录入存档。"
+                initialValue={data?.parent_code}
+                label="原合同编号："
+                rules={
+                  is_supplement
+                    ? [
+                        {
+                          required: true,
+                          message: '请填写原合同编号',
+                        },
+                      ]
+                    : []
+                }
+              >
+                <Input
+                  placeholder="请填写"
+                  disabled={disableds.contract || disableds.recall}
+                />
+              </Form.Item>
+              <Form.Item
+                name="code"
+                tooltip="合同编号按《合同管理办法》的合同编码规则编号。"
+                initialValue={data?.code}
+                label="合同编号："
+              >
+                <Input placeholder="提交后自动生成" 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={disableds.contract}
+                />
+              </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: '请选择乙方',
+                  },
+                ]}
+              >
+                <TreeSelect
+                  style={{ width: '100%' }}
+                  placeholder="请选择"
+                  showSearch
+                  allowClear
+                  disabled={disableds.contract}
+                  fieldNames={{
+                    label: 'Name',
+                    value: 'Name',
+                    children: 'children',
+                  }}
+                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                  treeData={supplyList}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
           <Form.Item
-            name="cancel_on"
-            label="创建时间："
-            initialValue={dayjs().format(FORMAT)}
+            name="party_c"
+            label="丙方（及其他）："
+            tooltip="可多选。合同主体可以下拉选择，可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
+            initialValue={data?.party_c ? data?.party_c.split(',') : []}
             labelCol={{ span: 4 }}
           >
-            <Input
-              style={{ width: '460px' }}
-              defaultValue={dayjs().format('YYYY-MM-DD')}
-              disabled
+            <TreeSelect
+              style={{ width: '100%' }}
+              placeholder="请选择"
+              showSearch
+              multiple
+              allowClear
+              fieldNames={{
+                label: 'Name',
+                value: 'Name',
+                children: 'children',
+              }}
+              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+              treeData={supplyList}
+              disabled={disableds.contract}
             />
-            <span
-              style={{ color: 'red', fontSize: '24px', marginLeft: '40px' }}
-            >
-              确认作废该合同，作废提交后无法撤回
-            </span>
           </Form.Item>
-        )}
-        {data?.status >= Status.CalChecking && (
-          <>
-            <ModuleTitle title="作废流程" />
-            <div className={styles.modelItem}>
-              <AuditSteps {...auditCelData} statusText="已作废" />
-            </div>
-          </>
-        )}
-        {isSuper && data.status == Status.CalChecking && (
-          <>
-            <ModuleTitle title="审核情况" />
-            <Row>
-              <Col span={10} offset={1}>
-                <Form.Item
-                  name="cancel_check_by"
-                  initialValue={user?.CName}
-                  label="审核人："
-                >
-                  <Input disabled />
-                </Form.Item>
-                <Form.Item name="is_pass" initialValue={1} label="审核意见：">
-                  <Select
-                    onChange={(e) => {
-                      setIsPass(e);
-                    }}
-                    style={{ width: '100%' }}
-                    options={[
-                      {
-                        value: 1,
-                        label: '同意',
-                      },
-                      {
-                        value: 0,
-                        label: '拒绝',
-                      },
-                    ]}
-                  />
-                </Form.Item>
-              </Col>
-              <Col span={10}>
+          <Form.Item
+            name="perform"
+            initialValue={data?.perform}
+            label="合同履行情况："
+            labelCol={{ span: 4 }}
+          >
+            <Input.TextArea disabled={disableds.contract} />
+          </Form.Item>
+          <Row>
+            <Col span={10} offset={1}>
+              <Form.Item
+                label="合同及合同附件上传："
+                tooltip="请上传合同正式盖章文本的扫描件（含技术协议、质保承诺等附件），不得用照片、图片格式，不得遗漏附件"
+                name="attach"
+                rules={
+                  disableds.contract
+                    ? []
+                    : [
+                        {
+                          required: true,
+                          message: '请上传合同及合同相关附件',
+                        },
+                      ]
+                }
+                initialValue={attachData.attach}
+              >
+                {type == Type.add || data?.status == Status.ReCall ? (
+                  <Upload {...UploadProps}>
+                    <Button icon={<CloudUploadOutlined />}>Upload</Button>
+                  </Upload>
+                ) : (
+                  <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: '请选择合同原件存档部门',
+                  },
+                ]}
+              >
+                <Select
+                  style={{ width: '100%' }}
+                  options={archivesDepList?.map((item) => {
+                    return { label: item.Name, value: item.ID };
+                  })}
+                  disabled={disableds.contract}
+                />
+              </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>
+                }
+              >
+                {type == Type.add ? (
+                  <Upload {...UploadPropsExtend}>
+                    <Button icon={<CloudUploadOutlined />}>Upload</Button>
+                  </Upload>
+                ) : (
+                  <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>
+            </>
+          )}
+          {isSuper && data.status == Status.Checking && (
+            <>
+              <ModuleTitle title="审核情况" />
+              <Row>
+                <Col span={10} offset={1}>
+                  <Form.Item
+                    name="check_by"
+                    initialValue={user?.CName}
+                    label="审核人："
+                  >
+                    <Input disabled />
+                  </Form.Item>
+                  <Form.Item name="is_pass" initialValue={1} label="审核意见：">
+                    <Select
+                      onChange={(e) => {
+                        setIsPass(e);
+                      }}
+                      style={{ width: '100%' }}
+                      options={[
+                        {
+                          value: 1,
+                          label: '同意',
+                        },
+                        {
+                          value: 2,
+                          label: '拒绝',
+                        },
+                      ]}
+                    />
+                  </Form.Item>
+                </Col>
+                <Col span={10}>
+                  <Form.Item
+                    name="check_date"
+                    initialValue={dayjs().format(FORMAT)}
+                    label="审核时间："
+                  >
+                    <Input disabled />
+                  </Form.Item>
+                </Col>
+              </Row>
+              {isPass == 2 && (
                 <Form.Item
-                  name="check_date"
-                  initialValue={dayjs().format(FORMAT)}
-                  label="审核时间："
+                  name="check_desc"
+                  label="拒绝原因："
+                  labelCol={{ span: 4 }}
                 >
-                  <Input disabled />
+                  <Input.TextArea />
                 </Form.Item>
-              </Col>
-            </Row>
-            {!isPass && (
+              )}
+            </>
+          )}
+          {(type == Type.cancel || data?.status >= Status.CalChecking) && (
+            <>
+              <ModuleTitle title="作废信息" />
               <Form.Item
-                name="cancel_check_result"
-                label="拒绝原因："
+                name="cancel_desc"
+                label="作废原因："
+                initialValue={data?.cancel_desc}
                 labelCol={{ span: 4 }}
+                rules={[
+                  {
+                    required: true,
+                    message: '请填写作废原因',
+                  },
+                ]}
               >
-                <Input.TextArea />
+                <Input disabled={type != Type.cancel} />
               </Form.Item>
-            )}
-          </>
-        )}
-        {(type == Type.add || data?.status == Status.ReCall) &&
-          auditList.length > 0 && (
+            </>
+          )}
+          {type == Type.cancel && (
+            <Form.Item
+              name="cancel_on"
+              label="创建时间："
+              initialValue={dayjs().format(FORMAT)}
+              labelCol={{ span: 4 }}
+            >
+              <Input
+                style={{ width: '460px' }}
+                defaultValue={dayjs().format('YYYY-MM-DD')}
+                disabled
+              />
+              <span
+                style={{ color: 'red', fontSize: '24px', marginLeft: '40px' }}
+              >
+                确认作废该合同，作废提交后无法撤回
+              </span>
+            </Form.Item>
+          )}
+          {data?.status >= Status.CalChecking && (
             <>
-              <ModuleTitle title="审批流程" />
+              <ModuleTitle title="作废流程" />
               <div className={styles.modelItem}>
-                <Steps
-                  current={1}
-                  items={auditList.map((item, index) => {
-                    return {
-                      title: `审批${index + 1}`,
-                      description: `审批人：${item.name}`,
-                    };
-                  })}
-                />
+                <AuditSteps {...auditCelData} statusText="已作废" />
               </div>
             </>
           )}
-      </Form>
-      <Divider />
-    </Modal>
+          {isSuper && data.status == Status.CalChecking && (
+            <>
+              <ModuleTitle title="审核情况" />
+              <Row>
+                <Col span={10} offset={1}>
+                  <Form.Item
+                    name="cancel_check_by"
+                    initialValue={user?.CName}
+                    label="审核人："
+                  >
+                    <Input disabled />
+                  </Form.Item>
+                  <Form.Item name="is_pass" initialValue={1} label="审核意见：">
+                    <Select
+                      onChange={(e) => {
+                        setIsPass(e);
+                      }}
+                      style={{ width: '100%' }}
+                      options={[
+                        {
+                          value: 1,
+                          label: '同意',
+                        },
+                        {
+                          value: 0,
+                          label: '拒绝',
+                        },
+                      ]}
+                    />
+                  </Form.Item>
+                </Col>
+                <Col span={10}>
+                  <Form.Item
+                    name="check_date"
+                    initialValue={dayjs().format(FORMAT)}
+                    label="审核时间："
+                  >
+                    <Input disabled />
+                  </Form.Item>
+                </Col>
+              </Row>
+              {!isPass && (
+                <Form.Item
+                  name="cancel_check_result"
+                  label="拒绝原因："
+                  labelCol={{ span: 4 }}
+                >
+                  <Input.TextArea />
+                </Form.Item>
+              )}
+            </>
+          )}
+          {(type == Type.add || data?.status == Status.ReCall) &&
+            auditList.length > 0 && (
+              <>
+                <ModuleTitle title="审批流程" />
+                <div className={styles.modelItem}>
+                  <Steps
+                    current={1}
+                    items={auditList.map((item, index) => {
+                      return {
+                        title: `审批${index + 1}`,
+                        description: `审批人：${item.name}`,
+                      };
+                    })}
+                  />
+                </div>
+              </>
+            )}
+        </Form>
+        <Divider />
+      </Modal>
+      <FileViewerModal
+        data={fileViewerData}
+        visible={fileViewerVisible}
+        onCancel={() => {
+          setFileViewerVisible(false);
+        }}
+      />
+    </>
   );
 };
 export default ContractModal;

src/pages/ContractManager/index.jsx

@@ -385,14 +385,7 @@ const ConteactManager = (props) => {
     setFileViewerData(result);
     setFileViewerVisible(true);
   };
-  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);
-  };
+
   //单个合同下载
   const handleUpload = (record) => {
     const token = getToken();
@@ -586,7 +579,6 @@ const ConteactManager = (props) => {
         projectList={projectData?.list}
         visible={visible}
         handleOk={handleOk}
-        handlePreView={handlePreViewSingle}
         handleCancel={() => setVisible(false)}
         handlerReCall={handlerReCall}
       />