LQBZ_web/src/views/login/index.vue

<template>
  <div class="login">
    <div class="aside">
      <div class="aside-h">
        <h1>灵 巧 敏 捷 保 障 软 件 系 统</h1>
      </div>
      <el-form label-position="right" label-width="60px" ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="true" class="login-form">
        <el-form-item prop="username" label="用户名">
          <el-input v-model="ruleForm.username" type="text" auto-complete="off" placeholder="账号" @keyup.enter.native="submitForm('ruleForm')" />
        </el-form-item>
        <el-form-item prop="password" label="密码">
          <el-input v-model="ruleForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="submitForm('ruleForm')" />
        </el-form-item>
        <el-form-item style="width: 100%">
          <el-button size="medium" type="primary" style="width: 70%; height: 40px; background: rgb(11, 143, 218); margin-left: 20px; border-radius: 15px" @click.native.prevent="submitForm('ruleForm')">
            <span style="font-size: 20px; font-weight: bold">登 录</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getTile } from '@/utils/tags'
import { useMessage } from '@/utils/element-ui'
export default {
  name: 'Login',
  data() {
    // 这里存放数据
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入账号'))
      } else {
        callback()
      }
    }
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      passwordType: 'password',
      loading: false,
      ruleForm: {
        username: 'admin',
        password: 'admin123'
      },
      rules: {
        username: [{ validator: validateAccount, trigger: 'blur' }],
        password: [{ validator: validatePassword, trigger: 'blur' }]
      }
    }
  },

  methods: {
    onChangePsdType() {
      this.passwordType === 'password' ? (this.passwordType = 'text') : (this.passwordType = 'password')
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.ruleForm).then((res) => {
            if (res.code == 200) {
              this.loading = false
            } else {
              useMessage('error', res.msg)
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  },
  beforeDestroy() {
    //登录成功去综合看板 设置tags
    const { fullPath, meta, name, params, path, query } = this.$route
    this.$store.commit('app/addTagsViewList', {
      fullPath,
      meta,
      name,
      params,
      path,
      query,
      title: getTile(this.$route)
    })
  }
}
</script>

<style lang="scss">
@import './index.scss';
</style>