Jcdm042-Mes.git

admin

2024-07-30 c1da6d36b8133744017a4f1c5e97821b591f02fc

提交 \| 用户 \| 时间
e57a89	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">
26c51e	8	<h2 class="title">江宸iMES系统</h2>
e57a89	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: {
c1da6d	80	// username: "RGGW",
A	81	// password: "123456",
e57a89	82	username: "admin",
懒	83	password: "admin123",
	84	rememberMe: false,
	85	code: "",
	86	uuid: ""
	87	},
	88	loginRules: {
	89	username: [
	90	{ required: true, trigger: "blur", message: "请输入您的账号" }
	91	],
	92	password: [
	93	{ required: true, trigger: "blur", message: "请输入您的密码" }
	94	],
	95	code: [{ required: true, trigger: "change", message: "请输入验证码" }]
	96	},
	97	loading: false,
	98	// 验证码开关
	99	captchaEnabled: true,
	100	// 注册开关
	101	register: false,
	102	redirect: undefined
	103	};
	104	},
	105	watch: {
	106	$route: {
	107	handler: function(route) {
	108	this.redirect = route.query && route.query.redirect;
	109	},
	110	immediate: true
	111	}
	112	},
	113	created() {
	114	this.getCode();
	115	this.getCookie();
	116	},
	117	methods: {
	118	getCode() {
	119	getCodeImg().then(res => {
	120	this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
	121	if (this.captchaEnabled) {
	122	this.codeUrl = "data:image/gif;base64," + res.img;
	123	this.loginForm.uuid = res.uuid;
	124	}
	125	});
	126	},
	127	getCookie() {
	128	const username = Cookies.get("username");
	129	const password = Cookies.get("password");
	130	const rememberMe = Cookies.get('rememberMe')
	131	this.loginForm = {
	132	username: username === undefined ? this.loginForm.username : username,
	133	password: password === undefined ? this.loginForm.password : decrypt(password),
	134	rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
	135	};
	136	},
	137	handleLogin() {
	138	this.$refs.loginForm.validate(valid => {
	139	if (valid) {
	140	this.loading = true;
	141	if (this.loginForm.rememberMe) {
	142	Cookies.set("username", this.loginForm.username, { expires: 30 });
	143	Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
	144	Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
	145	} else {
	146	Cookies.remove("username");
	147	Cookies.remove("password");
	148	Cookies.remove('rememberMe');
	149	}
	150	this.$store.dispatch("Login", this.loginForm).then(() => {
	151	this.$router.push({ path: this.redirect \|\| "/" }).catch(()=>{});
	152	}).catch(() => {
	153	this.loading = false;
	154	if (this.captchaEnabled) {
	155	this.getCode();
	156	}
	157	});
	158	}
	159	});
	160	}
	161	}
	162	};
	163	</script>
	164
	165	<style rel="stylesheet/scss" lang="scss">
	166	.login {
	167	display: flex;
	168	justify-content: center;
	169	align-items: center;
	170	height: 100%;
	171	//background-image: url("../assets/images/login-background.png");
	172	background-size: cover;
	173	}
	174
	175	.login-left {
	176	display: flex;
	177	justify-content: center;
	178	align-items: center;
	179	height: 100%;
	180	width: 50%;
	181	background-image: url("../assets/images/login-background.png");
	182	background-size: cover;
	183	}
	184
	185	.login-right {
	186	display: flex;
	187	justify-content: center;
	188	align-items: center;
	189	height: 100%;
	190	width: 50%;
	191	background-size: cover;
	192	}
	193
	194	.title {
	195	margin: 0px auto 30px auto;
	196	text-align: center;
	197	color: #707070;
	198	}
	199
	200	.login-form {
	201	border-radius: 6px;
	202	background: #ffffff;
	203	width: 400px;
	204	padding: 25px 25px 5px 25px;
	205	.el-input {
	206	height: 38px;
	207	input {
	208	height: 38px;
	209	}
	210	}
	211	.input-icon {
	212	height: 39px;
	213	width: 14px;
	214	margin-left: 2px;
	215	}
	216	}
	217	.login-tip {
	218	font-size: 13px;
	219	text-align: center;
	220	color: #bfbfbf;
	221	}
	222	.login-code {
	223	width: 33%;
	224	height: 38px;
	225	float: right;
	226	img {
	227	cursor: pointer;
	228	vertical-align: middle;
	229	}
	230	}
	231	.el-login-footer {
	232	height: 40px;
	233	line-height: 40px;
	234	position: fixed;
	235	bottom: 0;
	236	width: 100%;
	237	text-align: center;
	238	color: #020202;
	239	font-family: Arial;
	240	font-size: 12px;
	241	letter-spacing: 1px;
	242	}
	243	.login-code-img {
	244	height: 38px;
	245	}
	246	</style>