合同管理

.umirc.ts

@@ -77,7 +77,6 @@ export default defineConfig({
       name: '合同管理',
       path: '/contract-manager',
       component: './ContractManager/index',
-      layout: false,
     },
   ],
   npmClient: 'yarn',

package.json

@@ -16,6 +16,7 @@
     "@antv/xflow": "^1.0.55",
     "@umijs/max": "^4.0.64",
     "antd": "^5.0.0",
+    "moment": "^2.29.4",
     "qs": "^6.11.1",
     "umi-request": "^1.4.0"
   },

src/pages/ContractManager/component/Modal.jsx

@@ -8,13 +8,38 @@ import {
   Upload,
   Button,
   Divider,
+  Steps,
 } from 'antd';
 import ModuleTitle from '../../../components/ModuleTitle/moduleTitle';
 import { CloudUploadOutlined } from '@ant-design/icons';
+import moment from 'moment';
 
 const ContractModal = (props) => {
-  const { title, visible, handleOk, handleCancel } = props;
+  const Type = {
+    add: 0, //新增
+    detail: 1, //详情
+    cancel: 2, //作废
+  };
+  const FORMAT = 'YYYY-MM-DD';
+  const { title, type, visible, handleOk, handleCancel } = props;
   const [form] = Form.useForm();
+  const data = {
+    company_name: 'hdhdhdh',
+    name: 'kkkk',
+    effect_on: moment('2020-02-02'),
+    party_a: 'aaaaa',
+    party_b: 'bbbbbb',
+    party_c: 'ccccc',
+    created_dep: 'fffff',
+    dep_id: '1111',
+    code: '132456',
+    amount: '1111111111777',
+    project_code: '444444',
+    deal_by: 'hhhhh',
+    perform: 'dnjfndjfnjdnfjd',
+    created_by: '77777',
+    created_on: moment().format(FORMAT),
+  };
 
   const UploadProps = {
     action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
@@ -48,6 +73,17 @@ const ContractModal = (props) => {
     ],
   };
 
+  const handleSubmit = () => {
+    form.validateFields().then((values) => {
+      console.log(values);
+      let timeObj = {
+        effect_on: moment(values.effect_on).format(FORMAT),
+        created_on: values.created_on || moment().format(FORMAT),
+      };
+      handleOk({ ...values, ...timeObj });
+    });
+  };
+
   return (
     <Modal
       width={'85%'}
@@ -55,16 +91,21 @@ const ContractModal = (props) => {
       open={visible}
       okText="提交"
       cancelText="返回"
-      onOk={handleOk}
+      onOk={handleSubmit}
       onCancel={handleCancel}
     >
       <Divider />
       <ModuleTitle title="合同信息" />
-      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 17 }}>
+      <Form
+        form={form}
+        initialValues={data}
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 17 }}
+      >
         <Row>
           <Col span={10} offset={1}>
             <Form.Item
-              name="email"
+              name="company_name"
               label="所属公司："
               tooltip="所属公司"
               rules={[
@@ -77,7 +118,7 @@ const ContractModal = (props) => {
               <Input />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="name"
               label="合同名称："
               tooltip="合同名称"
               rules={[
@@ -90,7 +131,7 @@ const ContractModal = (props) => {
               <Input />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="effect_on"
               label="合同生效日期："
               rules={[
                 {
@@ -102,7 +143,7 @@ const ContractModal = (props) => {
               <DatePicker />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="party_a"
               label="甲方："
               rules={[
                 {
@@ -111,10 +152,10 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <DatePicker />
+              <Input />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="party_c"
               label="丙方（及其他）："
               rules={[
                 {
@@ -123,10 +164,10 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <DatePicker />
+              <Input />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="created_dep"
               label="签约承办部门："
               rules={[
                 {
@@ -135,12 +176,12 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <DatePicker />
+              <Input />
             </Form.Item>
           </Col>
           <Col span={10}>
             <Form.Item
-              name="email"
+              name="dep_id"
               label="所属部门："
               rules={[
                 {
@@ -151,7 +192,7 @@ const ContractModal = (props) => {
             >
               <Input />
             </Form.Item>
-            <Form.Item name="email" label="合同编号：">
+            <Form.Item name="code" label="合同编号：">
               <Input disabled />
             </Form.Item>
 
@@ -160,7 +201,7 @@ const ContractModal = (props) => {
                 <Col span={12}>
                   <Form.Item
                     style={{ marginBottom: 0 }}
-                    name="email"
+                    name="amount"
                     rules={[
                       {
                         required: true,
@@ -172,16 +213,16 @@ const ContractModal = (props) => {
                   </Form.Item>
                 </Col>
                 <Col span={12}>
-                  <div>万元</div>
+                  <div style={{ lineHeight: '32px' }}>万元</div>
                 </Col>
               </Row>
             </Form.Item>
 
-            <Form.Item name="email" label="项目编号：">
+            <Form.Item name="project_code" label="项目编号：">
               <Input disabled />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="party_b"
               label="乙方："
               rules={[
                 {
@@ -193,7 +234,7 @@ const ContractModal = (props) => {
               <Input />
             </Form.Item>
             <Form.Item
-              name="email"
+              name="deal_by"
               label="经办人："
               rules={[
                 {
@@ -206,26 +247,68 @@ const ContractModal = (props) => {
             </Form.Item>
           </Col>
         </Row>
-        <Form.Item name="email" label="合同履行情况：" labelCol={{ span: 4 }}>
+        <Form.Item name="perform" label="合同履行情况：" labelCol={{ span: 4 }}>
           <Input.TextArea />
         </Form.Item>
-        <Form.Item name="email" label="合同上传：" labelCol={{ span: 4 }}>
+        <Form.Item label="合同上传：" labelCol={{ span: 4 }}>
           <Upload {...UploadProps}>
             <Button icon={<CloudUploadOutlined />}>Upload</Button>
           </Upload>
         </Form.Item>
         <Row>
           <Col span={10} offset={1}>
-            <Form.Item name="email" label="创建人：">
+            <Form.Item name="created_by" label="创建人：">
               <Input disabled />
             </Form.Item>
           </Col>
           <Col span={10}>
-            <Form.Item name="email" label="创建时间：">
+            <Form.Item name="created_on" label="创建时间：">
               <Input disabled />
             </Form.Item>
           </Col>
         </Row>
+        {type == Type.detail && (
+          <>
+            <ModuleTitle title="归档流程" />
+            <Steps
+              current={1}
+              items={[
+                {
+                  title: 'Finished',
+                  description,
+                },
+                {
+                  title: 'In Progress',
+                  description,
+                  subTitle: 'Left 00:00:08',
+                },
+                {
+                  title: 'Waiting',
+                  description,
+                },
+              ]}
+            />
+          </>
+        )}
+        {type == Type.cancel && (
+          <>
+            <ModuleTitle title="作废信息" />
+            <Form.Item
+              name="cancel_desc"
+              label="作废原因："
+              labelCol={{ span: 4 }}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="cancel_on"
+              label="创建时间："
+              labelCol={{ span: 4 }}
+            >
+              <Input defaultValue={moment(new Date()).format('YYYY-MM-DD')} />
+            </Form.Item>
+          </>
+        )}
       </Form>
       <Divider />
     </Modal>

src/pages/ContractManager/index.jsx

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { Button, DatePicker, Input, Select, Space, Table } from 'antd';
 import styles from './index.less';
 import ContractModal from './component/Modal';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
+import { queryContract } from '../../services/contract';
 
 const ConteactManager = () => {
   const [searchData, setSearchData] = useState({});
   const [visible, setVisible] = useState(false);
-  console.log(searchData);
 
   const columns = [
     {
@@ -76,7 +78,7 @@ const ConteactManager = () => {
       },
     },
   ];
-  const data = [
+  const dataSource = [
     {
       key: 1,
       name: 'John Brown sr.',
@@ -141,6 +143,10 @@ const ConteactManager = () => {
     },
   ];
 
+  const { data, run } = useRequest((data) => queryContract(data), {
+    manual: true,
+  });
+
   const handlePreView = () => {
     // originFileObj 是读取的文件对象，如上传组件读取到的
     // const fileURL = URL.createObjectURL(originFileObj);
@@ -152,8 +158,13 @@ const ConteactManager = () => {
   const handleChange = () => {};
   const handleSearch = () => {};
   const handleExport = () => {};
+
+  const handleOk = (data) => {
+    console.log('-----------', data);
+    run(data);
+  };
   return (
-    <div className={styles.main}>
+    <PageContainer>
       <div className={styles.searchContent}>
         <div className={styles.itemFlex}>
           <div>合同生效日期：</div>
@@ -217,14 +228,14 @@ const ConteactManager = () => {
           导出
         </Button>
       </div>
-      <Table columns={columns} dataSource={data} />
+      <Table columns={columns} dataSource={dataSource} />
       <ContractModal
         title="新增"
         visible={visible}
-        handleOk={() => {}}
-        handleCancel={() => {}}
+        handleOk={handleOk}
+        handleCancel={() => setVisible(false)}
       />
-    </div>
+    </PageContainer>
   );
 };
 export default ConteactManager;

src/pages/ContractManager/index.less

@@ -1,6 +1,5 @@
 
-.main{
-  padding: 20px;
+
 .searchContent{
   display: flex;
   align-items: center;
@@ -22,5 +21,4 @@
     position: absolute;
     right: 0;
   }
-}
 }

src/services/contract.js

@@ -0,0 +1,8 @@
+import { request } from 'umi';
+
+export const queryContract = (data) => {
+  return request('/api/contract/v1/contract', {
+    method: 'POST',
+    data,
+  });
+};