wms / wms4_zhongputaicang · Files

<template>
  <div id="userLayout" :class="['user-layout-wrapper']">
    <div class="left-div">
      <div id="logo">
        <div id="logoImg">
          <img src="~@/assets/logo.png" alt="" srcset="" class="imge">
        </div>

        <div id="text">华恒WMS仓储管理系统</div>

      </div>
      <div id="backgroundImg">

        <img src="~@/assets/beijingtu.jpg" alt="" srcset="" class="imge"/>

      </div>
      <div id="copyright">

        <div id="company">Copyright &copy; 2024 华恒焊接股份有限公司</div>

      </div>
    </div>
    <div class="right-div">

      <div id="welcome">欢迎来到华恒仓储管理系统 ！</div>
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <a-form-model-item required prop="username">
          <a-input id="name" v-model="model.username" size="default"  autocomplete="off" placeholder="请输入帐户名  / admin" @blur="getWarehouse">
          </a-input>
        </a-form-model-item>
        <a-form-model-item required prop="password">
          <a-input id="password" v-model="model.password" size="default" type="password" autocomplete="new-password" @input="maskPassword" placeholder="请输入密码">
          </a-input>
        </a-form-model-item>
        <a-form-model-item prop="warehouseCode">
          <a-select
            show-search
            placeholder="请选择仓库"
            option-filter-prop="label"
            v-model="model.warehouseCode" id="warehouseCode">
            <a-select-option v-for="item in warehouseList" :key="item.name" :value="item.code">{{
                item.name
              }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-item>
          <a-button id="logIn" size="default" type="primary" htmlType="submit" class="login-button"
            :loading="loginBtn" @click.stop.prevent="handleSubmit" :disabled="loginBtn">登 录</a-button>
        </a-form-item>
      </a-form-model>
    </div>

    <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
    <login-select-tenant ref="loginSelect" @success="loginSelectOk" ></login-select-tenant>

  </div>
</template>

<script>

import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import LoginAccount from '@views/user/LoginAccount.vue'
import { mapActions } from 'vuex'
import { getAction } from '@api/manage'
import { getWarehouseByUserCode } from '@api/api'
import TwoStepCaptcha from '@comp/tools/TwoStepCaptcha.vue'
import LoginSelectTenant from '@views/user/LoginSelectTenant.vue'
import { timeFix } from '@/utils/util'

export default {

  name: 'UserLayout',
  components: { LoginSelectTenant, TwoStepCaptcha },

  data() {
    return {
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      maskedPassword: '',
      loginType: 0,
      loginBtn: false,
      warehouseList: {},
      querySource: {},
      model: {
        username: '',
        password: '',

        warehouseCode: ''

        // inputCode: ''
      },
      validatorRules: {
        username: [

          {
            required: true,
            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入用户名!</span>
          },
          { validator: this.handleUsernameOrEmail }

        ],

        password: [
          {
            required: true,
            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请输入密码!</span>,
            validator: 'click'
          }
        ],
        warehouseCode: [
          {
            required: true,
            message: <span style="color: red; font-weight: bold; margin-left: 10%;">请选择仓库!</span>,
            trigger: 'change',
            validator: 'click'
          }
        ]

      }
    }
  },
  created() {

    this.handleChangeCheckCode()
    this.getWarehouse()

  },

  methods: {
    stepCaptchaCancel() {
      this.Logout().then(() => {
        this.loginBtn = false
        this.stepCaptchaVisible = false
      })
    },

    stepCaptchaSuccess() {
      this.loginSuccess()
    },
    handleSubmit() {

      this.loginBtn = true

      // if (this.customActiveKey === 'tab1') {

      // 使用账户密码登录
      this.handleLogin(this.rememberMe)

      // } else {
      //   //手机号码登录
      //   this.$refs.plogin.handleLogin(this.rememberMe)
      // }
    },
    // 校验失败
    validateFail() {

      this.loginBtn = false

    },
    requestSuccess(loginResult) {
      this.$refs.loginSelect.show(loginResult)
    },
    loginSelectOk() {
      this.loginSuccess()
    },
    loginSuccess() {

      this.$router.push({ path: '/dashboard/analysis' })

      this.$notification.success({
        message: '欢迎',

        description: `${timeFix()}，欢迎回来`
      })

    },
    //登录后台失败
    requestFailed(err) {

      let description = ((err.response || {}).data || {}).message || err.message || '请求出现错误，请稍后再试'

      this.$notification['error']({
        message: '登录失败',
        description: description,

        duration: 4
      })

      //账户密码登录错误后更新验证码
      if (this.customActiveKey === 'tab1' && description.indexOf('密码错误') > 0) {
        this.$refs.alogin.handleChangeCheckCode()
      }

      this.loginBtn = false

    },
    ...mapActions(['Login']),
    /**刷新验证码*/
    handleChangeCheckCode() {

      this.currdatetime = new Date().getTime()

      // this.model.inputCode = ''

      getAction(`/sys/randomImage/${this.currdatetime}`)
        .then(res => {
          if (res.success) {
            this.randCodeImage = res.result
            this.requestCodeSuccess = true
          } else {
            this.$message.error(res.message)
            this.requestCodeSuccess = false
          }
        })
        .catch(() => {

          this.requestCodeSuccess = false

        })

    },

    getWarehouse() {

      const that = this
      this.querySource.username = that.model.username
      let obj = getWarehouseByUserCode(that.querySource)
      obj.then(res => {
        that.warehouseList = res.result

        if (this.warehouseList != null) {

          this.model.warehouseCode = this.warehouseList[0].code

        }
      })
    },

    maskPassword() {
      //获取输入框的值
      let value = this.model.password
      if (value != '') {
        //如果不为空，逐个字符判断是否为圆点
        for (let i = 0; i < value.length; i++) {
          if (value.charAt(i) != '\u25CF') {
            //如果不是圆点，表示该字符为用户输入的值，放到真实值的对应位置
            let char = value.charAt(i)
            this.maskedPassword = this.maskedPassword.slice(0, i) + char + this.maskedPassword.slice(i)
            //将该字符替换为圆点
            value = value.slice(0, i) + '\u25CF' + value.slice(i + 1)
          }
        }
        //防止真实值和圆点的数量不对应。
        this.maskedPassword = this.maskedPassword.slice(0, value.length)
        //将转换过的字符串显示给用户
        this.model.password = value
      } else {
        //保持一致性
        this.maskedPassword = ''
      }
    },

    // 判断登录类型
    handleUsernameOrEmail(rule, value, callback) {

      const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/

      if (regex.test(value)) {
        this.loginType = 0
      } else {
        this.loginType = 1
      }
      callback()
    },
    /**
     * 验证字段
     * @param arr
     * @param callback
     */
    validateFields(arr, callback) {
      let promiseArray = []
      for (let item of arr) {
        let p = new Promise((resolve, reject) => {

          this.$refs['form'].validateField(item, err => {

            if (!err) {

              resolve()

            } else {

              reject(err)

            }
          })

        })

        promiseArray.push(p)
      }

      Promise.all(promiseArray)
        .then(() => {
          callback()
        })
        .catch(err => {
          callback(err)
        })

    },
    acceptUsername(username) {
      this.model['username'] = username
    },
    // 账号密码登录
    handleLogin(rememberMe) {

      this.validateFields(['username', 'password'], err => {

        if (!err) {
          let loginParams = {
            username: this.model.username,
            password: this.maskedPassword,
            warehouseCode: this.model.warehouseCode,
            checkKey: this.currdatetime,

            remember_me: rememberMe

          }

          this.Login(loginParams)
            .then(res => {
              this.$emit('success', res.result)
              this.loginSuccess()
            })
            .catch(err => {
              this.validateFail()
              this.requestFailed(err)
              this.$emit('fail', err)
              if (err.code == 499) {
                this.$router.push({ path: '/user/systemTokenModal' })
              }
            })

        } else {
          this.validateFail()
          this.$emit('validateFail')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>

#userLayout {
  height: 100%;
  display: flex; /* 设置flex布局 */
  width: 100%; /* 容器宽度设置为100% */
}
::v-deep .ant-select-selection {
  border-width: 1px;

  border-radius: 0.6vw;

  width: 100% !important;
  height: 100% !important;
  background-color: #fff;
  background-image: url(../../assets/cangku.png);
  padding-left: 50px; /* 留出图片的空间 */
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 28px 28px;
  box-shadow: 2px 5px 5px #c3c3c3;
  font-size: 18px;
}

/deep/ .ant-select-selection__rendered {
  margin-top: 8px;
}

///deep/ .ant-select-dropdown-menu-item-selected{
//  font-size: 18px;
//  height: 30px;
//}

.left-div {
  flex: 0 0 65%; /* 左侧div宽度为容器的70% */
}

.right-div {
  flex: 0 0 35%;
  background-color: #fafafa;
}
#backgroundImg {
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  .imge {
    height: 75%;

    background-size: contain;
    background-repeat: no-repeat;
    position: relative;

    background-position: top center;

  }

}
#logo {
  height: 15%;
  width: 100%;
  //background-color: red;
  //margin-left: 150px;
  //margin-left: 11%;
  //margin-top: 30px;
  display: flex;
}
#logoImg {
  width: 35%;
  height: 100%;
  float: right;
  position: relative;
  //background-color: yellow;
  .imge {
    width: 60%;
    height: 20%;
    position: absolute;
    right: 3%; /* 水平居右 */
    top: 50%; /* 从顶部偏移50% */
    transform: translateY(-50%); /* 向上移动自身高度的50%，实现垂直居中 */
    //object-fit: contain;
    //top: 39%;
    //left: 45%;
    //object-fit: cover; /* 或 contain、fill、none、scale-down */
    //object-position: center;

  }

}
#text {
  height: 100%;
  width: 100%;
  font-size: 1vw;
  align-content: center;
  color: #333333;
  //margin-left: 5px;
  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
  font-weight: bold;
  //background-color: blue;
}
#copyright {
  height: 5%;
  width: stretch;
  position: fixed;
  // transform: translateX(-50%);
  //margin-left: 820px;
  //margin-top: 100px;
}
#form-container {
  width: 200px; /* 设置宽度 */
  height: 50px; /* 设置高度 */
  //margin-left: 820px;
  //margin-top: 100px;
}
#company {
  align-content: center;
  text-align: center;
  color: #ac1e2b;
  height: 100%;
  width: 100%;
  font-size: 0.9vw;
  align-content: baseline;
  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}
#welcome {
  width: 85%;
  height: 3vw;
  margin-top: 25%;
  margin-left: 50%;
  transform: translateX(-48%);
  color: #333333;
  font-size: 1.5vw;
  align-content: center;
  font-family: 'Microsoft YaHei', 'SimSun', sans-serif;
}
#name {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.6vw;
  width: 85%;
  height: 3vw;
  line-height: 3vw;
  margin-top: 2.5vw;
  margin-left: 8%;
  background-image: url(../../assets/huiyuan.png);
  padding-left: 12%; /* 留出图片的空间 */
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 26px 26px;
  font-size: 1vw;
  color: #333333;
  box-shadow: 2px 5px 5px #c3c3c3;
}
#name::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}
#name::placeholder {
  font-size: 18px;
  color: #999999;
  padding-left: 0px;
}
#password {
  border-width: 1px;
  border-style: solid;
  border-radius: 0.6vw;
  width: 85%;
  height: 3vw;
  line-height: 3vw;
  margin-top: 0.5vw;
  margin-left: 8%;
  background-image: url(../../assets/mima.png);
  padding-left: 12%; /* 留出图片的空间 */
  background-repeat: no-repeat;
  background-position: 20px center;
  background-size: 26px 26px;
  font-size: 1vw;
  color: #333333;
  box-shadow: 2px 5px 5px #c3c3c3;
}
#password::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
}
#password::placeholder {
  font-size: 18px;
  color: #999999;
  padding-left: 0px;
}
/deep/ .ant-form-item-control{
  line-height: 65px;
}

/deep/ .ant-select-selection__rendered {
  line-height: 25px;
}

#warehouseCode {
  border-color: #ebf3fd;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.6vw;
  width: 85%;
  height: 3vw;
  line-height: 3vw;
  margin-top: 0.5vw;
  margin-left: 8%;
  font-size: 1vw;
  text-align: center;
  //color: #333333;
}
a-select {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;

  border-radius: 0.6vw;

}
#logIn {
  border-color: #ac1e2b;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.6vw;
  width: 85%;
  height: 3vw;
  line-height: 3vw;
  margin-top: 0.5vw;
  margin-left: 8%;
  font-size: 1.8vw;
  align-items: center;
  justify-content: center;
  display: flex;
  color: #ebf3fd;
  background-color: red;
  box-shadow: 2px 5px 5px #c3c3c3;
}

</style>