|
@@ -2,213 +2,111 @@ import React, { useState, useEffect, useCallback } from 'react';
|
|
|
import PageHeader from '@/components/PageHeader';
|
|
|
import { useDebounceEffect } from 'ahooks';
|
|
|
import { FormattedMessage } from 'umi';
|
|
|
-import SearchInput from '@/tenants-ui/SearchInput';
|
|
|
-import Table from '@/components/Table';
|
|
|
import styles from './index.less';
|
|
|
-import Icon from '@/tenants-ui/Icon';
|
|
|
import cx from 'classnames';
|
|
|
-import { EllipsisOutlined } from '@ant-design/icons';
|
|
|
-import { Dropdown, Menu } from 'antd';
|
|
|
-import ShowModal from '../components/showModal';
|
|
|
|
|
|
-export default function RecordList() {
|
|
|
- const [searchText, setSearchText] = useState();
|
|
|
- const [total, setTotal] = useState(50);
|
|
|
- const [sorteredObj, setSorteredObj] = useState({ applyDate: 'ASC' }); //改变排序
|
|
|
- const [applyFromTypes, setApplyFromTypes] = useState([]); //申请来源 选中的申请方式 筛选
|
|
|
- const [page, setPage] = useState({
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 20,
|
|
|
- });
|
|
|
+import { Input, Table } from 'antd';
|
|
|
+// import ShowModal from '../components/showModal';
|
|
|
|
|
|
+export default function RecordList() {
|
|
|
const columns = [
|
|
|
{
|
|
|
title: '申请日期',
|
|
|
dataIndex: 'applyDate',
|
|
|
- sorter: true,
|
|
|
- sortered: sorteredObj.applyDate,
|
|
|
- render(t, r) {
|
|
|
- return (
|
|
|
- <span>
|
|
|
- <span className={styles.dateCircle}></span>
|
|
|
- <span>{t}</span>
|
|
|
- </span>
|
|
|
- );
|
|
|
+ sorter: {
|
|
|
+ compare: (a, b) => a.chinese - b.chinese,
|
|
|
+ multiple: 3,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
- //筛选 表格头部
|
|
|
- title: (
|
|
|
- <div className={styles.headerTitle}>
|
|
|
- {(applyFromTypes?.length && (
|
|
|
- <div className={styles.iconBox}>
|
|
|
- <Icon className={styles.headerIcon} type="checkbox" weight={600} />
|
|
|
- <Icon
|
|
|
- className={cx(styles.headerIcon, styles.headerIconActive)}
|
|
|
- type="dot"
|
|
|
- weight={600}
|
|
|
- />
|
|
|
- </div>
|
|
|
- )) || <Icon className={styles.headerIcon} type="checked" weight={600} />}
|
|
|
- 申请来源
|
|
|
- </div>
|
|
|
- ),
|
|
|
+ title: '申请来源',
|
|
|
dataIndex: 'applyFrom',
|
|
|
- sorter: false,
|
|
|
- render(t, r) {
|
|
|
- return <span>{t}</span>;
|
|
|
- },
|
|
|
- filters: [
|
|
|
- { value: 1, label: '小程序' },
|
|
|
- { value: 2, label: 'pc端' },
|
|
|
- ],
|
|
|
- filteredValue: applyFromTypes,
|
|
|
},
|
|
|
{
|
|
|
title: '申请人',
|
|
|
dataIndex: 'applyPerson',
|
|
|
- sorter: false,
|
|
|
- render(t, r) {
|
|
|
- return <span>{t}</span>;
|
|
|
+ sorter: {
|
|
|
+ compare: (a, b) => a.math - b.math,
|
|
|
+ multiple: 2,
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
title: '加班空间',
|
|
|
dataIndex: 'overSpace',
|
|
|
- sorter: false,
|
|
|
- render(t, r) {
|
|
|
- return <span>{t}</span>;
|
|
|
- },
|
|
|
},
|
|
|
{
|
|
|
title: '加班时间',
|
|
|
dataIndex: 'overtime',
|
|
|
- sorter: true,
|
|
|
- sortered: sorteredObj.overtime,
|
|
|
- render(t, r) {
|
|
|
- return <span>{t}</span>;
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- title: '',
|
|
|
- dataIndex: 'action',
|
|
|
- sorter: false,
|
|
|
- render(t, r) {
|
|
|
- //table body的内容
|
|
|
- {
|
|
|
- /* ...下拉菜单 */
|
|
|
- }
|
|
|
- return (
|
|
|
- <Dropdown
|
|
|
- trigger="click"
|
|
|
- placement="bottomRight"
|
|
|
- overlay={
|
|
|
- <Menu style={{ width: 120 }} onClick={({ key }) => menuClick(key)}>
|
|
|
- <Menu.Item key="view">查看</Menu.Item>
|
|
|
- <Menu.Item key="edit">编辑</Menu.Item>
|
|
|
- </Menu>
|
|
|
- }
|
|
|
- >
|
|
|
- <span className={styles.trigger}>
|
|
|
- <EllipsisOutlined style={{ fontSize: 20 }} />
|
|
|
- </span>
|
|
|
- </Dropdown>
|
|
|
- );
|
|
|
+ sorter: {
|
|
|
+ compare: (a, b) => a.english - b.english,
|
|
|
+ multiple: 1,
|
|
|
},
|
|
|
},
|
|
|
];
|
|
|
+ const pagination = {
|
|
|
+ current: 1,
|
|
|
+ total: 200,
|
|
|
+ pageSize: 10,
|
|
|
+ };
|
|
|
|
|
|
- const list = [
|
|
|
+ const data = [
|
|
|
{
|
|
|
- rId: 1,
|
|
|
- applyDate: '2020/01/02',
|
|
|
- applyFrom: '小程序',
|
|
|
- applyPerson: '莫兰',
|
|
|
- overSpace: '数字交付中心',
|
|
|
- overtime: '2020/03/13 19:40-21:00',
|
|
|
+ key: '1',
|
|
|
+ applyDate: '2012/03/04',
|
|
|
+ applyFrom: 98,
|
|
|
+ applyPerson: 'John Brown',
|
|
|
+ overSpace: 60,
|
|
|
+ overtime: 70,
|
|
|
},
|
|
|
{
|
|
|
- rId: 2,
|
|
|
- applyDate: '2020/01/03',
|
|
|
- applyFrom: '小程序',
|
|
|
- applyPerson: '莫兰蓝',
|
|
|
- overSpace: '数字交付中心',
|
|
|
- overtime: '2020/03/13 19:20-21:20',
|
|
|
+ key: '2',
|
|
|
+ applyDate: '2012/03/04',
|
|
|
+ applyFrom: 98,
|
|
|
+ applyPerson: 'John Brown',
|
|
|
+ overSpace: 60,
|
|
|
+ overtime: 70,
|
|
|
},
|
|
|
{
|
|
|
- rId: 3,
|
|
|
- applyDate: '2020/01/05',
|
|
|
- applyFrom: '小程序',
|
|
|
- applyPerson: '莫兰',
|
|
|
- overSpace: '数字交付中心',
|
|
|
- overtime: '2020/03/13 19:40-21:00',
|
|
|
+ key: '3',
|
|
|
+ applyDate: '2012/03/04',
|
|
|
+ applyFrom: 98,
|
|
|
+ applyPerson: 'John Brown',
|
|
|
+ overSpace: 60,
|
|
|
+ overtime: 70,
|
|
|
},
|
|
|
{
|
|
|
- rId: 4,
|
|
|
- applyDate: '2020/01/06',
|
|
|
- applyFrom: '小程序',
|
|
|
- applyPerson: '莫兰蓝',
|
|
|
- overSpace: '数字交付中心',
|
|
|
- overtime: '2020/03/13 19:20-21:20',
|
|
|
+ key: '4',
|
|
|
+ applyDate: '2012/03/04',
|
|
|
+ applyFrom: 98,
|
|
|
+ applyPerson: 'John Brown',
|
|
|
+ overSpace: 60,
|
|
|
+ overtime: 70,
|
|
|
},
|
|
|
];
|
|
|
|
|
|
- //弹出框的现实
|
|
|
- const [modalVisible, setModalVisible] = useState({ visible: false });
|
|
|
- const onPageChange = (pageObj, pageSize) => {
|
|
|
- setPage(pageObj);
|
|
|
+ const onChange = (pagination, filters, sorter, extra) => {
|
|
|
+ console.log('params', pagination, filters, sorter, extra);
|
|
|
};
|
|
|
- const menuClick = (key) => {
|
|
|
- //debugger;
|
|
|
- setModalVisible({ visible: true });
|
|
|
- };
|
|
|
-
|
|
|
- useEffect(() => {
|
|
|
- console.log('useEffect');
|
|
|
- }, [page, sorteredObj, applyFromTypes]);
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
<PageHeader
|
|
|
- title={<FormattedMessage id="menu.runtime.recordList" />}
|
|
|
+ title={<FormattedMessage id="menu.environment" />}
|
|
|
action={
|
|
|
- <SearchInput
|
|
|
- placeholder="搜索"
|
|
|
+ <Input.Search
|
|
|
+ size="large"
|
|
|
+ allowClear
|
|
|
+ style={{ width: '20%' }}
|
|
|
+ placeholder={'搜索空间'}
|
|
|
onSearch={(s) => {
|
|
|
setSearchText(s || undefined);
|
|
|
}}
|
|
|
- onCancel={() => {
|
|
|
- setSearchText();
|
|
|
- }}
|
|
|
/>
|
|
|
}
|
|
|
/>
|
|
|
- <div styles={{ marginTop: 12 }}>
|
|
|
- <Table
|
|
|
- total={total}
|
|
|
- columns={columns}
|
|
|
- dataSource={list}
|
|
|
- page={page}
|
|
|
- rowKey="rId"
|
|
|
- loading={false}
|
|
|
- onPageChange={onPageChange}
|
|
|
- onSortChange={(col, sortered) => {
|
|
|
- //'ASC' : 'DESC' 改变排序
|
|
|
- setSorteredObj({ [col.dataIndex]: sortered });
|
|
|
- }}
|
|
|
- onFilterChange={(dataIndex, newList) => {
|
|
|
- setPage({ ...page, pageNum: 1 });
|
|
|
- setApplyFromTypes(newList);
|
|
|
- }}
|
|
|
- ></Table>
|
|
|
+ <div>
|
|
|
+ <Table columns={columns} dataSource={data} onChange={onChange} pagination={pagination} />
|
|
|
</div>
|
|
|
- {modalVisible.visible && (
|
|
|
- <ShowModal
|
|
|
- onClose={() => {
|
|
|
- setModalVisible({ visible: false });
|
|
|
- }}
|
|
|
- ></ShowModal>
|
|
|
- )}
|
|
|
</div>
|
|
|
);
|
|
|
}
|