tijiao

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

+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

+.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']
   }
 
   // 窗口确认按钮