login.vue

<template>
  <div id="login_box" @click.ctrl.meta.alt="manager">
    <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 id="aa" 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_type" v-model="form.password" auto-complete="off" @keyup.enter.native="submitForm('login_form')">
              <template slot="prepend">密码</template>
              <el-button slot="append" :icon="view_password" @click="show_password"></el-button>
            </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 {
      password_type:"password",
      view_password:"icon i-password-not-view",
      contract_base_url: disparch_data.contract_base_url,
      code_base_url: disparch_data.code_base_url,
      auth_base_url: disparch_data.auth_base_url,
      net_error: false,
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
        // password: [
        //   { required: true, message: "请输入登录密码", trigger: "blur" }
        // ]
      }
    };
  },
  methods: {
    show_password(){
      if (this.password_type == "password") {
        this.password_type = "text",
        this.view_password = "icon i-password-view"
      }else {
        this.password_type = "password",
        this.view_password = "icon i-password-not-view"
      }
    },
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          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.localStorage.setItem("username", this.form.username);
                window.sessionStorage.setItem("loginCheck", true);
                window.sessionStorage.setItem("user_unid", res.data.user_unid);
                window.sessionStorage.setItem("rtoken", res.data.rtoken);
                window.sessionStorage.setItem(
                  "user_roles",
                  JSON.stringify(res.data.roles)
                );
                this.get_provinces(),
                  this.get_contract_state_data(),
                  this.get_contract_type_data(),
                  this.get_amount_state_unid_data(),
                  this.get_mainten_start_point_data(),
                  this.get_product_line_type_data(),
                  this.get_payment_type_data(),
                  // this.get_salesperson(),
                  // this.get_contract_unid(),
                  // this.get_projects(),
                  // this.get_customers();
                  this.$router.push({ path: "/nav/main" });
              }
            })
            .catch(err => {
              this.$message({
                message: "登录错误",
                type: "error"
              });
            });
        }
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    is_login() {},
    get_provinces() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "countries/0E229CD043/provinces"
      })
        .then(response => {
          sessionStorage.setItem(
            "provinces",
            JSON.stringify(response.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_contract_state_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/13BEFACBCF/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "contract_state_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_contract_type_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/8EC31D08A0/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "contract_type_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_amount_state_unid_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/42407C5EF2/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "amount_state_unid_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_mainten_start_point_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/55B997D596/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "mainten_start_point_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_product_line_type_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/4FC51AD3C9/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "product_line_type_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_payment_type_data() {
      this.$Axios({
        method: "get",
        url: this.code_base_url + "custom/cates/215649FB93/codes"
      })
        .then(res => {
          sessionStorage.setItem(
            "payment_type_data",
            JSON.stringify(res.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_salesperson() {
      this.$Axios({
        method: "get",
        url: this.auth_base_url + "users",
        params: {
          norm_type: "employee"
        }
      })
        .then(response => {
          sessionStorage.setItem(
            "salesperson_unid_selected_data",
            JSON.stringify(response.data.list_data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_contract_unid() {
      this.$Axios({
        method: "get",
        url: this.contract_base_url + "codes"
      })
        .then(response => {
          sessionStorage.setItem(
            "contract_unid_selected_data",
            JSON.stringify(response.data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    get_projects() {
      this.$Axios({
        method: "get",
        url: this.contract_base_url + "projects",
        headers: { "Content-Type": "application/json" }
      })
        .then(response => {
          sessionStorage.setItem(
            "project_unid_selected_data",
            JSON.stringify(response.data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    },
    manager() {
      window.sessionStorage.setItem("loginCheck", true);
      window.sessionStorage.setItem("manager", "1");
      this.get_provinces(),
        this.get_contract_state_data(),
        this.get_contract_type_data(),
        this.get_amount_state_unid_data(),
        this.get_mainten_start_point_data(),
        this.get_product_line_type_data(),
        this.get_payment_type_data(),
        // this.get_salesperson(),
        // this.get_contract_unid(),
        // this.get_projects(),
        // this.get_customers();
        this.$router.push({ path: "/nav/main" });
    },
    get_customers() {
      this.$Axios({
        method: "get",
        url: this.contract_base_url + "customers",
        headers: { "Content-Type": "application/json" }
      })
        .then(response => {
          sessionStorage.setItem(
            "customer_unid_selected_data",
            JSON.stringify(response.data)
          );
        })
        .catch(err => {
          this.$router.push({ path: "/" });
          this.$message({
            message: "网络错误",
            type: "error"
          });
        });
    }
  },
  mounted() {
    this.form.username = localStorage.getItem("username");
  }
};
</script>

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