合同管理

src/components/ModuleTitle/index.less

@@ -0,0 +1,62 @@
+.icon{
+  float: left;
+  width: 8px;
+  height: 22px;
+  background-color: #366CDA;
+}
+.title{
+  font-size: 16px;
+  padding-left: 14px;
+}
+.right{
+  color: #366CDA;
+  float: right;
+  font-size: 20px;
+  cursor: default;
+}
+
+.leftArrow{
+  border: solid 20px ;
+  border-color: transparent #366CDA transparent  transparent ;
+}
+.rightArrow{
+  border: solid 20px ;
+  border-color: transparent transparent  transparent #366CDA ;
+}
+.typeList{
+  flex-grow: 1;
+  display: flex;
+}
+
+.content{
+  height: 100%;
+  :global{
+    .ant-tabs-nav-wrap{
+      background: none;
+    }
+    .ant-tabs-nav .ant-tabs-tab{
+      padding: 2px 16px;
+      background-color: #2196f330;
+      border: none;
+      margin: 0 6px;
+    }
+    .ant-tabs-tab-active{
+      color: #fff !important;
+      background-color: #366CDA !important;
+    }
+    .ant-tabs-tab:hover{
+      color: #fff !important;
+    }
+    .ant-tabs-bar{
+      margin: 0;
+    }
+    // .ant-tabs-tab-prev-icon{
+    //   border: solid 20px ;
+    //   border-color: transparent #366CDA transparent  transparent ;
+    //   i{
+    //     width: 0;
+    //     height: 0;
+    //   }
+    // }
+  }
+}

src/components/ModuleTitle/moduleTitle.js

@@ -0,0 +1,28 @@
+//模块标题
+/*
+style //样式不传默认上面10px
+icon  dom节点
+title //名称
+rightText  //右侧文字
+handleRightClick   //右侧点击方法
+
+//使用实例
+<ModuleTitle title='数据曲线' icon={<img src={require('@/assets/newUI/icon_in.png')} />} />
+<ModuleTitle title='数据曲线' icon={<Icon style={{ color: 'yellow' }} type="bulb" />} />
+*/
+import styles from './index.less';
+const ModuleTitle = ({ style, icon, title, rightText, handleRightClick }) => {
+  return (
+    <div style={style ? style : { margin: '10px 0', paddingRight: '10px' }}>
+      {icon ? icon : <div className={styles.icon} />}
+      <span className={styles.title}>{title}</span>
+      {rightText && (
+        <span className={styles.right} onClick={() => handleRightClick?.()}>
+          {rightText}
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default ModuleTitle;

src/global.less

@@ -74,7 +74,7 @@ textarea {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  border-radius: 0;
+  // border-radius: 0;
 }
 
 // Remove button styling for IE

src/pages/ContractManager/component/Modal.jsx

@@ -0,0 +1,234 @@
+import {
+  Form,
+  Modal,
+  Row,
+  Col,
+  Input,
+  DatePicker,
+  Upload,
+  Button,
+  Divider,
+} from 'antd';
+import ModuleTitle from '../../../components/ModuleTitle/moduleTitle';
+import { CloudUploadOutlined } from '@ant-design/icons';
+
+const ContractModal = (props) => {
+  const { title, visible, handleOk, handleCancel } = props;
+  const [form] = Form.useForm();
+
+  const UploadProps = {
+    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
+    onChange({ file, fileList }) {
+      if (file.status !== 'uploading') {
+        console.log(file, 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',
+      },
+    ],
+  };
+
+  return (
+    <Modal
+      width={'85%'}
+      title={title}
+      open={visible}
+      okText="提交"
+      cancelText="返回"
+      onOk={handleOk}
+      onCancel={handleCancel}
+    >
+      <Divider />
+      <ModuleTitle title="合同信息" />
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 17 }}>
+        <Row>
+          <Col span={10} offset={1}>
+            <Form.Item
+              name="email"
+              label="所属公司："
+              tooltip="所属公司"
+              rules={[
+                {
+                  required: true,
+                  message: '请填写所属公司',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="合同名称："
+              tooltip="合同名称"
+              rules={[
+                {
+                  required: true,
+                  message: '请填写合同名称',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="合同生效日期："
+              rules={[
+                {
+                  required: true,
+                  message: '请填写合同名称',
+                },
+              ]}
+            >
+              <DatePicker />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="甲方："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择甲方',
+                },
+              ]}
+            >
+              <DatePicker />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="丙方（及其他）："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择（支持多选）',
+                },
+              ]}
+            >
+              <DatePicker />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="签约承办部门："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择签约承办部门',
+                },
+              ]}
+            >
+              <DatePicker />
+            </Form.Item>
+          </Col>
+          <Col span={10}>
+            <Form.Item
+              name="email"
+              label="所属部门："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择所属部门',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item name="email" label="合同编号：">
+              <Input disabled />
+            </Form.Item>
+
+            <Form.Item label="合同总价款：">
+              <Row gutter={8}>
+                <Col span={12}>
+                  <Form.Item
+                    style={{ marginBottom: 0 }}
+                    name="email"
+                    rules={[
+                      {
+                        required: true,
+                        message: '请输入合同总价款',
+                      },
+                    ]}
+                  >
+                    <Input />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <div>万元</div>
+                </Col>
+              </Row>
+            </Form.Item>
+
+            <Form.Item name="email" label="项目编号：">
+              <Input disabled />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="乙方："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择乙方',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="email"
+              label="经办人："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择经办人',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item name="email" label="合同履行情况：" labelCol={{ span: 4 }}>
+          <Input.TextArea />
+        </Form.Item>
+        <Form.Item name="email" 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="创建人：">
+              <Input disabled />
+            </Form.Item>
+          </Col>
+          <Col span={10}>
+            <Form.Item name="email" label="创建时间：">
+              <Input disabled />
+            </Form.Item>
+          </Col>
+        </Row>
+      </Form>
+      <Divider />
+    </Modal>
+  );
+};
+export default ContractModal;

src/pages/ContractManager/index.tsx → src/pages/ContractManager/index.jsx

@@ -1,20 +1,14 @@
 import React, { useState } from 'react';
 import { Button, DatePicker, Input, Select, Space, Table } from 'antd';
 import styles from './index.less';
-import { ColumnsType } from 'antd/es/table';
-interface DataType {
-  key: React.ReactNode;
-  name: string;
-  age: number;
-  address: string;
-  children?: DataType[];
-}
+import ContractModal from './component/Modal';
 
 const ConteactManager = () => {
   const [searchData, setSearchData] = useState({});
+  const [visible, setVisible] = useState(false);
   console.log(searchData);
 
-  const columns: ColumnsType<DataType> = [
+  const columns = [
     {
       title: '合同编号',
       dataIndex: 'name',
@@ -73,8 +67,8 @@ const ConteactManager = () => {
         return (
           <Space>
             <a>详情</a>
-            <a>预览</a>
-            <a>下载</a>
+            <a onClick={handlePreView}>预览</a>
+            <a onClick={handleUpload}>下载</a>
             <a>增补</a>
             <a>作废</a>
           </Space>
@@ -82,7 +76,7 @@ const ConteactManager = () => {
       },
     },
   ];
-  const data: DataType[] = [
+  const data = [
     {
       key: 1,
       name: 'John Brown sr.',
@@ -147,6 +141,14 @@ const ConteactManager = () => {
     },
   ];
 
+  const handlePreView = () => {
+    // originFileObj 是读取的文件对象，如上传组件读取到的
+    // const fileURL = URL.createObjectURL(originFileObj);
+    // window.open(fileURL);
+  };
+
+  const handleUpload = () => {};
+
   const handleChange = () => {};
   const handleSearch = () => {};
   const handleExport = () => {};
@@ -199,7 +201,12 @@ const ConteactManager = () => {
         >
           查询
         </Button>
-        <Button type="primary" onClick={() => {}}>
+        <Button
+          type="primary"
+          onClick={() => {
+            setVisible(true);
+          }}
+        >
           新增
         </Button>
         <Button
@@ -211,6 +218,12 @@ const ConteactManager = () => {
         </Button>
       </div>
       <Table columns={columns} dataSource={data} />
+      <ContractModal
+        title="新增"
+        visible={visible}
+        handleOk={() => {}}
+        handleCancel={() => {}}
+      />
     </div>
   );
 };