#

Junjie

2024-07-02 d4f427bf7c0ff1cf0ed1ac420bba8a063f9ef840

 zy-asrs-admin/src/views/IndexView.vue

@@ -1,9 +1,10 @@
<script setup>
import { nextTick, ref, inject, computed } from 'vue';
import { nextTick, ref, inject } from 'vue';
import { useRouter } from "vue-router";
import { get, post } from '@/utils/request.js'
import { get, post, postForm } from '@/utils/request.js'
import { logout } from '@/config.js';
import * as Icons from "@ant-design/icons-vue";
import { message } from 'ant-design-vue';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
@@ -20,7 +21,7 @@
const collapsed = ref(false);
const router = useRouter();
let routerCache = ref([]);
let routerCacheMap = ref(new Map());
let routerCacheList = ref([]);
let currentCache = ref(null);
let isRouterAlive = ref(true);
const menuCache = ref([]);
@@ -30,10 +31,8 @@
};

getMenu()

function getMenu() {
  post('/api/menu/tree', {}).then((result) => {
    console.log(result.data.data);
  get('/api/auth/menu', {}).then((result) => {
    menuCache.value = result.data.data;
  })
}
@@ -45,56 +44,81 @@

  let name = item.item.name;
  currentCache.value = name;
  console.log(routerCache.value);

  if (name != undefined && routerCache.value.indexOf(name) == -1) {
    routerCache.value.push(item.item.name)
    routerCacheMap.value.set(name, item.key)
    routerCacheList.value.push({
      key: item.key,
      languageId: item.item.languageId,
      name: item.item.name,
    })
  }
}

function closeTabs(name) {
function closeTabs(param) {
  let name = param.name;
  let tmp = []
  let tmpList = [];
  routerCache.value.forEach((item) => {
    if (item != name) {
      tmp.push(item);
    }
  })

  routerCacheList.value.forEach((item) => {
    if (item.name != name) {
      tmpList.push(item);
    }
  })

  console.log(tmpList);

  if (tmp == 0) {
    router.push({
      path: '/'
    })
    routerCache.value.push('home')
    routerCacheMap.value.set('home', '/')
    routerCacheList.value.push({
      key: '/',
      languageId: 'common.home',
      name: '主页',
    })
    selectedKeys.value = ['/']
  } else {
    switchTabs(tmp[0]);
    switchTabs(tmpList[0]);
  }
  routerCache.value = tmp;
  routerCacheList.value = tmpList;
}

function reloadTabs() {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  })
  const hide = message.loading(formatMessage('common.loading', '加载中'));
  try {
    isRouterAlive.value = false;
    nextTick(() => {
      isRouterAlive.value = true;
      message.success(formatMessage('common.success', '加载成功'));
    })
  } catch (error) {
    message.error(formatMessage('common.fail', '加载失败'));
  } finally {
    hide();
  }
}

function switchTabs(name) {
function switchTabs(item) {
  router.push({
    path: routerCacheMap.value.get(name)
    path: item.key
  })

  currentCache.value = name;
  selectedKeys.value = [routerCacheMap.value.get(name)]

  console.log(routerCacheMap, name, routerCacheMap.value.get(name));

  currentCache.value = item.name;
  selectedKeys.value = [item.key]
}

const switchLocale = (locale) => {
  globalState.locale = locale;
  localStorage.setItem('locale', locale)
  reloadTabs()
}

</script>
@@ -107,7 +131,7 @@
        theme="dark" mode="inline">
        <div>
          <a-menu-item key="/" name="主页">
            <HomeOutlined /> {{ formatMessage('common.home','主页') }}
            <HomeOutlined /> {{ formatMessage('common.home', '主页') }}
          </a-menu-item>
        </div>

@@ -115,12 +139,12 @@
          <template #title>
            <span>
              <component :is="components[ref(item.icon).value]" />
              {{ item.name }}
              {{ formatMessage(item.languageId, item.name) }}
            </span>
          </template>
          <div v-for="(child, idx) in item.children">
            <a-menu-item v-if="child.status == 1" :key="child.route" :name="child.name">
              {{ child.name }}
            <a-menu-item v-if="child.status == 1" :key="child.route" :name="child.name" :languageId="child.languageId">
              {{ formatMessage(child.languageId, child.name) }}
            </a-menu-item>
          </div>
        </a-sub-menu>
@@ -156,7 +180,7 @@
                </a>
                <template #overlay>
                  <a-menu @click="logout">
                    <a-menu-item key="logout">{{ formatMessage('common.account.logout','退出') }}</a-menu-item>
                    <a-menu-item key="logout">{{ formatMessage('common.account.logout', '退出') }}</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
@@ -166,12 +190,12 @@
      </a-layout-header>
      <a-layout-content class="content-view">
        <div class="tabs-fixed">
          <div v-for="(item, index) in routerCache" :key="index" @click="switchTabs(item)" class="tabs-item"
            :class="currentCache == item ? 'tabs-item-active' : ''">
            <div :class="currentCache == item ? '' : 'tabs-item-reload-none'" @click="reloadTabs" @click.stop>
          <div v-for="(item, index) in routerCacheList" :key="index" @click="switchTabs(item)" class="tabs-item"
            :class="currentCache == item.name ? 'tabs-item-active' : ''">
            <div :class="currentCache == item.name ? '' : 'tabs-item-reload-none'" @click="reloadTabs" @click.stop>
              <RedoOutlined />
            </div>
            <div>{{ item }}</div>
            <div>{{ formatMessage(item.languageId, item.name) }}</div>
            <div @click="closeTabs(item)" @click.stop>
              <CloseOutlined />
            </div>