Modal.jsx 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014
  1. import {
  2. Form,
  3. Modal,
  4. Row,
  5. Col,
  6. Input,
  7. DatePicker,
  8. Icon,
  9. Button,
  10. Divider,
  11. Steps,
  12. Select,
  13. TreeSelect,
  14. InputNumber,
  15. Upload,
  16. Space,
  17. Radio,
  18. } from 'antd';
  19. import ModuleTitle from '../../../components/ModuleTitle/moduleTitle';
  20. import { useEffect, useMemo, useState } from 'react';
  21. import {
  22. queryCompany,
  23. queryDepList,
  24. querySupplierList,
  25. } from '@/services/contract';
  26. import { useModel, useRequest } from '@umijs/max';
  27. import { CloudUploadOutlined } from '@ant-design/icons';
  28. import styles from '../index.less';
  29. import dayjs from 'dayjs';
  30. import InputSelect from '../../../components/InputSelect';
  31. export const Type = {
  32. add: 0, //新增
  33. detail: 1, //详情
  34. cancel: 2, //作废
  35. check: 3, //审核
  36. };
  37. export const StatusText = [
  38. '',
  39. '待审核',
  40. '审核拒绝',
  41. '已存档',
  42. '作废待审核',
  43. '作废拒绝',
  44. '已作废',
  45. ];
  46. export const Status = {
  47. None: 0,
  48. Checking: 1,
  49. CheckReject: 2,
  50. CheckSuccess: 3,
  51. CalChecking: 4,
  52. CalCheckReject: 5,
  53. CalCheckSuccess: 6,
  54. };
  55. const ContractModal = (props) => {
  56. const [form] = Form.useForm();
  57. const {
  58. initialState: { user },
  59. } = useModel('@@initialState');
  60. const { userList, run: userListRun } = useModel('userList');
  61. const { depList, run: depListRun } = useModel('depList');
  62. const FORMAT = 'YYYY-MM-DD';
  63. const {
  64. detail: data,
  65. type,
  66. visible,
  67. projectList = [],
  68. handleOk,
  69. handleCancel,
  70. parent_id,
  71. } = props;
  72. const title =
  73. type == Type.add ? '新增' : type == Type.detail ? '详情' : '作废';
  74. //所属公司为总部时才能选择部门,为子公司时,部门不能操作 所属部门为子公司的需要填经办人
  75. const company = Form.useWatch('company_id', form);
  76. const [depDisable, setDepDisable] = useState(false);
  77. const [dealDisable, setDealDisable] = useState(false);
  78. //项目名称选择后,自动填入对应的项目编号
  79. const project_name = Form.useWatch('project_name', form);
  80. //是否补充协议,是的话需要填合同编号
  81. const is_supplement = Form.useWatch('is_supplement', form);
  82. const [isPass, setIsPass] = useState(1);
  83. const [fileList, setFileList] = useState([]);
  84. const [fileExtendList, setFileExtendList] = useState([]);
  85. const { data: companyData, run: runCompany } = useRequest(queryCompany);
  86. console.log(user);
  87. useEffect(() => {
  88. userListRun();
  89. depListRun();
  90. runCompany();
  91. }, []);
  92. useEffect(() => {
  93. form.resetFields();
  94. }, [data]);
  95. //供应商列表
  96. const { data: supplierList = [], loading } = useRequest(querySupplierList, {
  97. defaultParams: [
  98. {
  99. project_id: 1,
  100. is_super: user?.IsSuper,
  101. created_by: user?.CName,
  102. },
  103. ],
  104. formatResult: (res) => {
  105. return res?.data?.list
  106. ? res?.data.list.map((item) => {
  107. return { ...item, Name: item.name };
  108. })
  109. : [];
  110. },
  111. });
  112. const isSuper = useMemo(() => {
  113. if (user?.Permission['menu-001-audit']) return true;
  114. return false;
  115. }, [user]);
  116. useEffect(() => {
  117. const item = companyData?.find((item) => item.ID == company);
  118. if (item?.Flag == 1) {
  119. setDepDisable(false);
  120. form.setFieldsValue({ dep_id: '', archives_dep: '' });
  121. // setDealDisable(false);
  122. } else {
  123. setDepDisable(true);
  124. form.setFieldsValue({ dep_id: '综合管理部', archives_dep: '综合管理部' });
  125. // setDealDisable(true);
  126. // form.setFieldsValue({ deal_by: user?.CName });
  127. }
  128. }, [company]);
  129. useEffect(() => {
  130. const project_code = projectList?.find(
  131. (item) => item.project_name == project_name,
  132. )?.project_full_code;
  133. if (project_code) {
  134. form.setFieldsValue({ project_code });
  135. } else {
  136. form.setFieldsValue({ project_code: '' });
  137. }
  138. }, [project_name]);
  139. // useEffect(() => {
  140. // console.log('==================', is_supplement);
  141. // }, [is_supplement]);
  142. const supplyList = useMemo(() => {
  143. return companyData ? [...companyData, ...supplierList] : supplierList;
  144. }, [companyData, supplierList]);
  145. const disableds = useMemo(() => {
  146. if (!visible) {
  147. setFileList([]);
  148. setFileExtendList([]);
  149. setIsPass(1);
  150. setDepDisable(false);
  151. setDealDisable(false);
  152. }
  153. if (type == Type.add) {
  154. return { contract: false, check: true };
  155. } else if (type == Type.detail) {
  156. return { contract: true, check: true };
  157. } else if (type == Type.cancel) {
  158. return { contract: true, check: true };
  159. }
  160. return { contract: true, check: false };
  161. }, [type, visible]);
  162. const UploadProps = {
  163. action: `/api/contract/v1/attach`,
  164. headers: {
  165. 'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
  166. },
  167. onChange({ file, fileList }) {
  168. if (file.status !== 'uploading') {
  169. console.log(file, fileList);
  170. const list = fileList.map((item) => item.response?.data?.attach);
  171. form.setFieldsValue({ attach: list });
  172. setFileList(fileList.map((item) => item.response?.data?.attach));
  173. }
  174. },
  175. };
  176. const UploadPropsExtend = {
  177. action: `/api/contract/v1/attach`,
  178. headers: {
  179. 'JWT-TOKEN': localStorage.getItem('JWT-TOKEN'),
  180. },
  181. onChange({ file, fileList }) {
  182. if (file.status !== 'uploading') {
  183. console.log(file, fileList);
  184. setFileExtendList(fileList.map((item) => item.response?.data?.attach));
  185. }
  186. },
  187. };
  188. const handleSubmit = () => {
  189. form.validateFields().then((values) => {
  190. if (type == Type.add) {
  191. values.effect_on = dayjs(values.effect_on).format(FORMAT);
  192. values.created_on = values.created_on || dayjs().format(FORMAT);
  193. if (parent_id) values.parent_id = parent_id;
  194. if (values.amount || values.amount == 0)
  195. values.amount = values.amount + '';
  196. if (values.attach) values.attach = JSON.stringify(values.attach);
  197. if (fileExtendList.length > 0)
  198. values.attach_extend = JSON.stringify(fileList);
  199. // if (values.party_c && values.party_c.length > 0)
  200. values.party_c = values.party_c?.join(',');
  201. const companyItem = companyData?.find(
  202. (item) => item.ID == values.company_id,
  203. );
  204. //所属公司为本部
  205. if (companyItem.Flag == 1) {
  206. const item = getDepItemById(values.dep_id);
  207. if (item) {
  208. values.dep_name = item.Name;
  209. values.dep_code = item.Code;
  210. }
  211. values.company_name = companyItem.Name;
  212. } else {
  213. //为分子公司
  214. values.company_name = companyItem.Name;
  215. values.company_code = companyItem.Code;
  216. values.dep_name = '综合管理部';
  217. values.dep_code = '综合管理部';
  218. values.dep_id = 0;
  219. }
  220. values.created_by = user?.ID;
  221. console.log('-=-=-=-=-=-=-----values--------------', values);
  222. handleOk(values);
  223. } else if (type == Type.cancel) {
  224. let result = {
  225. id: data?.id,
  226. cancel_desc: values.cancel_desc,
  227. };
  228. handleOk(result);
  229. } else if (data?.status == Status.Checking) {
  230. let result = {
  231. id: data?.id,
  232. check_by: user?.CName,
  233. check_result: values.check_result,
  234. is_pass: values.is_pass,
  235. check_desc: values?.check_desc,
  236. };
  237. handleOk(result);
  238. } else if (data?.status == Status.CalChecking) {
  239. let result = {
  240. id: data?.id,
  241. cancel_check_by: user?.CName,
  242. cancel_check_result: values.cancel_check_result,
  243. is_pass: values.is_pass,
  244. // check_desc: values?.check_desc,
  245. };
  246. handleOk(result);
  247. }
  248. });
  249. };
  250. const getDepItemById = (id) => {
  251. const fun = (list) => {
  252. for (let i = 0; i < list.length; i++) {
  253. let item = list[i];
  254. if (item.ID == id) {
  255. return item;
  256. } else if (item.children?.length > 0) {
  257. let res = fun(item.children);
  258. if (res) return res;
  259. }
  260. }
  261. };
  262. return fun(depList);
  263. };
  264. return (
  265. <Modal
  266. width={'85%'}
  267. title={title}
  268. open={visible}
  269. okText="提交"
  270. cancelText="返回"
  271. onOk={handleSubmit}
  272. onCancel={handleCancel}
  273. // okButtonProps={type == Type.detail ? { disabled: true } : null}
  274. destroyOnClose
  275. >
  276. <Divider />
  277. <Form
  278. form={form}
  279. // initialValues={data}
  280. labelCol={{ span: 7 }}
  281. wrapperCol={{ span: 17 }}
  282. >
  283. <ModuleTitle title="存档人信息" />
  284. <Row>
  285. <Col span={10} offset={1}>
  286. <Form.Item
  287. name="created_name"
  288. initialValue={data?.created_name || user?.CName}
  289. label="存档人:"
  290. >
  291. <Input disabled />
  292. </Form.Item>
  293. <Form.Item
  294. name="company_id"
  295. label="所属公司:"
  296. tooltip="请选择该存档合同所属公司"
  297. initialValue={data?.company_id}
  298. rules={[
  299. {
  300. required: true,
  301. message: '请填写所属公司',
  302. },
  303. ]}
  304. >
  305. <Select
  306. showSearch
  307. style={{ width: '100%' }}
  308. placeholder="请选择"
  309. disabled={disableds.contract}
  310. filterOption={(input, option) =>
  311. (option?.label ?? '')
  312. .toLowerCase()
  313. .includes(input.toLowerCase())
  314. }
  315. options={companyData?.map((item) => {
  316. return {
  317. value: item.ID,
  318. label: item.Name,
  319. };
  320. })}
  321. />
  322. </Form.Item>
  323. </Col>
  324. <Col span={10}>
  325. <Form.Item
  326. name="created_on"
  327. initialValue={data?.created_on || dayjs().format(FORMAT)}
  328. label="存档时间:"
  329. >
  330. <Input disabled />
  331. </Form.Item>
  332. <Form.Item
  333. name="dep_id"
  334. label="所属部门:"
  335. initialValue={data?.dep_id}
  336. >
  337. <TreeSelect
  338. style={{ width: '100%' }}
  339. placeholder="请选择"
  340. showSearch
  341. allowClear
  342. fieldNames={{
  343. label: 'Name',
  344. value: 'ID',
  345. children: 'children',
  346. }}
  347. disabled={disableds.contract || depDisable}
  348. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  349. treeData={depList?.find((item) => item.Code == 'GT')?.children}
  350. />
  351. </Form.Item>
  352. </Col>
  353. </Row>
  354. <ModuleTitle title="经办人信息" />
  355. <Row>
  356. <Col span={10} offset={1}>
  357. <Form.Item
  358. name="deal_by"
  359. label="经办人:"
  360. tooltip="经办人应负责合同审批流程、签字盖章、合同原件存档和电子档案存档。母公司的经办人为OA审批提交人,也是存档人。子公司经办人由子公司合同专员填写,一般是合同审批时的提交人或者是合同实际执行的负责人"
  361. initialValue={data?.deal_by || user?.CName}
  362. rules={[
  363. {
  364. required: true,
  365. message: '请选择经办人',
  366. },
  367. ]}
  368. >
  369. <Select
  370. showSearch
  371. style={{ width: '100%' }}
  372. placeholder="请选择"
  373. disabled
  374. filterOption={(input, option) =>
  375. (option?.label ?? '')
  376. .toLowerCase()
  377. .includes(input.toLowerCase())
  378. }
  379. options={userList?.map((item) => {
  380. return {
  381. value: item.CName,
  382. label: item.CName,
  383. };
  384. })}
  385. />
  386. </Form.Item>
  387. </Col>
  388. <Col span={10}>
  389. <Form.Item
  390. name="created_dep"
  391. label="签约承办部门:"
  392. tooltip="请选择该存档合同的实际履行部门,一般为经办人所在部门"
  393. initialValue={data?.created_dep}
  394. rules={[
  395. {
  396. required: true,
  397. message: '请选择签约承办部门',
  398. },
  399. ]}
  400. >
  401. <TreeSelect
  402. style={{ width: '100%' }}
  403. placeholder="请选择"
  404. showSearch
  405. allowClear
  406. disabled={disableds.contract}
  407. fieldNames={{
  408. label: 'Name',
  409. value: 'Name',
  410. children: 'children',
  411. }}
  412. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  413. treeData={depList?.find((item) => item.Code == 'GT')?.children}
  414. />
  415. </Form.Item>
  416. </Col>
  417. </Row>
  418. <ModuleTitle title="合同信息" />
  419. <Row>
  420. <Col span={10} offset={1}>
  421. <Form.Item
  422. name="is_supplement"
  423. label="是否补充协议:"
  424. tooltip="合同名称"
  425. initialValue={0}
  426. rules={[
  427. {
  428. required: true,
  429. message: '请填写合同名称',
  430. },
  431. ]}
  432. >
  433. <Radio.Group>
  434. <Radio value={1}>是</Radio>
  435. <Radio value={0}>否</Radio>
  436. </Radio.Group>
  437. </Form.Item>
  438. <Form.Item
  439. name="name"
  440. label="合同名称:"
  441. tooltip="请与OA审批时填写的合同名称一致"
  442. initialValue={data?.name}
  443. rules={[
  444. {
  445. required: true,
  446. message: '请填写合同名称',
  447. },
  448. ]}
  449. >
  450. <Input disabled={disableds.contract} />
  451. </Form.Item>
  452. <Form.Item
  453. name="effect_on"
  454. label="合同签订日期:"
  455. initialValue={data?.effect_on}
  456. tooltip="合同主体各方签字盖章完成之日,以最后签字盖章的为准"
  457. rules={[
  458. {
  459. required: true,
  460. message: '请填写合同名称',
  461. },
  462. ]}
  463. >
  464. {type == Type.add ? (
  465. <DatePicker
  466. style={{ width: '100%' }}
  467. disabled={disableds.contract}
  468. />
  469. ) : (
  470. <Input disabled={disableds.contract} />
  471. )}
  472. </Form.Item>
  473. <Form.Item
  474. name="project_name"
  475. label="项目名称:"
  476. tooltip="不涉及项目请填写“不涉及”"
  477. initialValue={data?.project_name}
  478. rules={[
  479. {
  480. required: true,
  481. message: '请填写项目名称',
  482. },
  483. ]}
  484. >
  485. <InputSelect
  486. list={projectList?.map((item) => {
  487. return {
  488. key: item.id,
  489. value: item.project_name,
  490. };
  491. })}
  492. />
  493. {/* <Select
  494. style={{ width: '100%' }}
  495. placeholder="请选择"
  496. options={projectList?.map((item) => {
  497. return {
  498. value: item.project_name,
  499. label: item.project_name,
  500. };
  501. })}
  502. disabled={disableds.contract}
  503. /> */}
  504. </Form.Item>
  505. <Form.Item
  506. name="party_a"
  507. label="甲方:"
  508. tooltip="合同主体可以下拉选择,可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
  509. initialValue={data?.party_a}
  510. rules={[
  511. {
  512. required: true,
  513. message: '请选择甲方',
  514. },
  515. ]}
  516. >
  517. <TreeSelect
  518. style={{ width: '100%' }}
  519. placeholder="请选择"
  520. showSearch
  521. allowClear
  522. fieldNames={{
  523. label: 'Name',
  524. value: 'Name',
  525. children: 'children',
  526. }}
  527. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  528. treeData={supplyList}
  529. disabled={disableds.contract}
  530. />
  531. </Form.Item>
  532. </Col>
  533. <Col span={10}>
  534. <Form.Item
  535. style={{ opacity: is_supplement ? 1 : 0 }}
  536. name="parent_code"
  537. initialValue={data?.parent_code}
  538. label="原合同编号:"
  539. rules={
  540. is_supplement
  541. ? [
  542. {
  543. required: true,
  544. message: '请填写原合同编号',
  545. },
  546. ]
  547. : []
  548. }
  549. >
  550. <Input placeholder="请填写" />
  551. </Form.Item>
  552. <Form.Item
  553. name="code"
  554. tooltip="请与OA审批时填写的合同编号一致。合同编号应按《合同管理办法》的合同编码规则编号"
  555. initialValue={data?.code}
  556. label="合同编号:"
  557. rules={[
  558. {
  559. required: true,
  560. message: '请填写合同编号',
  561. },
  562. ]}
  563. >
  564. <Input placeholder="请填写" />
  565. </Form.Item>
  566. <Form.Item
  567. label="合同总价款:"
  568. name="amount"
  569. tooltip="请与OA审批时填写的“合同金额”一致。不涉及金额填“0”"
  570. initialValue={data?.amount}
  571. rules={[
  572. {
  573. required: true,
  574. message: '请输入合同总价款',
  575. },
  576. ]}
  577. >
  578. <InputNumber
  579. style={{ width: '100%' }}
  580. precision={2}
  581. addonAfter="万元"
  582. disabled={disableds.contract}
  583. />
  584. </Form.Item>
  585. <Form.Item
  586. name="project_code"
  587. initialValue={data?.project_code}
  588. label="项目编号:"
  589. >
  590. <Input disabled />
  591. </Form.Item>
  592. <Form.Item
  593. name="party_b"
  594. label="乙方:"
  595. tooltip="合同主体可以下拉选择,可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
  596. initialValue={data?.party_b}
  597. rules={[
  598. {
  599. required: true,
  600. message: '请选择乙方',
  601. },
  602. ]}
  603. >
  604. <TreeSelect
  605. style={{ width: '100%' }}
  606. placeholder="请选择"
  607. showSearch
  608. allowClear
  609. disabled={disableds.contract}
  610. fieldNames={{
  611. label: 'Name',
  612. value: 'Name',
  613. children: 'children',
  614. }}
  615. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  616. treeData={supplyList}
  617. />
  618. </Form.Item>
  619. </Col>
  620. </Row>
  621. <Form.Item
  622. name="party_c"
  623. label="丙方(及其他):"
  624. tooltip="可多选。合同主体可以下拉选择,可选项需要经办人在“主页--供应商管理”中创建。经办人可以维护和更新供应商信息。"
  625. initialValue={data?.party_c ? data?.party_c.split(',') : []}
  626. labelCol={{ span: 4 }}
  627. >
  628. <TreeSelect
  629. style={{ width: '100%' }}
  630. placeholder="请选择"
  631. showSearch
  632. multiple
  633. allowClear
  634. fieldNames={{
  635. label: 'Name',
  636. value: 'Name',
  637. children: 'children',
  638. }}
  639. dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  640. treeData={supplyList}
  641. disabled={disableds.contract}
  642. />
  643. </Form.Item>
  644. <Form.Item
  645. name="perform"
  646. initialValue={data?.perform}
  647. label="合同履行情况:"
  648. labelCol={{ span: 4 }}
  649. >
  650. <Input.TextArea disabled={disableds.contract} />
  651. </Form.Item>
  652. <Row>
  653. <Col span={10} offset={1}>
  654. <Form.Item
  655. label="合同及合同附件上传:"
  656. tooltip="请上传合同正式盖章文本的扫描件(含技术协议、质保承诺等附件),不得用照片、图片格式,不得遗漏附件"
  657. name="attach"
  658. rules={
  659. disableds.contract
  660. ? []
  661. : [
  662. {
  663. required: true,
  664. message: '请上传合同及合同相关附件',
  665. },
  666. ]
  667. }
  668. >
  669. {type == Type.add ? (
  670. <Upload {...UploadProps}>
  671. <Button icon={<CloudUploadOutlined />}>Upload</Button>
  672. </Upload>
  673. ) : (
  674. <ul>
  675. {data?.attach &&
  676. JSON.parse(data?.attach)?.map((item, idx) => (
  677. <li key={`${idx}_${item.name}`}>{item.name}</li>
  678. ))}
  679. </ul>
  680. )}
  681. </Form.Item>
  682. <Form.Item
  683. name="archives_dep"
  684. initialValue={data?.archives_dep}
  685. label="合同原件存档部门:"
  686. tooltip="母公司财务部和采购部门的合同请选择“财务部”,其他部门请选择“行政部”,子公司合同选择“综合管理部”"
  687. >
  688. <Select
  689. style={{ width: '100%' }}
  690. options={[
  691. {
  692. value: '财务部',
  693. label: '财务部',
  694. },
  695. {
  696. value: '行政部',
  697. label: '行政部',
  698. },
  699. ]}
  700. disabled={disableds.contract || depDisable}
  701. />
  702. </Form.Item>
  703. </Col>
  704. <Col span={10}>
  705. <Form.Item
  706. label="合同相关资料上传:"
  707. tooltip={
  708. <div>
  709. 依据《合同管理办法》,合同相关资料需要作为合同电子档案的一部分,包括:
  710. <br />
  711. 1)合同会审纪要或投资决策通知书(如有);
  712. <br />
  713. 2)合同相对方的营业执照等资质证的复印件(首次签约的须加盖公章)、个人身份证复印件(合同一方为自然人时提供);
  714. <br />
  715. 3)合同相对方经办人员的授权委托书原件及其身份证复印件(如有);
  716. <br />
  717. 4)
  718. 涉及房屋或场地租赁的,还应提供房屋及场地的权属证明资料,但如果续签租赁合同,且房屋所有权人没有发生变更的,在附具相关说明后可不再提供上述资料;
  719. <br />
  720. 5)其他资料。
  721. </div>
  722. }
  723. >
  724. {type == Type.add ? (
  725. <Upload {...UploadPropsExtend}>
  726. <Button icon={<CloudUploadOutlined />}>Upload</Button>
  727. </Upload>
  728. ) : (
  729. <ul>
  730. {data?.attach_extend &&
  731. JSON.parse(data?.attach_extend)?.map((item, idx) => (
  732. <li key={`${idx}_${item.name}`}>
  733. {/* <Space>
  734. {item.name} <span>预览</span>{' '}
  735. <a href={item.url}>下载</a>
  736. </Space> */}
  737. </li>
  738. ))}
  739. </ul>
  740. )}
  741. </Form.Item>
  742. </Col>
  743. </Row>
  744. {type != Type.add && (
  745. <>
  746. <ModuleTitle title="归档流程" />
  747. <div className={styles.modelItem}>
  748. <Steps
  749. current={data?.status == Status.Checking ? 1 : 2}
  750. status={
  751. data?.status == Status.CheckReject ? 'error' : 'process'
  752. }
  753. items={[
  754. {
  755. title: '发起',
  756. description: (
  757. <>
  758. <div className={styles.textNowarp}>
  759. 发起人:{data?.created_name}
  760. </div>
  761. <div className={styles.textNowarp}>
  762. 发起时间:{data?.created_on}
  763. </div>
  764. </>
  765. ),
  766. },
  767. {
  768. title: '审核',
  769. description: (
  770. <>
  771. <div className={styles.textNowarp}>
  772. 审核人:{data?.check_by}
  773. </div>
  774. <div className={styles.textNowarp}>
  775. 审核时间:{data?.check_on}
  776. </div>
  777. {data?.check_desc && (
  778. <div
  779. className={styles.textNowarp}
  780. style={{ color: 'red' }}
  781. >
  782. 拒绝原因:{data?.check_desc}
  783. </div>
  784. )}
  785. </>
  786. ),
  787. },
  788. {
  789. title:
  790. data?.status >= Status.CheckSuccess
  791. ? StatusText[Status.CheckSuccess]
  792. : StatusText[data?.status],
  793. },
  794. ]}
  795. />
  796. </div>
  797. </>
  798. )}
  799. {isSuper && data.status == Status.Checking && (
  800. <>
  801. <ModuleTitle title="审核情况" />
  802. <Row>
  803. <Col span={10} offset={1}>
  804. <Form.Item
  805. name="check_by"
  806. initialValue={user?.CName}
  807. label="审核人:"
  808. >
  809. <Input disabled />
  810. </Form.Item>
  811. <Form.Item name="is_pass" initialValue={1} label="审核意见:">
  812. <Select
  813. onChange={(e) => {
  814. setIsPass(e);
  815. }}
  816. style={{ width: '100%' }}
  817. options={[
  818. {
  819. value: 1,
  820. label: '同意',
  821. },
  822. {
  823. value: 0,
  824. label: '拒绝',
  825. },
  826. ]}
  827. />
  828. </Form.Item>
  829. </Col>
  830. <Col span={10}>
  831. <Form.Item
  832. name="check_date"
  833. initialValue={dayjs().format(FORMAT)}
  834. label="审核时间:"
  835. >
  836. <Input disabled />
  837. </Form.Item>
  838. </Col>
  839. </Row>
  840. {!isPass && (
  841. <Form.Item
  842. name="check_desc"
  843. label="拒绝原因:"
  844. labelCol={{ span: 4 }}
  845. >
  846. <Input.TextArea />
  847. </Form.Item>
  848. )}
  849. </>
  850. )}
  851. {(type == Type.cancel || data?.status >= Status.CalChecking) && (
  852. <>
  853. <ModuleTitle title="作废信息" />
  854. <Form.Item
  855. name="cancel_desc"
  856. label="作废原因:"
  857. initialValue={data?.cancel_desc}
  858. labelCol={{ span: 4 }}
  859. rules={[
  860. {
  861. required: true,
  862. message: '请填写作废原因',
  863. },
  864. ]}
  865. >
  866. <Input disabled={type != Type.cancel} />
  867. </Form.Item>
  868. </>
  869. )}
  870. {type == Type.cancel && (
  871. <Form.Item
  872. name="cancel_on"
  873. label="创建时间:"
  874. initialValue={dayjs().format(FORMAT)}
  875. labelCol={{ span: 4 }}
  876. >
  877. <Input
  878. style={{ width: '460px' }}
  879. defaultValue={dayjs().format('YYYY-MM-DD')}
  880. disabled
  881. />
  882. <span
  883. style={{ color: 'red', fontSize: '24px', marginLeft: '40px' }}
  884. >
  885. 确认作废该合同,作废提交后无法撤回
  886. </span>
  887. </Form.Item>
  888. )}
  889. {data?.status >= Status.CalChecking && (
  890. <>
  891. <ModuleTitle title="作废流程" />
  892. <div className={styles.modelItem}>
  893. <Steps
  894. current={data?.status == Status.CalChecking ? 1 : 2}
  895. status={
  896. data?.status == Status.CalCheckReject ? 'error' : 'process'
  897. }
  898. items={[
  899. {
  900. title: '发起',
  901. description: (
  902. <>
  903. <div className={styles.textNowarp}>
  904. 发起人:{data?.created_name}
  905. </div>
  906. <div className={styles.textNowarp}>
  907. 发起时间:{data?.created_on}
  908. </div>
  909. </>
  910. ),
  911. },
  912. {
  913. title: '审核',
  914. description: (
  915. <>
  916. <div className={styles.textNowarp}>
  917. 审核人:{data?.cancel_check_by}
  918. </div>
  919. <div className={styles.textNowarp}>
  920. 审核时间:{data?.cancel_check_on}
  921. </div>
  922. </>
  923. ),
  924. },
  925. {
  926. title: StatusText[data?.status],
  927. },
  928. ]}
  929. />
  930. </div>
  931. </>
  932. )}
  933. {isSuper && data.status == Status.CalChecking && (
  934. <>
  935. <ModuleTitle title="审核情况" />
  936. <Row>
  937. <Col span={10} offset={1}>
  938. <Form.Item
  939. name="cancel_check_by"
  940. initialValue={user?.CName}
  941. label="审核人:"
  942. >
  943. <Input disabled />
  944. </Form.Item>
  945. <Form.Item name="is_pass" initialValue={1} label="审核意见:">
  946. <Select
  947. onChange={(e) => {
  948. setIsPass(e);
  949. }}
  950. style={{ width: '100%' }}
  951. options={[
  952. {
  953. value: 1,
  954. label: '同意',
  955. },
  956. {
  957. value: 0,
  958. label: '拒绝',
  959. },
  960. ]}
  961. />
  962. </Form.Item>
  963. </Col>
  964. <Col span={10}>
  965. <Form.Item
  966. name="check_date"
  967. initialValue={dayjs().format(FORMAT)}
  968. label="审核时间:"
  969. >
  970. <Input disabled />
  971. </Form.Item>
  972. </Col>
  973. </Row>
  974. {!isPass && (
  975. <Form.Item
  976. name="cancel_check_result"
  977. label="拒绝原因:"
  978. labelCol={{ span: 4 }}
  979. >
  980. <Input.TextArea />
  981. </Form.Item>
  982. )}
  983. </>
  984. )}
  985. </Form>
  986. <Divider />
  987. </Modal>
  988. );
  989. };
  990. export default ContractModal;