页面路由跳转返回后数据回显，记住原先的状态

2026-05-12 08:57:26 +08:00
parent c2b64d5e22
commit ad1cbee74a
164 changed files with 5150 additions and 2246 deletions
--- a/src/views/home/components/budgetHeader.vue
+++ b/src/views/home/components/budgetHeader.vue
@@ -20,9 +20,9 @@
           <el-dropdown-item divided  @click.native='handleToggle'>切换账号</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
-      <el-button type="text" class="return-btn" :title="'返回'" @click="handleReturn">
+      <!-- <el-button type="text" class="return-btn" :title="'返回'" @click="handleReturn">
        <svg-icon style="color: #0B58FF;" icon-class="returnIcon" />
-      </el-button>
+      </el-button> -->
      <el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
        <svg-icon style="color: #0B58FF;" v-if="isFullScreen" icon-class="unFullScreenView" />
        <svg-icon style="color: #0B58FF;" v-else icon-class="fullScreenView" />
--- a/src/views/home/components/changeBase.vue
+++ b/src/views/home/components/changeBase.vue
@@ -26,7 +26,7 @@ import bgBaseTongcheng from '@/assets/images/bgBase/桐城.png';
 import bgBaseLuoyang from '@/assets/images/bgBase/洛阳.png';
 import bgBaseHefei from '@/assets/images/bgBase/合肥.png';
 import bgBaseSuqian from '@/assets/images/bgBase/宿迁.png';
-import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';// 补充：江苏
+import bgBaseQinhuangdao from '@/assets/images/bgBase/秦皇岛.png';

 export default {
  name: "BaseSelector",
@@ -34,13 +34,11 @@ export default {
    factory: {
      type: [String, Number],
      default: undefined,
-      validator: (val) => [5, 2, 7, 3, 8, 9, 10, 6].includes(val) // 校验序号范围（匹配新的baseNameToIndexMap）
+      validator: (val) => [5, 2, 7, 3, 8, 9, 10, 6].includes(val)
    }
  },
-  // 计算属性（响应式，levelList变化时会自动更新）
  computed: {
    buttonLevelList() {
-      // 核心：通过$store.getters获取定义的getter
      let arr = []
      this.$store.getters.levelList.forEach(item => {
        this.buttonList.forEach(item2 => {
@@ -49,7 +47,12 @@ export default {
          }
        })
      })
-      this.activeButton = arr[0].id
+      const validIds = [5, 2, 7, 3, 8, 9, 10, 6]
+      if (this.factory != null && validIds.includes(Number(this.factory))) {
+        this.activeButton = Number(this.factory)
+      } else if (arr.length > 0) {
+        this.activeButton = arr[0].id
+      }
      return arr
    }
  },
@@ -69,22 +72,13 @@ export default {
    };
  },
  watch: {
-    // 监听父组件传递的factory变化，同步本地选中索引
    factory: {
      handler(newVal) {
-        console.log('watch factory=======================:', newVal);
-        if (newVal) {
-          this.activeButton = newVal;
+        if (newVal != null) {
+          this.activeButton = Number(newVal);
        }
-      //   // 根据新的baseNameToIndexMap，找到对应的基地名称
-      //   const targetName = Object.keys(this.baseNameToIndexMap).find(name => this.baseNameToIndexMap[name] === newVal);
-      //   // 根据名称找到buttonList中的索引
-      //   const targetIndex = this.buttonList.indexOf(targetName);
-      //   // 合法索引则更新，否则默认选中宜兴
-      //   this.activeButton = targetIndex > -1 ? targetIndex : 2;
-      //   console.log('当前选中基地：', this.buttonList[this.activeButton], '序号：', newVal);
      },
-      // immediate: true // 初始化立即执行
+      immediate: true
    }
  },
  methods: {
@@ -92,10 +86,6 @@ export default {
      this.activeButton = id;
      this.$emit('baseChange', id);
    }
-  },
-  mounted() {
-    // 初始化时触发事件，传递默认选中的宜兴序号（7）
-    // this.$emit('baseChange', 5);
  }
 };
 </script>
@@ -115,7 +105,7 @@ export default {
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
-    margin-right: -35px; // 重叠效果，可根据需求调整
+    margin-right: -35px;
    transition: all 0.2s ease;

    &:hover,
--- a/src/views/home/components/core-bottom-leftItem.vue
+++ b/src/views/home/components/core-bottom-leftItem.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="coreItem">
-    <div @click="handleRoute(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
+    <div @click="handleRouter(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
      <div class="unit">{{ item.unit }}</div>
      <div class="item-content">
        <div class="content-wrapper">
@@ -39,6 +39,7 @@
 </template>

 <script>
+import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
 export default {
  name: "Container",
  components: {},
@@ -60,11 +61,23 @@ export default {
    }
  },
  methods: {
-    handleRoute(path) {
+    handleRouter(path) {
+      const toPage = path.split('/').pop();
+      const currentPath = this.$route.path;
+      const state = {
+        dateData: {
+          startTime: this.dateData.startTime,
+          endTime: this.dateData.endTime
+        },
+        toPage
+      };
+      pushNavigation(currentPath, state);
+      saveNavigationState(currentPath, state);
      this.$router.push({
        path: path,
        query: {
-          dateData: this.dateData
+          startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
+          endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
        }
      })
    },
--- a/src/views/home/components/cost-Item.vue
+++ b/src/views/home/components/cost-Item.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="coreItem">
    <!-- 动态生成每个 item -->
-    <div @click="handleDashboardClick(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
+    <div @click="handleRouter(item.path)" class="item" v-for="(item, index) in itemList" :key="index">
      <div class="unit">{{ item.name }}</div>
      <div class="item-content">
        <!-- 左右内容容器 -->
@@ -34,6 +34,7 @@
 </template>

 <script>
+import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
 export default {
  name: "Container",
  components: {},
@@ -69,12 +70,23 @@ export default {
    }
  },
  methods: {
-    handleDashboardClick(path) {
+    handleRouter(path) {
+      const toPage = path.split('/').pop();
+      const currentPath = this.$route.path;
+      const state = {
+        dateData: {
+          startTime: this.dateData.startTime,
+          endTime: this.dateData.endTime
+        },
+        toPage
+      };
+      pushNavigation(currentPath, state);
+      saveNavigationState(currentPath, state);
      this.$router.push({
        path: path,
        query: {
-          factory: this.$route.query.factory ? this.$route.query.factory : 5,
-          dateData: this.dateData
+          startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
+          endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
        }
      })
    },
--- a/src/views/home/components/noRouterHeader.vue
+++ b/src/views/home/components/noRouterHeader.vue
@@ -20,7 +20,7 @@
           <el-dropdown-item divided  @click.native='handleToggle'>切换账号</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
-      <el-button type="text" class="return-btn" :title="'返回'" @click="handleReturn">
+      <el-button type="text" class="return-btn" :title="'返回'" v-if="showReturnBtn" @click="handleReturn">
        <svg-icon style="color: #0B58FF;" icon-class="returnIcon" />
      </el-button>
      <el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
@@ -46,6 +46,7 @@
 import { mapGetters } from 'vuex'
 import moment from 'moment'; // 引入moment
 import {getPath} from "@/utils/ruoyi";
+import { getNavStackLength, popNavigation } from '@/utils/navigationReturnState';
 export default {
  name: 'Header',
  props: {
@@ -67,12 +68,30 @@ export default {
      timeTimer: null,
      date: Date.now(), // 使用当前时间戳作为初始值
      activeTime: 1, // 默认月维度（0=日，1=月，2=年）
+      navStackLength: 0,
    }
  },
  computed:{
    ...mapGetters(['nickname']),
+    showReturnBtn() {
+      return this.navStackLength > 0;
+    }
  },
  watch: {
+    // 监听菜单参数变化，菜单进入时立即更新
+    '$route.query.menu': {
+      immediate: true,
+      handler(menuFlag) {
+        if (menuFlag === '1') {
+          this.$nextTick(() => {
+            this.updateNavStackLength();
+          });
+        }
+      }
+    },
+    $route() {
+      this.updateNavStackLength();
+    },
    activeTime(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.date = Date.now();
@@ -95,10 +114,18 @@ export default {
    }
  },
  mounted() {
-    // 初始化默认日期为当前月份
-    console.log('初始化日期选择器，当前时间戳:', this.date);
+    // 初始化导航栈长度
+    this.updateNavStackLength();
+    // 监听导航清空事件
+    window.addEventListener('navigation-cleared', this.handleNavigationCleared);
    this.$nextTick(() => {
-      this.emitTimeRange();
+      const hasRange =
+        this.dateData &&
+        ((this.dateData.startTime != null && this.dateData.startTime !== 0) ||
+          (this.dateData.endTime != null && this.dateData.endTime !== 0));
+      if (!hasRange) {
+        this.emitTimeRange();
+      }
    });
  },
  beforeDestroy() {
@@ -106,15 +133,32 @@ export default {
    if (this.timeTimer) {
      clearInterval(this.timeTimer);
    }
+    // 移除导航清空事件监听
+    window.removeEventListener('navigation-cleared', this.handleNavigationCleared);
  },
  methods: {
+    // 处理导航清空事件
+    handleNavigationCleared() {
+      this.updateNavStackLength();
+    },
+    // 更新导航栈长度
+    updateNavStackLength() {
+      this.navStackLength = getNavStackLength();
+    },
    changeFullScreen() {
      this.$emit('screenfullChange');
    },
    handleReturn() {
-      console.log('返回上一页');
      if (this.$router) {
-        this.$router.go(-1);
+        // 出栈获取前一个页面信息
+        const prev = popNavigation();
+        if (prev && prev.path) {
+          // 有前一个页面，跳转到该页面（showReturnBtn 会自动从 sessionStorage 读取最新值）
+          this.$router.push(prev.path);
+        } else {
+          // 没有前一个页面，使用默认返回
+          this.$router.go(-1);
+        }
      }
    },
    async logout() {
--- a/src/views/home/components/purchase-Item.vue
+++ b/src/views/home/components/purchase-Item.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div class="coreItem">
-      <div class="item" @click="handleRoute(item.route)" v-for="(item, index) in itemList" :key="index" v-if='index<4'>
+      <div class="item" @click="handleRouter(item.route)" v-for="(item, index) in itemList" :key="index" v-if='index<4'>
        <div class="name">{{ item.name }}</div>
        <div class="item-content">
          <div class="content-wrapper">
@@ -50,7 +50,7 @@
      </div>
    </div>
    <div class="itemBottom">
-        <div class="item" v-for="(item, index) in itemList" :key="index" @click="handleRoute(item.route)" v-if='index>=4'>
+        <div class="item" v-for="(item, index) in itemList" :key="index" @click="handleRouter(item.route)" v-if='index>=4'>
          <div class="unit">{{ item.name }}</div>
          <div class="item-content">
            <div class="content-wrapper">
@@ -95,6 +95,7 @@
 </template>

 <script>
+import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
 export default {
  name: "Container",
  components: {},
@@ -244,17 +245,26 @@ export default {
        };
      });
    },
-    handleRoute(route) {
-      if (route) {
-        this.$router.push({
-          path: route,
-          query: {
-            // 关键修复4：dateData是对象，需序列化后传递（否则路由query无法正常接收对象）
-            dateData: this.dateData
-          }
-        });
-      }
-    }
+    handleRouter(path) {
+      const toPage = path.split('/').pop();
+      const currentPath = this.$route.path;
+      const state = {
+        dateData: {
+          startTime: this.dateData.startTime,
+          endTime: this.dateData.endTime
+        },
+        toPage
+      };
+      pushNavigation(currentPath, state);
+      saveNavigationState(currentPath, state);
+      this.$router.push({
+        path: path,
+        query: {
+          startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
+          endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
+        }
+      })
+    },
  }
 };
 </script>
--- a/src/views/home/components/top-item.vue
+++ b/src/views/home/components/top-item.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="coreItem">
-    <div class="item" v-for="(item, index) in itemList" :key="index" @click="handleRouter(item)">
+    <div class="item" v-for="(item, index) in itemList" :key="index" @click="handleRouter(item.path)">
      <div class="unit">{{ item.unit }}</div>
      <div class="item-content">
        <div class="content-wrapper">
@@ -44,6 +44,7 @@
 </template>

 <script>
+import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
 export default {
  name: "Container",
  components: {},
@@ -96,16 +97,26 @@ export default {
    },

    // 处理路由跳转
-    handleRouter(obj) {
-      if (obj.path) {
-        this.$router.push({
-          path: obj.path,
-          query: {
-            dateData:this.dateData
-          }
-         });
-      }
-    }
+    handleRouter(path) {
+      const toPage = path.split('/').pop();
+      const currentPath = this.$route.path;
+      const state = {
+        dateData: {
+          startTime: this.dateData.startTime,
+          endTime: this.dateData.endTime
+        },
+        toPage
+      };
+      pushNavigation(currentPath, state);
+      saveNavigationState(currentPath, state);
+      this.$router.push({
+        path: path,
+        query: {
+          startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
+          endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
+        }
+      })
+    },
  }
 };
 </script>
--- a/src/views/home/components/top-product-item.vue
+++ b/src/views/home/components/top-product-item.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="coreItem">
-    <div class="item" @click="handleItemClick(index)" v-for="(item, index) in itemList"
+    <div class="item" @click="handleRouter(item.route)" v-for="(item, index) in itemList"
      :key="index">
      <div class="unit">{{ item.unit }}</div>
      <div class="item-content">
@@ -37,6 +37,7 @@
 </template>

 <script>
+import { pushNavigation, saveNavigationState } from '@/utils/navigationReturnState';
 export default {
  name: "Container",
  components: {},
@@ -118,19 +119,25 @@ export default {
      });
    },

-    handleItemClick(index) {
-      const currentItem = this.itemList[index];
-      console.log(`点击了第${index + 1}个item:`, currentItem.unit);
-      this.$emit('item-click', { index, ...currentItem });
-      this.activeIndex = index;
-      if (currentItem.route) {
-        this.$router.push({
-          path: currentItem.route,
-          query: {
-            dateData: this.dateData
-          }
-         });
-      }
+    handleRouter(path) {
+      const toPage = path.split('/').pop();
+      const currentPath = this.$route.path;
+      const state = {
+        dateData: {
+          startTime: this.dateData.startTime,
+          endTime: this.dateData.endTime
+        },
+        toPage
+      };
+      pushNavigation(currentPath, state);
+      saveNavigationState(currentPath, state);
+      this.$router.push({
+        path: path,
+        query: {
+          startTime: this.dateData && this.dateData.startTime != null ? String(this.dateData.startTime) : '',
+          endTime: this.dateData && this.dateData.endTime != null ? String(this.dateData.endTime) : ''
+        }
+      })
    },

    // 判断颜色的方法