@logwire/logwire-wms-pda-ui 1.1.17 → 1.2.0

package/src/components/module/Login/index.vue

@@ -1,328 +1,355 @@
-<!--
-  登录模块
-  @author: 张文
-  @date: 2022-02-23
--->
-<template>
-  <div>
-
-    <!-- 用户名 -->
-    <lw-input
-      v-model="username"
-      v-bind="inputStyle"
-      :placeholder="$lwLanguage.get('wms_project.pda.model.loginModel.username', '请输入用户名')"
-    >
-      <template #title>
-        <slot name="usernameTitle">
-          <img class="lw-login-model-img" :src="usernameSrc" alt="">
-        </slot>
-      </template>
-
-    </lw-input>
-
-    <!-- 密码 -->
-    <lw-input
-      v-model="password"
-      type="password"
-      v-bind="inputStyle"
-      :placeholder="$lwLanguage.get('wms_project.pda.model.loginModel.password', '请输入密码')"
-    >
-      <template #title>
-        <slot name="passwordTitle">
-          <img class="lw-login-model-img" :src="passwordSrc" alt="">
-        </slot>
-      </template>
-    </lw-input>
-
-    <!-- 记住账号密码 -->
-    <div class="lw-global-flex-start lw-login-checkbox">
-      <van-checkbox
-        v-if="showSaveUsername || showSavePassword"
-        v-model="saveUsername"
-        shape="square"
-        icon-size="14px"
-        @change="saveUsernameChange"
-      >{{ $lwLanguage.get('wms_project.pda.model.loginModel.saveUsername', '记住用户名') }}</van-checkbox>
-      <van-checkbox
-        v-if="showSavePassword"
-        v-model="savePassword"
-        shape="square"
-        icon-size="14px"
-        @change="savePasswordChange"
-      >{{ $lwLanguage.get('wms_project.pda.model.loginModel.savePassword', '记住密码') }}</van-checkbox>
-
-      <slot name="addCheckbox"/>
-    </div>
-
-    <!-- 中部插槽 -->
-    <slot name="body"/>
-
-    <!-- 登录按钮 -->
-    <div class="lw-global-flex-start lw-login-btn">
-
-      <lw-button @click="confirm">
-        <template>
-          <slot name="button">{{ $lwLanguage.get('wms_project.pda.model.loginModel.login', '登录') }}</slot>
-        </template>
-      </lw-button>
-
-      <slot name="addButton"/>
-    </div>
-
-    <!-- 切换语言 -->
-    <div class="lw-global-flex-center language" @click="language">
-      <img
-        class="language-img"
-        :src="require('./../../../assets/img/lwLoginModel/language.png')"
-        alt=""
-      >
-      <span>{{ $lwLanguage.get('wms_project.pda.model.loginModel.language', '切换语言') }} > </span>
-    </div>
-
-    <!-- 底部插槽 -->
-    <slot name="end"/>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: "lwLoginModule",
-  props: {
-    // 用户名图标
-    usernameSrc: {
-      type: null,
-      default: () => {
-        return require('./../../../assets/img/lwLoginModel/username.png')
-      }
-    },
-    // 密码图标
-    passwordSrc: {
-      type: null,
-      default: () => {
-        return require('./../../../assets/img/lwLoginModel/password.png')
-      }
-    },
-
-
-    // 是否显示记住账号
-    showSaveUsername: {
-      type: Boolean,
-      default: true
-    },
-    // 是否显示记住密码，记住密码开启时将忽略记住账号的值
-    showSavePassword: {
-      type: Boolean,
-      default: true
-    },
-
-
-    // 是否自动完成登录
-    autoLogin: {
-      type: Boolean,
-      default: true
-    },
-    // 登录的接口
-    loginApi:{
-      type: String,
-      default: '/api/auth/app-login/wms/wmsLogin'
-    },
-    // 登录时额外传递的参数
-    loginData:{
-      type: Object,
-      default: ()=>{}
-    },
-
-
-    // 登录成功后跳转的页面，如果为空将不跳转
-    path: String,
-    // 跳转时额外传递的参数
-    query: Object,
-  },
-  data() {
-    return {
-      // 输入框样式
-      inputStyle: {
-        notKeyboard: false,
-        showKeyboard: false,
-        showColon: false,
-      },
-      // 用户名
-      username: '',
-      // 密码
-      password: '',
-      // 记住账号
-      saveUsername: false,
-      // 记住密码
-      savePassword: false
-    }
-  },
-  mounted() {
-    const loginInfo = this.$lwLocalStorag.get('lwLoginInfo') || {}
-    if (Object.keys(loginInfo).length) {
-      loginInfo.password = atob(loginInfo.password)
-      for (const i in loginInfo) {
-        this[i] = loginInfo[i]
-      }
-    }
-  },
-  methods: {
-    // 记住账号复选框值变化
-    saveUsernameChange(data) {
-      !data ? this.savePassword = false : ''
-    },
-
-    // 记住密码复选框值变化
-    savePasswordChange(data) {
-      data ? this.saveUsername = true : ''
-    },
-
-    // 记住账号密码
-    saveNumPsw(){
-      const loginInfo = {
-        username: '',
-        password: '',
-        saveUsername: this.saveUsername,
-        savePassword: this.savePassword
-      }
-
-
-      // 是否需要储存账号密码
-      if ((this.showSaveUsername || this.showSavePassword) && this.saveUsername) {
-        loginInfo.username = this.username
-      } else {
-        loginInfo.saveUsername = false
-      }
-
-      if (this.showSavePassword && this.savePassword) {
-        loginInfo.password = btoa(this.password)
-      } else {
-        loginInfo.savePassword = false
-      }
-
-      // 在本地存入账号密码信息
-      this.$lwLocalStorag.set('lwLoginInfo', loginInfo)
-    },
-
-    // 登录
-    async confirm() {
-      try{
-        if (this.username === '' || this.password === '') {
-          this.$lwShowErrorMsg(
-            this.$lwLanguage.get('wms_project.pda.model.loginModel.inputError', '用户名或密码输入有误')
-          )
-          return;
-        }
-
-        this.saveNumPsw()
-
-        const loginInfo = {
-          username: this.username,
-          password: this.password,
-          saveUsername: this.saveUsername,
-          savePassword: this.savePassword
-        }
-
-
-        // 如果选择手动控制登录就返回账号密码数据
-        if (!this.autoLogin) {
-          this.$emit('login', loginInfo)
-          return
-        }
-
-        // 调用登录接口
-        const res = await this.$lwAxios({
-          method: 'post',
-          url: this.loginApi,
-          data: {
-            ...this.loginData,
-            ...loginInfo
-          }
-        })
-
-        // 储存token
-        this.$lwApiUtils.setToken(res.token)
-
-        await Promise.all([
-          // 绑定UUID
-          this.$lwUUID.bound(),
-          // 获取字典数据
-          this.$lwDict.asyncGet(),
-          // 获取权限数据
-          this.$lwPermissions.asyncGet(),
-        ])
-
-        // 如果存在跳转页面就自动跳转
-        if (this.path) {
-          this.$router.push({
-            path: this.path,
-            query: this.query || {}
-          })
-
-          return
-        }
-
-        // 登录成功后触发的事件
-        this.$emit('success', res)
-      }catch (err){
-        console.warn('登录出错：', err)
-      }
-    },
-
-    // 语言切换
-    language(){
-      this.$router.push({
-        path:'/lwLanguage'
-      })
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-/**
-* 登录模块样式
-*/
-
-@import "../../../assets/css/var.less";
-
-.language{
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-  color: #999;
-  margin-top: 10px;
-
-
-  .language-img{
-    width: 16px;
-    margin-right: 5px;
-  }
-}
-
-.lw-login-model-img{
-  width: 20px;
-}
-
-.lw-login-checkbox{
-  margin-top: 10px;
-  font-size: 14px;
-  color: @fontColor;
-
-  >div{
-    flex: 1;
-  }
-}
-
-.lw-login-btn{
-  margin-top: 20px;
-
-  >.lw-button{
-    display: block;
-    flex: 1;
-  }
-}
-
-
-</style>
+<!--
+  登录模块
+  @author: 张文
+  @date: 2022-02-23
+-->
+<template>
+  <div>
+
+    <!-- 用户名 -->
+    <lw-input
+      v-model="username"
+      v-bind="inputStyle"
+      :placeholder="$lwLanguage.get('wms_project.pda.model.loginModel.username', '请输入用户名')"
+    >
+      <template #title>
+        <slot name="usernameTitle">
+          <img class="lw-login-model-img" :src="usernameSrc" alt="">
+        </slot>
+      </template>
+
+    </lw-input>
+
+    <!-- 密码 -->
+    <lw-input
+      v-model="password"
+      type="password"
+      v-bind="inputStyle"
+      :placeholder="$lwLanguage.get('wms_project.pda.model.loginModel.password', '请输入密码')"
+    >
+      <template #title>
+        <slot name="passwordTitle">
+          <img class="lw-login-model-img" :src="passwordSrc" alt="">
+        </slot>
+      </template>
+    </lw-input>
+
+    <!-- 记住账号密码 -->
+    <div class="lw-global-flex-start lw-login-checkbox">
+      <van-checkbox
+        v-if="showSaveUsername || showSavePassword"
+        v-model="saveUsername"
+        shape="square"
+        icon-size="14px"
+        @change="saveUsernameChange"
+      >{{ $lwLanguage.get('wms_project.pda.model.loginModel.saveUsername', '记住用户名') }}</van-checkbox>
+      <van-checkbox
+        v-if="showSavePassword"
+        v-model="savePassword"
+        shape="square"
+        icon-size="14px"
+        @change="savePasswordChange"
+      >{{ $lwLanguage.get('wms_project.pda.model.loginModel.savePassword', '记住密码') }}</van-checkbox>
+
+      <slot name="addCheckbox"/>
+    </div>
+
+    <!-- 中部插槽 -->
+    <slot name="body"/>
+
+    <!-- 登录按钮 -->
+    <div class="lw-global-flex-start lw-login-btn">
+
+      <lw-button @click="confirm">
+        <template>
+          <slot name="button">{{ $lwLanguage.get('wms_project.pda.model.loginModel.login', '登录') }}</slot>
+        </template>
+      </lw-button>
+
+    </div>
+
+    <div class="lw-global-flex-center select-box">
+      <!-- 切换时区 -->
+      <div class="lw-global-flex-center select-menu" @click="timezone">
+        <img
+          class="language-img"
+          src="./../../../assets/img/lwLoginModel/timezone.png"
+          alt=""
+        >
+        <span>{{ $lwLanguage.get('wms_project.pda.page.common.timezone.change', '切换时区') }}</span>
+      </div>
+
+      <!-- 分割线 -->
+      <div class="select-cut">|</div>
+
+      <!-- 切换语言 -->
+      <div class="lw-global-flex-center select-menu" @click="language">
+        <img
+          class="language-img"
+          src="./../../../assets/img/lwLoginModel/language.png"
+          alt=""
+        >
+        <span>{{ $lwLanguage.get('wms_project.pda.model.loginModel.language', '切换语言') }}</span>
+      </div>
+
+
+    </div>
+
+    <!-- 底部插槽 -->
+    <slot name="end"/>
+  </div>
+</template>
+
+<script>
+
+import {loginAndInit} from "../../../mixins/loginAndInit";
+import usernameImage from './../../../assets/img/lwLoginModel/username.png'
+import passwordImage from './../../../assets/img/lwLoginModel/password.png'
+
+export default {
+  name: "lwLoginModule",
+  mixins:[loginAndInit],
+  props: {
+    // 用户名图标
+    usernameSrc: {
+      type: null,
+      default: () => {
+        return usernameImage
+      }
+    },
+    // 密码图标
+    passwordSrc: {
+      type: null,
+      default: () => {
+        return passwordImage
+      }
+    },
+
+
+    // 是否显示记住账号
+    showSaveUsername: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示记住密码，记住密码开启时将忽略记住账号的值
+    showSavePassword: {
+      type: Boolean,
+      default: true
+    },
+
+
+    // 是否自动完成登录
+    autoLogin: {
+      type: Boolean,
+      default: true
+    },
+    // 登录的接口
+    loginApi:{
+      type: String,
+      default: '/api/auth/app-login/wms/wmsLogin'
+    },
+    // 登录时额外传递的参数
+    loginData:{
+      type: Object,
+      default: ()=>{}
+    },
+
+
+    // 登录成功后跳转的页面，如果为空将不跳转
+    path: String,
+    // 跳转时额外传递的参数
+    query: Object,
+  },
+  data() {
+    return {
+      // 输入框样式
+      inputStyle: {
+        notKeyboard: false,
+        showKeyboard: false,
+        showColon: false,
+      },
+      // 用户名
+      username: '',
+      // 密码
+      password: '',
+      // 记住账号
+      saveUsername: false,
+      // 记住密码
+      savePassword: false
+    }
+  },
+  mounted() {
+    const loginInfo = this.$lwLocalStorag.get('lwLoginInfo') || {}
+    if (Object.keys(loginInfo).length) {
+      loginInfo.password = atob(loginInfo.password)
+      for (const i in loginInfo) {
+        this[i] = loginInfo[i]
+      }
+    }
+  },
+  methods: {
+    // 记住账号复选框值变化
+    saveUsernameChange(data) {
+      !data ? this.savePassword = false : ''
+    },
+
+    // 记住密码复选框值变化
+    savePasswordChange(data) {
+      data ? this.saveUsername = true : ''
+    },
+
+    // 记住账号密码
+    saveNumPsw(){
+      const loginInfo = {
+        username: '',
+        password: '',
+        saveUsername: this.saveUsername,
+        savePassword: this.savePassword
+      }
+
+
+      // 是否需要储存账号密码
+      if ((this.showSaveUsername || this.showSavePassword) && this.saveUsername) {
+        loginInfo.username = this.username
+      } else {
+        loginInfo.saveUsername = false
+      }
+
+      if (this.showSavePassword && this.savePassword) {
+        loginInfo.password = btoa(this.password)
+      } else {
+        loginInfo.savePassword = false
+      }
+
+      // 在本地存入账号密码信息
+      this.$lwLocalStorag.set('lwLoginInfo', loginInfo)
+    },
+
+    // 登录
+    async confirm() {
+      try{
+        if (this.username === '' || this.password === '') {
+          this.$lwShowErrorMsg(
+            this.$lwLanguage.get('wms_project.pda.model.loginModel.inputError', '用户名或密码输入有误')
+          )
+          return;
+        }
+
+        this.saveNumPsw()
+
+        const loginInfo = {
+          username: this.username,
+          password: this.password,
+          saveUsername: this.saveUsername,
+          savePassword: this.savePassword
+        }
+
+
+        // 如果选择手动控制登录就返回账号密码数据
+        if (!this.autoLogin) {
+          this.$emit('login', loginInfo)
+          return
+        }
+
+        // 调用登录接口
+        const res = await this.$lwAxios({
+          method: 'post',
+          url: this.loginApi,
+          data: {
+            ...this.loginData,
+            ...loginInfo
+          }
+        })
+
+        // 储存token
+        this.$lwApiUtils.setToken(res.token)
+
+        await this.getSystemInitData()
+
+        // 如果存在跳转页面就自动跳转
+        if (this.path) {
+          this.$router.push({
+            path: this.path,
+            query: this.query || {}
+          })
+
+          return
+        }
+
+        // 登录成功后触发的事件
+        this.$emit('success', res)
+      }catch (err){
+        console.error('登录出错：', err)
+      }
+    },
+
+    // 语言切换
+    language(){
+      this.$router.push({
+        path:'/lwLanguage'
+      })
+    },
+
+    // 时区切换
+    timezone(){
+      this.$router.push({
+        path:'/lwTimezone'
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+/**
+* 登录模块样式
+*/
+
+@import "../../../assets/css/var.less";
+
+.select-box{
+  margin-top: 10px;
+  font-size: 14px;
+  color: #999;
+
+  .select-cut{
+    margin: 0 10px;
+  }
+
+  .select-menu{
+    text-align: center;
+
+
+    .language-img{
+      width: 16px;
+      margin-right: 5px;
+    }
+  }
+}
+
+.lw-login-model-img{
+  width: 20px;
+}
+
+.lw-login-checkbox{
+  margin-top: 10px;
+  font-size: 14px;
+  color: @fontColor;
+
+  >div{
+    flex: 1;
+  }
+}
+
+.lw-login-btn{
+  margin-top: 20px;
+
+  >.lw-button{
+    display: block;
+    flex: 1;
+  }
+}
+
+
+</style>