6 changed files with 662 additions and 124 deletions
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 98 KiB |
|
After Width: | Height: | Size: 32 KiB |
@ -0,0 +1,356 @@ |
|||||
|
<template> |
||||
|
<div class="login"> |
||||
|
<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
||||
|
<div class="title-box"> |
||||
|
<h3 class="title">{{ title }}</h3> |
||||
|
</div> |
||||
|
<el-form-item v-if="tenantEnabled" prop="tenantId"> |
||||
|
<el-select v-model="loginForm.tenantId" filterable :placeholder="proxy.$t('login.selectPlaceholder')" 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="proxy.$t('login.username')"> |
||||
|
<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="proxy.$t('login.password')" |
||||
|
@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 v-if="captchaEnabled" prop="code"> |
||||
|
<el-input |
||||
|
v-model="loginForm.code" |
||||
|
size="large" |
||||
|
auto-complete="off" |
||||
|
:placeholder="proxy.$t('login.code')" |
||||
|
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" class="login-code-img" @click="getCode" /> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0 0 25px 0">{{ proxy.$t('login.rememberPassword') }}</el-checkbox>--> |
||||
|
<!-- <el-form-item style="float: right">--> |
||||
|
<!-- <el-button circle :title="proxy.$t('login.social.wechat')" @click="doSocialLogin('wechat')">--> |
||||
|
<!-- <svg-icon icon-class="wechat" />--> |
||||
|
<!-- </el-button>--> |
||||
|
<!-- <el-button circle :title="proxy.$t('login.social.maxkey')" @click="doSocialLogin('maxkey')">--> |
||||
|
<!-- <svg-icon icon-class="maxkey" />--> |
||||
|
<!-- </el-button>--> |
||||
|
<!-- <el-button circle :title="proxy.$t('login.social.topiam')" @click="doSocialLogin('topiam')">--> |
||||
|
<!-- <svg-icon icon-class="topiam" />--> |
||||
|
<!-- </el-button>--> |
||||
|
<!-- <el-button circle :title="proxy.$t('login.social.gitee')" @click="doSocialLogin('gitee')">--> |
||||
|
<!-- <svg-icon icon-class="gitee" />--> |
||||
|
<!-- </el-button>--> |
||||
|
<!-- <el-button circle :title="proxy.$t('login.social.github')" @click="doSocialLogin('github')">--> |
||||
|
<!-- <svg-icon icon-class="github" />--> |
||||
|
<!-- </el-button>--> |
||||
|
<!-- </el-form-item>--> |
||||
|
<el-form-item style="width: 100%"> |
||||
|
<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin"> |
||||
|
<span v-if="!loading">{{ proxy.$t('login.login') }}</span> |
||||
|
<span v-else>{{ proxy.$t('login.logging') }}</span> |
||||
|
</el-button> |
||||
|
<div v-if="register" style="float: right"> |
||||
|
<router-link class="link-type" :to="'/register'">{{ proxy.$t('login.switchRegisterPage') }}</router-link> |
||||
|
</div> |
||||
|
</el-form-item> |
||||
|
<!-- 测试用户快捷登录按钮（仅localhost环境显示） --> |
||||
|
<el-form-item v-if="isLocalhost" style="width: 100%; margin-bottom: 0"> |
||||
|
<el-button size="large" type="danger" style="width: 100%" @click="showTestUserDialog = true"> |
||||
|
选择测试用户 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<!-- 测试用户选择弹窗 --> |
||||
|
<el-dialog v-model="showTestUserDialog" title="选择测试用户" width="620px" append-to-body> |
||||
|
<el-table :data="testUsers" highlight-current-row style="width: 100%" @row-click="selectTestUser"> |
||||
|
<el-table-column prop="label" label="角色" width="240" /> |
||||
|
<el-table-column prop="username" label="用户名" width="140" /> |
||||
|
<el-table-column label="操作" align="center"> |
||||
|
<template #default="{ row }"> |
||||
|
<el-button type="primary" link @click="selectTestUser(row)">使用</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-dialog> |
||||
|
<!-- 底部 --> |
||||
|
<div class="el-login-footer"> |
||||
|
<span>Copyright © 2018-2026 疯狂的狮子Li All Rights Reserved.</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { getCodeImg, getTenantList } from '@/api/login'; |
||||
|
import { authRouterUrl } from '@/api/system/social/auth'; |
||||
|
import { useUserStore } from '@/store/modules/user'; |
||||
|
import { LoginData, TenantVO } from '@/api/types'; |
||||
|
import { to } from 'await-to-js'; |
||||
|
import { HttpStatus } from '@/enums/RespEnum'; |
||||
|
import { useI18n } from 'vue-i18n'; |
||||
|
|
||||
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance; |
||||
|
|
||||
|
const title = import.meta.env.VITE_APP_TITLE; |
||||
|
const userStore = useUserStore(); |
||||
|
const router = useRouter(); |
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
const loginForm = ref<LoginData>({ |
||||
|
tenantId: '000000', |
||||
|
username: '', |
||||
|
password: '', |
||||
|
rememberMe: false, |
||||
|
code: '', |
||||
|
uuid: '' |
||||
|
} as LoginData); |
||||
|
|
||||
|
const loginRules: ElFormRules = { |
||||
|
tenantId: [{ required: true, trigger: 'blur', message: t('login.rule.tenantId.required') }], |
||||
|
username: [{ required: true, trigger: 'blur', message: t('login.rule.username.required') }], |
||||
|
password: [{ required: true, trigger: 'blur', message: t('login.rule.password.required') }], |
||||
|
code: [{ required: true, trigger: 'change', message: t('login.rule.code.required') }] |
||||
|
}; |
||||
|
|
||||
|
const codeUrl = ref(''); |
||||
|
const loading = ref(false); |
||||
|
// 验证码开关 |
||||
|
const captchaEnabled = ref(true); |
||||
|
// 租户开关 |
||||
|
const tenantEnabled = ref(true); |
||||
|
|
||||
|
// 注册开关 |
||||
|
const register = ref(false); |
||||
|
const redirect = ref('/'); |
||||
|
const loginRef = ref<ElFormInstance>(); |
||||
|
// 租户列表 |
||||
|
const tenantList = ref<TenantVO[]>([]); |
||||
|
|
||||
|
// ===== 测试用户快捷登录 ===== |
||||
|
const isLocalhost = ref(window.location.hostname === 'localhost'); |
||||
|
const showTestUserDialog = ref(false); |
||||
|
|
||||
|
interface TestUser { |
||||
|
label: string; |
||||
|
tenantId: string; |
||||
|
username: string; |
||||
|
password: string; |
||||
|
} |
||||
|
|
||||
|
const testUsers = ref<TestUser[]>([]); |
||||
|
|
||||
|
const selectTestUser = (user: TestUser) => { |
||||
|
loginForm.value.tenantId = user.tenantId; |
||||
|
loginForm.value.username = user.username; |
||||
|
loginForm.value.password = user.password; |
||||
|
showTestUserDialog.value = false; |
||||
|
// 选择后自动登录 |
||||
|
nextTick(() => { |
||||
|
handleLogin(); |
||||
|
}); |
||||
|
}; |
||||
|
// ===== 测试用户快捷登录 END ===== |
||||
|
|
||||
|
watch( |
||||
|
() => router.currentRoute.value, |
||||
|
(newRoute: any) => { |
||||
|
redirect.value = newRoute.query && newRoute.query.redirect && decodeURIComponent(newRoute.query.redirect); |
||||
|
}, |
||||
|
{ immediate: true } |
||||
|
); |
||||
|
|
||||
|
const handleLogin = () => { |
||||
|
loginRef.value?.validate(async (valid: boolean, fields: any) => { |
||||
|
if (valid) { |
||||
|
loading.value = true; |
||||
|
// 勾选了需要记住密码设置在 localStorage 中设置记住用户名和密码 |
||||
|
if (loginForm.value.rememberMe) { |
||||
|
localStorage.setItem('tenantId', String(loginForm.value.tenantId)); |
||||
|
localStorage.setItem('username', String(loginForm.value.username)); |
||||
|
localStorage.setItem('password', String(loginForm.value.password)); |
||||
|
localStorage.setItem('rememberMe', String(loginForm.value.rememberMe)); |
||||
|
} else { |
||||
|
// 否则移除 |
||||
|
localStorage.removeItem('tenantId'); |
||||
|
localStorage.removeItem('username'); |
||||
|
localStorage.removeItem('password'); |
||||
|
localStorage.removeItem('rememberMe'); |
||||
|
} |
||||
|
// 调用action的登录方法 |
||||
|
const [err] = await to(userStore.login(loginForm.value)); |
||||
|
if (!err) { |
||||
|
const redirectUrl = redirect.value || '/'; |
||||
|
await router.push(redirectUrl); |
||||
|
loading.value = false; |
||||
|
} else { |
||||
|
loading.value = false; |
||||
|
// 重新获取验证码 |
||||
|
if (captchaEnabled.value) { |
||||
|
await getCode(); |
||||
|
} |
||||
|
} |
||||
|
} 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) { |
||||
|
// 刷新验证码时清空输入框 |
||||
|
loginForm.value.code = ''; |
||||
|
codeUrl.value = 'data:image/gif;base64,' + data.img; |
||||
|
loginForm.value.uuid = data.uuid; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
const getLoginData = () => { |
||||
|
const tenantId = localStorage.getItem('tenantId'); |
||||
|
const username = localStorage.getItem('username'); |
||||
|
const password = localStorage.getItem('password'); |
||||
|
const rememberMe = localStorage.getItem('rememberMe'); |
||||
|
loginForm.value = { |
||||
|
tenantId: tenantId === null ? String(loginForm.value.tenantId) : tenantId, |
||||
|
username: username === null ? String(loginForm.value.username) : username, |
||||
|
password: password === null ? String(loginForm.value.password) : String(password), |
||||
|
rememberMe: rememberMe === null ? false : Boolean(rememberMe) |
||||
|
} as LoginData; |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 获取租户列表 |
||||
|
*/ |
||||
|
const initTenantList = async () => { |
||||
|
const { data } = await getTenantList(false); |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
/** |
||||
|
* 第三方登录 |
||||
|
* @param type |
||||
|
*/ |
||||
|
const doSocialLogin = (type: string) => { |
||||
|
authRouterUrl(type, loginForm.value.tenantId).then((res: any) => { |
||||
|
if (res.code === HttpStatus.SUCCESS) { |
||||
|
// 获取授权地址跳转 |
||||
|
window.location.href = res.data; |
||||
|
} else { |
||||
|
ElMessage.error(res.msg); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getCode(); |
||||
|
initTenantList(); |
||||
|
getLoginData(); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.login { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
height: 100%; |
||||
|
background-image: url('../assets/images/login-background.jpg'); |
||||
|
background-size: cover; |
||||
|
} |
||||
|
|
||||
|
.title-box { |
||||
|
display: flex; |
||||
|
|
||||
|
.title { |
||||
|
margin: 0px auto 30px auto; |
||||
|
text-align: center; |
||||
|
color: #707070; |
||||
|
} |
||||
|
|
||||
|
:deep(.lang-select--style) { |
||||
|
line-height: 0; |
||||
|
color: #7483a3; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.login-form { |
||||
|
border-radius: 6px; |
||||
|
background: #ffffff; |
||||
|
width: 400px; |
||||
|
padding: 25px 25px 5px 25px; |
||||
|
z-index: 1; |
||||
|
.el-input { |
||||
|
height: 40px; |
||||
|
input { |
||||
|
height: 40px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.input-icon { |
||||
|
height: 39px; |
||||
|
width: 14px; |
||||
|
margin-left: 0px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.login-tip { |
||||
|
font-size: 13px; |
||||
|
text-align: center; |
||||
|
color: #bfbfbf; |
||||
|
} |
||||
|
|
||||
|
.login-code { |
||||
|
width: 33%; |
||||
|
height: 40px; |
||||
|
float: right; |
||||
|
|
||||
|
img { |
||||
|
cursor: pointer; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.el-login-footer { |
||||
|
height: 40px; |
||||
|
line-height: 40px; |
||||
|
position: fixed; |
||||
|
bottom: 0; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
color: #fff; |
||||
|
font-family: Arial, serif; |
||||
|
font-size: 12px; |
||||
|
letter-spacing: 1px; |
||||
|
} |
||||
|
|
||||
|
.login-code-img { |
||||
|
height: 40px; |
||||
|
padding-left: 12px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue