A 表格展示列编辑后自动保存

spug_web/src/components/TableCard.js

@@ -8,6 +8,9 @@ import { Table, Space, Divider, Popover, Checkbox, Button, Input, Select } from
 import { ReloadOutlined, SettingOutlined, FullscreenOutlined, SearchOutlined } from '@ant-design/icons';
 import styles from './index.module.less';
 
+let TableFields = localStorage.getItem('TableFields')
+TableFields = TableFields ? JSON.parse(TableFields) : {}
+
 function Search(props) {
   let keys = props.keys || [''];
   keys = keys.map(x => x.split('/'));
@@ -135,13 +138,31 @@ function TableCard(props) {
         _columns = [props.children.props]
       }
     }
+    let hideFields = _columns.filter(x => x.hide).map(x => x.title)
+    if (props.tKey) {
+      if (TableFields[props.tKey]) {
+        hideFields = TableFields[props.tKey]
+      } else {
+        TableFields[props.tKey] = hideFields
+        localStorage.setItem('TableFields', JSON.stringify(TableFields))
+      }
+    }
     for (let [index, item] of _columns.entries()) {
-      if (!item.hide) _fields.push(index)
+      if (!hideFields.includes(item.title)) _fields.push(index)
     }
     setFields(_fields);
     setColumns(_columns);
     setDefaultFields(_fields);
-  }, [props.columns, props.children])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  function handleFieldsChange(fields) {
+    setFields(fields)
+    if (props.tKey) {
+      TableFields[props.tKey] = columns.filter((_, index) => !fields.includes(index)).map(x => x.title)
+      localStorage.setItem('TableFields', JSON.stringify(TableFields))
+    }
+  }
 
   return (
     <div ref={rootRef} className={styles.tableCard}>
@@ -152,7 +173,7 @@ function TableCard(props) {
         fields={fields}
         rootRef={rootRef}
         defaultFields={defaultFields}
-        onFieldsChange={setFields}
+        onFieldsChange={handleFieldsChange}
         onReload={props.onReload}/>
       <Table
         rowKey={props.rowKey}

spug_web/src/pages/alarm/alarm/Table.js

@@ -67,6 +67,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="aa"
         rowKey="id"
         title="报警历史记录"
         loading={store.isFetching}

spug_web/src/pages/alarm/contact/Table.js

@@ -34,6 +34,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="ac"
         rowKey="id"
         title="报警联系人"
         loading={store.isFetching}

spug_web/src/pages/alarm/group/Table.js

@@ -56,6 +56,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="ag"
         rowKey="id"
         title="报警联系组"
         loading={store.isFetching}

spug_web/src/pages/config/app/Table.js

@@ -43,6 +43,7 @@ class ComTable extends React.Component {
     }
     return (
       <TableCard
+        tKey="ca"
         rowKey="id"
         title="应用列表"
         loading={store.isFetching}

spug_web/src/pages/config/environment/Table.js

@@ -38,6 +38,7 @@ function ComTable() {
 
   return (
     <TableCard
+      tKey="ce"
       rowKey="id"
       title="环境列表"
       loading={store.isFetching}

spug_web/src/pages/config/service/Table.js

@@ -39,6 +39,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="cs"
         rowKey="id"
         title="服务列表"
         loading={store.isFetching}

spug_web/src/pages/deploy/app/Table.js

@@ -118,6 +118,7 @@ function ComTable() {
 
   return (
     <TableCard
+      tKey="da"
       title="应用列表"
       rowKey="id"
       loading={store.isFetching}

spug_web/src/pages/deploy/repository/Table.js

@@ -64,6 +64,7 @@ function ComTable() {
   const statusColorMap = {'0': 'cyan', '1': 'blue', '2': 'red', '5': 'green'};
   return (
     <TableCard
+      tKey="dre"
       rowKey="id"
       title="构建版本列表"
       loading={store.isFetching}

spug_web/src/pages/deploy/request/Table.js

@@ -154,6 +154,7 @@ function ComTable() {
 
   return (
     <TableCard
+      tKey="dr"
       rowKey="id"
       title="申请列表"
       columns={columns}

spug_web/src/pages/exec/template/Table.js

@@ -41,6 +41,7 @@ class ComTable extends React.Component {
     }
     return (
       <TableCard
+        tKey="et"
         title="模板列表"
         rowKey="id"
         loading={store.isFetching}

spug_web/src/pages/host/Table.js

@@ -49,6 +49,7 @@ function ComTable() {
 
   return (
     <TableCard
+      tKey="hi"
       rowKey="id"
       title={<Input placeholder="输入检索" style={{maxWidth: 250}} onChange={e => store.f_word = e.target.value}/>}
       loading={store.isFetching}

spug_web/src/pages/monitor/Table.js

@@ -71,6 +71,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="mi"
         rowKey="id"
         title="监控任务"
         loading={store.isFetching}

spug_web/src/pages/schedule/Table.js

@@ -124,6 +124,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="si"
         rowKey="id"
         title="任务列表"
         loading={store.isFetching}

spug_web/src/pages/system/account/Table.js

@@ -95,6 +95,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
+        tKey="sa"
         rowKey="id"
         title="账户列表"
         loading={store.isFetching}

spug_web/src/pages/system/role/Table.js

@@ -58,7 +58,7 @@ class ComTable extends React.Component {
   render() {
     return (
       <TableCard
-        rowKey="id"
+        rowKey="sr"
         title="角色列表"
         loading={store.isFetching}
         dataSource={store.dataSource}