tijiao

src/components/Common/Table/index.jsx

@@ -44,6 +44,11 @@ const SageTable = React.forwardRef((props, ref) => {
   // 展开keys
   const [expandedRowKeys, setExpandedRowKeys] = useState([]);
 
+  // 列设置
+  const [columns, setColumns] = useState([]);
+
+  const [allColumns, setAllColumns] = useState([]);
+
   const {
     request,
     hasNumber = false,
@@ -211,6 +216,16 @@ 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++) {
+        if (columnsTemp[i].key === key) {
+          columnsTemp[i].hidden = !checked;
+          break;
+        }
+      }
+      setAllColumns(columnsTemp);
+    },
     // 刷新表格
     onRefreshTable: () => {
       queryTable(tableState.searchParams);
@@ -231,10 +246,6 @@ const SageTable = React.forwardRef((props, ref) => {
     exitFull: () => exitFull(),
   };
 
-  useEffect(() => {
-    queryTable();
-  }, []);
-
   const tableSizeState = tableSizeProps !== undefined ? tableSizeProps : tableSize;
   const dataSourceState =
     dataSourceProps !== undefined ? dataSourceProps.slice() : tableState.dataSource;
@@ -243,12 +254,12 @@ const SageTable = React.forwardRef((props, ref) => {
   // 是否有序号
   // const columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
 
-  const getLatestColumnsState = () => {
-    let columnsState = columnsProps !== undefined ? columnsProps.slice() : [];
-    //  处理列配置
+  useEffect(() => {
+    let columnsTemp = allColumns ? allColumns.slice() : [];
     if (hasNumber) {
-      columnsState.unshift({
+      columnsTemp.unshift({
         title: '序号',
+        key: 'serialNumber',
         render: (text, record, index) => {
           let serialNumber = 0;
           if (paginationState) {
@@ -265,10 +276,14 @@ const SageTable = React.forwardRef((props, ref) => {
       });
     }
     // 隐藏hidden属性列
-    columnsState = columnsState.filter((item) => !item.hidden);
-    return columnsState;
-  };
-  const latestColumnsState = useMemo(() => getLatestColumnsState(), [props.columns, tableState]);
+    columnsTemp = columnsTemp.filter((item) => !item.hidden);
+    setColumns(columnsTemp);
+  }, [columnsProps, tableState, allColumns]);
+
+  useEffect(() => {
+    queryTable();
+    setAllColumns(columnsProps ? columnsProps.slice() : []);
+  }, []);
 
   const tableSearchFormProps = {
     searchFields: searchFieldsProps,
@@ -413,12 +428,17 @@ const SageTable = React.forwardRef((props, ref) => {
           )}
 
           {!hiddeTool ? (
-            <TableTool tableSize={tableSizeState} isFullscreen={isFullscreen} columns={latestColumnsState} {...tableToolProps} />
+            <TableTool
+              tableSize={tableSizeState}
+              isFullscreen={isFullscreen}
+              columns={allColumns}
+              {...tableToolProps}
+            />
           ) : null}
 
           <Table
             size={tableSizeState}
-            columns={latestColumnsState}
+            columns={columns}
             dataSource={dataSourceState}
             pagination={paginationState}
             loading={loadingState}

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

@@ -29,16 +29,21 @@ const ColumnSetting = (props) => {
       })
     })
     setPlainOptions(allOptions)
-  }, [])
+  }, [props.columns])
 
   const content = (
     <div className="sage-table-column-setting-list">
       {
-        plainOptions.map((item, index) => {
+        props.columns.map((item, index) => {
           return (
             <span className="sage-table-column-setting-list-item" key={`columnKey_${item.key}`}>
               <Checkbox
                 onChange={(e) => {
+                  if (e.target.checked) {
+                    props.onChangeColumnsHidden(item.key, true)
+                  } else {
+                    props.onChangeColumnsHidden(item.key, false)
+                  }
                   // if (columnKey) {
                   //   const tempConfig = columnsMap[columnKey || ''] || {};
                   //   const newSetting = { ...tempConfig };
@@ -54,7 +59,7 @@ const ColumnSetting = (props) => {
                   //   setColumnsMap(columnKeyMap);
                   // }
                 }}
-              //checked={config.show !== false}
+                checked={!item.hidden}
               >
                 {item.title}
               </Checkbox>

src/components/Common/TableTool/index.jsx

@@ -22,6 +22,7 @@ const SageTableTool = (props) => {
     onRefreshTable,
     onChangeSize,
     onHiddeSearch,
+    onChangeColumnsHidden,
     setFull,
     exitFull,
     columns
@@ -77,7 +78,7 @@ const SageTableTool = (props) => {
         eachDom = (
           <span className="sage-table-toolbar-item" key={`sage-table-toolbar-item-${item}`}>
             <Tooltip title="列设置">
-              <ColumnSetting columns={columns} />
+              <ColumnSetting onChangeColumnsHidden={onChangeColumnsHidden} columns={columns} />
             </Tooltip>
           </span>
         )