列设置

src/components/Common/Table/index.jsx

@@ -46,8 +46,10 @@ const SageTable = React.forwardRef((props, ref) => {
 
   // 列设置
   const [columns, setColumns] = useState([]);
-
+  // 隐藏列设置
   const [allColumns, setAllColumns] = useState([]);
+  // 默认隐藏列设置
+  const [defaultColumnIndex, setDefaultColumnIndex] = useState([]);
 
   const {
     request,
@@ -216,6 +218,7 @@ const SageTable = React.forwardRef((props, ref) => {
   const tableToolProps = {
     toolBarRender: toolBarRenderProps,
     toolOptionConfig: toolOptionConfigProps,
+    // 勾选隐藏列
     onChangeColumnsHidden: (key, checked) => {
       const columnsTemp = allColumns.slice();
       for (let i = 0; i < columnsTemp.length; i++) {
@@ -226,6 +229,25 @@ const SageTable = React.forwardRef((props, ref) => {
       }
       setAllColumns(columnsTemp);
     },
+    // 勾选取消全部列
+    onChangeAllColumns: (boolean) => {
+      const columnsTemp = allColumns.slice();
+      columnsTemp.forEach(item => {
+        item.hidden = !boolean
+      })
+      setAllColumns(columnsTemp);
+    },
+    // 重置列
+    onResetColumns: () => {
+      const columnsTemp = allColumns.slice();
+      columnsTemp.forEach(item => {
+        item.hidden = false
+      })
+      defaultColumnIndex.forEach(item => {
+        columnsTemp[item].hidden = true
+      })
+      setAllColumns(columnsTemp);
+    },
     // 刷新表格
     onRefreshTable: () => {
       queryTable(tableState.searchParams);
@@ -282,7 +304,15 @@ const SageTable = React.forwardRef((props, ref) => {
 
   useEffect(() => {
     queryTable();
-    setAllColumns(columnsProps ? columnsProps.slice() : []);
+    const columnsTemp = columnsProps ? columnsProps.slice() : []
+    const hiddenIndex = []
+    columnsTemp.forEach((item, index) => {
+      if (item.hidden) {
+        hiddenIndex.push(index)
+      }
+    })
+    setDefaultColumnIndex(hiddenIndex);
+    setAllColumns(columnsTemp);
   }, []);
 
   const tableSearchFormProps = {

src/components/Common/TableTool/components/ColumnSetting/index.jsx

@@ -4,7 +4,6 @@ import { Popover, Tooltip, Checkbox } from 'antd';
 
 import './style.less'
 
-const CheckboxGroup = Checkbox.Group;
 
 const ColumnSetting = (props) => {
 
@@ -13,22 +12,28 @@ const ColumnSetting = (props) => {
   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)
-  };
+  const setAllSelectAction = boolean => {
+    props.onChangeAllColumns(boolean)
+  }
 
   useEffect(() => {
     const allOptions = []
-    console.log(props.columns)
+    const selectedArr = []
+    const unselectedArr = []
     props.columns && props.columns.map(item => {
       allOptions.push({
         key: item.key,
         title: item.title
       })
+      if (item.hidden) {
+        unselectedArr.push(item)
+      } else {
+        selectedArr.push(item)
+      }
     })
     setPlainOptions(allOptions)
+    setIndeterminate(selectedArr.length !== 0 && unselectedArr.length !== 0)
+    setCheckAll(selectedArr.length !== 0 && unselectedArr.length === 0)
   }, [props.columns])
 
   const content = (
@@ -44,20 +49,6 @@ const ColumnSetting = (props) => {
                   } else {
                     props.onChangeColumnsHidden(item.key, false)
                   }
-                  // 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={!item.hidden}
               >
@@ -77,21 +68,17 @@ const ColumnSetting = (props) => {
       title={
         <div className="sage-table-column-setting-title">
           <Checkbox
-            // indeterminate={indeterminate} 是否已选中
-            // checked={selectedKeys.length === 0 && selectedKeys.length !== localColumns.length}
+            indeterminate={indeterminate} 是否已选中
+            checked={checkAll}
             onChange={(e) => {
-              if (e.target.checked) {
-                // setAllSelectAction();
-              } else {
-                // setAllSelectAction(false);
-              }
+              setAllSelectAction(e.target.checked);
             }}
           >
             列展示
           </Checkbox>
           <a
             onClick={() => {
-              console.log('重置')
+              props.onResetColumns()
             }}
           >
             重置

src/components/Common/TableTool/index.jsx

@@ -23,9 +23,11 @@ const SageTableTool = (props) => {
     onChangeSize,
     onHiddeSearch,
     onChangeColumnsHidden,
+    onChangeAllColumns,
+    onResetColumns,
     setFull,
     exitFull,
-    columns
+    columns,
   } = props
 
   // 控制工具按钮显示
@@ -78,7 +80,12 @@ const SageTableTool = (props) => {
         eachDom = (
           <span className="sage-table-toolbar-item" key={`sage-table-toolbar-item-${item}`}>
             <Tooltip title="列设置">
-              <ColumnSetting onChangeColumnsHidden={onChangeColumnsHidden} columns={columns} />
+              <ColumnSetting
+                onChangeColumnsHidden={onChangeColumnsHidden}
+                onChangeAllColumns={onChangeAllColumns}
+                onResetColumns={onResetColumns}
+                columns={columns}
+              />
             </Tooltip>
           </span>
         )

src/pages/demo/crud/index.jsx

@@ -218,7 +218,8 @@ const CrudList = () => {
       key: 'field2',
       width: 200,
       sortField: 't1.field2',
-      sorter: true
+      sorter: true,
+      hidden: true
     },
     {
       title: '字段3',