Skip to content

S
sage-front-framework
提交 70352c9a 作者: 郁骅焌
操作

整体样式修改

上级 7831604d
正在显示 包含 164 行增加 和 127 行删除
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 0 → 100644
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 0 → 100644
.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>
);
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论