wuyouming666
2023-09-01 5313d8736c40de0693f89dce77cb93e9983b5ace
CanadaMes-ui/src/layout/index.vue
@@ -5,16 +5,25 @@
      <el-aside :width="isCollapse?'70px':'250px'">
        <el-col :gutter="20">
          <el-row :span="4">
            <div class="logo">
              <div class="sys-name" v-show="!isCollapse">{{ $t('northglassMESsystem') }}</div>
            </div>
            <div class="logo" @click="goToHome">
  <div class="sys-name" v-show="!isCollapse">{{ $t('northglassMESsystem') }}</div>
</div>
          </el-row>
          <el-row :span="20">
            <el-menu :default-active="activePath" class="el-menu-vertical-demo"
                     background-color="#222f3e" text-color="#fff" active-text-color="#ffd04b"
                     :collapse="isCollapse" :unique-opened="true"
                     :collapse-transition="false" :router="true">
              <!--一级菜单-->
                     <el-menu-item index="/" @click="goToHome">
  <template slot="title">
    <!--图标-->
    <i class="el-icon-menu"></i>
    <!--文本-->
    <span>{{ $t('home') }}</span>
  </template>
</el-menu-item>
                     <!--一级菜单-->
              <el-submenu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
                <!--一级菜单模板区域-->
                <template slot="title">
@@ -26,7 +35,7 @@
                <!--二级菜单-->
                <el-menu-item :index="'/'+menu.router"
                              v-for="menu in item.menuLists" :key="menu.id"
                              @click="saveNavState('/'+menu.router)">
                              @click="saveNavState('/'+menu.router)"   @select="saveNavState" :default-active="$route.path">
                  <template slot="title">
                    <!--图标-->
                    <i :class="menu.icon"></i>
@@ -34,19 +43,27 @@
                    <span>{{ menu.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-menu>
          </el-row>
        </el-col>
      </el-aside>
    </div>
    <el-container>
      <div>
  </div>
      <el-header class="header-container">
        <!-- <div class="tagContainer">
               <tag></tag>
        </div> -->
        </div>  -->
        <div class="tagContainer">
      <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag"></tag>
    </div>
        <el-menu :default-active="activePath1" class="el-menu-demo" mode="horizontal"
                 background-color="#576574" text-color="#fff" active-text-color="#ffd04b">
                 <div class="header-left">
@@ -55,7 +72,7 @@
          <el-submenu index="1" class="user-icon">
        
            <template slot="title">
              <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
              <el-avatar src="../assets/emi.png">
              </el-avatar>
            </template>
            <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
@@ -96,13 +113,18 @@
import {changePassword} from '../api/user'
import {removeToken} from "../utils/auth";
import LanguageMixin from '../lang/LanguageMixin'
// import Tag from '../layout/tag.vue';
import { mapState, mapMutations } from 'vuex';
 import Tag from '../layout/tag.vue';
 import store from '../store';
export default {
  name: "Layout",
  store,
  mixins: [LanguageMixin],
  data() {
    return {
      activeTag: '', // 当前激活的标签
      dialogVisible: false,
      formData: {
        oldPassword: '',
@@ -120,9 +142,9 @@
      }
    }
  },
  // components: {
  //   Tag
  // },
   components: {
   Tag
   },
  created() {
    selectList(this.menuListForm).then(res => {
      this.menuList = res.data
@@ -135,12 +157,36 @@
      this.activePath = window.sessionStorage.getItem('activePath')
    });
  },
  computed: {
    ...mapState('tags', ['tags'])
  },
  methods: {
    logout: function () {
      removeToken()
      this.$router.push('/login')
    },
    goToHome() {
    this.$router.push('/home');
  },
   // 使用 mapMutations 辅助函数调用 Store 中的 mutations
   ...mapMutations('tags', ['addTag', 'removeTag']),
    // 切换标签时触发的方法
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath);
      const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === activePath));
      if (menuItem) {
        const submenuItem = menuItem.menuLists.find(menu => menu.router === activePath);
        if (submenuItem) {
          const tag = submenuItem.name;
          this.$store.commit('tags/addTag', tag);  // 调用 Vuex Store 中的 addTag mutation
        }
      }
    },
    // 关闭标签时触发的方法
    removeTag(tag) {
      this.removeTag(tag); // 从 Vuex Store 中移除标签
    },
 
    showChangePasswordDialog() {
@@ -173,9 +219,9 @@
    toggleCollapse: function () {
      this.isCollapse = !this.isCollapse;
    },
    saveNavState: function (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    },
    // saveNavState: function (activePath) {
    //   window.sessionStorage.setItem('activePath', activePath)
    // },
    replaceChineseWithEnglish(menuData) {
      // 定义中英文对照关系对象
      const translation = {