多语言

cclqms-vue/src/i18n/locales/cn.js

@@ -9,6 +9,83 @@ module.exports = {
     kr: '韩文'
   },
   qc: require('./qc.cn.js'),
+  main: {
+    appName: 'CCLQMS管理系统',
+    abbreviation: '旭捷',
+    help: '帮助',
+    setting: '设置',
+    languageSetting: '语言设置',
+    userSetting: '用户设置',
+    updatePassword: '修改密码',
+    updateDefaultLanguage: '修改默认语言',
+    cssSetting: '主题设置',
+    logout: '退出',
+    homePage: '首页',
+    loading: '拼命加载中',
+    languageName: {
+      cn: '中文',
+      en: '英文'
+    },
+    tabs: {
+      closeCurrent: '关闭当前标签页',
+      closeOther: '关闭其它标签页',
+      closeAll: '关闭全部标签页',
+      refreshCurrent: '刷新当前标签页'
+    },
+    common: {
+      tip: '提示',
+      confirm: '确定',
+      cancel: '取消',
+      operationSuccess: '操作成功'
+    },
+    menuMode: {
+      toClassic: '切换到传统菜单',
+      toHover: '切换到悬浮菜单',
+      switchedClassic: '已切换到传统菜单模式',
+      switchedHover: '已切换到悬浮菜单模式'
+    },
+    sidebar: {
+      searchPlaceholder: '搜索',
+      menuNoPage: '菜单 "{menuName}" 暂无对应页面'
+    },
+    updateLanguageDialog: {
+      title: '修改用户默认语言',
+      account: '账号',
+      currentLanguage: '当前语言',
+      newLanguage: '新语言'
+    },
+    updatePasswordDialog: {
+      title: '修改密码',
+      account: '账号',
+      oldPassword: '原密码',
+      newPassword: '新密码',
+      confirmPassword: '确认密码',
+      confirmMismatch: '确认密码与新密码不一致',
+      oldPasswordRequired: '原密码不能为空',
+      newPasswordRequired: '新密码不能为空',
+      confirmPasswordRequired: '确认密码不能为空'
+    },
+    logoutDialog: {
+      message: '确定进行[退出]操作?'
+    },
+    home: {
+      welcome: '欢迎：{userName}!!!',
+      welcomeLog: '欢迎使用 旭捷管理系统!!!'
+    },
+    theme: {
+      title: '布局设置',
+      navbarType: '导航条类型',
+      sidebarSkin: '侧边栏皮肤',
+      effects: '特效',
+      on: '开启',
+      off: '关闭'
+    },
+    notFound: {
+      description: '抱歉！您访问的页面<em>失联</em>啦 ...',
+      back: '返回上一页',
+      goHome: '进入首页'
+    }
+  },
 
   // // 公用属性
   // common: {

cclqms-vue/src/i18n/locales/en.js

@@ -11,6 +11,83 @@ module.exports = {
     kr: 'en-kr'
   },
   qc: require('./qc.en.js'),
+  main: {
+    appName: 'CCLQMS Management System',
+    abbreviation: 'XJ',
+    help: 'Help',
+    setting: 'Settings',
+    languageSetting: 'Language Settings',
+    userSetting: 'User Settings',
+    updatePassword: 'Change Password',
+    updateDefaultLanguage: 'Change Default Language',
+    cssSetting: 'Theme Settings',
+    logout: 'Log Out',
+    homePage: 'Home',
+    loading: 'Loading...',
+    languageName: {
+      cn: 'Chinese',
+      en: 'English'
+    },
+    tabs: {
+      closeCurrent: 'Close Current Tab',
+      closeOther: 'Close Other Tabs',
+      closeAll: 'Close All Tabs',
+      refreshCurrent: 'Refresh Current Tab'
+    },
+    common: {
+      tip: 'Tip',
+      confirm: 'Confirm',
+      cancel: 'Cancel',
+      operationSuccess: 'Operation successful'
+    },
+    menuMode: {
+      toClassic: 'Switch to classic menu',
+      toHover: 'Switch to hover menu',
+      switchedClassic: 'Switched to classic menu mode',
+      switchedHover: 'Switched to hover menu mode'
+    },
+    sidebar: {
+      searchPlaceholder: 'Search',
+      menuNoPage: 'Menu "{menuName}" has no mapped page'
+    },
+    updateLanguageDialog: {
+      title: 'Change User Default Language',
+      account: 'Account',
+      currentLanguage: 'Current Language',
+      newLanguage: 'New Language'
+    },
+    updatePasswordDialog: {
+      title: 'Change Password',
+      account: 'Account',
+      oldPassword: 'Current Password',
+      newPassword: 'New Password',
+      confirmPassword: 'Confirm Password',
+      confirmMismatch: 'Confirm password does not match new password',
+      oldPasswordRequired: 'Current password is required',
+      newPasswordRequired: 'New password is required',
+      confirmPasswordRequired: 'Confirm password is required'
+    },
+    logoutDialog: {
+      message: 'Are you sure you want to log out?'
+    },
+    home: {
+      welcome: 'Welcome: {userName}!!!',
+      welcomeLog: 'Welcome to XJ Management System!!!'
+    },
+    theme: {
+      title: 'Layout Settings',
+      navbarType: 'Navbar Type',
+      sidebarSkin: 'Sidebar Skin',
+      effects: 'Effects',
+      on: 'On',
+      off: 'Off'
+    },
+    notFound: {
+      description: 'Sorry! The page you visited is unavailable ...',
+      back: 'Back',
+      goHome: 'Go Home'
+    }
+  },
   // common: {
   //   search: "search",
   //   add: "add",

cclqms-vue/src/router/index.js

@@ -34,8 +34,8 @@ const mainRoutes = {
     // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
     // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
     // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
-    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
-    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
+    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: 'main.homePage' } },
+    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: 'main.cssSetting' } },
     { path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
     // { path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } }
     { path: '/customer_report_show', component: _import('modules/report/customer_report_show'), name: 'report', meta: { title: '自定义报表展示' } },//2022-04-20 自定义报表路径

cclqms-vue/src/views/common/404.vue

@@ -3,9 +3,9 @@
     <div class="site-content__wrapper">
       <div class="site-content">
         <h2 class="not-found-title">400</h2>
-        <p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>
-        <el-button @click="$router.go(-1)">返回上一页</el-button>
-        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">进入首页</el-button>
+        <p class="not-found-desc" v-html="$t('main.notFound.description')"></p>
+        <el-button @click="$router.go(-1)">{{ $t('main.notFound.back') }}</el-button>
+        <el-button type="primary" class="not-found-btn-gohome" @click="$router.push({ name: 'home' })">{{ $t('main.notFound.goHome') }}</el-button>
       </div>
     </div>
   </div>

cclqms-vue/src/views/common/home.vue

@@ -2,7 +2,7 @@
   <div class="mod-home">
     <h3>CCLQMS</h3>
     <ul>
-      <li><h3>欢迎:{{userName}}!!!</h3></li>
+      <li><h3>{{ $t('main.home.welcome', { userName }) }}</h3></li>
     </ul>
   </div>
 </template>
@@ -14,7 +14,7 @@
   export default {
     methods: {
       languageRefresh(){
-        console.log("欢迎使用 旭捷管理系统!!!")
+        console.log(this.$t('main.home.welcomeLog'))
       },
       languagePack() {
         // searchSysLanguagePack().then(({data}) => {

cclqms-vue/src/views/common/theme.vue

@@ -1,22 +1,22 @@
 <template>
   <el-form class="sl">
-    <h2>布局设置</h2>
-    <el-form-item label="导航条类型">
+    <h2>{{ $t('main.theme.title') }}</h2>
+    <el-form-item :label="$t('main.theme.navbarType')">
       <el-radio-group v-model="navbarLayoutType">
         <el-radio label="default" border>default</el-radio>
         <el-radio label="inverse" border>inverse</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="侧边栏皮肤">
+    <el-form-item :label="$t('main.theme.sidebarSkin')">
       <el-radio-group v-model="sidebarLayoutSkin">
         <el-radio label="light" border>light</el-radio>
         <el-radio label="dark" border>dark</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item label="特效" >
+    <el-form-item :label="$t('main.theme.effects')" >
       <el-radio-group v-model="effectsEnabled" >
-        <el-radio label="Y" border>开启</el-radio>
-        <el-radio label="N" border>关闭</el-radio>
+        <el-radio label="Y" border>{{ $t('main.theme.on') }}</el-radio>
+        <el-radio label="N" border>{{ $t('main.theme.off') }}</el-radio>
       </el-radio-group>
     </el-form-item>
   </el-form>

cclqms-vue/src/views/main-content.vue

@@ -10,16 +10,16 @@
       <el-dropdown class="site-tabs__tools" :show-timeout="0">
         <i class="el-icon-arrow-down el-icon--right"></i>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item @click.native="tabsCloseCurrentHandle">关闭当前标签页</el-dropdown-item>
-          <el-dropdown-item @click.native="tabsCloseOtherHandle">关闭其它标签页</el-dropdown-item>
-          <el-dropdown-item @click.native="tabsCloseAllHandle">关闭全部标签页</el-dropdown-item>
-          <el-dropdown-item @click.native="refresh()">刷新当前标签页</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseCurrentHandle">{{ $t('main.tabs.closeCurrent') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseOtherHandle">{{ $t('main.tabs.closeOther') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="tabsCloseAllHandle">{{ $t('main.tabs.closeAll') }}</el-dropdown-item>
+          <el-dropdown-item @click.native="refresh()">{{ $t('main.tabs.refreshCurrent') }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <el-tab-pane
         v-for="item in mainTabs"
         :key="item.name"
-        :label="item.title"
+        :label="translateTabTitle(item.title)"
         :name="item.name">
         <el-card :body-style="siteContentViewHeight">
           <iframe
@@ -76,6 +76,12 @@
       }
     },
     methods: {
+      translateTabTitle (title) {
+        if (typeof title === 'string' && title.indexOf('main.') === 0) {
+          return this.$t(title)
+        }
+        return title
+      },
       // tabs, 选中tab
       selectedTabHandle (tab) {
         tab = this.mainTabs.filter(item => item.name === tab.name)

cclqms-vue/src/views/main-navbar-update-language.vue

@@ -1,17 +1,17 @@
 <template>
   <el-dialog
-    title="修改用户默认语言"
+    :title="$t('main.updateLanguageDialog.title')"
     :visible.sync="visible"
     width="300px"
     :append-to-body="true">
     <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="账号">
+      <el-form-item :label="$t('main.updateLanguageDialog.account')">
         <span>{{ userName }}</span>
       </el-form-item>
-      <el-form-item label="当前语言" prop="newPassword">
-        <span>{{language}}</span>
+      <el-form-item :label="$t('main.updateLanguageDialog.currentLanguage')" prop="newPassword">
+        <span>{{ currentLanguageName }}</span>
       </el-form-item>
-      <el-form-item label="新语言" prop="newLanguage">
+      <el-form-item :label="$t('main.updateLanguageDialog.newLanguage')" prop="newLanguage">
         <el-select filterable v-model="dataForm.languageDefault" clearable>
           <el-option :label="item.languageName" :value="item.languageCode" v-for="(item,index) in languageList "
                      :key="index"></el-option>
@@ -19,8 +19,8 @@
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button @click="visible = false">取消</el-button>
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
+      <el-button @click="visible = false">{{ $t('main.common.cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ $t('main.common.confirm') }}</el-button>
     </span>
   </el-dialog>
 </template>
@@ -56,6 +56,10 @@
         set(val) {
           this.$store.commit('common/updateMainTabs', val)
         }
+      },
+      currentLanguageName() {
+        const langCode = this.language === 'en' ? 'en' : 'cn'
+        return this.$t(`main.languageName.${langCode}`)
       }
     },
 

cclqms-vue/src/views/main-navbar-update-password.vue

@@ -1,27 +1,27 @@
 <template>
   <el-dialog
     class="sl"
-    title="修改密码"
+    :title="$t('main.updatePasswordDialog.title')"
     :visible.sync="visible"
     width="300px"
     :append-to-body="true">
     <el-form :model="dataForm" :show-message="false" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
-      <el-form-item label="账号">
+      <el-form-item :label="$t('main.updatePasswordDialog.account')">
         <span>{{ userName }}</span>
       </el-form-item>
-      <el-form-item label="原密码" prop="password">
+      <el-form-item :label="$t('main.updatePasswordDialog.oldPassword')" prop="password">
         <el-input type="password" v-model="dataForm.password"></el-input>
       </el-form-item>
-      <el-form-item label="新密码" prop="newPassword">
+      <el-form-item :label="$t('main.updatePasswordDialog.newPassword')" prop="newPassword">
         <el-input type="password" v-model="dataForm.newPassword"></el-input>
       </el-form-item>
-      <el-form-item label="确认密码" prop="confirmPassword">
+      <el-form-item :label="$t('main.updatePasswordDialog.confirmPassword')" prop="confirmPassword">
         <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
-      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
-      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="dataFormSubmit()">{{ $t('main.common.confirm') }}</el-button>
+      <el-button @click="visible = false">{{ $t('main.common.cancel') }}</el-button>
     </span>
   </el-dialog>
 </template>
@@ -32,7 +32,7 @@
     data () {
       var validateConfirmPassword = (rule, value, callback) => {
         if (this.dataForm.newPassword !== value) {
-          callback(new Error('确认密码与新密码不一致'))
+          callback(new Error(this.$t('main.updatePasswordDialog.confirmMismatch')))
         } else {
           callback()
         }
@@ -46,13 +46,13 @@
         },
         dataRule: {
           password: [
-            { required: true, message: '原密码不能为空', trigger: 'blur' }
+            { required: true, message: this.$t('main.updatePasswordDialog.oldPasswordRequired'), trigger: 'blur' }
           ],
           newPassword: [
-            { required: true, message: '新密码不能为空', trigger: 'blur' }
+            { required: true, message: this.$t('main.updatePasswordDialog.newPasswordRequired'), trigger: 'blur' }
           ],
           confirmPassword: [
-            { required: true, message: '确认密码不能为空', trigger: 'blur' },
+            { required: true, message: this.$t('main.updatePasswordDialog.confirmPasswordRequired'), trigger: 'blur' },
             { validator: validateConfirmPassword, trigger: 'blur' }
           ]
         }
@@ -82,15 +82,15 @@
           let newPassword = this.dataForm.newPassword
           let confirmPassword =this.dataForm.confirmPassword
           if (!password){
-            this.$message.warning('原密码不能为空')
+            this.$message.warning(this.$t('main.updatePasswordDialog.oldPasswordRequired'))
             return
           }
           if (!newPassword){
-            this.$message.warning('新密码不能为空')
+            this.$message.warning(this.$t('main.updatePasswordDialog.newPasswordRequired'))
             return
           }
           if (!confirmPassword){
-            this.$message.warning('确认密码不能为空')
+            this.$message.warning(this.$t('main.updatePasswordDialog.confirmPasswordRequired'))
             return
           }
           if (valid) {
@@ -103,7 +103,7 @@
               })
             }).then(({data}) => {
               if (data && data.code === 0) {
-                this.$message.success( '操作成功')
+                this.$message.success(this.$t('main.common.operationSuccess'))
                 this.visible = false
                 this.$nextTick(() => {
                   this.mainTabs = []

cclqms-vue/src/views/main-navbar.vue

@@ -42,7 +42,7 @@
 <!--        </el-menu-item>-->
         <el-menu-item class="site-navbar__avatar" index="2">
                       <span style="    color: #909399;" @click="helpFileList()">
-                        帮助
+                        {{ $t('main.help') }}
                         <!--                             <icon-svg name="help"  style="width: 25px;height: 25px;margin-top: 5px"></icon-svg>-->
                       </span>
         </el-menu-item>
@@ -70,7 +70,7 @@
                         <img src="~@/assets/img/avatar.png" :alt="userName">{{ userName }}
                       </span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item @click.native="logoutHandle()">退出</el-dropdown-item>
+              <el-dropdown-item @click.native="logoutHandle()">{{ $t('main.logout') }}</el-dropdown-item>
             </el-dropdown-menu>
           </el-dropdown>
         </el-menu-item>
@@ -121,15 +121,15 @@ export default {
       message: this.$t('language.name'),
       languageList: [],
       pageLanguage: {
-        XjSysManage: 'CCLQMS管理系统',
-        abbreviation: '旭捷',
-        setting: '设置',
-        languageSetting: '语言设置',
-        userSetting: '用户设置',
-        updatePassword: '修改密码',
-        updateDefaultLanguage: '修改默认语言',
-        cssSetting: '主题设置',
-        printSetting: '打印设置',
+        XjSysManage: this.$t('main.appName'),
+        abbreviation: this.$t('main.abbreviation'),
+        setting: this.$t('main.setting'),
+        languageSetting: this.$t('main.languageSetting'),
+        userSetting: this.$t('main.userSetting'),
+        updatePassword: this.$t('main.updatePassword'),
+        updateDefaultLanguage: this.$t('main.updateDefaultLanguage'),
+        cssSetting: this.$t('main.cssSetting'),
+        printSetting: this.$t('main.cssSetting'),
       },
       // 导出 end
       pageLanguageList: [
@@ -273,7 +273,7 @@ export default {
       return this.useHoverMenu ? 'zhedie' : 'zhedie'
     },
     menuModeTitle() {
-      return this.useHoverMenu ? '切换到传统菜单' : '切换到悬浮菜单'
+      return this.useHoverMenu ? this.$t('main.menuMode.toClassic') : this.$t('main.menuMode.toHover')
     }
   },
   activated() {
@@ -335,10 +335,9 @@ export default {
     },
     // 获取多语言列表
     getLanguageList() {
-      const isEn = this.$i18n.locale === 'en'
       this.languageList = [
-        { languageCode: 'cn', languageName: isEn ? 'Chinese' : '中文' },
-        { languageCode: 'en', languageName: isEn ? 'English' : '英文' }
+        { languageCode: 'cn', languageName: this.$t('main.languageName.cn') },
+        { languageCode: 'en', languageName: this.$t('main.languageName.en') }
       ]
     },
     // 获取页面多语言数据
@@ -376,9 +375,9 @@ export default {
     },
     // 退出
     logoutHandle() {
-      this.$confirm(`确定进行[退出]操作?`, '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
+      this.$confirm(this.$t('main.logoutDialog.message'), this.$t('main.common.tip'), {
+        confirmButtonText: this.$t('main.common.confirm'),
+        cancelButtonText: this.$t('main.common.cancel'),
         type: 'warning'
       }).then(() => {
         this.$http({
@@ -397,7 +396,7 @@ export default {
     // 切换菜单模式
     toggleMenuMode() {
       this.useHoverMenu = !this.useHoverMenu
-      this.$message.success(this.useHoverMenu ? '已切换到悬浮菜单模式' : '已切换到传统菜单模式')
+      this.$message.success(this.useHoverMenu ? this.$t('main.menuMode.switchedHover') : this.$t('main.menuMode.switchedClassic'))
     }
   },
   created() {

cclqms-vue/src/views/main-sidebar-hover.vue

@@ -7,7 +7,7 @@
         <div class="sidebar-search">
           <el-input
             v-model="search"
-            placeholder="搜索"
+            :placeholder="$t('main.sidebar.searchPlaceholder')"
             @keyup.enter.native="searchMenu1"
             size="small">
 <!--            <i slot="suffix" class="el-icon-search" @click="searchMenu1()"></i>-->
@@ -154,7 +154,7 @@ export default {
       hideTimer: null,
       list: [],
       pageLanguage: {
-        homePage: '首页'
+        homePage: this.$t('main.homePage')
       }
     }
   },
@@ -324,7 +324,7 @@ export default {
           this.$router.push(menu.url)
           this.hideSubMenu()
         } else {
-          this.$message.warning(`菜单 "${menu.name}" 暂无对应页面`)
+          this.$message.warning(this.$t('main.sidebar.menuNoPage', { menuName: menu.name }))
         }
       }
     },

cclqms-vue/src/views/main-sidebar.vue

@@ -8,7 +8,7 @@
         :collapseTransition="false"
         class="site-sidebar__menu">
         <el-menu-item style=" padding-left: 15px;" class="menu">
-          <span slot="title"> <el-input v-model="search" placeholder="搜索"
+          <span slot="title"> <el-input v-model="search" :placeholder="$t('main.sidebar.searchPlaceholder')"
                                         @keyup.enter.native="searchMenu1"></el-input></span>
           <i type="primary" class="el-icon-search" @click="searchMenu1()"></i>
         </el-menu-item>
@@ -56,7 +56,7 @@ export default {
       newMenuList: [],
       list: [],
       pageLanguage: {
-        homePage: '首页'
+        homePage: this.$t('main.homePage')
       }
     }
   },

cclqms-vue/src/views/main.vue

@@ -3,7 +3,7 @@
     class="site-wrapper"
     :class="{ 'site-sidebar--fold': sidebarFold }"
     v-loading.fullscreen.lock="loading"
-    element-loading-text="拼命加载中">
+    :element-loading-text="$t('main.loading')">
     <template v-if="!loading">
       <main-navbar/>
       <main-sidebar-hover v-if="useHoverMenu"/>