From 5d4d64bf94fa0b36d97afe25e949c81316965b27 Mon Sep 17 00:00:00 2001
From: zouyu <2723363702@qq.com>
Date: 星期一, 04 九月 2023 15:05:24 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.73.113:9001/r/lims-before
---
src/views/login/index.vue | 396 ++++++++++++++++++++++++++++----------------------------
1 files changed, 199 insertions(+), 197 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 6fcb22a..1d73885 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,73 +1,188 @@
+<style scoped>
+.enter {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ background-image: url("../../assets/404_images/login-form-bg.png");
+ background-size: 100% 100%;
+}
+
+.left {
+ width: calc(100% - 500px);
+ height: 100%;
+ overflow: hidden;
+}
+
+.left img {
+ width: 100%;
+ min-height: 100%;
+}
+
+.right {
+ width: 600px;
+ overflow-y: auto;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.title_big {
+ color: #004EA2;
+ font-size: 40px;
+ margin-bottom: 8px;
+}
+
+.title_small {
+ color: #004EA2;
+ font-size: 24px;
+}
+
+.elform {
+ margin-top: 50px;
+}
+
+.sao {
+ font-size: 14px;
+ color: #004EA2;
+ width: 100%;
+ text-align: right;
+}
+</style>
+
+<style>
+.enter .el-form-item__label {
+ font-size: 20px;
+ color: #333;
+ line-height: 48px;
+}
+
+.enter .el-form-item {
+ margin-bottom: 30px;
+}
+
+.enter .el-input__inner {
+ height: 48px;
+}
+
+.enter .el-button {
+ background-color: #1763EB;
+ color: #fff;
+ border: 0;
+ border-radius: 16px;
+ width: 100%;
+ height: 48px;
+}
+
+.enter input::-webkit-input-placeholder,
+.enter textarea::-webkit-input-placeholder {
+ font-size: 14px;
+}
+
+.enter input::-moz-placeholder,
+.enter textarea::-moz-placeholder {
+ font-size: 10px;
+}
+
+.enter input:-ms-input-placeholder,
+.enter textarea:-ms-input-placeholder {
+ font-size: 10px;
+}
+
+.enter input:-moz-placeholder,
+.enter textarea:-moz-placeholder {
+ font-size: 10px;
+}
+.copyright{
+ width: 100%;
+ position: relative;
+ top: 140px;
+}
+.copyright p{
+ padding: 2px 0px;
+ font-size: 5px;
+ text-align: center;
+ color: lightgray;
+}
+.copyright >p:nth-child(3){
+ text-decoration: underline;
+}
+</style>
+
<template>
- <div class="login-container">
- <el-form ref="loginForm" :model="loginForm" 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"> -->
- <!-- form 琛ㄥ崟鏍￠獙 -->
- <div class="title-container">
- <h3 class="title">鐧� 褰�</h3>
+ <div class="enter">
+ <div class="left">
+ <img src="@/assets/404_images/login-bg.png">
+ </div>
+ <div class="right">
+ <div style="width: calc(100% - 100px);">
+ <div class="title_big">娆㈣繋鎮ㄧ櫥褰曪紒</div>
+ <div class="title_small">瑁呭鐢电紗LIMS瀹為獙瀹ょ鐞嗙郴缁�</div>
+ <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elform" :hide-required-asterisk="true">
+ <el-form-item label="鐢ㄦ埛鍚�" prop="username">
+ <el-input v-model="ruleForm.username" placeholder="璇疯緭鍏ヨ处鍙�" clearable></el-input>
+ </el-form-item>
+ <el-form-item label="瀵嗙爜" prop="password">
+ <el-input v-model="ruleForm.password" placeholder="璇疯緭鍏ュ瘑鐮�" clearable show-password></el-input>
+ </el-form-item>
+ <el-form-item style="margin-bottom: 8px;">
+ <el-col :span="12"><el-checkbox v-model="ruleForm.remumberme">璁颁綇瀵嗙爜</el-checkbox></el-col>
+ <el-col :span="12" style="text-align: right;"><el-checkbox
+ v-model="ruleForm.autoenter">鑷姩鐧诲綍</el-checkbox></el-col>
+ </el-form-item>
+ <el-form-item style="margin-bottom: 15px;">
+ <el-button type="primary" @click="submitForm('ruleForm')" :loading="btnload">绔嬪嵆鐧诲綍</el-button>
+ </el-form-item>
+ </el-form>
+ <div class="sao">寰俊鎵爜鐧诲綍</div>
+ <div class="copyright">
+ <!-- <p>鏈夐檺鍏徃</p>
+ <p>鐗堟潈鎵�鏈塁opyright 漏锔� </p>
+ <p>[鑻廔CP澶�10047815鍙�-1]</p> -->
+ </div>
</div>
-
- <el-form-item prop="username">
- <span class="svg-container">
- <svg-icon icon-class="user" />
- </span>
- <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text"
- tabindex="1" auto-complete="on" />
- </el-form-item>
-
- <el-form-item prop="password">
- <span class="svg-container">
- <svg-icon icon-class="password" />
- </span>
- <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
- placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
- <span class="show-pwd" @click="showPwd">
- <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
- </span>
- </el-form-item>
-
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
- @click.native.prevent="handleLogin">Login</el-button>
- <!-- <div class="tips">
- <span style="margin-right:20px;">username: admin</span>
- <span> password: any</span>
- </div> -->
- </el-form>
+ </div>
</div>
</template>
<script>
-import { validUsername } from '@/utils/validate'
import { get } from "@/api/util/requestUtil.js"
export default {
- name: 'Login',
data() {
- const validateUsername = (rule, value, callback) => {
- if (!validUsername(value)) {
- callback(new Error('Please enter the correct user name'))
- } else {
- callback()
- }
- }
- const validatePassword = (rule, value, callback) => {
- if (value.length < 6) {
- callback(new Error('The password can not be less than 6 digits'))
- } else {
- callback()
- }
- }
return {
- loginForm: {
- username: '123456',
- password: '123456'
+ ruleForm: {
+ username: "admin",
+ password: "admin",
+ remumberme: false,
+ autoenter: false
},
- loginRules: {
- username: [{ required: true, trigger: 'blur', validator: validateUsername }],
- password: [{ required: true, trigger: 'blur', validator: validatePassword }]
+ rules: {
+ username: [{
+ required: true,
+ message: '璇疯緭鍏ヨ处鍙�',
+ trigger: ['blur', 'change']
+ }],
+ password: [{
+ required: true,
+ message: '璇疯緭鍏ュ瘑鐮�',
+ trigger: ['blur', 'change']
+ }]
},
- loading: false,
- passwordType: 'password',
+ btnload: false,
redirect: undefined
+ }
+ },
+ mounted() {
+ this.ruleForm.remumberme = JSON.parse(localStorage.getItem('rememberme'))==null?false:JSON.parse(localStorage.getItem('rememberme'))
+ this.ruleForm.autoenter = JSON.parse(localStorage.getItem('autoenter'))==null?false:JSON.parse(localStorage.getItem('autoenter'))
+ var user = JSON.parse(localStorage.getItem('user'))
+ if (user != null && user != undefined) {
+ if (this.ruleForm.remumberme==true) {
+ this.ruleForm.username = user.username;
+ this.ruleForm.password = user.password;
+ }
+ if (this.ruleForm.autoenter==true) {
+ this.submitForm('ruleForm');
+ }
}
},
watch: {
@@ -79,154 +194,41 @@
}
},
methods: {
- showPwd() {
- if (this.passwordType === 'password') {
- this.passwordType = ''
- } else {
- this.passwordType = 'password'
- }
- this.$nextTick(() => {
- this.$refs.password.focus()
- })
- },
- handleLogin() {
- this.$refs.loginForm.validate(valid => {
+ submitForm(formName) {
+ this.btnload = true
+ this.$refs[formName].validate((valid) => {
if (valid) {
- this.loading = true
- this.$store.dispatch('user/login', this.loginForm).then(async () => {
+ this.$store.dispatch('user/login', this.ruleForm).then(async (res) => {
+ let name = "";
await get(this.$url.info).then(res => {
- this.user = res.data
- sessionStorage.setItem("user", JSON.stringify(res.data))
- sessionStorage.setItem("flushPage",0)
+ this.user = res.data;
+ name = res.data.name;
+ sessionStorage.setItem("user", JSON.stringify(res.data));
+ sessionStorage.setItem("flushPage",0);
})
+ localStorage.setItem('rememberme', this.ruleForm.remumberme);
+ localStorage.setItem('autoenter', this.ruleForm.autoenter);
+ if (this.ruleForm.remumberme==true||this.ruleForm.autoenter==true) {
+ localStorage.setItem("user", JSON.stringify({
+ username: this.ruleForm.username,
+ password: this.ruleForm.password,
+ name: name,
+ }));
+ }
+ this.$message.success("鐧诲綍鎴愬姛")
+ this.btnload = false
this.$router.push({ path: this.redirect || '/' })
- this.loading = false
- }).catch(() => {
- this.loading = false
+ }).catch((error) => {
+ this.$message.error(error.message)
+ this.btnload = false
})
} else {
- console.log('鐧诲綍澶辫触!')
- return false
+ this.btnload = false
+ this.$message.error('璐﹀彿鎴栧瘑鐮佹湭杈撳叆锛�')
+ return false;
}
})
- }
+ },
}
}
</script>
-
-<style lang="scss">
-/* 淇input 鑳屾櫙涓嶅崗璋� 鍜屽厜鏍囧彉鑹� */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-$bg: #283443;
-$light_gray: #fff;
-$cursor: #fff;
-
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
- .login-container .el-input input {
- color: $cursor;
- }
-}
-
-/* reset element-ui css */
-.login-container {
- .el-input {
- display: inline-block;
- height: 47px;
- width: 85%;
-
- input {
- background: transparent;
- border: 0px;
- -webkit-appearance: none;
- border-radius: 0px;
- padding: 12px 5px 12px 15px;
- color: $light_gray;
- height: 47px;
- caret-color: $cursor;
-
- &:-webkit-autofill {
- box-shadow: 0 0 0px 1000px $bg inset !important;
- -webkit-text-fill-color: $cursor !important;
- }
- }
- }
-
- .el-form-item {
- border: 1px solid rgba(255, 255, 255, 0.1);
- background: rgba(0, 0, 0, 0.1);
- border-radius: 5px;
- color: #454545;
- }
-}
-</style>
-
-<style lang="scss" scoped>
-$bg: #2d3a4b;
-$dark_gray: #889aa4;
-$light_gray: #eee;
-
-.login-container {
- min-height: 100%;
- width: 100%;
- background: url('../../assets/404_images/backgroud.png') no-repeat;
- background-size: 100vw 100vh;
- overflow: hidden;
-
- .login-form {
- position: relative;
- width: 520px;
- max-width: 100%;
- padding: 0 35px;
- margin: 0 auto;
- overflow: hidden;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
-
- }
-
- .tips {
- font-size: 14px;
- color: #fff;
- margin-bottom: 10px;
-
- span {
- &:first-of-type {
- margin-right: 16px;
- }
- }
- }
-
- .svg-container {
- padding: 6px 5px 6px 15px;
- color: $dark_gray;
- vertical-align: middle;
- width: 30px;
- display: inline-block;
- }
-
- .title-container {
- position: relative;
-
- .title {
- font-size: 26px;
- color: $light_gray;
- margin: 0px auto 40px auto;
- text-align: center;
- font-weight: bold;
- }
- }
-
- .show-pwd {
- position: absolute;
- right: 10px;
- top: 7px;
- font-size: 16px;
- color: $dark_gray;
- cursor: pointer;
- user-select: none;
- }
-}
-</style>
--
Gitblit v1.9.3