From efdd02d3d80253bf93f1c58e3ae25016db2d6b31 Mon Sep 17 00:00:00 2001 From: liding <756868258@qq.com> Date: 星期三, 09 四月 2025 17:25:50 +0800 Subject: [PATCH] 检验任务,进货检验车间文件选择 --- src/views/login.vue | 235 ++++++++++++++++++++++++++++++++-------------------------- 1 files changed, 131 insertions(+), 104 deletions(-) diff --git a/src/views/login.vue b/src/views/login.vue index 6e2d936..50ed177 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,68 +1,55 @@ <template> <div class="login"> - <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> - <h3 class="title">鑻ヤ緷鍚庡彴绠$悊绯荤粺</h3> - <el-form-item prop="username"> - <el-input - v-model="loginForm.username" - type="text" - auto-complete="off" - placeholder="璐﹀彿" - > - <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="password"> - <el-input - v-model="loginForm.password" - type="password" - auto-complete="off" - placeholder="瀵嗙爜" - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> - </el-input> - </el-form-item> - <el-form-item prop="code" v-if="captchaEnabled"> - <el-input - v-model="loginForm.code" - auto-complete="off" - placeholder="楠岃瘉鐮�" - style="width: 63%" - @keyup.enter.native="handleLogin" - > - <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> - </el-input> - <div class="login-code"> - <img :src="codeUrl" @click="getCode" class="login-code-img"/> - </div> - </el-form-item> - <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox> - <el-form-item style="width:100%;"> - <el-button - :loading="loading" - size="medium" - type="primary" - style="width:100%;" - @click.native.prevent="handleLogin" - > - <span v-if="!loading">鐧� 褰�</span> - <span v-else>鐧� 褰� 涓�...</span> - </el-button> - <div style="float: right;" v-if="register"> - <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link> - </div> - </el-form-item> - </el-form> - <!-- 搴曢儴 --> - <div class="el-login-footer"> - <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span> + <div class="leftImg"> + <img src="@/assets/images/loginBackground.png" alt=""> </div> + <div class="rightForm"> + <div class="title_big">娆㈣繋鎮ㄧ櫥褰曪紒</div> + <div class="title_small">LIMS瀹為獙瀹ょ鐞嗙郴缁�</div> + <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"> + <el-form-item prop="username"> + <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="璐﹀彿"> + <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="password"> + <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="瀵嗙爜" + @keyup.enter.native="handleLogin" show-password> + <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" /> + </el-input> + </el-form-item> + <el-form-item prop="code" v-if="captchaEnabled"> + <el-input v-model="loginForm.code" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" + @keyup.enter.native="handleLogin"> + <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" /> + </el-input> + <div class="login-code"> + <img :src="codeUrl" @click="getCode" class="login-code-img" /> + </div> + </el-form-item> + <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">璁颁綇瀵嗙爜</el-checkbox> + <el-form-item style="width:100%;"> + <el-button :loading="loading" size="medium" type="primary" style="width:100%;" + @click.native.prevent="handleLogin"> + <span v-if="!loading">鐧� 褰�</span> + <span v-else>鐧� 褰� 涓�...</span> + </el-button> + <div style="float: right;" v-if="register"> + <router-link class="link-type" :to="'/register'">绔嬪嵆娉ㄥ唽</router-link> + </div> + </el-form-item> + <!-- <el-button v-if="false" type="primary" plain @click="goLogin">闆嗗洟闆嗘垚鐧诲綍</el-button> --> + </el-form> + </div> + <!-- 搴曢儴 --> + <!-- <div class="el-login-footer">--> + <!-- <span>Copyright 漏 2018-2025 ruoyi.vip All Rights Reserved.</span>--> + <!-- </div>--> </div> </template> <script> -import { getCodeImg } from "@/api/login"; +import { getCodeImg, getSsoAuthUrl } from "@/api/login"; import Cookies from "js-cookie"; import { encrypt, decrypt } from '@/utils/jsencrypt' @@ -72,8 +59,8 @@ return { codeUrl: "", loginForm: { - username: "admin", - password: "admin123", + username: "ZT-", + password: "", rememberMe: false, code: "", uuid: "" @@ -85,7 +72,7 @@ password: [ { required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" } ], - code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] + code: [{ required: false, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }] }, loading: false, // 楠岃瘉鐮佸紑鍏� @@ -97,7 +84,7 @@ }, watch: { $route: { - handler: function(route) { + handler: function (route) { this.redirect = route.query && route.query.redirect; }, immediate: true @@ -108,6 +95,11 @@ this.getCookie(); }, methods: { + async goLogin() { + await getSsoAuthUrl().then(res => { + window.location.href = res.data + }) + }, getCode() { getCodeImg().then(res => { this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled; @@ -141,7 +133,7 @@ Cookies.remove('rememberMe'); } this.$store.dispatch("Login", this.loginForm).then(() => { - this.$router.push({ path: this.redirect || "/" }).catch(()=>{}); + this.$router.push({ path: this.redirect || "/" }).catch(() => { }); }).catch(() => { this.loading = false; if (this.captchaEnabled) { @@ -156,51 +148,89 @@ </script> <style rel="stylesheet/scss" lang="scss"> +//.login { +// display: flex; +// justify-content: center; +// align-items: center; +// height: 100%; +// background-image: url("../assets/images/login-background.jpg"); +// background-size: cover; +//} .login { + width: 100vw; + height: 100vh; display: flex; - justify-content: center; - align-items: center; - height: 100%; - background-image: url("../assets/images/login-background.jpg"); - background-size: cover; -} -.title { - margin: 0px auto 30px auto; - text-align: center; - color: #707070; -} + background-image: url("~@/assets/images/login.png"); + background-size: 100% 100%; -.login-form { - border-radius: 6px; - background: #ffffff; - width: 400px; - padding: 25px 25px 5px 25px; - .el-input { - height: 38px; - input { - height: 38px; + .leftImg { + width: calc(100% - 500px); + height: 100%; + overflow: hidden; + + img { + width: 100%; + min-height: 100%; } } - .input-icon { - height: 39px; - width: 14px; - margin-left: 2px; + + .rightForm { + width: 600px; + overflow-y: auto; + display: flex; + align-items: center; + flex-direction: column; + justify-content: center; + + .title_big { + color: #004EA2; + font-size: 40px; + margin-bottom: 8px; + } + + .title_small { + color: #004EA2; + font-size: 24px; + } + + .login-form { + border-radius: 6px; + background: #ffffff; + width: 400px; + padding: 25px 25px 5px 25px; + + .el-input { + height: 38px; + + input { + height: 38px; + } + } + + .input-icon { + height: 39px; + width: 14px; + margin-left: 2px; + } + + .login-code { + width: 33%; + height: 38px; + float: right; + + img { + cursor: pointer; + vertical-align: middle; + } + + .login-code-img { + height: 38px; + } + } + } } } -.login-tip { - font-size: 13px; - text-align: center; - color: #bfbfbf; -} -.login-code { - width: 33%; - height: 38px; - float: right; - img { - cursor: pointer; - vertical-align: middle; - } -} + .el-login-footer { height: 40px; line-height: 40px; @@ -212,8 +242,5 @@ font-family: Arial; font-size: 12px; letter-spacing: 1px; -} -.login-code-img { - height: 38px; } </style> -- Gitblit v1.9.3