Merge branch 'master' of http://120.55.44.4:10080/xujunjie/GtDigManageWeb

.umirc.ts

@@ -82,7 +82,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/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

@@ -73,7 +73,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,317 @@
+import {
+  Form,
+  Modal,
+  Row,
+  Col,
+  Input,
+  DatePicker,
+  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 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',
+    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',
+      },
+    ],
+  };
+
+  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%'}
+      title={title}
+      open={visible}
+      okText="提交"
+      cancelText="返回"
+      onOk={handleSubmit}
+      onCancel={handleCancel}
+    >
+      <Divider />
+      <ModuleTitle title="合同信息" />
+      <Form
+        form={form}
+        initialValues={data}
+        labelCol={{ span: 7 }}
+        wrapperCol={{ span: 17 }}
+      >
+        <Row>
+          <Col span={10} offset={1}>
+            <Form.Item
+              name="company_name"
+              label="所属公司："
+              tooltip="所属公司"
+              rules={[
+                {
+                  required: true,
+                  message: '请填写所属公司',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="name"
+              label="合同名称："
+              tooltip="合同名称"
+              rules={[
+                {
+                  required: true,
+                  message: '请填写合同名称',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="effect_on"
+              label="合同生效日期："
+              rules={[
+                {
+                  required: true,
+                  message: '请填写合同名称',
+                },
+              ]}
+            >
+              <DatePicker />
+            </Form.Item>
+            <Form.Item
+              name="party_a"
+              label="甲方："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择甲方',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="party_c"
+              label="丙方（及其他）："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择（支持多选）',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="created_dep"
+              label="签约承办部门："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择签约承办部门',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+          <Col span={10}>
+            <Form.Item
+              name="dep_id"
+              label="所属部门："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择所属部门',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <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>
+
+            <Form.Item name="project_code" label="项目编号：">
+              <Input disabled />
+            </Form.Item>
+            <Form.Item
+              name="party_b"
+              label="乙方："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择乙方',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item
+              name="deal_by"
+              label="经办人："
+              rules={[
+                {
+                  required: true,
+                  message: '请选择经办人',
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+          </Col>
+        </Row>
+        <Form.Item name="perform" label="合同履行情况：" labelCol={{ span: 4 }}>
+          <Input.TextArea />
+        </Form.Item>
+        <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="created_by" label="创建人：">
+              <Input disabled />
+            </Form.Item>
+          </Col>
+          <Col span={10}>
+            <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>
+  );
+};
+export default ContractModal;

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

@@ -1,20 +1,16 @@
 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';
+import { PageContainer } from '@ant-design/pro-components';
+import { useRequest } from '@umijs/max';
+import { queryContract } from '../../services/contract';
 
 const ConteactManager = () => {
   const [searchData, setSearchData] = useState({});
-  console.log(searchData);
+  const [visible, setVisible] = useState(false);
 
-  const columns: ColumnsType<DataType> = [
+  const columns = [
     {
       title: '合同编号',
       dataIndex: 'name',
@@ -73,8 +69,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 +78,7 @@ const ConteactManager = () => {
       },
     },
   ];
-  const data: DataType[] = [
+  const dataSource = [
     {
       key: 1,
       name: 'John Brown sr.',
@@ -147,11 +143,28 @@ const ConteactManager = () => {
     },
   ];
 
+  const { data, run } = useRequest((data) => queryContract(data), {
+    manual: true,
+  });
+
+  const handlePreView = () => {
+    // originFileObj 是读取的文件对象，如上传组件读取到的
+    // const fileURL = URL.createObjectURL(originFileObj);
+    // window.open(fileURL);
+  };
+
+  const handleUpload = () => {};
+
   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>
@@ -199,7 +212,12 @@ const ConteactManager = () => {
         >
           查询
         </Button>
-        <Button type="primary" onClick={() => {}}>
+        <Button
+          type="primary"
+          onClick={() => {
+            setVisible(true);
+          }}
+        >
           新增
         </Button>
         <Button
@@ -210,8 +228,14 @@ const ConteactManager = () => {
           导出
         </Button>
       </div>
-      <Table columns={columns} dataSource={data} />
-    </div>
+      <Table columns={columns} dataSource={dataSource} />
+      <ContractModal
+        title="新增"
+        visible={visible}
+        handleOk={handleOk}
+        handleCancel={() => setVisible(false)}
+      />
+    </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/pages/FileManagement/index.js

@@ -1,8 +1,88 @@
 import React from 'react';
-import { TreeSelect } from 'antd';
+import { Input, Tree, Table, Button, Form, DatePicker, Divider } from 'antd';
+import { PageContainer } from '@ant-design/pro-components';
+
+const temp = [
+  {
+    key: 1,
+    title: '文件夹1',
+    children: [
+      { key: '1-1', title: '文件夹1' },
+      {
+        key: '1-2',
+        title: '文件夹2',
+        children: [{ key: '1-2-1', title: '文件夹1' }],
+      },
+    ],
+  },
+  { key: 2, title: '文件夹2', children: [{ key: '2-1', title: '文件夹1' }] },
+];
+
+const tempData = [
+  { name: '文件', upload_user: '管理员', upload_time: '2023-04-08 11:00:00' },
+];
+
+const { RangePicker } = DatePicker;
 
 function FileManagement(props) {
-  return <div>文档</div>;
+  const [form] = Form.useForm();
+
+  const columns = [
+    { title: '文档名称', dataIndex: 'name' },
+    { title: '上传人员', dataIndex: 'upload_user' },
+    { title: '上传时间', dataIndex: 'upload_time' },
+    {
+      title: '操作',
+      render: (_, record) => (
+        <>
+          <a>下载</a>
+          <Divider type="vertical" />
+          <a>删除</a>
+        </>
+      ),
+    },
+  ];
+
+  const onSearch = () => {
+    form
+      .validateFields()
+      .then((values) => {
+        console.log(values);
+      })
+      .catch((err) => {
+        return;
+      });
+  };
+
+  return (
+    <PageContainer>
+      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ height: '100%', width: '30%' }}>
+          <Input />
+          <Tree treeData={temp} />
+        </div>
+        <div style={{ height: '100%', width: 'calc(70% - 20px)' }}>
+          <Form layout="inline" form={form}>
+            <Form.Item name="date">
+              <RangePicker />
+            </Form.Item>
+            <Form.Item name="name">
+              <Input />
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary" onClick={onSearch}>
+                查询
+              </Button>
+            </Form.Item>
+            <Form.Item>
+              <Button type="primary">上传</Button>
+            </Form.Item>
+          </Form>
+          <Table columns={columns} dataSource={tempData} />
+        </div>
+      </div>
+    </PageContainer>
+  );
 }
 
 export default FileManagement;

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,
+  });
+};