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