i18n 从基础配置好用

package.json

@@ -38,6 +38,7 @@
     "vue": "^2.7.16",
     "vue-count-to": "^1.0.13",
     "vue-direction-key": "^1.0.5",
+    "vue-i18n": "^8.28.2",
     "vue-json-viewer": "^2.2.22",
     "vue-print-nb": "^1.7.5",
     "vue-router": "^3.6.5",

src/lang/en-US.js

@@ -0,0 +1,14 @@
+import enLocale from 'element-ui/lib/locale/lang/en'
+
+export default {
+  ...enLocale,
+  common: {
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    home: 'Home',
+    logout: 'Logout',
+    language: 'Language',
+    chinese: 'Chinese',
+    english: 'English'
+  }
+}

src/lang/index.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import elementLocale from 'element-ui/lib/locale'
+import zhCN from './zh-CN'
+import enUS from './en-US'
+
+Vue.use(VueI18n)
+
+export const DEFAULT_LOCALE = 'zh-CN'
+export const LOCALE_STORAGE_KEY = 'language'
+export const SUPPORT_LOCALES = ['zh-CN', 'en-US']
+
+function getSavedLocale() {
+  const savedLocale = localStorage.getItem(LOCALE_STORAGE_KEY)
+  return SUPPORT_LOCALES.indexOf(savedLocale) > -1 ? savedLocale : DEFAULT_LOCALE
+}
+
+const i18n = new VueI18n({
+  locale: getSavedLocale(),
+  fallbackLocale: DEFAULT_LOCALE,
+  silentTranslationWarn: true,
+  messages: {
+    'zh-CN': zhCN,
+    'en-US': enUS
+  }
+})
+
+elementLocale.i18n((key, value) => i18n.t(key, value))
+
+export function setLocale(locale) {
+  const nextLocale = SUPPORT_LOCALES.indexOf(locale) > -1 ? locale : DEFAULT_LOCALE
+  i18n.locale = nextLocale
+  localStorage.setItem(LOCALE_STORAGE_KEY, nextLocale)
+}
+
+export default i18n

src/lang/zh-CN.js

@@ -0,0 +1,14 @@
+import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
+
+export default {
+  ...zhLocale,
+  common: {
+    confirm: '确定',
+    cancel: '取消',
+    home: '主页',
+    logout: '退出',
+    language: '语言',
+    chinese: '中文',
+    english: 'English'
+  }
+}

src/main.js

@@ -1,6 +1,5 @@
 import Vue from 'vue'
 
-console.log(123)
 import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -11,6 +10,7 @@ import '@/icon/iconfont.css'
 import App from './App'
 import router from './router'
 import store from './store'
+import i18n from './lang'
 import * as echarts from 'echarts'
 import '@/icons' // icon
 import '@/permission' // permission control
@@ -49,6 +49,7 @@ new Vue({
   el: '#app',
   router,
   store,
+  i18n,
   render: h => h(App)
 })
 

src/views/QualityAssurance/InquiryTransitInformation/index.vue

@@ -120,14 +120,19 @@
           tooltip-effect="dark">
           <!--        <el-table-column :selectable="selectable" type="selection" width="45" align="center"/>-->
           <el-table-column align="center" label="序号" type="index" width="60"/>
+          <el-table-column align="center" label="工位号" width="120">
+            <template slot-scope="scope">
+              {{ scope.row.工位号 }}
+            </template>
+          </el-table-column>
           <el-table-column align="center" label="订单号">
             <template slot-scope="scope">
               {{ scope.row.订单号 }}
             </template>
           </el-table-column>
-          <el-table-column align="center" label="工位号" width="120">
+          <el-table-column align="center" label="产品编号">
             <template slot-scope="scope">
-              {{ scope.row.工位号 }}
+              {{ scope.row.发动机号 }}
             </template>
           </el-table-column>
           <el-table-column align="center" label="产品型号">
@@ -135,11 +140,7 @@
               {{ scope.row.机型 }}
             </template>
           </el-table-column>
-          <!--          <el-table-column align="center" label="产品编号">-->
+
-          <!--            <template slot-scope="scope">-->
-          <!--              {{ scope.row.发动机号 }}-->
-          <!--            </template>-->
-          <!--          </el-table-column>-->
 
           <!--<el-table-column align="center" label="制造编号">-->
           <!--  <template slot-scope="scope">-->
@@ -181,11 +182,11 @@
               {{ scope.row.是否合格 }}
             </template>
           </el-table-column>
-          <el-table-column align="center" label="是否报工" width="80px">
+<!--          <el-table-column align="center" label="是否报工" width="80px">-->
-            <template slot-scope="scope">
+<!--            <template slot-scope="scope">-->
-              {{ scope.row.是否完成报工 ? '是' : '否' }}
+<!--              {{ scope.row.是否完成报工 ? '是' : '否' }}-->
-            </template>
+<!--            </template>-->
-          </el-table-column>
+<!--          </el-table-column>-->
           <!--          <el-table-column align="center" label="操作时间">-->
           <!--            <template slot-scope="scope">-->
           <!--              {{ scope.row.操作时间 }}-->
@@ -286,7 +287,6 @@ export default {
       var param = []
       var Data = this.CreateData('11', 'MES_计划BOM_工位与名称_查询', param)
       this.ExecDatabase(Data).then(response => {
-        if (response.data.length) this.stationNumberValue = response.data[0].工位号
         for (let i = 0; i < response.data.length; i++) {
           this.stationNumber.push({
             label: `【${response.data[i].工位号}】${response.data[i].工位名称}`,

src/views/layout/components/Navbar.vue

@@ -3,6 +3,22 @@
     <el-menu class="navbar" mode="horizontal" style="background: #1576e8!important;">
       <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
       <breadcrumb />
+      <el-dropdown class="language-container" trigger="click" @command="changeLanguage">
+        <el-button class="language-button" size="mini" type="text">
+          {{ currentLocaleLabel }}
+          <i class="el-icon-arrow-down el-icon--right"/>
+        </el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="item in localeOptions"
+            :key="item.value"
+            :command="item.value"
+            :disabled="item.value === currentLocale"
+          >
+            {{ item.label }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
       <el-dropdown class="avatar-container" trigger="click">
         <div class="avatar-wrapper">
           <img :src="require('@/assets/img/leftPic.png')" class="user-avatar">
@@ -11,11 +27,11 @@
         <el-dropdown-menu slot="dropdown" class="user-dropdown">
           <router-link class="inlineBlock" to="/">
             <el-dropdown-item>
-              主页
+              {{ $t('common.home') }}
             </el-dropdown-item>
           </router-link>
           <el-dropdown-item divided @click.native="logout">
-            <span style="display:block;">退出</span>
+            <span style="display:block;">{{ $t('common.logout') }}</span>
           </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
@@ -41,6 +57,7 @@
 import { mapGetters } from 'vuex'
 import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
+import { setLocale, SUPPORT_LOCALES } from '@/lang'
 // import { initApproval, initApprovalOffline } from '@/api/PurchasingCenter/FundApproval'
 // import { searchUrgentItem } from '@/api/ManufacturingCenter/InitialProduction'
 // import { searchTable1 as searchTableInvoice } from '@/api/PurchasingCenter/InvoiceSettlementApprove'
@@ -92,7 +109,11 @@ export default {
       PurchaseContractSearch: null,
       DeliveryNotice: null,
       ScrapReplenishment: null,
-      OrderConfirmationShipment: null
+      OrderConfirmationShipment: null,
+      localeOptions: [
+        { value: 'zh-CN', label: '中文' },
+        { value: 'en-US', label: 'English' }
+      ]
     }
   },
   computed: {
@@ -103,7 +124,14 @@ export default {
       'id',
       'token',
       'token'
-    ])
+    ]),
+    currentLocale() {
+      return this.$i18n.locale
+    },
+    currentLocaleLabel() {
+      const current = this.localeOptions.find(item => item.value === this.currentLocale)
+      return current ? current.label : this.$t('common.language')
+    }
   },
   created() {
     // this.showOrder()
@@ -433,6 +461,11 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('ToggleSideBar')
     },
+    changeLanguage(locale) {
+      if (SUPPORT_LOCALES.indexOf(locale) === -1 || locale === this.currentLocale) return
+      setLocale(locale)
+      this.$message.success(this.$t('common.language') + ': ' + this.currentLocaleLabel)
+    },
     logout() {
       this.$store.dispatch('FedLogOut').then(() => {
         location.reload() // 为了重新实例化vue-router对象 避免bug
@@ -459,6 +492,26 @@ export default {
       top: 16px;
       color: red;
     }
+    .language-container {
+      height: 50px;
+      display: inline-block;
+      position: absolute;
+      right: 95px;
+      top: 0;
+      .language-button {
+        height: 50px;
+        min-width: 76px;
+        padding: 0 8px;
+        color: #fff;
+        font-size: 13px;
+        line-height: 50px;
+        cursor: pointer;
+      }
+      .language-button:hover,
+      .language-button:focus {
+        color: #f2f6fc;
+      }
+    }
     .avatar-container {
       height: 50px;
       display: inline-block;