多语言

package.json

@@ -47,6 +47,7 @@
     "vue-count-to": "^1.0.13",
     "vue-cropper": "0.4.9",
     "vue-echarts": "^5.0.0-beta.0",
+    "vue-i18n": "^8.28.2",
     "vue-image-crop-upload": "^2.5.0",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

src/layout/components/Sidebar/SidebarItem.vue

@@ -3,14 +3,14 @@
     <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
         <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
-          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
+          <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="$t(item.meta.title)" />
         </el-menu-item>
       </app-link>
     </template>
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
+        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="$t(item.meta.title)" />
       </template>
       <sidebar-item
         v-for="child in item.children"

src/layout/components/TagsView/index.vue

@@ -12,7 +12,7 @@
         @click.middle.native="closeSelectedTag(tag)"
         @contextmenu.prevent.native="openMenu(tag,$event)"
       >
-        {{ tag.title }}
+        {{$t(tag.title )}}
         <span v-if="!tag.meta.affix" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
       </router-link>
     </scroll-pane>

src/main.js

@@ -4,7 +4,14 @@ import Cookies from 'js-cookie'
 
 import 'normalize.css/normalize.css'
 import VueClipboard from 'vue-clipboard2'
+
+import ElementUI from 'element-ui'
 import Element, { Table, TableColumn } from 'element-ui'
+
+import VueI18n from 'vue-i18n'
+import locale from 'element-ui/lib/locale'
+import enLocale from './i18n/en'
+import zhCNLocale from './i18n/zh-CN'
 const TableProps = Element.Table.props
 const TableColumnProps = Element.TableColumn.props
 TableProps.border = { type: Boolean, default: true } // 边框
@@ -14,10 +21,11 @@ TableColumnProps.showOverflowTooltip = { type: Boolean, default: true } // 文
 TableColumnProps.sortable = { type: Boolean, default: true } // 置默认的排序列和排序顺序
 Vue.use(Table)
 Vue.use(TableColumn)
+Vue.use(ElementUI, { locale })
 // 数据字典
 import dict from './components/Dict'
-import FileSaver from "file-saver";
+import FileSaver from 'file-saver'
-import XLSX from "xlsx";
+import XLSX from 'xlsx'
 // 权限指令
 import checkPer from '@/utils/permission'
 import permission from './components/Permission'
@@ -36,16 +44,32 @@ Vue.use(VueClipboard)
 Vue.use(checkPer)
 Vue.use(permission)
 Vue.use(dict)
+
+Vue.use(VueI18n)
+
+const messages = {
+  en: enLocale,
+  'zh': zhCNLocale
+}
+
+const i18n = new VueI18n({
+  locale: 'en', // 设置默认语言
+  messages
+})
+
 Vue.use(Element, {
   size: Cookies.get('size') || 'small' // set element-ui default size
 })
 
+locale.i18n((key, value) => i18n.t(key, value))
+Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value) })
 
 Vue.prototype.$fileSaver = FileSaver
 Vue.prototype.$xlsx = XLSX
 Vue.config.productionTip = false
 
 new Vue({
+  i18n,
   el: '#app',
   router,
   store,

src/router/index.js

@@ -9,7 +9,7 @@ import { filterAsyncRouter } from '@/store/modules/permission'
 
 NProgress.configure({ showSpinner: false })// NProgress Configuration
 
-const whiteList = ['/login', '/401', '404', '/system2/report']// no redirect whitelist
+const whiteList = ['/login', '/login_en', '/401', '404', '/system2/report']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
   if (to.meta.title) {

src/router/routers.js

@@ -9,6 +9,10 @@ export const constantRouterMap = [
     meta: { title: '登录', noCache: false ,keepAlive:true},
     component: (resolve) => require(['@/views/login'], resolve),
     hidden: true
+  },{ path: '/login_en',
+    meta: { title: 'Login', noCache: false ,keepAlive:true},
+    component: (resolve) => require(['@/views/login_en'], resolve),
+    hidden: true
   },{ path: '/home',
     meta: { title: '登录', noCache: false ,keepAlive:true},
     component: (resolve) => require(['@/views/home'], resolve),

src/views/login.vue

@@ -1,10 +1,22 @@
 <template>
-  <div class="login" :style="'background-image:url('+ Background +');'">
+  <div class="main_div" :style="'background-image:url('+ Background +');'">
     <BindLicense ref="BindLicense"/>
+    <el-row type="flex" style="width: 100%;height: 100%">
+
+
+
+      <!--  底部  -->
+      <!--  <el-col :span="12"  ><div class="main_left"  ></div></el-col> -->
+      <el-col :span="24"><div class="login">
+
+
         <el-form ref="loginForm" :model="loginForm" :rules="loginRules" label-position="left" label-width="0px" class="login-form">
-      <h3 class="title" @click="bingLicense">
+          <div style="margin-top: 20px;margin-right: auto;margin-left: auto;width: 100px;height: 100px">
-        WMS 管理系统
+            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="height: 100px;width: 100px" fit="fill"></el-avatar>
-      </h3>
+          </div>
+          <h2 class="title" @click="bingLicense">
+            欢迎来到 YouChain Plus! 👋
+          </h2>
           <el-form-item prop="username">
             <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
               <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
@@ -26,13 +38,29 @@
           <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
             记住我
           </el-checkbox>
+          <el-dropdown style="margin-left: 200px;color: #00a0e9" :trigger="hover"  @command="handleCommand">
+                <span class="el-dropdown-link">
+                语言切换<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="zh">中文</el-dropdown-item>
+              <el-dropdown-item command="en">英文</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
           <el-form-item style="width:100%;">
             <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
               <span v-if="!loading">登 录</span>
               <span v-else>登 录 中...</span>
             </el-button>
           </el-form-item>
+          <h5 class="zhuce" @click="bingLicense">
+            如您还没有账号？<span style="color: #00a0e9;margin-left: 5px" href="">请联系管理员</span>
+          </h5>
         </el-form>
+      </div></el-col>
+
+    </el-row>
     <!--  底部  -->
     <div v-if="$store.state.settings.showFooter" id="el-login-footer">
       <span v-html="$store.state.settings.footerTxt" />
@@ -48,22 +76,20 @@ import Config from '@/settings'
 import { getCodeImg, getDeviceInfo } from '@/api/login'
 import Cookies from 'js-cookie'
 import qs from 'qs'
-import Background from '@/assets/images/background.webp'
+import Background from '@/assets/images/background3.png'
 import BindLicense from '@/views/licenseBind.vue'
-import BindOrderNumber from '@/views/base-data/box/bindOrderNumber.vue'
 export default {
   name: 'Login',
-  components: { BindOrderNumber, BindLicense },
+  components: { BindLicense },
   data() {
     return {
       click_count: 0,
-      dialogFormVisible: true,
       Background: Background,
       codeUrl: '',
       cookiePass: '',
       loginForm: {
-        username: '',
+        username: 'admin',
-        password: '',
+        password: '123456',
         rememberMe: false,
         code: '',
         uuid: ''
@@ -99,9 +125,16 @@ export default {
     this.getCookie()
     // token 过期提示
     this.point()
+
     this.getDevice()
   },
   methods: {
+    handleCommand(command) {
+      if (command === 'en') {
+        this.$message('click on item ' + command)
+        this.$router.push('/login_en')
+      }
+    },
     getCode() {
       getCodeImg().then(res => {
         this.codeUrl = res.img
@@ -128,6 +161,7 @@ export default {
       }
     },
     handleLogin() {
+      this.$i18n.locale = 'zh'
       this.$refs.loginForm.validate(valid => {
         const user = {
           username: this.loginForm.username,
@@ -136,12 +170,14 @@ export default {
           code: this.loginForm.code,
           uuid: this.loginForm.uuid
         }
+        if (user.password !== this.cookiePass) {
           user.password = encrypt(user.password)
+        }
         if (valid) {
           this.loading = true
           if (user.rememberMe) {
             Cookies.set('username', user.username, { expires: Config.passCookieExpires })
-            Cookies.set('password',  this.loginForm.password, { expires: Config.passCookieExpires })
+            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
             Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
           } else {
             Cookies.remove('username')
@@ -151,8 +187,7 @@ export default {
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
             this.$router.push({ path: this.redirect || '/' })
-            // eslint-disable-next-line handle-callback-err
+          }).catch(() => {
-          }).catch(err => {
             this.loading = false
             this.getCode()
           })
@@ -176,38 +211,63 @@ export default {
     },
     bingLicense() {
       this.click_count = this.click_count + 1
-      if (this.click_count % 10 === 0) {
+      if (this.click_count % 3 === 0) {
         this.$refs.BindLicense.dialogVisible = true
       }
-
     }
   }
 }
 </script>
 
 <style rel="stylesheet/scss" lang="scss">
-  .login {
+.main_div {
+  background: #f7f7f7;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
+  width: 100%;
+  background-size: cover;
+}
+.main_left {
+  background: #fffffff5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+}
+.login {
+  background: #00000045;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
   background-size: cover;
 }
 .title {
-    margin: 0 auto 30px auto;
+  margin: 30px auto 30px 0px;
+  text-align: left;
+  color: #707070;
+}
+.zhuce {
+  margin: 30px auto 30px 0px;
   text-align: center;
   color: #707070;
 }
 
 .login-form {
   border-radius: 6px;
-    background: #ffffff;
+  background: #fffffff0;
-    width: 385px;
+  width: 520px;
-    padding: 25px 25px 5px 25px;
+  height: 620px;
+  padding: 40px 80px 40px 80px;
   .el-input {
-      height: 38px;
+    height: 40px;
     input {
-        height: 38px;
+      height: 40px;
     }
   }
   .input-icon{