整体样式修改

config/config.js

@@ -71,7 +71,7 @@ export default defineConfig({
               routes: [
                 {
                   path: '/system/role',
-                  name: 'role',
+                  name: '角色管理',
                   icon: 'SolutionOutlined',
                   component: './role',
                 },

src/components/Common/Table/index.jsx

-import React, { useEffect, useState, useImperativeHandle, useRef } from 'react'
-import { ConfigProvider, Table, Card } from 'antd'
-import { useFullscreen } from '@umijs/hooks'
-import TableSearchForm from '@/components/Common/TableSearchForm'
-import TableTool from '@/components/Common/TableTool'
-import './style.less'
+import React, { useEffect, useState, useImperativeHandle, useRef } from 'react';
+import { ConfigProvider, Table, Card } from 'antd';
+import { useFullscreen } from '@umijs/hooks';
+import TableSearchForm from '@/components/Common/TableSearchForm';
+import TableTool from '@/components/Common/TableTool';
+import './style.less';
 
 const initState = {
   pageNum: 1,
   pageSize: 10,
   dataSource: [],
   pagination: {
-    showQuickJumper: true
+    showQuickJumper: true,
+    showTotal: (total) => `总共 ${total} 条记录`,
   },
-  searchParams: {}
-}
+  searchParams: {},
+};
 
 /**
  *
@@ -32,12 +33,11 @@ const initState = {
  * 表格工具['reload', 'hiddensearch', 'density', 'fullScreen']
  */
 const SageTable = React.forwardRef((props, ref) => {
+  const rootRef = useRef(null);
+  const tableSearchFormRef = useRef();
 
-  const rootRef = useRef(null)
-  const tableSearchFormRef = useRef()
-
-  const [selectedRowKeys, setSelectedRowKeys] = useState([])
-  const [selectedRows, setSelectedRows] = useState([])
+  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+  const [selectedRows, setSelectedRows] = useState([]);
 
   const {
     request,
@@ -67,68 +67,68 @@ const SageTable = React.forwardRef((props, ref) => {
   } = props;
 
   const { isFullscreen, setFull, exitFull } = useFullscreen({
-    dom: () => document.getElementsByClassName('ant-pro-page-header-wrap-children-content')[0]
-  })
-  const [tableSize, setTableSize] = useState('default')
-  const [loading, setLoading] = useState(false)
-  const [tableState, setTableState] = useState(initState)
+    dom: () => document.getElementsByClassName('ant-pro-page-header-wrap-children-content')[0],
+  });
+  const [tableSize, setTableSize] = useState('default');
+  const [loading, setLoading] = useState(false);
+  const [tableState, setTableState] = useState(initState);
 
   // 获取表格数据
   const queryTable = async (tableParams, status) => {
     if (request) {
       let queryParams = {
         pageNum: tableState.pageNum,
-        pageSize: tableState.pageSize
-      }
+        pageSize: tableState.pageSize,
+      };
 
       // 是否有搜索条件
-      const hasSearchCondition = tableParams !== undefined
-
+      const hasSearchCondition = tableParams !== undefined;
 
       if (hasSearchCondition) {
         queryParams = Object.assign(queryParams, {
           ...tableState.searchParams,
-          ...tableParams
-        })
+          ...tableParams,
+        });
 
         if (status === 'change') {
           if (!tableParams.sortOrder) {
-            delete queryParams.sortOrder
+            delete queryParams.sortOrder;
           }
           if (!tableParams.sortField) {
-            delete queryParams.sortField
+            delete queryParams.sortField;
           }
         }
       }
 
       // 如果是重置则只保留分页和排序条件
       if (status === 'reset') {
-        Object.keys(queryParams).forEach(item => {
-          if (!(item === 'pageNum' || item === 'pageSize' || item === 'sortField' || item === 'sortOrder')) {
-            delete queryParams[item]
+        Object.keys(queryParams).forEach((item) => {
+          if (
+            !(
+              item === 'pageNum' ||
+              item === 'pageSize' ||
+              item === 'sortField' ||
+              item === 'sortOrder'
+            )
+          ) {
+            delete queryParams[item];
           }
-        })
+        });
       }
 
-
-      setLoading(true)
-      const res = await request(queryParams)
-      setLoading(false)
+      setLoading(true);
+      const res = await request(queryParams);
+      setLoading(false);
 
       if (res.isSuccess) {
-        const {
-          curPage: current,
-          pageCount: pageSize,
-          dataMaxCount: total,
-        } = res
-
+        const { curPage: current, pageCount: pageSize, dataMaxCount: total } = res;
 
-        const newSearchParams = Object.assign({}, queryParams)
+        const newSearchParams = Object.assign({}, queryParams);
         if (newSearchParams.pageNum) {
-          delete newSearchParams.pageNum
+          delete newSearchParams.pageNum;
         }
         if (queryParams.pageSize) {
-          delete newSearchParams.pageSize
+          delete newSearchParams.pageSize;
         }
 
         setTableState({
@@ -139,45 +139,44 @@ const SageTable = React.forwardRef((props, ref) => {
             ...tableState.pagination,
             current,
             pageSize,
-            total
+            total,
           },
-          searchParams: hasSearchCondition ? { ...newSearchParams } : {}
-        })
+          searchParams: hasSearchCondition ? { ...newSearchParams } : {},
+        });
       }
     }
-  }
+  };
 
   // 改变表格数据
   const onChangeTable = async (pagination, filters, sorter) => {
-
     const tableParams = {
       pageNum: pagination.current,
-      pageSize: pagination.pageSize
-    }
+      pageSize: pagination.pageSize,
+    };
 
     // 如果有排序则添加排序属性
     if (Object.keys(sorter).length !== 0 && sorter.order) {
-      tableParams.sortField = sorter.column.sortField
-      tableParams.sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc'
+      tableParams.sortField = sorter.column.sortField;
+      tableParams.sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc';
     }
 
-    queryTable(tableParams, 'change')
-  }
+    queryTable(tableParams, 'change');
+  };
 
   // 刷新当前表格数据
   const reloadTable = () => {
-    queryTable(tableState.searchParams)
-  }
+    queryTable(tableState.searchParams);
+  };
 
   // 获取选中keys
   const getSelectedRowKeys = () => {
-    return selectedRowKeys
-  }
+    return selectedRowKeys;
+  };
 
   // 获取选中rows
   const getSelectedRows = () => {
-    return selectedRows
-  }
+    return selectedRows;
+  };
 
   // 工具方法
   const tableToolProps = {
@@ -185,52 +184,54 @@ const SageTable = React.forwardRef((props, ref) => {
     toolOptionConfig: toolOptionConfigProps,
     // 刷新表格
     onRefreshTable: () => {
-      queryTable(tableState.searchParams)
+      queryTable(tableState.searchParams);
     },
     // 隐藏搜索条件
     onHiddeSearch: () => {
       if (tableSearchFormRef.current) {
-        tableSearchFormRef.current.hiddenSearch()
+        tableSearchFormRef.current.hiddenSearch();
       }
     },
     // 改变表格密度
     onChangeSize: (size) => {
-      setTableSize(size)
+      setTableSize(size);
     },
     // 全屏
     setFull: () => setFull(),
     // 退出全屏
     exitFull: () => exitFull(),
-  }
+  };
 
   useEffect(() => {
-    queryTable()
-  }, [])
-
-  const tableSizeState = tableSizeProps !== undefined ? tableSizeProps : tableSize
-  const dataSourceState = dataSourceProps !== undefined ? dataSourceProps.slice() : tableState.dataSource
-  const paginationState = paginationProps !== undefined ? paginationProps : tableState.pagination
-  const loadingState = loadingProps !== undefined ? loadingProps : loading
+    queryTable();
+  }, []);
+
+  const tableSizeState = tableSizeProps !== undefined ? tableSizeProps : tableSize;
+  const dataSourceState =
+    dataSourceProps !== undefined ? dataSourceProps.slice() : tableState.dataSource;
+  const paginationState = paginationProps !== undefined ? paginationProps : tableState.pagination;
+  const loadingState = loadingProps !== undefined ? loadingProps : loading;
   // 是否有序号
-  const columnsState = columnsProps !== undefined ? columnsProps.slice() : []
+  const columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
   if (hasNumber) {
     columnsState.unshift({
       title: '序号',
-      render: (text, record, index) => `${(paginationState.current - 1) * paginationState.pageSize + index + 1}`,
+      render: (text, record, index) =>
+        `${(paginationState.current - 1) * paginationState.pageSize + index + 1}`,
       align: 'center',
       width: 60,
-    })
+    });
   }
 
   const tableSearchFormProps = {
     searchFields: searchFieldsProps,
     onSearchTable: onSearchTableProps,
     onResetTable: onResetTableProps,
-  }
+  };
 
   const lastTableState = {
-    ...tableProps
-  }
+    ...tableProps,
+  };
 
   const rowSelection = {
     selectedRowKeys,
@@ -238,16 +239,16 @@ const SageTable = React.forwardRef((props, ref) => {
     type: selectionType,
     onChange: (selectedrowkeys, selectedrows) => {
       // console.log(`selectedRowKeys: ${selectedrowkeys}`, 'selectedRows: ', selectedrows);
-      setSelectedRowKeys(selectedrowkeys)
-      setSelectedRows(selectedrows)
-    }
+      setSelectedRowKeys(selectedrowkeys);
+      setSelectedRows(selectedrows);
+    },
   };
 
   if (hasCheck) {
     lastTableState.rowSelection = {
       ...rowSelection,
-      ...rowSelectionProps
-    }
+      ...rowSelectionProps,
+    };
   }
 
   // 暴露给外部的方法
@@ -258,13 +259,11 @@ const SageTable = React.forwardRef((props, ref) => {
     setSelectedRowKeys,
     getSelectedRows,
     setSelectedRows,
-    getSearchFieldsValue: () => tableSearchFormRef.current.getFieldsValue()
-  }))
+    getSearchFieldsValue: () => tableSearchFormRef.current.getFieldsValue(),
+  }));
 
   return (
-    <ConfigProvider
-      getPopupContainer={() => rootRef.current}
-    >
+    <ConfigProvider getPopupContainer={() => rootRef.current}>
       <div className="sage-pro-table" ref={rootRef}>
         <Card
           bordered={false}
@@ -275,21 +274,11 @@ const SageTable = React.forwardRef((props, ref) => {
             padding: 0,
           }}
         >
+          {searchFieldsProps && searchFieldsProps.length !== 0 && (
+            <TableSearchForm ref={tableSearchFormRef} {...tableSearchFormProps} />
+          )}
 
-          {
-            searchFieldsProps && searchFieldsProps.length !== 0 &&
-            <TableSearchForm
-              ref={tableSearchFormRef}
-              {...tableSearchFormProps}
-            />
-          }
-
-
-          <TableTool
-            tableSize={tableSizeState}
-            isFullscreen={isFullscreen}
-            {...tableToolProps}
-          />
+          <TableTool tableSize={tableSizeState} isFullscreen={isFullscreen} {...tableToolProps} />
 
           <Table
             size={tableSizeState}
@@ -298,41 +287,41 @@ const SageTable = React.forwardRef((props, ref) => {
             pagination={paginationState}
             loading={loadingState}
             onChange={onChangeTable}
-            onRow={record => {
+            onRow={(record) => {
               return {
                 // 点击行
-                onClick: event => {
-                  event.stopPropagation()
+                onClick: (event) => {
+                  event.stopPropagation();
                   if (onClickRowProps) {
-                    onClickRowProps(record)
+                    onClickRowProps(record);
                   }
                 },
                 // 双击行
-                onDoubleClick: event => {
-                  event.stopPropagation()
+                onDoubleClick: (event) => {
+                  event.stopPropagation();
                   if (onDoubleClickRowProps) {
-                    onDoubleClickRowProps(record)
+                    onDoubleClickRowProps(record);
                   }
                 },
                 // 鼠标右键
-                onContextMenu: event => {
-                  event.stopPropagation()
+                onContextMenu: (event) => {
+                  event.stopPropagation();
                   if (onContextMenuRowProps) {
-                    onContextMenuRowProps(record)
+                    onContextMenuRowProps(record);
                   }
                 },
                 // 鼠标移入行
-                onMouseEnter: event => {
-                  event.stopPropagation()
+                onMouseEnter: (event) => {
+                  event.stopPropagation();
                   if (onMouseEnterRowProps) {
-                    onMouseEnterRowProps(record)
+                    onMouseEnterRowProps(record);
                   }
                 },
                 // 鼠标移出行
-                onMouseLeave: event => {
-                  event.stopPropagation()
+                onMouseLeave: (event) => {
+                  event.stopPropagation();
                   if (onMouseLeaveRowProps) {
-                    onMouseLeaveRowProps(record)
+                    onMouseLeaveRowProps(record);
                   }
                 },
               };
@@ -342,8 +331,7 @@ const SageTable = React.forwardRef((props, ref) => {
         </Card>
       </div>
     </ConfigProvider>
+  );
+});
 
-  )
-})
-
-export default SageTable
+export default SageTable;

src/components/GlobalFooter/index.jsx

+import React from 'react';
+import './style.less';
+
+const GlobalFooter = () => {
+  return (
+    <div className="sage-global-footer">
+      © 2020 江苏圣捷远创科技有限公司版权所有 ⋅ 苏ICP备17030519号
+    </div>
+  );
+};
+
+export default GlobalFooter;

src/components/GlobalFooter/style.less

+.sage-global-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 40px;
+  margin-left: -24px;
+  padding-left: 10px;
+  line-height: 40px;
+  background: #f0f2f5;
+  border-top: 1px solid #e7eaec;
+}

src/components/TabBar/style.less

 .sage-tabbar {
+  position: fixed;
+  z-index: 3;
   display: flex;
+  width: calc(100% - 256px);
   height: 40px;
   margin: -24px -24px -4px;
   background: #fff;

src/global.less

@@ -43,7 +43,28 @@ ol {
 }
 
 .ant-pro-basicLayout-content .ant-pro-page-header-wrap {
-  margin-top: 0px !important;
+  margin-top: 24px !important;
+  padding-bottom: 40px;
+}
+
+.ant-layout-header {
+  position: fixed;
+  top: 0;
+  width: calc(100% - 256px) !important;
+}
+
+.ant-pro-basicLayout-content {
+  position: absolute;
+  top: 64px;
+  width: calc(100% - 48px);
+}
+
+.ant-layout-footer {
+  display: none;
+}
+
+.ant-table-pagination-right {
+  margin-right: 10px !important;
 }
 
 // 公共样式
@@ -53,8 +74,6 @@ ol {
 
 // 新增组件样式
 
-
-
 @media (max-width: @screen-xs) {
   .ant-table {
     width: 100%;

src/layouts/BasicLayout.jsx

@@ -11,6 +11,7 @@ import { Result, Button } from 'antd';
 import Authorized from '@/utils/Authorized';
 import RightContent from '@/components/GlobalHeader/RightContent';
 import TabBar from '@/components/TabBar';
+import GlobalFooter from '@/components/GlobalFooter';
 import { getAuthorityFromRouter } from '@/utils/utils';
 import logo from '../assets/logo.svg';
 
@@ -152,8 +153,11 @@ const BasicLayout = (props) => {
     >
       <TabBar ref={tabBarRef} currentUser={currentUser} />
       <Authorized authority={authorized.authority} noMatch={noMatch}>
-        <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
+        <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+          <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
+        </div>
       </Authorized>
+      <GlobalFooter />
     </ProLayout>
   );
 };