1.主页kpi导航增加保存树形节点到浏览器缓存功能，退出登录后，从已保存的树形节点拿数据

Min
1 parent feaa7fa5
Showing 2 changed files with 94 additions and 14 deletions
src/components/IndexCenter/IndexCenter.js
src/components/login/Login.js
 /* eslint-disable */
 /* eslint-disable function-paren-newline */
 import React, { Component } from 'react';
-import { BankOutlined, CloseOutlined, FolderFilled, FolderOpenFilled } from '@ant-design/icons';
+import { BankOutlined, CloseOutlined, FolderFilled, FolderOpenFilled, SaveOutlined } from '@ant-design/icons';
 import { Layout, Card, Checkbox, Button, Table, Menu, Tabs, message, Tree, Input } from 'antd-v4';
 import logo from '@/assets/foot_logo.png';
 import config from '@/utils/config';
@@ -88,12 +88,42 @@ class IndexCenter extends Component {
       tableData: [],
       bFilter: 'Pending,PendingCheck,MyWarning',
       app: props.app,
+      expandedKeys: [],
     };
     this.activeTree = '';
     this.treeId = '';
   }
  
   componentWillMount() {
+    // 从localStorage读取展开状态
+    try {
+      const { userinfo } = this.props.app;
+
+      const sUserNo = userinfo?.sUserNo;
+
+      if (sUserNo) {
+        const key = `xlybusinessExpandKeys_${sUserNo}`;
+
+        const xlybusinessExpandKeys = localStorage.getItem(key);
+
+        if (xlybusinessExpandKeys) {
+          try {
+            const expandedKeys = JSON.parse(xlybusinessExpandKeys);
+
+            this.setState({ expandedKeys });
+          } catch (error) {
+            console.error('解析展开节点失败:', error);
+          }
+        } else {
+          console.log('localStorage中没有保存的展开节点');
+        }
+      } else {
+        console.error('用户编号不存在，无法读取展开状态');
+      }
+    } catch (error) {
+      console.error('读取展开状态失败:', error);
+    }
+
     setTimeout(() => {
       this.handleGetModelCenter('init');
       const commonUrl = `${config.server_host}parameter/getParameter?sModelsId=100`;
@@ -198,6 +228,20 @@ class IndexCenter extends Component {
       disabled: true,
     }];
  
+    let expandedKeys = this.state.expandedKeys;
+    // 重新读取展开状态，确保应用到新构建的树结构上
+    if (sUserNo) {
+      const key = `xlybusinessExpandKeys_${sUserNo}`;
+      const xlybusinessExpandKeys = localStorage.getItem(key);
+      if (xlybusinessExpandKeys) {
+        try {
+          expandedKeys = JSON.parse(xlybusinessExpandKeys);
+
+        } catch (error) {
+          console.error('解析展开节点失败:', error);
+        }
+      }
+    }
     if (model !== undefined && !this.treeId) {
       // if (this.tableTree) {
       //   this.tableTree.scrollTop = 0;
@@ -440,10 +484,20 @@ class IndexCenter extends Component {
         }
       }
       this.setState({
-        tabsPanes, tableTreeData, ...addState
+        tabsPanes, tableTreeData, ...addState,
+        expandedKeys
+      });
+    } else {
+      // 如果没有重新构建树结构，也更新展开状态
+      this.setState({
+        comParameterList,
+        comThirdAppList,
+        dToDayNumSum,
+        dTobeDoneSum,
+        logoImageInfo,
+        expandedKeys
       });
     }
-    this.setState({ comParameterList, comThirdAppList,  dToDayNumSum, dTobeDoneSum, logoImageInfo });
   }
   componentDidMount() {
     if (this.kpiTable && this.kpiTable.querySelector('.ant-table-body')) {
@@ -501,6 +555,27 @@ class IndexCenter extends Component {
     localStorage.setItem(`xlybusinessActiveTree_${sUserNo}`, `${this.activeTree},${this.tableTreeScrollTop || 0},${this.kpiTableScrollTop || 0}`);
   }
  
+  handleSaveExpandState = () => {
+    try {
+      const { userinfo } = this.props.app;
+      const sUserNo = userinfo?.sUserNo;
+      const { expandedKeys } = this.state;
+      if (sUserNo) {
+        const key = `xlybusinessExpandKeys_${sUserNo}`;
+        localStorage.setItem(key, JSON.stringify(expandedKeys));
+        // 验证存储是否成功
+        const storedValue = localStorage.getItem(key);
+        message.success('展开状态已保存');
+      } else {
+        console.error('用户编号不存在，无法保存展开状态');
+        message.error('保存失败：用户信息不完整');
+      }
+    } catch (error) {
+      console.error('保存展开状态失败:', error);
+      message.error('保存失败：' + error.message);
+    }
+  }
+
   handleDoubleClick = (record) => {
     const newsId = record.sId; /* 表格行的sId */
     const newKey = new Date().getTime().toString();
@@ -849,7 +924,10 @@ class IndexCenter extends Component {
                     </div>
                     <div className={styles.indexTabs}>
                       <div className={styles.navType}>
-                        <div className={styles.tableTreeTitle}>{NavigationType}</div>
+                        <div className={styles.tableTreeTitle} style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
+                          <span style={{marginRight: '10px'}}>{NavigationType}</span>
+                          <Button size="middle" type="text" icon={<SaveOutlined />} onClick={this.handleSaveExpandState} style={{ background:'none', border: 'none', padding: '0 4px' }} />
+                        </div>
                         <div className={styles.tableTree} ref={(ref) => {
                           this.tableTree = ref;
                           if (this.tableTree && this.tableTreeScrollTop) {
@@ -857,9 +935,7 @@ class IndexCenter extends Component {
                           }
                         }}>
                           <Tree
-                            key={
-                              commonUtils.isNotEmptyArr(tableTreeData) ? this.treeId : Math.random()
-                            }
+                            key="navigationTree"
                             className={"hide-file-icon"}
                             // switcherIcon={<img src={file} alt="svg" />}
                             onSelect={(e, select) => {
@@ -893,8 +969,12 @@ class IndexCenter extends Component {
                                 tableData: data
                               })
                             }}
-                            defaultSelectedKeys={[this.activeTree]}
-                            defaultExpandAll={true}
+                            onExpand={(expandedKeys) => {
+                              this.setState({ expandedKeys });
+                            }}
+                            expandedKeys={this.state.expandedKeys}
+                            selectedKeys={[this.activeTree]}
+                            defaultExpandAll={false}
                           >
                             {this.renderTreeNodes(tableTreeData)}
                           </Tree>
@@ -150,16 +150,16 @@ class LoginForm extends Component {
  
   handleLogin = async (values = {}, bSsoLogin = false) => {
     this.setState({ loginLoading: true });
-    /* 点击登录按钮时 清空localStorage，保留左侧树定位 */
-    const xlybusinessActiveTreeArr = [];
+    /* 点击登录按钮时 清空localStorage，保留左侧树定位和展开状态 */
+    const xlybusinessDataArr = [];
     for (let i = 0; i < localStorage.length; i++) {
       const key = localStorage.key(i);
-      if (key && key.includes("xlybusinessActiveTree")) {
-        xlybusinessActiveTreeArr.push([key, localStorage.getItem(key)]);
+      if (key && (key.includes("xlybusinessActiveTree") || key.includes("xlybusinessExpandKeys"))) {
+        xlybusinessDataArr.push([key, localStorage.getItem(key)]);
       }
     }
     localStorage.clear();
-    xlybusinessActiveTreeArr.forEach(item => {
+    xlybusinessDataArr.forEach(item => {
       localStorage.setItem(item[0], item[1]);
     });
     const value = values;