login.vue 3.08 KB
<template>
  <div id="login_box">
    <el-row type="flex" justify="center" align="middle" style="height:80%">
      <el-card class="box-card" shadow="hover" style="width:25%">
        <div slot="header" style="text-align:center" class="clearfix">
          <span style="font-size:24px">合同管理系统</span>
        </div>
        <el-form ref="login_form" :model="form" :rules="rules" label-width="60px" label-position="top">
          <el-form-item prop="username">
            <el-input v-model="form.username">
              <template slot="prepend">姓名</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input type="password" v-model="form.password" auto-complete="off" @keydown.enter="submitForm('login_form')">
              <template slot="prepend">密码</template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('login_form')">提交</el-button>
            <el-button @click="resetForm('login_form')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      auth_base_url: disparch_data.auth_base_url,
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
        // password: [
        //   { required: true, message: "请输入登录密码", trigger: "blur" }
        // ]
      }
    };
  },
  methods: {
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          window.localStorage.setItem("username", this.form.username);
          window.sessionStorage.setItem("loginCheck", true);
          this.$Axios({
            method: "post",
            url: this.auth_base_url + "users/login",
            headers: { "Content-Type": "application/json" },
            data: {
              user_type: "user",
              username: this.form.username,
              password: this.form.password
            }
          })
            .then(res => {
              if (res.data.ecode) {
                this.$message({
                  message: res.data.enote,
                  type: "error"
                });
              } else {
                window.sessionStorage.setItem("username", this.form.username);
                window.sessionStorage.setItem("user_unid", res.data.user_unid);
                window.sessionStorage.setItem('user_roles',JSON.stringify(res.data.roles));
                this.$router.push({ path: "/nav/search" });
              }
            })
            .catch(err => {
              this.$message({
                message: "登录错误",
                type: "error"
              });
            });
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    is_login() {}
  },
  mounted() {
    this.form.username = localStorage.getItem("username");
  }
};
</script>

<style scoped>
#login_box {
  height: 100%;
}
</style>