Browse Source

加班记录

zhaojijng 3 years ago
parent
commit
1388c0362a

+ 5 - 0
config/routes.ts

@@ -41,6 +41,11 @@
         name: 'runtime',
         component: './Runtime',
       },
+      {
+        path: '/runtime/recordList',
+        name: 'recordList',
+        component: './Runtime/RecordList',
+      },
     ],
   },
 ];

+ 1 - 0
src/locales/zh-CN/menu.ts

@@ -2,6 +2,7 @@ export default {
   'menu.environment': '环境信息',
   'menu.equipment': '设备管理',
   'menu.runtime': '运行时间',
+  'menu.recordList': '加班记录',
   'menu.welcome': '欢迎',
   'menu.more-blocks': '更多区块',
   'menu.home': '首页',

+ 53 - 155
src/pages/Runtime/RecordList/index.jsx

@@ -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>
   );
 }

+ 1 - 39
src/pages/Runtime/RecordList/index.less

@@ -1,39 +1 @@
-.dateCircle {
-  display: inline-block;
-  width: 9px;
-  height: 9px;
-  margin-right: 14px;
-  background: #c4c4c4;
-  border-radius: 100%;
-}
-
-.headerTitle {
-  display: flex;
-  align-items: center;
-  &:hover {
-    color: @text-color;
-    font-weight: 500;
-    .headerIcon {
-      color: @text-color;
-    }
-  }
-}
-.iconBox {
-  position: relative;
-  width: 16px;
-  height: 16px;
-  margin-right: 8px;
-  .headerIcon {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-.headerIcon {
-  margin-right: 8px;
-  color: #c4c4c4;
-  font-size: 16px;
-  &Active {
-    color: @primary-color;
-  }
-}
+@import '/src/antd-tenants.less';