ant-design-vue-jeecg/src/views/user/LoginAccount.vue

<template>
  <div>
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-form-model-item required prop="username">
        <a-input v-model="model.username" size="large" placeholder="请输入帐户名 / admin" @blur="getWarehouse">
          <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item required prop="password">
        <a-input v-model="model.password" size="large" type="password" autocomplete="false"
                 placeholder="请输入密码 / 123456">
          <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </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">
          <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-model>
  </div>
</template>
<script>
import {getAction} from '@/api/manage'
import Vue from 'vue'
import {mapActions} from 'vuex'
import {getWarehouseByUserCode} from '@/api/api'
export default {
  name: 'LoginAccount',
  data() {
    return {
      requestCodeSuccess: false,
      randCodeImage: '',
      currdatetime: '',
      loginType: 0,
      warehouseList: {},
      querySource: {},
      model: {
        username: '',
        password: '',
        // warehouseCode: '',
        // inputCode: ''
      },
      validatorRules: {
        username: [
          {required: true, message: '请输入用户名!'},
          {validator: this.handleUsernameOrEmail}
        ],
        password: [{
          required: true, message: '请输入密码!', validator: 'click'
        }],
        warehouseCode: [{
          required: true, message: '请选择仓库!', trigger: "change" ,validator: 'click'
        }],
      }
    }
  },
  created() {
    this.handleChangeCheckCode();
    this.getWarehouse();
  },
  methods: {
    ...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;
        }
      })
    },
    // 判断登录类型
    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.model.password,
            warehouseCode: this.model.warehouseCode,
            checkKey: this.currdatetime,
            remember_me: rememberMe,
          }
          console.log("登录参数", loginParams)
          this.Login(loginParams).then((res) => {
            this.$emit('success', res.result)
          }).catch((err) => {
            this.$emit('fail', err)
          });
        } else {
          this.$emit('validateFail')
        }
      })
    }
  }
}
</script>
<style scoped>
</style>