add:国际化

lms/nladmin-ui/src/layout/components/Navbar.vue

@@ -1,26 +1,26 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <breadcrumb v-if="!topNav" id="breadcrumb-container" class="breadcrumb-container" />
+    <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <search id="header-search" class="right-menu-item" />
 
         <!--        <el-tooltip content="项目文档" effect="dark" placement="bottom">
-                  <Doc class="right-menu-item hover-effect" />
-                </el-tooltip>-->
+          <Doc class="right-menu-item hover-effect" />
+        </el-tooltip>-->
 
-        <el-tooltip content="全屏缩放" effect="dark" placement="bottom">
+        <el-tooltip :content="$t('common.fz')" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
-        <notice-icon class="right-menu-item"/>
-        <notice-icon-reader ref="noticeIconReader"/>
+        <notice-icon class="right-menu-item" />
+        <notice-icon-reader ref="noticeIconReader" />
 
         <!--        <el-tooltip content="布局设置" effect="dark" placement="bottom">
-                  <size-select id="size-select" class="right-menu-item hover-effect" />
-                </el-tooltip>-->
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip>-->
 
       </template>
       <img :src="Avatar" class="user-avatar">
@@ -31,21 +31,32 @@
         <el-dropdown-menu slot="dropdown">
           <span style="display:block;" @click="show = true">
             <el-dropdown-item>
-              布局设置
+              {{ $t('common.Layout_setting') }}
             </el-dropdown-item>
           </span>
           <router-link to="/user/center">
             <el-dropdown-item>
-              个人中心
+              {{ $t('common.Personal_center') }}
             </el-dropdown-item>
           </router-link>
           <span style="display:block;" @click="open">
             <el-dropdown-item divided>
-              退出登录
+              {{ $t('common.Log_out') }}
             </el-dropdown-item>
           </span>
         </el-dropdown-menu>
       </el-dropdown>
+      <el-dropdown class="right-menu-item" style="font-size: 14px" trigger="click" @command="langChange">
+        <span class="el-dropdown-link" style="font-size: 18px">
+          {{ language }} <i class="el-icon-caret-bottom" />
+        </span>
+        <!-- 国际化开发：1.修改语言列表-->
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
+          <el-dropdown-item divided command="en">English</el-dropdown-item>
+          <el-dropdown-item divided command="iv">Vietnamese</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
   </div>
 </template>
@@ -76,15 +87,16 @@ export default {
     Doc,
     TopNav
   },
-  created() {
-    this.initWebSocket()
-  },
   data() {
     return {
       Avatar: Avatar,
-      dialogVisible: false
+      dialogVisible: false,
+      language: '简体中文'
     }
   },
+  created() {
+    this.initLang()
+  },
   computed: {
     ...mapGetters([
       'sidebar',
@@ -110,13 +122,39 @@ export default {
     }
   },
   methods: {
+    initLang() {
+      // 初始化语言
+      let item = localStorage.getItem('lang')
+      if (item === null) {
+        item = 'zh'
+      }
+      localStorage.setItem('lang', item)
+      this.setLang(item)
+    },
+    // 中英文切换
+    langChange(command) {
+      this.$i18n.locale = command
+      localStorage.setItem('lang', command)
+      this.setLang(command)
+      location.reload()
+    },
+    // 国际化开发：2.设置
+    setLang(command) {
+      if (command === 'en') {
+        this.language = 'English'
+      } else if (command === 'zh') {
+        this.language = '简体中文'
+      } else if (command === 'iv') {
+        this.language = 'Vietnamese'
+      }
+    },
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
     open() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$t('common.Tip13'), this.$t('common.Tips'), {
+        confirmButtonText: this.$t('common.Confirm'),
+        cancelButtonText: this.$t('common.Cancel'),
         type: 'warning'
       }).then(() => {
         this.logout()
@@ -126,43 +164,6 @@ export default {
       this.$store.dispatch('LogOut').then(() => {
         location.reload()
       })
-    },
-    initWebSocket() {
-      if (typeof (WebSocket) === 'undefined') {
-        this.$notify({
-          title: '提示',
-          message: '当前浏览器无法接收实时报警信息，请使用谷歌浏览器！',
-          type: 'warning',
-          duration: 0
-        })
-      }
-      // const wsUri = (process.env.VUE_APP_WS_API === '/' ? '/' : (process.env.VUE_APP_WS_API + '/')) + 'messageInfo'
-      const wsUri = window.g.prod.VUE_APP_BASE_API.replace('http', 'ws') + '/webSocket/' + 'messageInfo'
-      this.websock = new WebSocket(wsUri)
-      this.websock.onerror = this.webSocketOnError
-      this.websock.onmessage = this.webSocketOnMessage
-    },
-    webSocketOnError(e) {
-      this.$notify({
-        title: 'WebSocket连接发生错误',
-        type: 'error',
-        duration: 0
-      })
-    },
-    webSocketOnMessage(e) {
-      const data = JSON.parse(e.data)
-      if (data.msgType === 'INFO') {
-        console.log('data', data)
-        this.$bus.emit(data.msg.data, data.msg.msgType)
-      } else if (data.msgType === 'ERROR') {
-        this.$notify({
-          title: '',
-          message: data.msg,
-          dangerouslyUseHTMLString: true,
-          type: 'error',
-          duration: 0
-        })
-      }
     }
   }
 }