You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
310 lines
8.8 KiB
310 lines
8.8 KiB
<template> |
|
<div :class="prefixCls" class="login-background-img"> |
|
<AppLocalePicker v-if="showLocale" class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/> |
|
<AppDarkModeToggle class="absolute top-3 right-10 enter-x"/> |
|
<div v-if="!getIsMobile" class="aui-logo"> |
|
<div> |
|
<h3> |
|
<img :src="logoImg" alt=""> |
|
</h3> |
|
</div> |
|
</div> |
|
<div v-else class="aui-phone-logo"> |
|
<img :src="logoPhoneImg" alt=""> |
|
</div> |
|
<main class="aui-content"> |
|
<div class="aui-container"> |
|
<div class="aui-form"> |
|
<div class="aui-image"> |
|
<div class="aui-image-text"/> |
|
</div> |
|
<div class="aui-formBox"> |
|
<div class="aui-formWell"> |
|
<div class="aui-flex aui-form-nav"> |
|
<div class="aui-flex-box">登录 | LOGIN</div> |
|
</div> |
|
<div class="aui-form-box" style="height: 150px"> |
|
<a-form |
|
ref="loginRef" |
|
:model="formData" |
|
@keypress.enter="handleLogin" |
|
> |
|
<div class="aui-account"> |
|
<div class="aui-inputClear"> |
|
<i class="icon icon-code"/> |
|
<a-form-item> |
|
<a-input v-model:value="formData.username" class="fix-auto-fill" :placeholder="t('sys.login.userName')"/> |
|
</a-form-item> |
|
</div> |
|
<div class="aui-inputClear"> |
|
<i class="icon icon-password"/> |
|
<a-form-item> |
|
<a-input |
|
v-model:value="formData.password" |
|
class="fix-auto-fill" |
|
type="password" |
|
:placeholder="t('sys.login.password')" |
|
/> |
|
</a-form-item> |
|
</div> |
|
<div class="aui-inputClear"> |
|
<i class="icon icon-role"/> |
|
<a-form-item> |
|
<a-select |
|
v-model:value="formData.identityProvider" |
|
show-search |
|
:placeholder="t('sys.login.identityProviderPlaceholder')" |
|
:bordered="false" |
|
:filter-option="filterOption" |
|
:options="formData.identityProviderDictData" |
|
/> |
|
</a-form-item> |
|
</div> |
|
</div> |
|
</a-form> |
|
</div> |
|
<div style="margin-top: 12px" class="aui-formButton"> |
|
<div class="aui-flex"> |
|
<a-button |
|
:loading="loginLoading" |
|
class="aui-link-login aui-flex-box " |
|
type="primary" |
|
@click="handleLogin" |
|
>{{ t('sys.login.loginButton') }}</a-button> |
|
</div> |
|
</div> |
|
<div class="other-login-ways"> |
|
<span><a href="https://kicc.kanglailab.com/">康来智慧冷链平台</a></span> |
|
<a-divider type="vertical"/> |
|
<span><a href="https://kicc.kanglailab.com/">康来报告单平台</a></span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
<footer class="footer text-white text-center"> |
|
<a href="#">Copyright</a> © 2021-2023 KANGLAI BIOLOGY BEAUTY |
|
<a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20001570号-2</a> |
|
</footer> |
|
</div> |
|
</template> |
|
<script lang="ts" setup> |
|
import { reactive, ref, unref, onMounted } from 'vue'; |
|
import { useUserStore } from '/@/store/modules/user'; |
|
import { useMessage } from '/@/hooks/web/useMessage'; |
|
import { useI18n } from '/@/hooks/web/useI18n'; |
|
import logoImg from '/@/assets/ssoLogin/kics/icon/logo.png'; |
|
import logoPhoneImg from '/@/assets/images/logo.png'; |
|
import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application'; |
|
import { useLocaleStore } from '/@/store/modules/locale'; |
|
import { useDesign } from '/@/hooks/web/useDesign'; |
|
import { useAppInject } from '/@/hooks/web/useAppInject'; |
|
import { useRouter } from 'vue-router'; |
|
import { anonymousGetDictType } from '/@/api/platform/system/controller/dictdata'; |
|
|
|
const { currentRoute, replace } = useRouter(); |
|
const { params, query } = unref(currentRoute); |
|
const { prefixCls } = useDesign('sso-kics-login'); |
|
const { notification, createMessage } = useMessage(); |
|
const userStore = useUserStore(); |
|
const { t } = useI18n(); |
|
const localeStore = useLocaleStore(); |
|
const showLocale = localeStore.getShowPicker; |
|
|
|
const formData = reactive<Recordable>({ |
|
username: '', |
|
password: '', |
|
identityProvider: undefined, |
|
tenantId: '1510456530575347712', |
|
identityProviderDictData: [] |
|
}); |
|
const loginRef = ref(); |
|
const loginLoading = ref<boolean>(false); |
|
const { getIsMobile } = useAppInject(); |
|
|
|
onMounted(async () => { |
|
formData.identityProviderDictData = await anonymousGetDictType({ type: 'identityProvider', tenantId: formData.tenantId }); |
|
// 设置默认勾选 |
|
if(formData.identityProviderDictData[0]) { |
|
formData.identityProvider = formData.identityProviderDictData[0]?.value; |
|
} |
|
}); |
|
|
|
async function handleLogin() { |
|
if (!formData.username) { |
|
createMessage.warn(t('sys.login.accountPlaceholder')); |
|
return; |
|
} |
|
if (!formData.password) { |
|
createMessage.warn(t('sys.login.passwordPlaceholder')); |
|
return; |
|
} |
|
if (!formData.identityProvider) { |
|
createMessage.warn(t('sys.login.identityProviderPlaceholder')); |
|
return; |
|
} |
|
try { |
|
loginLoading.value = true; |
|
await userStore.login({ |
|
password: formData.password, |
|
username: formData.username, |
|
identityProvider: formData.identityProvider, |
|
tenantId: formData.tenantId, |
|
goHome: false, |
|
clientId: 'kics', |
|
performPostLoginAction: false |
|
}); |
|
// sso重定向到资源系统 |
|
document.location.reload(); |
|
} finally { |
|
loginLoading.value = false; |
|
} |
|
} |
|
|
|
function filterOption(input: string, option: Recordable) { |
|
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0; |
|
} |
|
|
|
function handleLegacyLogin() { |
|
query?.redirect && window.location.replace(`${query?.redirect}/login`); |
|
} |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
@import '/@/assets/loginmini/style/home.less'; |
|
@import '/@/assets/loginmini/style/base.less'; |
|
|
|
.login-background-img { |
|
width: 100%; |
|
height: 100%; |
|
} |
|
|
|
.aui-image-text { |
|
height: 400px; |
|
background-image: none; |
|
} |
|
|
|
:deep(.ant-input:focus) { |
|
box-shadow: none; |
|
} |
|
|
|
.aui-link-login{ |
|
height: 42px; |
|
padding: 10px 15px; |
|
font-size: 14px; |
|
border-radius: 8px; |
|
margin-top: 15px; |
|
margin-bottom: 8px; |
|
} |
|
|
|
.aui-phone-logo{ |
|
position: absolute; |
|
margin-left: 10px; |
|
width: 60px; |
|
top:2px; |
|
z-index: 4; |
|
} |
|
|
|
.top-3{ |
|
top: 0.45rem; |
|
} |
|
|
|
.aui-form-nav .aui-flex-box{ |
|
color: #3EB041 !important; |
|
} |
|
|
|
.aui-container { |
|
max-width: 750px; |
|
border-radius: 18px; |
|
overflow: hidden; |
|
} |
|
|
|
.aui-image { |
|
background-image: url(/@/assets/ssoLogin/kics/icon/login-ad.jpg); |
|
} |
|
|
|
.footer { |
|
position: fixed; |
|
bottom: 9px; |
|
width: 100%; |
|
font-size: 17px; |
|
font-weight: bold; |
|
user-select: none; |
|
a { |
|
color: #FFFFFF; |
|
} |
|
.legacy-login { |
|
color: #00000080; |
|
font-size: 12px; |
|
margin-left: 5px; |
|
} |
|
} |
|
|
|
.other-login-ways { |
|
color: rgba(0,0,0,.5); |
|
text-align: center; |
|
margin-top: 20px; |
|
span { |
|
padding: 5px; |
|
} |
|
a { |
|
color: #00000080; |
|
} |
|
a:hover { |
|
color: #526ECC; |
|
} |
|
} |
|
|
|
</style> |
|
|
|
<style lang="less"> |
|
@prefix-cls: ~'@{namespace}-sso-kics-login'; |
|
@dark-bg: #293146; |
|
|
|
html[data-theme='dark'] { |
|
.@{prefix-cls} { |
|
background-color: @dark-bg !important; |
|
background-image: none; |
|
|
|
&::before { |
|
background-image: url(/@/assets/images/login-bg-dark.svg); |
|
} |
|
.aui-inputClear{ |
|
background-color: #232a3b !important; |
|
} |
|
.ant-input, |
|
.ant-input-password { |
|
background-color: #232a3b !important; |
|
} |
|
|
|
.ant-btn:not(.ant-btn-link):not(.ant-btn-primary) { |
|
border: 1px solid #4a5569 !important; |
|
} |
|
|
|
&-form { |
|
background: @dark-bg !important; |
|
} |
|
|
|
.aui-inputClear input,.aui-input-line input,.aui-choice { |
|
color: #c9d1d9 !important; |
|
} |
|
|
|
.aui-formBox{ |
|
background-color: @dark-bg !important; |
|
} |
|
} |
|
|
|
input.fix-auto-fill, |
|
.fix-auto-fill input { |
|
-webkit-text-fill-color: #c9d1d9 !important; |
|
box-shadow: inherit !important; |
|
} |
|
|
|
.ant-divider-inner-text { |
|
font-size: 12px !important; |
|
color: @text-color-secondary !important; |
|
} |
|
} |
|
</style>
|
|
|