优化多语言暂存

package.json

@@ -35,7 +35,7 @@
     "viewerjs": "^1.11.6",
     "vue": "^2.6.14",
     "vue-countupjs": "^1.0.0",
-    "vue-i18n": "^5.0.3",
+    "vue-i18n": "^8.27.0",
     "vue-image-viewer": "^1.1.8",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",

src/HManagement/clueManage/clue_public/modules/distribution.vue

@@ -227,7 +227,7 @@ export default {
     this.tablecols2 = this.tool.tabelCol(this.$route.name)[
       "canSelectAgentTable"
     ].tablecols;
-    this.lang = sessionStorage.getItem("lang");
+    this.lang = localStorage.getItem("lang");
   },
 };
 </script>

src/HManagement/clueManage/clue_public/modules/distribution_saler.vue

@@ -268,7 +268,7 @@ export default {
     this.tablecols2 = this.tool.tabelCol(this.$route.name)[
       "canSelectSalerTable"
     ].tablecols;
-    this.lang = sessionStorage.getItem("lang");
+    this.lang = localStorage.getItem("lang");
   },
 };
 </script>

src/main.js

@@ -1,7 +1,6 @@
 import './public-path';
 
 import Vue from 'vue';
-import VueI18n from 'vue-i18n'
 
 import axios from "axios";
 // import "sv-print/dist/style.css";
@@ -39,6 +38,7 @@ import '@/style/theme/font-icon/iconfont.css';
 
 import {messages} from './locales/lang.json';
 
+
 Vue.use(Steps)
 Vue.use(Table)
 
@@ -89,15 +89,17 @@ Vue.component('sort', sort)
 /* 标签组件 */
 Vue.component('tagPanl',tagPanl)
 
-Vue.use(ElementUI);
-Vue.use(VueI18n)
+import i18n from './utils/i18n.js'
+Vue.use(ElementUI, {
+  i18n: (key, value) => i18n.t(key, value) 
+});
 
 ElementUI.TableColumn.props.showOverflowTooltip ={type:Boolean, default: true}
 
 ElementUI.Dialog.props.closeOnClickModal.default = false;
 ElementUI.Drawer.props.showClose.default = false;
 
-Vue.config.lang = 'ZH'
+// Vue.config.lang = 'ZH'
 /* table懒加载 */
 // Vue.directive('tableLoad',{
 //   bind (el,binding) {
@@ -122,5 +124,6 @@ Vue.config.lang = 'ZH'
 new Vue({
   router,
   store,
+  i18n,
   render: (h) => h(App),
 }).$mount('#app');

src/utils/i18n.js

@@ -0,0 +1,47 @@
+import Vue from "vue"
+import VueI18n from "vue-i18n"
+import api from '../api/api';
+
+import ElementLocale from 'element-ui/lib/locale'
+import enLocale from 'element-ui/lib/locale/lang/en'
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+import ruLocale from 'element-ui/lib/locale/lang/ru-RU'
+
+ElementLocale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
+Vue.use(VueI18n); // 全局注册国际化包
+
+let languages = localStorage.getItem('languages') ? JSON.parse(localStorage.getItem('languages')) : {
+        RU: {},
+        EN: {}
+    },
+    messages = {
+        'ZH': {
+            ...zhLocale
+        },
+        'EN': {
+            ...enLocale,
+            ...languages.EN
+        },
+        'RU': {
+            ...ruLocale,
+            ...languages.RU
+        }
+    };
+
+api.requested({
+    id: 2024062809072801,
+}).then(res => {
+    if (res.code != 1) return;
+    languages = res.data;
+    localStorage.setItem('languages', JSON.stringify(languages))
+})
+// 准备翻译的语言环境信息
+const i18n = new VueI18n({
+    locale: localStorage.getItem('lang') || "EN", //将语言标识存入localStorage或sessionStorage中，页面刷新不会默认中文显示
+    messages,
+    silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略
+    globalInjection: true, // 全局注入
+    fallbackLocale: 'ZH', // 指定的locale没有找到对应的资源或当前语种不存在时，默认设置当前语种为中文
+});
+
+export default i18n

src/views/login/login.vue

@@ -133,9 +133,6 @@
 <script>
 import md5 from "js-md5";
 import Vue from "vue";
-import zhLocale from "element-ui/lib/locale/lang/zh-CN";
-import enLocale from "element-ui/lib/locale/lang/en";
-import ruLocale from "element-ui/lib/locale/lang/ru-RU";
 import store from "@/store";
 
 export default {
@@ -165,6 +162,7 @@ export default {
       count: 0,
       langusge: [],
       nowType: "ZH",
+      languagename: "简体中文",
     };
   },
   created() {
@@ -340,47 +338,22 @@ export default {
         id: 10026401,
       });
       this.langusge = res.data;
-      this.nowType = sessionStorage.getItem("lang") &&  sessionStorage.getItem("lang") !== null
-        ? sessionStorage.getItem("lang")
-        : "ZH";
-      sessionStorage.setItem('lang',this.nowType)
-      this.qusetLanguage()
+      console.log("langusge", this.langusge);
+      this.nowType =
+        localStorage.getItem("lang") && localStorage.getItem("lang") !== null
+          ? localStorage.getItem("lang")
+          : "ZH";
+      this.languagename =
+        this.langusge.find((v) => v.languagecode == this.nowType)
+          .languagename || "简体中文";
     },
     async i18nChangeLanguage(type) {
-      console.log(type, "type翻译");
-      sessionStorage.setItem("lang", type);
-      location.reload();
-      /* await this.basicData.query_userauth()
-      this.$router.go(0)*/
-    },
-
-    async qusetLanguage() {
-      this.nowType = sessionStorage.getItem("lang");
-      const res = await this.$api.requested({
-        id: 2024062809072801,
-        content: {
-          languagecode: this.nowType,
-        },
+      this.nowType = type;
+      localStorage.setItem("lang", type);
+      this.$nextTick(() => {
+        this.$i18n.locale = type;
+        location.reload();
       });
-      switch (this.nowType) {
-        case "EN":
-          Vue.config.lang = "en";
-          Vue.locale("en", Object.assign(enLocale, res.data.EN));
-          break;
-        case "RU":
-          Vue.config.lang = "ru-RU";
-          Vue.locale("ru-RU", Object.assign(ruLocale, res.data.RU));
-          break;
-
-        default:
-          Vue.config.lang = "zh-cn";
-          Vue.locale("zh-cn", Object.assign(zhLocale));
-          break;
-      }
-      this.languagename = this.langusge.filter(
-        (e) => e.languagecode == this.nowType
-      )[0].languagename;
-      this.setRules();
     },
   },
 };