系统多语言逻辑实现

src/components/SearchForm/index.vue

@@ -15,7 +15,7 @@
         </a-col>
         <a-button class="search-btn" type="primary" @click="onSearch">
           <img src="@/assets/images/global/search.png" alt="" />
-          Search
+          {{$t('m.system.search')}}
         </a-button>
         <slot name="additional"></slot>
       </a-row>

src/components/tools/UserMenu.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="user-wrapper" :class="theme">
+    <span @click="changeLang('zh-CN')">zh</span>
+    <span style="margin-left: 10px;" @click="changeLang('en-US')">en</span>
     <header-notice class="action"/>
     <a-dropdown>
       <span class="action action-full ant-dropdown-link user-dropdown-menu">
@@ -56,11 +58,12 @@
   import { mixinDevice } from '@/utils/mixin.js'
   import { getFileAccessHttpUrl,getAction } from "@/api/manage"
   import Vue from 'vue'
-  import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
+import { UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
+import i18nMixin from '@/store/i18n-mixin'
 
   export default {
     name: "UserMenu",
-    mixins: [mixinDevice],
+    mixins: [mixinDevice,i18nMixin],
     data(){
       return{
         // update-begin author:sunjianlei date:20200219 for: 头部菜单搜索规范命名 --------------
@@ -117,7 +120,11 @@
       },
       // update-end author:sunjianlei date:20200219 for: 菜单搜索改为动态组件，在手机端呈现出弹出框
     },
-    methods: {
+  methods: {
+    changeLang(key) {
+        this.$i18n.locale = key
+        this.setLang(key)
+      },
       /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
       showClick() {
         this.searchMenuVisible = true

src/locales/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+  locale: localStorage.getItem('APP_LANGUAGE') || 'en-US',
+  //this.$i18n.locale // 通过切换locale的值来实现语言切换
+  messages: {
+   'zh-CN': require('./lang/zh'), // 中文语言包
+   'en-US': require('./lang/en') // 英文语言包
+  }
+})
+ 
+export default i18n

src/locales/lang/en.js

@@ -0,0 +1,15 @@
+export const m = {
+  common: {
+    search: "Search",
+  },
+  system: {
+    user: "User",
+    name: "Name",
+    role: "Role",
+    search: "Search",
+    add: "Add",
+    edit: "Edit",
+    delete: "Delete",
+    num: "NO"
+  }
+}

src/locales/lang/zh.js

@@ -0,0 +1,15 @@
+export const m = {
+  common: {
+    search: "搜索",
+  },
+  system: {
+    user: "用户",
+    name: "名称",
+    role: "角色",
+    search: "搜索",
+    add: "添加",
+    edit: "编辑",
+    delete: "删除",
+    num: "序号"
+  }
+}

src/main.js

@@ -7,6 +7,7 @@ import Storage from 'vue-ls'
 import router from './router'
 import store from './store/'
 import { VueAxios } from "@/utils/request"
+import i18n from './locales'
 
 require('@jeecg/antd-online-mini')
 require('@jeecg/antd-online-mini/dist/OnlineForm.css')
@@ -95,6 +96,7 @@ function main() {
   new Vue({
     router,
     store,
+    i18n,
     mounted () {
       store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
       store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))

src/store/i18n-mixin.js

@@ -0,0 +1,16 @@
+import { mapState } from 'vuex'
+
+const i18nMixin = {
+  computed: {
+    ...mapState({
+      currentLang: state => state.app.lang
+    })
+  },
+  methods: {
+    setLang (lang) {
+      this.$store.dispatch('setLang', lang)
+    }
+  }
+}
+
+export default i18nMixin

src/store/modules/app.js

@@ -21,6 +21,7 @@ const app = {
     device: 'desktop',
     theme: '',
     layout: '',
+    lang: 'zh-CN',
     contentWidth: '',
     fixedHeader: false,
     fixSiderbar: false,
@@ -78,9 +79,19 @@ const app = {
     SET_MULTI_PAGE (state, multipageFlag) {
       Vue.ls.set(DEFAULT_MULTI_PAGE, multipageFlag)
       state.multipage = multipageFlag
+    },
+    APP_LANGUAGE: (state, lang, antd = {}) => {
+      state.lang = lang
+      state._antLocale = antd
+      Vue.ls.set("APP_LANGUAGE", lang)
     }
   },
   actions: {
+    setLang ({ commit }, lang) {
+      // return new Promise((resolve, reject) => {
+        commit('APP_LANGUAGE', lang)
+      // })
+    },
     setSidebar: ({ commit }, type) => {
       commit('SET_SIDEBAR_TYPE', type)
     },

src/views/system/UserList.vue

@@ -5,15 +5,16 @@
       <a-space style="float: right" class="btn-group" slot="additional">
         <a-button @click="handleAdd" type="primary">
           <img src="@/assets/images/global/add.png" alt="" />
-          Add
+          <!-- Add -->
+          {{$t('m.system.add')}}
         </a-button>
         <a-button @click="handleEdit" type="primary">
           <img src="@/assets/images/global/edit.png" alt="" />
-          Edit
+          {{$t('m.system.edit')}}
         </a-button>
         <a-button @click="onDel" type="primary">
           <img src="@/assets/images/global/delete.png" alt="" />
-          Delete
+          {{$t('m.system.delete')}}
         </a-button>
         <a-button @click="handleReset" type="primary">
           <img src="@/assets/images/global/reset-pwd.png" alt="" />
@@ -266,7 +267,8 @@ export default {
       return [
         {
           type: 'a-input',
-          label: 'User',
+          label: this.$t('m.system.user'),
+          // label: 'User',
           name: 'username',
           props: {
             style: {
@@ -279,7 +281,7 @@ export default {
         },
         {
           type: 'a-input',
-          label: 'Name',
+          label: this.$t('m.system.name'),
           name: 'realname',
           props: {
             style: {
@@ -292,7 +294,7 @@ export default {
         },
         {
           type: 'custom-select',
-          label: 'Role',
+          label: this.$t('m.system.role'),
           name: 'roleId',
           props: {
             options: this.roleOptions,