注册页面中英文替换 修改电气管理顶部导航栏布局

wuyouming666

2023-09-13 eb967d7573a8297e493d455dfce2c77319215990

 CanadaMes-ui/src/layout/index.vue

@@ -1,29 +1,27 @@
<template>
  <el-container style="flex: 1;">
 
  <el-container style="flex: 1;height:100%;">
    <div style="width: 200px;background-color: #222f3e" :style="{width: isCollapse?'70px':'250px'}">
      <el-aside :width="isCollapse?'70px':'250px'">
        <el-col :gutter="20">
          <el-row :span="4">
            <div class="logo" @click="goToHome">
  <div class="sys-name" v-show="!isCollapse">{{ $t('northglassMESsystem') }}</div>
</div>
              <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>
              
                     <!--一级菜单-->
                      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">
@@ -33,9 +31,10 @@
                  <span>{{ item.name }}</span>
                </template>
                <!--二级菜单-->
              
                <el-menu-item :index="'/'+menu.router"
                              v-for="menu in item.menuLists" :key="menu.id"
                              @click="saveNavState('/'+menu.router)"   @select="saveNavState" :default-active="$route.path">
                              @click="addTag(menu.router)">
                  <template slot="title">
                    <!--图标-->
                    <i :class="menu.icon"></i>
@@ -43,79 +42,70 @@
                    <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 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">
          <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse"></el-button>
        </div>
          <el-submenu index="1" class="user-icon">
        
            <template slot="title">
              <el-avatar src="../assets/emi.png">
              </el-avatar>
            </template>
            <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
            <el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item>
          </el-submenu>
          <div class="header-left">
            <el-button :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="toggleCollapse" style="height:30px;"></el-button>
          </div>
          <div class="tagContainer" style="display: flex;">
  <tag v-for="(tag, index) in tags" :key="index" :tag="tag" @removeTag="removeTag(index)" @switchTag="switchTag(index)"></tag>
</div>
          <template>
  <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
    <el-form ref="form" :model="formData" label-width="100px">
      <el-form-item label="旧密码">
        <el-input v-model="formData.oldPassword" type="password" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="formData.newPassword" type="password" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认新密码">
        <el-input v-model="formData.confirmPassword" type="password" show-password></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="savePassword">保存</el-button>
    </div>
  </el-dialog>
</template>
            <el-submenu index="1" class="custom-submenu"  >
              <template slot="title">
                <el-avatar src="../assets/emi.png"   style="width:20px;height:20px;margin-top:30px;background-color: white;"></el-avatar>
              </template>
              <el-menu-item index="1-1" @click="logout">{{ $t('exit') }}</el-menu-item>
              <el-menu-item index="1-2" @click="showChangePasswordDialog">{{ $t('changePassword') }}</el-menu-item>
            </el-submenu>
          </template>
          <template>
            <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%">
              <el-form ref="form" :model="formData" label-width="100px">
                <el-form-item label="旧密码">
                  <el-input v-model="formData.oldPassword" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                  <el-input v-model="formData.newPassword" type="password" show-password></el-input>
                </el-form-item>
                <el-form-item label="确认新密码">
                  <el-input v-model="formData.confirmPassword" type="password" show-password></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="savePassword">保存</el-button>
              </div>
            </el-dialog>
          </template>
        </el-menu>
      </el-header>
      <el-main>
        <router-view/>
        <keep-alive>
          <router-view/>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>



<script>
import {selectList} from '../api/menuList'
import {changePassword} from '../api/user'
import {removeToken} from "../utils/auth";
import { selectList } from '../api/menuList'
import { changePassword } from '../api/user'
import { removeToken } from "../utils/auth";
import LanguageMixin from '../lang/LanguageMixin'
import { mapState, mapMutations } from 'vuex';
 import Tag from '../layout/tag.vue';
 import store from '../store'; 
import Tag from '../layout/tag.vue';
import store from '../store';

export default {
  name: "Layout",
@@ -123,7 +113,6 @@
  mixins: [LanguageMixin],
  data() {
    return {
   
      activeTag: '', // 当前激活的标签
      dialogVisible: false,
      formData: {
@@ -131,7 +120,6 @@
        newPassword: '',
        confirmPassword: ''
      },
      
      menuList: [],
      isCollapse: false,
      activePath: '',
@@ -142,13 +130,13 @@
      }
    }
  },
   components: {
   Tag
   },
  components: {
    Tag
  },
  created() {
    selectList(this.menuListForm).then(res => {
      this.menuList = res.data
     

      const language = this.$i18n.locale;
      if (language === 'en-US') {
        this.replaceChineseWithEnglish(this.menuList);
@@ -161,34 +149,31 @@
    ...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
        }
      }
      this.$router.push('/home');
    },
    // 关闭标签时触发的方法
    removeTag(tag) {
      this.removeTag(tag); // 从 Vuex Store 中移除标签
    },
 
    ...mapMutations('tags', ['addTag', 'removeTag', 'switchTag']),
    addTag(router) {
  let submenuItem;
  const menuItem = this.menuList.find(item => item.menuLists.some(menu => menu.router === router));
  if (menuItem) {
    submenuItem = menuItem.menuLists.find(menu => menu.router === router);
  }
  if (submenuItem) {
    const tag = submenuItem.router;
    this.$store.commit('tags/addTag', tag);
  }
},


    removeTag(index) {
      this.$store.commit('tags/removeTag', index); // 从 Vuex Store 中移除标签
    },
    showChangePasswordDialog() {
      this.dialogVisible = true;
    },
@@ -203,25 +188,16 @@
        console.log(res.data);
        this.$message.success('密码修改成功');
        removeToken()
      this.$router.push('/login')

        this.$router.push('/login')
      }).catch(() => {
       
      });

      this.dialogVisible = false;
    },

   

    
    
    toggleCollapse: function () {
      this.isCollapse = !this.isCollapse;
    },
    // saveNavState: function (activePath) {
    //   window.sessionStorage.setItem('activePath', activePath)
    // },
    replaceChineseWithEnglish(menuData) {
      // 定义中英文对照关系对象
      const translation = {
@@ -235,7 +211,9 @@
        '权限管理': 'PermissionManagement',
        '权限列表': 'PermissionList',
        '角色管理': 'RoleManagement',
        '角色列表': 'RoleList'
        '角色列表': 'RoleList',
        '电气管理': 'Electrical management',
        '主页': 'Home'
        // 根据实际需求继续添加对照关系
      };

@@ -245,64 +223,84 @@
          subMenu.name = translation[subMenu.name] || subMenu.name;
        });
      });

      
    }
  },
  watch: {
    '$route'(to) {
      // 切换路由时更新激活的标签
      const tag = this.menuList.some(item => item.menuLists.some(menu => '/' + menu.router === to.path));
      if (tag) {
        this.activeTag = tag;
      }
    }
  }
  }
  

}
</script>

<style scoped lang="less">
.header-container {
  display: flex;
  justify-content: flex-start;

.el-menu--horizontal > .el-submenu .el-submenu__title {
  height: 45px !important;
}
.custom-submenu  {
 
 
 height: 90px   !important;
}


.header-container {

 height: 30px   !important; /* 设置较小的高度 */
}



.header-left {
  margin-right: auto;
 margin-right: auto;
width:30px;
 
}
.el-aside {
  height: 100vh;
  background-color: #222f3e;
  line-height: 200px;
 height: 100vh;
 background-color: #222f3e;
 line-height: 200px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
 width: 200px;
 min-height: 400px;
}

.el-menu-demo {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
 display: flex;
 width: 100%;
 height: 100%;
 justify-content: flex-end;
 align-items: center;

}

.el-menu-vertical-demo {
  border: 0;
 border: 0;
}

.logo {
  background-color: #222f3e;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
 background-color: #222f3e;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 60px;

  .sys-name {
    font-size: 20px;
    color: #ffffff;
    margin-left: 10px;
  }
 .sys-name {
   font-size: 20px;
   color: #ffffff;
   margin-left: 10px;
 }
}

.el-header {
  padding: 0;
  background-color: #576574;

 background-color: #576574;
}
</style>
</style>