|
@@ -1,21 +1,26 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
-
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form"
|
|
|
+ auto-complete="on"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
<!-- <div class="title-container">
|
|
|
<img src="@/assets/login/title.png" alt="">
|
|
|
</div> -->
|
|
|
<div class="image-container">
|
|
|
- <img src="@/assets/login/image.png" alt="">
|
|
|
+ <img src="@/assets/login/image.png" alt="" />
|
|
|
</div>
|
|
|
<div class="right-container">
|
|
|
<div class="empty-height" />
|
|
|
<div class="form-container">
|
|
|
-
|
|
|
<div class="title">供应链管理系统</div>
|
|
|
-<!-- <div class="logo">-->
|
|
|
-<!-- <img src="@/assets/login/logo.png" alt="">-->
|
|
|
-<!-- </div>-->
|
|
|
+ <!-- <div class="logo">-->
|
|
|
+ <!-- <img src="@/assets/login/logo.png" alt="">-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
<el-form-item prop="username">
|
|
|
<span class="svg-container">
|
|
@@ -48,7 +53,9 @@
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
/>
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
+ <svg-icon
|
|
|
+ :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
+ />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
|
|
@@ -66,13 +73,20 @@
|
|
|
auto-complete="off"
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
/>
|
|
|
- <div class="code" @click="getCode"><img :src="'data:image/jpeg;base64,' + codeImage" alt=""></div>
|
|
|
+ <div class="code" @click="getCode">
|
|
|
+ <img :src="'data:image/jpeg;base64,' + codeImage" alt="" />
|
|
|
+ </div>
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-checkbox v-model="isRemenberPw">记住密码</el-checkbox>
|
|
|
|
|
|
<div class="button-container">
|
|
|
- <el-button :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ type="primary"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -81,69 +95,75 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { validUsername } from '@/utils/validate'
|
|
|
-import Cookies from 'js-cookie'
|
|
|
-import { getCode } from '@/api/user'
|
|
|
+import { validUsername } from "@/utils/validate";
|
|
|
+import Cookies from "js-cookie";
|
|
|
+import { getCode } from "@/api/user";
|
|
|
|
|
|
export default {
|
|
|
- name: 'Login',
|
|
|
+ name: "Login",
|
|
|
data() {
|
|
|
const validateUsername = (rule, value, callback) => {
|
|
|
if (value.length <= 0) {
|
|
|
- callback(new Error('请输入用户名'))
|
|
|
+ callback(new Error("请输入用户名"));
|
|
|
} else {
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
const validatePassword = (rule, value, callback) => {
|
|
|
if (value.length <= 0) {
|
|
|
- callback(new Error('请输入密码'))
|
|
|
+ callback(new Error("请输入密码"));
|
|
|
} else {
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
const validateCode = (rule, value, callback) => {
|
|
|
if (value.length <= 0) {
|
|
|
- callback(new Error('请输入验证码'))
|
|
|
+ callback(new Error("请输入验证码"));
|
|
|
} else {
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
return {
|
|
|
loginForm: {
|
|
|
- username: '',
|
|
|
- password: '',
|
|
|
- code: '',
|
|
|
- codeValue: ''
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ code: "",
|
|
|
+ codeValue: "",
|
|
|
},
|
|
|
loginRules: {
|
|
|
- username: [{ required: true, trigger: 'change', validator: validateUsername }],
|
|
|
- password: [{ required: true, trigger: 'change', validator: validatePassword }],
|
|
|
- codeValue: [{ required: true, trigger: 'change', validator: validateCode }],
|
|
|
+ username: [
|
|
|
+ { required: true, trigger: "change", validator: validateUsername },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, trigger: "change", validator: validatePassword },
|
|
|
+ ],
|
|
|
+ codeValue: [
|
|
|
+ { required: true, trigger: "change", validator: validateCode },
|
|
|
+ ],
|
|
|
},
|
|
|
loading: false,
|
|
|
- passwordType: 'password',
|
|
|
+ passwordType: "password",
|
|
|
redirect: undefined,
|
|
|
isRemenberPw: false,
|
|
|
- codeImage: '',
|
|
|
- }
|
|
|
+ codeImage: "",
|
|
|
+ };
|
|
|
},
|
|
|
watch: {
|
|
|
$route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
},
|
|
|
- immediate: true
|
|
|
- }
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
// 获取缓存信息
|
|
|
- if(localStorage.getItem("supply_login")) {
|
|
|
+ if (localStorage.getItem("supply_login")) {
|
|
|
let storageData = JSON.parse(localStorage.getItem("supply_login"));
|
|
|
this.loginForm.username = storageData.username;
|
|
|
this.isRemenberPw = storageData.isRemenberPw;
|
|
|
}
|
|
|
- if(this.isRemenberPw) {
|
|
|
+ if (this.isRemenberPw) {
|
|
|
this.getCookie();
|
|
|
}
|
|
|
|
|
@@ -152,57 +172,63 @@ export default {
|
|
|
methods: {
|
|
|
// 获取验证码
|
|
|
getCode() {
|
|
|
- getCode().then(res => {
|
|
|
+ getCode().then((res) => {
|
|
|
console.log(res);
|
|
|
this.loginForm.code = res.data.code;
|
|
|
this.codeImage = res.data.pic;
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 显示隐藏密码
|
|
|
showPwd() {
|
|
|
- if (this.passwordType === 'password') {
|
|
|
- this.passwordType = ''
|
|
|
+ if (this.passwordType === "password") {
|
|
|
+ this.passwordType = "";
|
|
|
} else {
|
|
|
- this.passwordType = 'password'
|
|
|
+ this.passwordType = "password";
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.password.focus()
|
|
|
- })
|
|
|
+ this.$refs.password.focus();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 登录
|
|
|
handleLogin() {
|
|
|
console.log(this.loginForm);
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- this.loading = true
|
|
|
- this.$store.dispatch('user/login', this.loginForm).then(() => {
|
|
|
- console.log(this.redirect);
|
|
|
- this.$router.push({ path: this.redirect || '/' })
|
|
|
- this.saveUnAndPw();
|
|
|
- this.loading = false
|
|
|
- }).catch(() => {
|
|
|
- this.getCode();
|
|
|
- this.loginForm.codeValue = '';
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ this.loading = true;
|
|
|
+ this.$store
|
|
|
+ .dispatch("user/login", this.loginForm)
|
|
|
+ .then(() => {
|
|
|
+ console.log(this.redirect);
|
|
|
+
|
|
|
+ this.$router.push({ path: this.redirect || "/" });
|
|
|
+ this.$store.commit("user/showMessage", "yes");
|
|
|
+ this.saveUnAndPw();
|
|
|
+
|
|
|
+ this.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.getCode();
|
|
|
+ this.loginForm.codeValue = "";
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
} else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 处理账号密码的储存
|
|
|
saveUnAndPw() {
|
|
|
let storageData = {
|
|
|
username: this.loginForm.username,
|
|
|
- isRemenberPw: this.isRemenberPw
|
|
|
- }
|
|
|
+ isRemenberPw: this.isRemenberPw,
|
|
|
+ };
|
|
|
localStorage.setItem("supply_login", JSON.stringify(storageData));
|
|
|
|
|
|
- if(this.isRemenberPw) {
|
|
|
+ if (this.isRemenberPw) {
|
|
|
this.setCookie(this.loginForm.username, this.loginForm.password, 7);
|
|
|
}
|
|
|
},
|
|
@@ -212,20 +238,30 @@ export default {
|
|
|
var exdate = new Date(); //获取时间
|
|
|
exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
|
|
|
//字符串拼接cookie
|
|
|
- window.document.cookie = "supply_username" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
|
|
|
- window.document.cookie = "supply_password" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
|
|
|
+ window.document.cookie =
|
|
|
+ "supply_username" +
|
|
|
+ "=" +
|
|
|
+ c_name +
|
|
|
+ ";path=/;expires=" +
|
|
|
+ exdate.toGMTString();
|
|
|
+ window.document.cookie =
|
|
|
+ "supply_password" +
|
|
|
+ "=" +
|
|
|
+ c_pwd +
|
|
|
+ ";path=/;expires=" +
|
|
|
+ exdate.toGMTString();
|
|
|
},
|
|
|
|
|
|
//读取cookie
|
|
|
- getCookie: function() {
|
|
|
+ getCookie: function () {
|
|
|
if (document.cookie.length > 0) {
|
|
|
- var arr = document.cookie.split('; '); //这里显示的格式需要切割一下自己可输出看下
|
|
|
+ var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
|
|
|
for (var i = 0; i < arr.length; i++) {
|
|
|
- var arr2 = arr[i].split('='); //再次切割
|
|
|
+ var arr2 = arr[i].split("="); //再次切割
|
|
|
//判断查找相对应的值
|
|
|
- if (arr2[0] == 'supply_username') {
|
|
|
+ if (arr2[0] == "supply_username") {
|
|
|
this.loginForm.username = arr2[1]; //保存到保存数据的地方
|
|
|
- } else if (arr2[0] == 'supply_password') {
|
|
|
+ } else if (arr2[0] == "supply_password") {
|
|
|
this.loginForm.password = arr2[1];
|
|
|
}
|
|
|
}
|
|
@@ -233,20 +269,19 @@ export default {
|
|
|
},
|
|
|
|
|
|
//清除cookie
|
|
|
- clearCookie: function() {
|
|
|
+ clearCookie: function () {
|
|
|
this.setCookie("", "", -1); //修改2值都为空,天数为负1天就好了
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
/* 修复input 背景不协调 和光标变色 */
|
|
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
|
|
|
-$bg:#283443;
|
|
|
-$light_gray:#fff;
|
|
|
+$bg: #283443;
|
|
|
+$light_gray: #fff;
|
|
|
$cursor: #fff;
|
|
|
$back: #333;
|
|
|
|
|
@@ -258,7 +293,7 @@ $back: #333;
|
|
|
|
|
|
/* reset element-ui css */
|
|
|
.login-container {
|
|
|
- background: url('~@/assets/login/background.png') center center;
|
|
|
+ background: url("~@/assets/login/background.png") center center;
|
|
|
background-size: cover;
|
|
|
.el-input {
|
|
|
display: inline-block;
|
|
@@ -302,9 +337,9 @@ $back: #333;
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-$bg:#2d3a4b;
|
|
|
-$dark_gray:#889aa4;
|
|
|
-$light_gray:#eee;
|
|
|
+$bg: #2d3a4b;
|
|
|
+$dark_gray: #889aa4;
|
|
|
+$light_gray: #eee;
|
|
|
|
|
|
.login-container {
|
|
|
min-height: 100%;
|
|
@@ -365,7 +400,7 @@ $light_gray:#eee;
|
|
|
|
|
|
.svg-container {
|
|
|
padding: 6px 5px 6px 5px;
|
|
|
- color: #33AEF7;
|
|
|
+ color: #33aef7;
|
|
|
vertical-align: middle;
|
|
|
width: 30px;
|
|
|
display: inline-block;
|
|
@@ -409,7 +444,7 @@ $light_gray:#eee;
|
|
|
height: 45px;
|
|
|
border-radius: 45px;
|
|
|
background: #33aef7;
|
|
|
- box-shadow: 2px 3px 8px 0px rgba(5,155,245,0.75);
|
|
|
+ box-shadow: 2px 3px 8px 0px rgba(5, 155, 245, 0.75);
|
|
|
}
|
|
|
}
|
|
|
}
|