Skip to content

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

tijiao

上级 854642ec
正在显示 包含 177 行增加 和 15 行删除
src/components/Common/Table/index.jsx
......@@ -31,7 +31,7 @@ const initState = {
* 9、onContextMenuRow
* 10、toolOptionConfig
* 11、hiddeTool 隐藏工具栏
* 表格工具['reload', 'hiddensearch', 'density', 'fullScreen']
* 表格工具['reload', 'hiddensearch', 'density', 'fullScreen', 'setting']
*/
const SageTable = React.forwardRef((props, ref) => {
const rootRef = useRef(null);
......@@ -413,7 +413,7 @@ const SageTable = React.forwardRef((props, ref) => {
)}
{!hiddeTool ? (
<TableTool tableSize={tableSizeState} isFullscreen={isFullscreen} {...tableToolProps} />
<TableTool tableSize={tableSizeState} isFullscreen={isFullscreen} columns={latestColumnsState} {...tableToolProps} />
) : null}
<Table
......
src/components/Common/TableTool/components/ColumnSetting/index.jsx 0 → 100644
import React, { useEffect, useState } from 'react';
import { SettingOutlined } from '@ant-design/icons';
import { Popover, Tooltip, Checkbox } from 'antd';
import './style.less'
const CheckboxGroup = Checkbox.Group;
const ColumnSetting = (props) => {
const [plainOptions, setPlainOptions] = useState([])
const [checkedList, setCheckedList] = useState([])
const [indeterminate, setIndeterminate] = useState(true)
const [checkAll, setCheckAll] = useState(false)
const onChange = _checkedList => {
setCheckedList(_checkedList)
setIndeterminate(!!_checkedList.length && _checkedList.length < plainOptions.length)
setCheckAll(_checkedList.length === plainOptions.length)
};
useEffect(() => {
const allOptions = []
console.log(props.columns)
props.columns && props.columns.map(item => {
allOptions.push({
key: item.key,
title: item.title
})
})
setPlainOptions(allOptions)
}, [])
const content = (
<div className="sage-table-column-setting-list">
{
plainOptions.map((item, index) => {
return (
<span className="sage-table-column-setting-list-item" key={`columnKey_${item.key}`}>
<Checkbox
onChange={(e) => {
// if (columnKey) {
// const tempConfig = columnsMap[columnKey || ''] || {};
// const newSetting = { ...tempConfig };
// if (e.target.checked) {
// delete newSetting.show;
// } else {
// newSetting.show = false;
// }
// const columnKeyMap = {
// ...columnsMap,
// [columnKey]: newSetting as ColumnsState,
// };
// setColumnsMap(columnKeyMap);
// }
}}
//checked={config.show !== false}
>
{item.title}
</Checkbox>
</span>
)
})
}
</div>
);
return (
<Popover
placement="bottomRight"
content={content}
title={
<div className="sage-table-column-setting-title">
<Checkbox
// indeterminate={indeterminate} 是否已选中
// checked={selectedKeys.length === 0 && selectedKeys.length !== localColumns.length}
onChange={(e) => {
if (e.target.checked) {
// setAllSelectAction();
} else {
// setAllSelectAction(false);
}
}}
>
列展示
</Checkbox>
<a
onClick={() => {
console.log('重置')
}}
>
重置
</a>
</div>
}
trigger="click">
<Tooltip title="列设置">
<SettingOutlined className="table-tool-icon" />
</Tooltip>
</Popover>
);
};
export default ColumnSetting;
src/components/Common/TableTool/components/ColumnSetting/style.less 0 → 100644
.sage-pro-table {
.ant-popover-inner-content {
padding: 0;
}
}
.sage-table-column-setting-title {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
}
.sage-table-column-setting-list {
display: flex;
flex-direction: column;
width: 100%;
max-height: 400px;
overflow: auto;
.sage-table-column-setting-list-item {
display: flex;
align-items: center;
width: 100%;
padding: 4px 16px;
}
}
\ No newline at end of file
src/components/Common/TableTool/index.jsx
import React from 'react'
import { Tooltip } from 'antd'
import { FileSearchOutlined, FileSyncOutlined } from '@ant-design/icons';
import { FileSearchOutlined, FileSyncOutlined, SettingOutlined } from '@ant-design/icons';
import DensityIcon from './components/DensityIcon/index'
import FullscreenIcon from './components/FullscreenIcon/index'
import ColumnSetting from './components/ColumnSetting'
import './style.less'
const defatultToolOption = ['reload', 'hiddensearch', 'density', 'fullScreen']
const defatultToolOption = ['reload', 'hiddensearch', 'density', 'fullScreen', 'setting']
/**
*
......@@ -22,7 +23,8 @@ const SageTableTool = (props) => {
onChangeSize,
onHiddeSearch,
setFull,
exitFull
exitFull,
columns
} = props
// 控制工具按钮显示
......@@ -71,6 +73,15 @@ const SageTableTool = (props) => {
</span>
)
break;
case 'setting':
eachDom = (
<span className="sage-table-toolbar-item" key={`sage-table-toolbar-item-${item}`}>
<Tooltip title="列设置">
<ColumnSetting columns={columns} />
</Tooltip>
</span>
)
break;
default:
break;
}
......
src/layouts/BasicLayout.jsx
......@@ -301,7 +301,7 @@ const BasicLayout = (props) => {
<h1 className="sage-sidebar-title">Sage FrameWork</h1>
</a>
</div>
<div>
<div className="sage-sider-menu">
<Menu
style={{ width: '100%' }}
selectedKeys={menuSelectedKeys}
......
src/layouts/BasicLayout.less
......@@ -6,7 +6,7 @@
.sage-sidebar-container {
transition: width .28s;
width: 205px!important;
width: 205px !important;
background-color: #001529;
height: 100%;
position: fixed;
......@@ -32,20 +32,24 @@
line-height: 50px;
text-align: center;
overflow: hidden;
a {
display: inline-block;
width: 100%;
overflow: hidden;
}
.sage-sidebar-logo-link {
height: 100%;
width: 100%;
.sage-sidebar-logo {
width: 32px;
height: 32px;
vertical-align: middle;
margin-right: 6px;
}
.sage-sidebar-title {
display: inline-block;
margin: 0;
......@@ -53,7 +57,7 @@
font-weight: 600;
line-height: 50px;
font-size: 14px;
font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
vertical-align: middle;
}
}
......@@ -75,8 +79,9 @@
overflow: hidden;
position: relative;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0,21,41,.08);
box-shadow: 0 1px 4px rgba(0,21,41,.08);
-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
.sage-hamburger-container {
line-height: 50px;
height: 100%;
......@@ -85,8 +90,9 @@
-webkit-transition: background .3s;
transition: background .3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0,0,0,.025);
background: rgba(0, 0, 0, .025);
}
}
}
......@@ -107,14 +113,27 @@
.hideSidebar {
.sage-sidebar-container {
width: 80px !important;
width: 48px !important;
}
// 左侧导航栏菜单样式
.sage-sider-menu {
.ant-menu-item {
padding: 0 16px !important;
}
.ant-menu-submenu-title {
padding: 0 16px !important;
}
}
.sage-main-container {
margin-left: 80px;
margin-left: 48px;
}
.sage-fixed-header {
width: calc(100% - 80px);
width: calc(100% - 48px);
}
.sage-sidebar-logo {
margin-right: 0 !important;
}
......
src/pages/demo/crud/index.jsx
......@@ -454,7 +454,7 @@ const CrudList = () => {
</>
)
},
toolOptionConfig: ['reload', 'hiddensearch', 'density', 'fullScreen']
// toolOptionConfig: ['reload', 'hiddensearch', 'density', 'fullScreen']
}
// 窗口确认按钮
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论