cxc/qiaoba-vue3
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

load captcha image only when tenant selected

Browse Source
This commit is contained in:
ailanyin
2023-06-12 15:37:47 +08:00
parent 189ffd2255
commit b6fdcba1c3
1 changed files with 76 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
src/views/login.vue
View File

@ -1,31 +1,31 @@
<template> <template>
<div class="login"> <div class="login">
<el-form <el-form
ref="loginRef" ref="loginRef"
:model="loginForm" :model="loginForm"
:rules="loginRules" :rules="loginRules"
class="login-form" class="login-form"
> >
<h3 class="title">若依后台管理系统</h3> <h3 class="title">若依后台管理系统</h3>
<el-form-item prop="tenant"> <el-form-item prop="tenant">
<paged-select <paged-select
v-model="loginForm.tenant" v-model="loginForm.tenant"
:prop="{ :default-label="defaultTenantNamt"
:prop="{
label: 'companyName', label: 'companyName',
value: 'tenantId', value: 'tenantId',
}" }"
:default-label="defaultTenantNamt" :query="{
:query="{
page: 'pageNum', page: 'pageNum',
size: 'pageSize', size: 'pageSize',
searchKey: 'companyName', searchKey: 'companyName',
}" }"
:remote-method="loadTenantOptions" :remote-method="loadTenantOptions"
:width="350" :width="350"
prefix-icon="OfficeBuilding" prefix-icon="OfficeBuilding"
size="large" size="large"
@change="handleTenantChange" @change="handleTenantChange"
@confirm="handleTenantConfirm" @confirm="handleTenantConfirm"
/> />
<!-- <el-input--> <!-- <el-input-->
<!-- v-model="loginForm.tenant"--> <!-- v-model="loginForm.tenant"-->
@ -41,70 +41,70 @@
</el-form-item> </el-form-item>
<el-form-item prop="username"> <el-form-item prop="username">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.username"
auto-complete="off" auto-complete="off"
placeholder="账号" placeholder="账号"
size="large" size="large"
type="text" type="text"
> >
<template #prefix> <template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="user" /> <svg-icon class="el-input__icon input-icon" icon-class="user"/>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item prop="password">
<el-input <el-input
v-model="loginForm.password" v-model="loginForm.password"
auto-complete="off" auto-complete="off"
placeholder="密码" placeholder="密码"
size="large" size="large"
type="password" type="password"
@keyup.enter="handleLogin" @keyup.enter="handleLogin"
> >
<template #prefix> <template #prefix>
<svg-icon class="el-input__icon input-icon" icon-class="password" /> <svg-icon class="el-input__icon input-icon" icon-class="password"/>
</template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item v-if="captchaEnabled" prop="code"> <el-form-item v-if="captchaEnabled && loginForm.tenant" prop="code">
<el-input <el-input
v-model="loginForm.code" v-model="loginForm.code"
auto-complete="off" auto-complete="off"
placeholder="验证码" placeholder="验证码"
size="large" size="large"
style="width: 63%" style="width: 63%"
@keyup.enter="handleLogin" @keyup.enter="handleLogin"
> >
<template #prefix> <template #prefix>
<svg-icon <svg-icon
class="el-input__icon input-icon" class="el-input__icon input-icon"
icon-class="validCode" icon-class="validCode"
/> />
</template> </template>
</el-input> </el-input>
<div class="login-code"> <div class="login-code">
<img :src="codeUrl" class="login-code-img" @click="getCode" /> <img :src="codeUrl" class="login-code-img" @click="getCode"/>
</div> </div>
</el-form-item> </el-form-item>
<el-checkbox <el-checkbox
v-model="loginForm.rememberMe" v-model="loginForm.rememberMe"
style="margin: 0px 0px 25px 0px" style="margin: 0px 0px 25px 0px"
>记住密码 >记住密码
</el-checkbox> </el-checkbox>
<el-form-item style="width: 100%"> <el-form-item style="width: 100%">
<el-button <el-button
:loading="loading" :loading="loading"
size="large" size="large"
style="width: 100%" style="width: 100%"
type="primary" type="primary"
@click.prevent="handleLogin" @click.prevent="handleLogin"
> >
<span v-if="!loading">登 录</span> <span v-if="!loading">登 录</span>
<span v-else>登 录 中...</span> <span v-else>登 录 中...</span>
</el-button> </el-button>
<div v-if="register" style="float: right"> <div v-if="register" style="float: right">
<router-link :to="'/register'" class="link-type" <router-link :to="'/register'" class="link-type"
>立即注册 >立即注册
</router-link> </router-link>
</div> </div>
</el-form-item> </el-form-item>
@ -117,15 +117,16 @@
</template> </template>
<script setup> <script setup>
import { getCodeImg, getTenantNormalList } from "@/api/login"; import {getCodeImg, getTenantNormalList} from "@/api/login";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { decrypt, encrypt } from "@/utils/jsencrypt"; import {decrypt, encrypt} from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user"; import useUserStore from "@/store/modules/user";
import PagedSelect from "@/components/InfiniteSelect"; import PagedSelect from "@/components/InfiniteSelect";
import {getCurrentInstance, ref, watchEffect} from "vue";
const userStore = useUserStore(); const userStore = useUserStore();
const router = useRouter(); const router = useRouter();
const { proxy } = getCurrentInstance(); const {proxy} = getCurrentInstance();
const loginForm = ref({ const loginForm = ref({
tenant: "", tenant: "",
@ -137,10 +138,10 @@ const loginForm = ref({
}); });
const loginRules = { const loginRules = {
tenant: [{ required: true, trigger: "change", message: "请选择租户" }], tenant: [{required: true, trigger: "change", message: "请选择租户"}],
username: [{ required: true, trigger: "blur", message: "请输入您的账号" }], username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
password: [{ required: true, trigger: "blur", message: "请输入您的密码" }], password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
code: [{ required: true, trigger: "change", message: "请输入验证码" }], code: [{required: true, trigger: "change", message: "请输入验证码"}],
}; };
const defaultTenantNamt = ref(""); const defaultTenantNamt = ref("");
const codeUrl = ref(""); const codeUrl = ref("");
@ -157,12 +158,12 @@ function handleLogin() {
loading.value = true; loading.value = true;
// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码 // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
if (loginForm.value.rememberMe) { if (loginForm.value.rememberMe) {
Cookies.set("tenant", loginForm.value.tenant, { expires: 30 }); Cookies.set("tenant", loginForm.value.tenant, {expires: 30});
Cookies.set("username", loginForm.value.username, { expires: 30 }); Cookies.set("username", loginForm.value.username, {expires: 30});
Cookies.set("password", encrypt(loginForm.value.password), { Cookies.set("password", encrypt(loginForm.value.password), {
expires: 30, expires: 30,
}); });
Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 }); Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
} else { } else {
// 否则移除 // 否则移除
Cookies.remove("tenant"); Cookies.remove("tenant");
@ -172,17 +173,17 @@ function handleLogin() {
} }
// 调用action的登录方法 // 调用action的登录方法
userStore userStore
.login(loginForm.value) .login(loginForm.value)
.then(() => { .then(() => {
router.push({ path: redirect.value || "/" }); router.push({path: redirect.value || "/"});
}) })
.catch(() => { .catch(() => {
loading.value = false; loading.value = false;
// 重新获取验证码 // 重新获取验证码
if (captchaEnabled.value) { if (captchaEnabled.value) {
getCode(); getCode();
} }
}); });
} }
}); });
} }
@ -190,7 +191,7 @@ function handleLogin() {
function getCode() { function getCode() {
getCodeImg().then((res) => { getCodeImg().then((res) => {
captchaEnabled.value = captchaEnabled.value =
res.captchaEnabled === undefined ? true : res.captchaEnabled; res.captchaEnabled === undefined ? true : res.captchaEnabled;
register.value = res.register === undefined ? true : res.register; register.value = res.register === undefined ? true : res.register;
if (captchaEnabled.value) { if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img; codeUrl.value = "data:image/gif;base64," + res.img;
@ -206,14 +207,14 @@ function getCookie() {
loginForm.value = { loginForm.value = {
username: username === undefined ? loginForm.value.username : username, username: username === undefined ? loginForm.value.username : username,
password: password:
password === undefined ? loginForm.value.password : decrypt(password), password === undefined ? loginForm.value.password : decrypt(password),
rememberMe: rememberMe === undefined ? false : Boolean(rememberMe), rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
tenant: useUserStore().tempTenant ?? "", tenant: useUserStore().tempTenant ?? "",
}; };
} }
const loadTenantOptions = (query) => const loadTenantOptions = (query) =>
getTenantNormalList(query).then((resp) => resp.rows); getTenantNormalList(query).then((resp) => resp.rows);
const handleTenantChange = (value) => { const handleTenantChange = (value) => {
console.log(value); console.log(value);
@ -229,7 +230,11 @@ const handleTenantConfirm = (option) => {
useUserStore().setTempTenant(option); useUserStore().setTempTenant(option);
}; };
getCode(); watchEffect(() => {
if (loginForm.value.tenant) {
getCode();
}
})
getCookie(); getCookie();
defaultTenantNamt.value = useUserStore().tempTenantName; defaultTenantNamt.value = useUserStore().tempTenantName;
</script> </script>