合同管理页面修改

.umirc.ts

@@ -14,7 +14,7 @@ export default defineConfig({
   proxy: {
     '/api': {
       // target: 'http://47.96.12.136:8788/',
-      target: 'http://47.96.12.136:8896/',
+      target: 'http://47.96.12.136:8888/',
       // target: 'http://120.55.44.4:8900/',
       changeOrigin: true,
     },

src/pages/ContractManager/component/Modal.jsx

@@ -5,82 +5,192 @@ import {
   Col,
   Input,
   DatePicker,
-  Upload,
+  Icon,
   Button,
   Divider,
   Steps,
+  Select,
+  TreeSelect,
+  InputNumber,
+  Upload,
+  Space,
 } from 'antd';
 import ModuleTitle from '../../../components/ModuleTitle/moduleTitle';
+import { useEffect, useMemo, useState } from 'react';
+import { queryDepList, querySupplierList } from '@/services/contract';
+import { useModel, useRequest } from '@umijs/max';
 import { CloudUploadOutlined } from '@ant-design/icons';
-import moment from 'moment';
+import styles from '../index.less';
+import dayjs from 'dayjs';
+export const Type = {
+  add: 0, //新增
+  detail: 1, //详情
+  cancel: 2, //作废
+  check: 3, //审核
+};
+
+export const StatusText = [
+  '',
+  '待审核',
+  '审核拒绝',
+  '已存档',
+  '作废待审核',
+  '作废拒绝',
+  '已作废',
+];
+export const Status = {
+  None: 0,
+  Checking: 1,
+  CheckReject: 2,
+  CheckSuccess: 3,
+  CalChecking: 4,
+  CalCheckReject: 5,
+  CalCheckSuccess: 6,
+};
 
 const ContractModal = (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 { user } = useModel('userInfo');
+  const { userList, run: userListRun } = useModel('userList');
+  const { depList, run: depListRun } = useModel('depList');
+  const FORMAT = 'YYYY-MM-DD';
+  const {
+    type,
+    visible,
+    projectList = [],
+    handleOk,
+    handleCancel,
+    parent_id,
+  } = props;
+  const title =
+    type == Type.add ? '新增' : type == Type.detail ? '详情' : '作废';
+  //所属公司为总部时才能选择部门，为子公司时，部门不能操作  所属部门为子公司的需要填经办人
+  const company = Form.useWatch('company_name', form);
+  const [depDisable, setDepDisable] = useState(false);
+  const [dealDisable, setDealDisable] = useState(false);
+  //项目名称选择后，自动填入对应的项目编号
+  const project_code = Form.useWatch('project_name', form);
+
+  const [isPass, setIsPass] = useState(1);
+
+  const [fileList, setFileList] = useState([]);
+
+  useEffect(() => {
+    userListRun();
+    depListRun();
+  }, []);
+
+  //供应商列表
+  const { data: supplierList = [], loading } = useRequest(querySupplierList, {
+    defaultParams: [
+      {
+        project_id: 1,
+        is_super: false,
+      },
+    ],
+    formatResult: (data) => {
+      return data?.list
+        ? data.list.map((item) => {
+            return { ...item, Name: item.name };
+          })
+        : [];
+    },
+  });
+
+  useEffect(() => {
+    if (company == 135) {
+      setDepDisable(false);
+      setDealDisable(false);
+    } else {
+      setDepDisable(true);
+      setDealDisable(true);
+      form.setFieldsValue({ deal_by: user?.CName });
+    }
+  }, [company]);
+  useEffect(() => {
+    form.setFieldsValue({ project_code });
+  }, [project_code]);
+
+  const supplyList = useMemo(() => {
+    return depList ? [...depList, ...supplierList] : supplierList;
+  }, [depList, supplierList]);
+
+  const disableds = useMemo(() => {
+    if (type == Type.add) {
+      return { contract: false, check: true };
+    } else if (type == Type.detail) {
+      return { contract: true, check: true };
+    } else if (type == Type.cancel) {
+      return { contract: true, check: true };
+    }
+    return { contract: true, check: false };
+  }, [type, visible]);
+
   const data = {
     company_name: 'hdhdhdh',
     name: 'kkkk',
-    effect_on: moment('2020-02-02'),
+    effect_on: dayjs('2020-02-02'),
     party_a: 'aaaaa',
     party_b: 'bbbbbb',
     party_c: 'ccccc',
     created_dep: 'fffff',
     dep_id: '1111',
+    status: 4,
     code: '132456',
     amount: '1111111111777',
+    project_name: 'hahahah',
     project_code: '444444',
     deal_by: 'hhhhh',
     perform: 'dnjfndjfnjdnfjd',
     created_by: '77777',
-    created_on: moment().format(FORMAT),
+    created_name: 'gggggg',
+    created_on: dayjs().format(FORMAT),
+    attach: [
+      { name: 'hhhhh', url: '99999' },
+      { name: '11111', url: '922229999' },
+    ],
   };
 
   const UploadProps = {
-    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+    action: `/api/contract/v1/attach`,
     onChange({ file, fileList }) {
       if (file.status !== 'uploading') {
         console.log(file, fileList);
+        setFileList(fileList);
       }
     },
-    defaultFileList: [
-      {
-        uid: '1',
-        name: 'xxx.png',
-        status: 'uploading',
-        url: 'http://www.baidu.com/xxx.png',
-        percent: 33,
-      },
-      {
-        uid: '2',
-        name: 'yyy.png',
-        status: 'done',
-        url: 'http://www.baidu.com/yyy.png',
-      },
-      {
-        uid: '3',
-        name: 'zzz.png',
-        status: 'error',
-        response: 'Server Error 500',
-        // custom error message to show
-        url: 'http://www.baidu.com/zzz.png',
-      },
-    ],
+    // defaultFileList: [
+    //   {
+    //     uid: '1',
+    //     name: 'xxx.png',
+    //     status: 'uploading',
+    //     url: 'http://www.baidu.com/xxx.png',
+    //     percent: 33,
+    //   },
+    //   {
+    //     uid: '2',
+    //     name: 'yyy.png',
+    //     status: 'done',
+    //     url: 'http://www.baidu.com/yyy.png',
+    //   },
+    //   {
+    //     uid: '3',
+    //     name: 'zzz.png',
+    //     status: 'error',
+    //     response: 'Server Error 500',
+    //     // custom error message to show
+    //     url: 'http://www.baidu.com/zzz.png',
+    //   },
+    // ],
   };
 
   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 });
+      values.effect_on = dayjs(values.effect_on, FORMAT);
+      values.created_on = values.created_on || dayjs().format(FORMAT);
+      if (parent_id) values.parent_id = parent_id;
+      handleOk(values);
     });
   };
 
@@ -105,7 +215,7 @@ const ContractModal = (props) => {
         <Row>
           <Col span={10} offset={1}>
             <Form.Item
-              name="company_name"
+              name="company_code"
               label="所属公司："
               tooltip="所属公司"
               rules={[
@@ -115,7 +225,20 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <TreeSelect
+                style={{ width: '100%' }}
+                placeholder="请选择"
+                showSearch
+                allowClear
+                fieldNames={{
+                  label: 'Name',
+                  value: 'ID',
+                  children: 'children',
+                }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={depList}
+                disabled={disableds.contract}
+              />
             </Form.Item>
             <Form.Item
               name="name"
@@ -128,7 +251,7 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <Input disabled={disableds.contract} />
             </Form.Item>
             <Form.Item
               name="effect_on"
@@ -140,7 +263,32 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <DatePicker />
+              <DatePicker
+                style={{ width: '100%' }}
+                disabled={disableds.contract}
+              />
+            </Form.Item>
+            <Form.Item
+              name="project_name"
+              label="项目名称："
+              rules={[
+                {
+                  required: true,
+                  message: '请填写项目名称',
+                },
+              ]}
+            >
+              <Select
+                style={{ width: '100%' }}
+                placeholder="请选择"
+                options={projectList?.map((item) => {
+                  return {
+                    value: item.project_full_code,
+                    label: item.project_name,
+                  };
+                })}
+                disabled={disableds.contract}
+              />
             </Form.Item>
             <Form.Item
               name="party_a"
@@ -152,7 +300,20 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <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>
             <Form.Item
               name="party_c"
@@ -164,7 +325,21 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <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="created_dep"
@@ -176,12 +351,25 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <TreeSelect
+                style={{ width: '100%' }}
+                placeholder="请选择"
+                showSearch
+                allowClear
+                disabled={disableds.contract}
+                fieldNames={{
+                  label: 'Name',
+                  value: 'ID',
+                  children: 'children',
+                }}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={depList?.find((item) => item.Code == 'GT')?.children}
+              />
             </Form.Item>
           </Col>
           <Col span={10}>
             <Form.Item
-              name="dep_id"
+              name="dep_code"
               label="所属部门："
               rules={[
                 {
@@ -190,32 +378,43 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
-            </Form.Item>
-            <Form.Item name="code" label="合同编号：">
-              <Input disabled />
+              <TreeSelect
+                style={{ width: '100%' }}
+                placeholder="请选择"
+                showSearch
+                allowClear
+                fieldNames={{
+                  label: 'Name',
+                  value: 'ID',
+                  children: 'children',
+                }}
+                disabled={disableds.contract}
+                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
+                treeData={depList?.find((item) => item.Code == 'GT')?.children}
+              />
             </Form.Item>
+            {type != Type.add && (
+              <Form.Item name="code" label="合同编号：">
+                <Input disabled />
+              </Form.Item>
+            )}
 
-            <Form.Item label="合同总价款：">
-              <Row gutter={8}>
-                <Col span={12}>
-                  <Form.Item
-                    style={{ marginBottom: 0 }}
-                    name="amount"
-                    rules={[
-                      {
-                        required: true,
-                        message: '请输入合同总价款',
-                      },
-                    ]}
-                  >
-                    <Input />
-                  </Form.Item>
-                </Col>
-                <Col span={12}>
-                  <div style={{ lineHeight: '32px' }}>万元</div>
-                </Col>
-              </Row>
+            <Form.Item
+              label="合同总价款："
+              name="amount"
+              rules={[
+                {
+                  required: true,
+                  message: '请输入合同总价款',
+                },
+              ]}
+            >
+              <InputNumber
+                style={{ width: '100%' }}
+                precision={2}
+                addonAfter="万元"
+                disabled={disableds.contract}
+              />
             </Form.Item>
 
             <Form.Item name="project_code" label="项目编号：">
@@ -231,7 +430,20 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <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>
             <Form.Item
               name="deal_by"
@@ -243,21 +455,47 @@ const ContractModal = (props) => {
                 },
               ]}
             >
-              <Input />
+              <Select
+                style={{ width: '100%' }}
+                placeholder="请选择"
+                disabled={dealDisable && disableds.contract}
+                options={userList?.map((item) => {
+                  return {
+                    value: item.CName,
+                    label: item.CName,
+                  };
+                })}
+              />
             </Form.Item>
           </Col>
         </Row>
         <Form.Item name="perform" label="合同履行情况：" labelCol={{ span: 4 }}>
-          <Input.TextArea />
+          <Input.TextArea disabled={disableds.contract} />
         </Form.Item>
         <Form.Item label="合同上传：" labelCol={{ span: 4 }}>
-          <Upload {...UploadProps}>
-            <Button icon={<CloudUploadOutlined />}>Upload</Button>
-          </Upload>
+          {type == Type.add ? (
+            <Upload {...UploadProps}>
+              <Button icon={<CloudUploadOutlined />}>Upload</Button>
+            </Upload>
+          ) : (
+            <ul>
+              {data?.attach?.map((item) => (
+                <li>
+                  <Space>
+                    {item.name} <span>预览</span> <a href={item.url}>下载</a>
+                  </Space>
+                </li>
+              ))}
+            </ul>
+          )}
         </Form.Item>
         <Row>
           <Col span={10} offset={1}>
-            <Form.Item name="created_by" label="创建人：">
+            <Form.Item
+              name="created_name"
+              initialValue={data?.created_name || user.CName}
+              label="创建人："
+            >
               <Input disabled />
             </Form.Item>
           </Col>
@@ -267,30 +505,98 @@ const ContractModal = (props) => {
             </Form.Item>
           </Col>
         </Row>
-        {type == Type.detail && (
+        {type == Type.check && (
+          <>
+            <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: 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="check_desc"
+                label="拒绝原因："
+                labelCol={{ span: 4 }}
+              >
+                <Input.TextArea />
+              </Form.Item>
+            )}
+          </>
+        )}
+        {(type == Type.detail || type == Type.cancel) && (
           <>
             <ModuleTitle title="归档流程" />
-            <Steps
-              current={1}
-              items={[
-                {
-                  title: 'Finished',
-                  description,
-                },
-                {
-                  title: 'In Progress',
-                  description,
-                  subTitle: 'Left 00:00:08',
-                },
-                {
-                  title: 'Waiting',
-                  description,
-                },
-              ]}
-            />
+            <div className={styles.modelItem}>
+              <Steps
+                current={data?.status == Status.Checking ? 1 : 2}
+                status={
+                  data?.status == Status.CheckReject ? 'error' : 'process'
+                }
+                items={[
+                  {
+                    title: '发起',
+                    description: (
+                      <>
+                        <div>{data?.created_by}</div>
+                        <div>{data?.created_on}</div>
+                      </>
+                    ),
+                  },
+                  {
+                    title: '审核',
+                    description: (
+                      <>
+                        <div>{data?.check_by}</div>
+                        <div>{data?.check_on}</div>
+                      </>
+                    ),
+                  },
+                  {
+                    title:
+                      data?.status >= Status.CheckSuccess
+                        ? StatusText[Status.CheckSuccess]
+                        : StatusText[data?.status],
+                  },
+                ]}
+              />
+            </div>
           </>
         )}
-        {type == Type.cancel && (
+        {(type == Type.detail || type == Type.cancel) && (
           <>
             <ModuleTitle title="作废信息" />
             <Form.Item
@@ -305,10 +611,54 @@ const ContractModal = (props) => {
               label="创建时间："
               labelCol={{ span: 4 }}
             >
-              <Input defaultValue={moment(new Date()).format('YYYY-MM-DD')} />
+              <Input
+                style={{ width: '460px' }}
+                defaultValue={dayjs().format('YYYY-MM-DD')}
+              />
+              <span
+                style={{ color: 'red', fontSize: '24px', marginLeft: '40px' }}
+              >
+                确认作废该合同，作废提交后无法撤回
+              </span>
             </Form.Item>
           </>
         )}
+        {type == Type.detail && data?.status >= Status.CalChecking && (
+          <>
+            <ModuleTitle title="作废流程" />
+            <div className={styles.modelItem}>
+              <Steps
+                current={data?.status == Status.CalChecking ? 1 : 2}
+                status={
+                  data?.status == Status.CalCheckReject ? 'error' : 'process'
+                }
+                items={[
+                  {
+                    title: '发起',
+                    description: (
+                      <>
+                        <div>{data?.created_by}</div>
+                        <div>{data?.created_on}</div>
+                      </>
+                    ),
+                  },
+                  {
+                    title: '审核',
+                    description: (
+                      <>
+                        <div>{data?.cancel_check_by}</div>
+                        <div>{data?.cancel_check_on}</div>
+                      </>
+                    ),
+                  },
+                  {
+                    title: StatusText[data?.status],
+                  },
+                ]}
+              />
+            </div>
+          </>
+        )}
       </Form>
       <Divider />
     </Modal>

src/pages/ContractManager/index.jsx

@@ -1,78 +1,140 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Button, DatePicker, Input, Select, Space, Table } from 'antd';
 import styles from './index.less';
-import ContractModal from './component/Modal';
+import ContractModal, { Type } from './component/Modal';
 import { PageContainer } from '@ant-design/pro-components';
 import { useRequest } from '@umijs/max';
-import { queryContract } from '../../services/contract';
+import { connect } from 'umi';
+import {
+  queryApproval,
+  queryContract,
+  queryGetContractList,
+} from '../../services/contract';
 
-const ConteactManager = () => {
-  const [searchData, setSearchData] = useState({});
+const ConteactManager = (props) => {
+  const { dispatch } = props;
+  const [searchData, setSearchData] = useState({
+    effect_on: '',
+    project_name: '',
+    status: '',
+    page_size: 10,
+    current: 0,
+    name: '',
+  });
   const [visible, setVisible] = useState(false);
+  const typeRef = useRef();
+  const parentIdRef = useRef(0);
 
   const columns = [
     {
       title: '合同编号',
-      dataIndex: 'name',
-      key: 'name',
+      dataIndex: 'code',
+      key: 'code',
     },
     {
       title: '合同生效时间',
-      dataIndex: 'age',
-      key: 'age',
+      dataIndex: 'effect_on',
+      key: 'effect_on',
     },
     {
       title: '合同名称',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'name',
+      key: 'name',
     },
     {
       title: '甲方',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'party_a',
+      key: 'party_a',
     },
     {
       title: '丙方',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'party_c',
+      key: 'party_c',
     },
     {
       title: '所属部门/子公司',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'company_name',
+      key: 'company_name',
     },
     {
       title: '项目名称',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'project_name',
+      key: 'project_name',
     },
     {
       title: '合同总价（万元）',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'amount',
+      key: 'amount',
     },
     {
       title: '经办人',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'deal_by',
+      key: 'deal_by',
     },
     {
       title: '状态',
-      dataIndex: 'address',
-      key: 'address',
+      dataIndex: 'status',
+      key: 'status',
+      render: (status) => {
+        let str = '';
+        switch (status) {
+          case 1:
+            str = '待审核';
+            break;
+          case 2:
+            str = '审核拒绝';
+            break;
+          case 3:
+            str = '已存档';
+            break;
+          case 4:
+            str = '作废待审核';
+            break;
+          case 5:
+            str = '作废拒绝';
+            break;
+          case 6:
+            str = '已作废';
+            break;
+        }
+        return <div>{str}</div>;
+      },
     },
     {
       title: '操作',
       dataIndex: 'address',
       align: 'center',
-      render: () => {
+      render: (record) => {
         return (
           <Space>
-            <a>详情</a>
+            <a
+              onClick={() => {
+                typeRef.current = Type.detail;
+                parentIdRef.current = 0;
+                setVisible(true);
+              }}
+            >
+              详情
+            </a>
             <a onClick={handlePreView}>预览</a>
             <a onClick={handleUpload}>下载</a>
-            <a>增补</a>
-            <a>作废</a>
+            <a
+              onClick={() => {
+                typeRef.current = Type.add;
+                parentIdRef.current = record.id;
+                setVisible(true);
+              }}
+            >
+              增补
+            </a>
+            <a
+              onClick={() => {
+                typeRef.current = Type.cancel;
+                setVisible(true);
+              }}
+            >
+              作废
+            </a>
           </Space>
         );
       },
@@ -143,8 +205,28 @@ const ConteactManager = () => {
     },
   ];
 
-  const { data, run } = useRequest((data) => queryContract(data), {
-    manual: true,
+  useEffect(() => {
+    dispatch({
+      type: 'user/fetch',
+    });
+  }, []);
+
+  //请求列表
+  const { data, run } = useRequest((data) => queryGetContractList(data), {
+    defaultParams: [searchData],
+  });
+  console.log('==============', data);
+  //编辑新增接口
+  const { data: addData, run: editRun } = useRequest(
+    (data) => queryContract(data),
+    {
+      manual: true,
+    },
+  );
+
+  //请求项目列表
+  const { data: projectData } = useRequest(queryApproval, {
+    defaultParams: [{ pageSize: 99999 }],
   });
 
   const handlePreView = () => {
@@ -154,10 +236,11 @@ const ConteactManager = () => {
   };
 
   const handleUpload = () => {};
-
-  const handleChange = () => {};
   const handleSearch = () => {};
-  const handleExport = () => {};
+  const handleExport = () => {
+    typeRef.current = Type.audit;
+    setVisible(true);
+  };
 
   const handleOk = (data) => {
     console.log('-----------', data);
@@ -168,20 +251,26 @@ const ConteactManager = () => {
       <div className={styles.searchContent}>
         <div className={styles.itemFlex}>
           <div>合同生效日期：</div>
-          <DatePicker onChange={handleChange} />
+          <DatePicker
+            onChange={(e) => {
+              setSearchData({ effect_on: e });
+            }}
+          />
         </div>
         <div className={styles.itemFlex}>
           <div>项目名称：</div>
           <Select
             style={{ width: 200 }}
             placeholder="请选择"
-            onChange={handleChange}
-            options={[
-              { value: 'jack', label: 'Jack' },
-              { value: 'lucy', label: 'Lucy' },
-              { value: 'Yiminghe', label: 'yiminghe' },
-              { value: 'disabled', label: 'Disabled', disabled: true },
-            ]}
+            onChange={(e) => {
+              setSearchData({ project_name: e });
+            }}
+            options={projectData?.list?.map((item) => {
+              return {
+                value: item.project_full_code,
+                label: item.project_name,
+              };
+            })}
           />
         </div>
         <div className={styles.itemFlex}>
@@ -189,7 +278,9 @@ const ConteactManager = () => {
           <Select
             style={{ width: 150 }}
             placeholder="请选择"
-            onChange={handleChange}
+            onChange={(e) => {
+              setSearchData({ status: e });
+            }}
             options={[
               { value: 0, label: '已归档' },
               { value: 1, label: '归档审核中' },
@@ -203,7 +294,9 @@ const ConteactManager = () => {
         <Input
           className={styles.inputSty}
           placeholder="请输入合同名称/编号"
-          onChange={handleChange}
+          onChange={(e) => {
+            setSearchData({ project_name: e.target.value });
+          }}
         />
         <Button
           type="primary"
@@ -215,6 +308,7 @@ const ConteactManager = () => {
         <Button
           type="primary"
           onClick={() => {
+            typeRef.current = Type.add;
             setVisible(true);
           }}
         >
@@ -228,9 +322,15 @@ const ConteactManager = () => {
           导出
         </Button>
       </div>
-      <Table columns={columns} dataSource={dataSource} />
+      <Table
+        columns={columns}
+        dataSource={data?.list}
+        // pagination={data?.pagination}
+      />
       <ContractModal
-        title="新增"
+        type={typeRef.current}
+        parent_id={parentIdRef.current}
+        projectList={projectData?.list}
         visible={visible}
         handleOk={handleOk}
         handleCancel={() => setVisible(false)}
@@ -238,4 +338,6 @@ const ConteactManager = () => {
     </PageContainer>
   );
 };
-export default ConteactManager;
+export default connect(({ user, loading }) => ({
+  userList: user.list,
+}))(ConteactManager);

src/pages/ContractManager/index.less

@@ -21,4 +21,21 @@
     position: absolute;
     right: 0;
   }
+}
+.upload{
+  :global{
+    .anticon{
+      vertical-align: middle;
+    }
+  }
+  .uploadImg{
+    margin-right: 6px;
+    max-height: 36px;
+    padding: 2px;
+    border: 1px solid #aca8a8;
+    border-radius: 5px;
+  }
+}
+.modelItem{
+  margin: 0  40px;
 }

src/pages/Home/index.js

@@ -12,94 +12,104 @@ function HomePage(props) {
       name: '项目立项',
       active: true,
       click: () => {
-        window.open(` http://120.55.44.4:8899/#/purchase/home/approval/list?JWT-TOKEN=${getToken()}`)
+        window.open(
+          ` http://120.55.44.4:8899/#/purchase/home/approval/list?JWT-TOKEN=${getToken()}`,
+        );
       },
-      Icon: require('@/assets/UnityMenu/project.png')
+      Icon: require('@/assets/UnityMenu/project.png'),
     },
     {
       id: 2,
       name: '合同管理',
       active: true,
       click: () => {
-
+        navigate('/contract-manager');
       },
-      Icon: require('@/assets/UnityMenu/agreement.png')
+      Icon: require('@/assets/UnityMenu/agreement.png'),
     },
     {
       id: 3,
       name: 'OA审批',
       active: true,
-      click: () => {
-
-      },
-      Icon: require('@/assets/UnityMenu/OA.png')
+      click: () => {},
+      Icon: require('@/assets/UnityMenu/OA.png'),
     },
     {
       id: 4,
       name: 'BOM清单',
       active: true,
       click: () => {
-        window.open(`http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`)
+        window.open(
+          `http://120.55.44.4:8896/#/bom/home?JWT-TOKEN=${getToken()}`,
+        );
       },
-      Icon: require('@/assets/UnityMenu/Bom.png')
+      Icon: require('@/assets/UnityMenu/Bom.png'),
     },
     {
       id: 5,
       name: '工时管理',
       active: true,
       click: () => {
-        window.open(`http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`)
-
+        window.open(
+          `http://120.55.44.4:8899/#/purchase/home/work-hours?JWT-TOKEN=${getToken()}`,
+        );
       },
-      Icon: require('@/assets/UnityMenu/time.png')
+      Icon: require('@/assets/UnityMenu/time.png'),
     },
     {
       id: 6,
       name: '供应商管理',
       active: true,
-      click: () => {
-
-      },
-      Icon: require('@/assets/UnityMenu/Manufacturer.png')
+      click: () => {},
+      Icon: require('@/assets/UnityMenu/Manufacturer.png'),
     },
     {
       id: 7,
       name: '文档管理',
       active: true,
       click: () => {
-
+        navigate('/fileManagement');
       },
-      Icon: require('@/assets/UnityMenu/transfer.png')
+      Icon: require('@/assets/UnityMenu/transfer.png'),
     },
     {
       id: 8,
       name: '系统管理',
       active: true,
-      click: () => {
-
-      },
-      Icon: require('@/assets/UnityMenu/system.png')
+      click: () => {},
+      Icon: require('@/assets/UnityMenu/system.png'),
     },
   ];
   return (
     <div className={menuStyle.background}>
       <div className={menuStyle.menuContent}>
         <div className={menuStyle.wrap}>
-          {curMenu.map(item => (
+          {curMenu.map((item) => (
             <div key={item.id} className={menuStyle.item}>
               <div
                 onClick={() => item.click?.(item)}
                 className={menuStyle.menu}
                 style={item.active ? {} : { cursor: 'not-allowed' }}
               >
-                <img className={menuStyle.pic} src={item.active ? item.Icon : require('@/assets/UnityMenu/newModel.png')} style={
-                  item.active ? {} : { cursor: 'not-allowed' }} />
+                <img
+                  className={menuStyle.pic}
+                  src={
+                    item.active
+                      ? item.Icon
+                      : require('@/assets/UnityMenu/newModel.png')
+                  }
+                  style={item.active ? {} : { cursor: 'not-allowed' }}
+                />
               </div>
               <div style={{ marginTop: 22, width: 152, textAlign: 'center' }}>
                 <span
                   onClick={() => item.click?.(item)}
                   className={menuStyle.menuFriName}
-                  style={item.active ? {} : { color: '#6081B2', cursor: 'not-allowed' }}
+                  style={
+                    item.active
+                      ? {}
+                      : { color: '#6081B2', cursor: 'not-allowed' }
+                  }
                 >
                   {item.name}
                 </span>
@@ -109,7 +119,7 @@ function HomePage(props) {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export default HomePage;

src/services/contract.js

@@ -1,8 +1,39 @@
 import { request } from 'umi';
 
-export const queryContract = (data) => {
-  return request('/api/contract/v1/contract', {
+export const queryContract = async (data) => {
+  return await request('/api/contract/v1/contract', {
     method: 'POST',
     data,
   });
 };
+
+export const queryGetContractList = async (data) => {
+  return await request('/api/contract/v1/contract', {
+    params: data,
+  });
+};
+
+export const queryApproval = async (data) => {
+  return await request('/api/v2/approval/record', {
+    params: data,
+  });
+};
+
+export const querySupplierList = async (data) => {
+  return await request('/api/supplier/v1/supplier/list', {
+    method: 'POST',
+    data,
+  });
+};
+
+export const queryDepList = async (data) => {
+  return await request('/api/v1/dep');
+};
+
+export const queryUploadAttach = async (data) => {
+  return await request('/api/contract/v1/attach', {
+    method: 'POST',
+    data,
+    headers: { 'Content-Type': 'multipart/form-data' },
+  });
+};