#

Junjie

2024-07-16 83f7f6af91c922b1efe612f115b7b6ac82d6150b

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

@@ -1,5 +1,5 @@
<script setup>
import { nextTick, ref, inject } from 'vue';
import { nextTick, ref, inject, onMounted } from 'vue';
import { useRouter } from "vue-router";
import { get, post, postForm } from '@/utils/request.js'
import { logout } from '@/config.js';
@@ -13,11 +13,13 @@
  RedoOutlined,
  UserOutlined,
  TranslationOutlined,
  ApartmentOutlined,
} from "@ant-design/icons-vue";
import { formatMessage } from '@/utils/localeUtils.js';
import { formatMessage, loadData } from '@/utils/localeUtils.js';

const globalState = inject('globalState');
const selectedKeys = ref([]);
let openKeys = ref([]);
const collapsed = ref(false);
const router = useRouter();
let routerCache = ref([]);
@@ -25,10 +27,33 @@
let currentCache = ref(null);
let isRouterAlive = ref(true);
const menuCache = ref([]);
const hostList = ref([]);

const components = {
  ...Icons,
};

onMounted(() => {
  let name = router.currentRoute.value.name;
  let path = router.currentRoute.value.path;
  if (currentCache.value == null && path != '/') {
    get('/api/menu/get/route', {
      route: path
    }).then((resp) => {
      let result = resp.data;
      let data = result.data;
      if (result.code == 200) {
        currentCache.value = name;
        routerCache.value.push(name)
        routerCacheList.value.push({
          key: path,
          languageId: data.languageId,
          name: name,
        })
      }
    })
  }
})

getMenu()
function getMenu() {
@@ -71,8 +96,6 @@
    }
  })

  console.log(tmpList);

  if (tmp == 0) {
    router.push({
      path: '/'
@@ -106,6 +129,14 @@
  }
}

function closeAllTabs() {
  routerCache.value = [];
  routerCacheList.value = [];
  router.push({
    path: '/'
  })
}

function switchTabs(item) {
  router.push({
    path: item.key
@@ -113,41 +144,88 @@

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

  // open menu
  let arr = item.key.split("/");
  let key = '/' + arr[1];
  openKeys.value = [key]
}

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

getHostList()
function getHostList() {
  post('/api/show/host.action', {}).then((resp) => {
    let result = resp.data;
    let data = result.data;
    let hostId = data.hostId;
    if (data.root) {
      post('/api/host/list', {}).then((resp) => {
        let result = resp.data;
        let data = result.data;
        hostList.value = data;
        data.forEach((item) => {
          if (item.id == hostId) {
            globalState.currentHost = item;
          }
        })
      })
    }
  })
}

const switchHost = (item) => {
  globalState.currentHost = item;
  postForm('/api/root/change/host/auth', {
    hostId: item.id
  }).then((resp) => {
    let result = resp.data;
    if (result.code == 200) {
      window.location.reload();
    } else {
      message.error(formatMessage('common.fail', '加载失败'));
    }
  })
}

const windowReload = () => {
  window.location.reload();
}

</script>

<template>
  <a-layout class="main">
    <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
    <a-layout-sider class="main-sider" v-model:collapsed="collapsed" :trigger="null" collapsible theme="dark">
      <div class="logo" />
      <a-menu v-for="(item, index) in menuCache" :key="index" v-model:selectedKeys="selectedKeys" @select="menuSelect"
        theme="dark" mode="inline">
      <a-menu v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys" @select="menuSelect" theme="dark" mode="inline">
        <div>
          <a-menu-item key="/" name="主页">
            <HomeOutlined /> {{ formatMessage('common.home', '主页') }}
          </a-menu-item>
        </div>

        <a-sub-menu v-if="item.type == 0">
          <template #title>
            <span>
              <component :is="components[ref(item.icon).value]" />
              {{ 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" :languageId="child.languageId">
              {{ formatMessage(child.languageId, child.name) }}
            </a-menu-item>
          </div>
        </a-sub-menu>
        <div v-for="(item, index) in menuCache" :key="index">
          <a-sub-menu :key="item.route" v-if="item.type == 0">
            <template #title>
              <span>
                <component :is="components[ref(item.icon).value]" />
                {{ 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"
                :languageId="child.languageId">
                {{ formatMessage(child.languageId, child.name) }}
              </a-menu-item>
            </div>
          </a-sub-menu>
        </div>
      </a-menu>

    </a-layout-sider>
@@ -157,17 +235,35 @@
          <div class="header-top-left">
            <MenuUnfoldOutlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
            <MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
            <RedoOutlined class="trigger" @click="windowReload()" />
          </div>
          <div class="header-top-right">
            <div class="trigger">
            <div class="trigger" v-if="globalState.currentHost">
              <a-dropdown>
                <TranslationOutlined />
                <div>
                  <ApartmentOutlined />
                  {{ globalState.currentHost?.name }}
                </div>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="switchLocale('enUS')"
                      :class="globalState.locale == 'enUS' ? 'active' : ''">English</a-menu-item>
                    <a-menu-item @click="switchLocale('zhCN')"
                      :class="globalState.locale == 'zhCN' ? 'active' : ''">简体中文</a-menu-item>
                    <a-menu-item v-for="(item, index) in hostList" :key="index" @click="switchHost(item)"
                      :class="globalState.currentHost?.id == item.id ? 'active' : ''">{{ item.name }}</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </div>
            <div class="trigger">
              <a-dropdown>
                <div>
                  <TranslationOutlined />
                  {{ globalState.localeList[globalState.locale]?.desc }}
                </div>
                <template #overlay>
                  <a-menu>
                    <div v-for="(item, key) in globalState.localeList" :key="key">
                      <a-menu-item @click="switchLocale(key)" :class="globalState.locale == key ? 'active' : ''">{{
                        item.desc }}</a-menu-item>
                    </div>
                  </a-menu>
                </template>
              </a-dropdown>