Jcdm041-Mes.git

hdy

2024-01-15 3d88285811ffb6930d70068d108398ceff08fd53

提交 \| 用户 \| 时间
fd2207	1	<template>
懒	2	<div class="login">
	3	<div class="login-left">
	4
	5	</div>
	6	<div class="login-right">
	7	<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
	8	<h2 class="title">江宸MES系统</h2>
	9	<el-form-item prop="username">
	10	<el-input
	11	v-model="loginForm.username"
	12	type="text"
	13	auto-complete="off"
	14	placeholder="账号"
	15	>
	16	<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
	17	</el-input>
	18	</el-form-item>
	19	<el-form-item prop="password">
	20	<el-input
	21	v-model="loginForm.password"
	22	type="password"
	23	auto-complete="off"
	24	placeholder="密码"
	25	@keyup.enter.native="handleLogin"
	26	>
	27	<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
	28	</el-input>
	29	</el-form-item>
	30	<!-- <el-form-item prop="code" v-if="captchaEnabled">
	31	<el-input
	32	v-model="loginForm.code"
	33	auto-complete="off"
	34	placeholder="验证码"
	35	style="width: 63%"
	36	@keyup.enter.native="handleLogin"
	37	>
	38	<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
	39	</el-input>
	40	<div class="login-code">
	41	<img :src="codeUrl" @click="getCode" class="login-code-img"/>
	42	</div>
	43	</el-form-item>-->
	44	<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
	45	<el-form-item style="width:100%;">
	46	<el-button
	47	:loading="loading"
	48	size="medium"
	49	type="primary"
	50	style="width:100%;"
	51	@click.native.prevent="handleLogin"
	52	>
	53	<span v-if="!loading">登录</span>
	54	<span v-else>登录中...</span>
	55	</el-button>
	56	<div style="float: right;" v-if="register">
	57	<router-link class="link-type" :to="'/register'">立即注册</router-link>
	58	</div>
	59	</el-form-item>
	60	</el-form>
	61	</div>
	62	<!-- 底部 -->
	63	<div class="el-login-footer">
	64	<span>Copyright © 2018-2023 jcdm.vip All Rights Reserved.</span>
	65	</div>
	66	</div>
	67	</template>
	68
	69	<script>
	70	import { getCodeImg } from "@/api/login";
	71	import Cookies from "js-cookie";
	72	import { encrypt, decrypt } from '@/utils/jsencrypt'
	73
	74	export default {
	75	name: "Login",
	76	data() {
	77	return {
	78	codeUrl: "",
	79	loginForm: {
	80	username: "admin",
	81	password: "admin123",
	82	rememberMe: false,
	83	code: "",
	84	uuid: ""
	85	},
	86	loginRules: {
	87	username: [
	88	{ required: true, trigger: "blur", message: "请输入您的账号" }
	89	],
	90	password: [
	91	{ required: true, trigger: "blur", message: "请输入您的密码" }
	92	],
	93	code: [{ required: true, trigger: "change", message: "请输入验证码" }]
	94	},
	95	loading: false,
	96	// 验证码开关
	97	captchaEnabled: true,
	98	// 注册开关
	99	register: false,
	100	redirect: undefined
	101	};
	102	},
	103	watch: {
	104	$route: {
	105	handler: function(route) {
	106	this.redirect = route.query && route.query.redirect;
	107	},
	108	immediate: true
	109	}
	110	},
	111	created() {
	112	this.getCode();
	113	this.getCookie();
	114	},
	115	methods: {
	116	getCode() {
	117	getCodeImg().then(res => {
	118	this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
	119	if (this.captchaEnabled) {
	120	this.codeUrl = "data:image/gif;base64," + res.img;
	121	this.loginForm.uuid = res.uuid;
	122	}
	123	});
	124	},
	125	getCookie() {
	126	const username = Cookies.get("username");
	127	const password = Cookies.get("password");
	128	const rememberMe = Cookies.get('rememberMe')
	129	this.loginForm = {
	130	username: username === undefined ? this.loginForm.username : username,
	131	password: password === undefined ? this.loginForm.password : decrypt(password),
	132	rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
	133	};
	134	},
	135	handleLogin() {
	136	this.$refs.loginForm.validate(valid => {
	137	if (valid) {
	138	this.loading = true;
	139	if (this.loginForm.rememberMe) {
	140	Cookies.set("username", this.loginForm.username, { expires: 30 });
	141	Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
	142	Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
	143	} else {
	144	Cookies.remove("username");
	145	Cookies.remove("password");
	146	Cookies.remove('rememberMe');
	147	}
	148	this.$store.dispatch("Login", this.loginForm).then(() => {
	149	this.$router.push({ path: this.redirect \|\| "/" }).catch(()=>{});
	150	}).catch(() => {
	151	this.loading = false;
	152	if (this.captchaEnabled) {
	153	this.getCode();
	154	}
	155	});
	156	}
	157	});
	158	}
	159	}
	160	};
	161	</script>
	162
	163	<style rel="stylesheet/scss" lang="scss">
	164	.login {
	165	display: flex;
	166	justify-content: center;
	167	align-items: center;
	168	height: 100%;
	169	//background-image: url("../assets/images/login-background.png");
	170	background-size: cover;
	171	}
	172
	173	.login-left {
	174	display: flex;
	175	justify-content: center;
	176	align-items: center;
	177	height: 100%;
	178	width: 50%;
	179	background-image: url("../assets/images/login-background.png");
	180	background-size: cover;
	181	}
	182
	183	.login-right {
	184	display: flex;
	185	justify-content: center;
	186	align-items: center;
	187	height: 100%;
	188	width: 50%;
	189	background-size: cover;
	190	}
	191
	192	.title {
	193	margin: 0px auto 30px auto;
	194	text-align: center;
	195	color: #707070;
	196	}
	197
	198	.login-form {
	199	border-radius: 6px;
	200	background: #ffffff;
	201	width: 400px;
	202	padding: 25px 25px 5px 25px;
	203	.el-input {
	204	height: 38px;
	205	input {
	206	height: 38px;
	207	}
	208	}
	209	.input-icon {
	210	height: 39px;
	211	width: 14px;
	212	margin-left: 2px;
	213	}
	214	}
	215	.login-tip {
	216	font-size: 13px;
	217	text-align: center;
	218	color: #bfbfbf;
	219	}
	220	.login-code {
	221	width: 33%;
	222	height: 38px;
	223	float: right;
	224	img {
	225	cursor: pointer;
	226	vertical-align: middle;
	227	}
	228	}
	229	.el-login-footer {
	230	height: 40px;
	231	line-height: 40px;
	232	position: fixed;
	233	bottom: 0;
	234	width: 100%;
	235	text-align: center;
	236	color: #020202;
	237	font-family: Arial;
	238	font-size: 12px;
	239	letter-spacing: 1px;
	240	}
	241	.login-code-img {
	242	height: 38px;
	243	}
	244	</style>