From 1595cb282aab5399862fac6406b5de550863e3b6 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子Li <15040126243@163.com> Date: 星期一, 03 四月 2023 00:05:09 +0800 Subject: [PATCH] update 调整代码格式 --- src/views/login.vue | 228 ++++++++++++++++++++++++++++---------------------------- 1 files changed, 114 insertions(+), 114 deletions(-) diff --git a/src/views/login.vue b/src/views/login.vue index 102e483..9559f9b 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -1,3 +1,49 @@ +<template> + <div class="login"> + <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> + <h3 class="title">RuoYi-Vue-Plus澶氱鎴风鐞嗙郴缁�</h3> + <el-form-item prop="tenantId" v-if="tenantEnabled"> + <el-select v-model="loginForm.tenantId" filterable placeholder="璇烽�夋嫨/杈撳叆鍏徃鍚嶇О" style="width: 100%"> + <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option> + <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> + </el-select> + </el-form-item> + <el-form-item prop="username"> + <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="璐﹀彿"> + <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> + </el-input> + </el-form-item> + <el-form-item prop="password"> + <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="瀵嗙爜" @keyup.enter="handleLogin"> + <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> + </el-input> + </el-form-item> + <el-form-item prop="code" v-if="captchaEnabled"> + <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" @keyup.enter="handleLogin"> + <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> + </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="large" type="primary" style="width:100%;" @click.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-2023 鐤媯鐨勭嫯瀛怢i All Rights Reserved.</span> + </div> + </div> +</template> + <script setup lang="ts"> import { getCodeImg, getTenantList } from '@/api/login'; import Cookies from 'js-cookie'; @@ -11,19 +57,19 @@ const router = useRouter(); const loginForm = ref<LoginData>({ - tenantId: "000000", - username: 'admin', - password: 'admin123', - rememberMe: false, - code: '', - uuid: '' + tenantId: "000000", + username: 'admin', + password: 'admin123', + rememberMe: false, + code: '', + uuid: '' }); const loginRules: FormRules = { - tenantId: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勭鎴风紪鍙�" }], - username: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勮处鍙�' }], - password: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勫瘑鐮�' }], - code: [{ required: true, trigger: 'change', message: '璇疯緭鍏ラ獙璇佺爜' }] + tenantId: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勭鎴风紪鍙�" }], + username: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勮处鍙�' }], + password: [{ required: true, trigger: 'blur', message: '璇疯緭鍏ユ偍鐨勫瘑鐮�' }], + code: [{ required: true, trigger: 'change', message: '璇疯緭鍏ラ獙璇佺爜' }] }; const codeUrl = ref(''); @@ -42,64 +88,64 @@ const tenantList = ref<TenantVO[]>([]); const handleLogin = () => { - loginRef.value.validate(async (valid:boolean, fields: any) => { - if (valid) { - loading.value = true; - // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮� - if (loginForm.value.rememberMe) { - Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 }); - Cookies.set('username', loginForm.value.username, { expires: 30 }); - Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 }); - Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 }); - } else { - // 鍚﹀垯绉婚櫎 - Cookies.remove("tenantId"); - Cookies.remove('username'); - Cookies.remove('password'); - Cookies.remove('rememberMe'); - } - // 璋冪敤action鐨勭櫥褰曟柟娉� - // prittier-ignore - const [err] = await to(userStore.login(loginForm.value)); - if (!err) { - await router.push({ path: redirect.value || '/' }); - } else { - loading.value = false; - // 閲嶆柊鑾峰彇楠岃瘉鐮� - if (captchaEnabled.value) { - await getCode(); + loginRef.value.validate(async (valid:boolean, fields: any) => { + if (valid) { + loading.value = true; + // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮� + if (loginForm.value.rememberMe) { + Cookies.set("tenantId", loginForm.value.tenantId, { expires: 30 }); + Cookies.set('username', loginForm.value.username, { expires: 30 }); + Cookies.set('password', String(encrypt(loginForm.value.password)), { expires: 30 }); + Cookies.set('rememberMe', String(loginForm.value.rememberMe), { expires: 30 }); + } else { + // 鍚﹀垯绉婚櫎 + Cookies.remove("tenantId"); + Cookies.remove('username'); + Cookies.remove('password'); + Cookies.remove('rememberMe'); + } + // 璋冪敤action鐨勭櫥褰曟柟娉� + // prittier-ignore + const [err] = await to(userStore.login(loginForm.value)); + if (!err) { + await router.push({ path: redirect.value || '/' }); + } else { + loading.value = false; + // 閲嶆柊鑾峰彇楠岃瘉鐮� + if (captchaEnabled.value) { + await getCode(); + } + } + } else { + console.log('error submit!', fields); } - } - } else { - console.log('error submit!', fields); - } - }); + }); }; /** * 鑾峰彇楠岃瘉鐮� */ const getCode = async () => { - const res = await getCodeImg(); - const { data } = res; - captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; - if (captchaEnabled.value) { - codeUrl.value = 'data:image/gif;base64,' + data.img; - loginForm.value.uuid = data.uuid; - } + const res = await getCodeImg(); + const { data } = res; + captchaEnabled.value = data.captchaEnabled === undefined ? true : data.captchaEnabled; + if (captchaEnabled.value) { + codeUrl.value = 'data:image/gif;base64,' + data.img; + loginForm.value.uuid = data.uuid; + } }; const getCookie = () => { - const tenantId = Cookies.get("tenantId"); - const username = Cookies.get('username'); - const password = Cookies.get('password'); - const rememberMe = Cookies.get('rememberMe'); - loginForm.value = { - tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId, - username: username === undefined ? loginForm.value.username : username, - password: password === undefined ? loginForm.value.password : (decrypt(password) as string), - rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) - }; + const tenantId = Cookies.get("tenantId"); + const username = Cookies.get('username'); + const password = Cookies.get('password'); + const rememberMe = Cookies.get('rememberMe'); + loginForm.value = { + tenantId: tenantId === undefined ? loginForm.value.tenantId : tenantId, + username: username === undefined ? loginForm.value.username : username, + password: password === undefined ? loginForm.value.password : (decrypt(password) as string), + rememberMe: rememberMe === undefined ? false : Boolean(rememberMe) + }; } @@ -107,68 +153,22 @@ * 鑾峰彇绉熸埛鍒楄〃 */ const initTenantList = async () => { - const { data } = await getTenantList(); - tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; - if (tenantEnabled.value) { - tenantList.value = data.voList; - if (tenantList.value != null && tenantList.value.length !== 0) { - loginForm.value.tenantId = tenantList.value[0].tenantId; + const { data } = await getTenantList(); + tenantEnabled.value = data.tenantEnabled === undefined ? true : data.tenantEnabled; + if (tenantEnabled.value) { + tenantList.value = data.voList; + if (tenantList.value != null && tenantList.value.length !== 0) { + loginForm.value.tenantId = tenantList.value[0].tenantId; + } } - } } onMounted(() => { - getCode(); - initTenantList(); - getCookie(); + getCode(); + initTenantList(); + getCookie(); }); </script> - -<template> - <div class="login"> - <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> - <h3 class="title">RuoYi-Vue-Plus澶氱鎴风鐞嗙郴缁�</h3> - <el-form-item prop="tenantId" v-if="tenantEnabled"> - <el-select v-model="loginForm.tenantId" filterable placeholder="璇烽�夋嫨/杈撳叆鍏徃鍚嶇О" style="width: 100%"> - <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.companyName" :value="item.tenantId"> </el-option> - <template #prefix><svg-icon icon-class="company" class="el-input__icon input-icon" /></template> - </el-select> - </el-form-item> - <el-form-item prop="username"> - <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="璐﹀彿"> - <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template> - </el-input> - </el-form-item> - <el-form-item prop="password"> - <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="瀵嗙爜" @keyup.enter="handleLogin"> - <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template> - </el-input> - </el-form-item> - <el-form-item prop="code" v-if="captchaEnabled"> - <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="楠岃瘉鐮�" style="width: 63%" @keyup.enter="handleLogin"> - <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> - </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="large" type="primary" style="width:100%;" @click.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-2023 鐤媯鐨勭嫯瀛怢i All Rights Reserved.</span> - </div> - </div> -</template> <style lang="scss" scoped> .login { -- Gitblit v1.9.3