|
@@ -0,0 +1,217 @@
|
|
|
|
+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[];
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const ConteactManager = () => {
|
|
|
|
+ const [searchData, setSearchData] = useState({});
|
|
|
|
+ console.log(searchData);
|
|
|
|
+
|
|
|
|
+ const columns: ColumnsType<DataType> = [
|
|
|
|
+ {
|
|
|
|
+ title: '合同编号',
|
|
|
|
+ dataIndex: 'name',
|
|
|
|
+ key: 'name',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '合同生效时间',
|
|
|
|
+ dataIndex: 'age',
|
|
|
|
+ key: 'age',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '合同名称',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '甲方',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '丙方',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '所属部门/子公司',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '项目名称',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '合同总价(万元)',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '经办人',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '状态',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ key: 'address',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ title: '操作',
|
|
|
|
+ dataIndex: 'address',
|
|
|
|
+ align: 'center',
|
|
|
|
+ render: () => {
|
|
|
|
+ return (
|
|
|
|
+ <Space>
|
|
|
|
+ <a>详情</a>
|
|
|
|
+ <a>预览</a>
|
|
|
|
+ <a>下载</a>
|
|
|
|
+ <a>增补</a>
|
|
|
|
+ <a>作废</a>
|
|
|
|
+ </Space>
|
|
|
|
+ );
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+ const data: DataType[] = [
|
|
|
|
+ {
|
|
|
|
+ key: 1,
|
|
|
|
+ name: 'John Brown sr.',
|
|
|
|
+ age: 60,
|
|
|
|
+ address: 'New York ',
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ key: 11,
|
|
|
|
+ name: 'John Brown',
|
|
|
|
+ age: 42,
|
|
|
|
+ address: 'New York No. 2 Lake Park',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 12,
|
|
|
|
+ name: 'John Brown jr.',
|
|
|
|
+ age: 30,
|
|
|
|
+ address: 'New York No. 3 Lake Park',
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ key: 121,
|
|
|
|
+ name: 'Jimmy Brown',
|
|
|
|
+ age: 16,
|
|
|
|
+ address: 'New York No. 3 Lake Park',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 13,
|
|
|
|
+ name: 'Jim Green sr.',
|
|
|
|
+ age: 72,
|
|
|
|
+ address: 'London No. 1 Lake Park',
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ key: 131,
|
|
|
|
+ name: 'Jim Green',
|
|
|
|
+ age: 42,
|
|
|
|
+ address: 'London No. 2 Lake Park',
|
|
|
|
+ children: [
|
|
|
|
+ {
|
|
|
|
+ key: 1311,
|
|
|
|
+ name: 'Jim Green jr.',
|
|
|
|
+ age: 25,
|
|
|
|
+ address: 'London No. 3 Lake Park',
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 1312,
|
|
|
|
+ name: 'Jimmy Green sr.',
|
|
|
|
+ age: 18,
|
|
|
|
+ address: 'London No. 4 Lake Park',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ key: 2,
|
|
|
|
+ name: 'Joe Black',
|
|
|
|
+ age: 32,
|
|
|
|
+ address: 'Sydney No',
|
|
|
|
+ },
|
|
|
|
+ ];
|
|
|
|
+
|
|
|
|
+ const handleChange = () => {};
|
|
|
|
+ const handleSearch = () => {};
|
|
|
|
+ const handleExport = () => {};
|
|
|
|
+ return (
|
|
|
|
+ <div className={styles.main}>
|
|
|
|
+ <div className={styles.searchContent}>
|
|
|
|
+ <div className={styles.itemFlex}>
|
|
|
|
+ <div>合同生效日期:</div>
|
|
|
|
+ <DatePicker onChange={handleChange} />
|
|
|
|
+ </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 },
|
|
|
|
+ ]}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <div className={styles.itemFlex}>
|
|
|
|
+ <div>状态:</div>
|
|
|
|
+ <Select
|
|
|
|
+ style={{ width: 150 }}
|
|
|
|
+ placeholder="请选择"
|
|
|
|
+ onChange={handleChange}
|
|
|
|
+ options={[
|
|
|
|
+ { value: 0, label: '已归档' },
|
|
|
|
+ { value: 1, label: '归档审核中' },
|
|
|
|
+ { value: 2, label: '作废审核中' },
|
|
|
|
+ { value: 3, label: '已作废' },
|
|
|
|
+ { value: 4, label: '归档拒绝' },
|
|
|
|
+ { value: 5, label: '作废拒绝' },
|
|
|
|
+ ]}
|
|
|
|
+ />
|
|
|
|
+ </div>
|
|
|
|
+ <Input
|
|
|
|
+ className={styles.inputSty}
|
|
|
|
+ placeholder="请输入合同名称/编号"
|
|
|
|
+ onChange={handleChange}
|
|
|
|
+ />
|
|
|
|
+ <Button
|
|
|
|
+ type="primary"
|
|
|
|
+ className={styles.searchBtnSty}
|
|
|
|
+ onClick={handleSearch}
|
|
|
|
+ >
|
|
|
|
+ 查询
|
|
|
|
+ </Button>
|
|
|
|
+ <Button type="primary" onClick={() => {}}>
|
|
|
|
+ 新增
|
|
|
|
+ </Button>
|
|
|
|
+ <Button
|
|
|
|
+ type="primary"
|
|
|
|
+ className={styles.exportBtnSty}
|
|
|
|
+ onClick={handleExport}
|
|
|
|
+ >
|
|
|
|
+ 导出
|
|
|
|
+ </Button>
|
|
|
|
+ </div>
|
|
|
|
+ <Table columns={columns} dataSource={data} />
|
|
|
|
+ </div>
|
|
|
|
+ );
|
|
|
|
+};
|
|
|
|
+export default ConteactManager;
|