colin
2 years ago
36 changed files with 268 additions and 45 deletions
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<template v-if="getShow"> |
||||
|
<LoginFormTitle class="enter-x" /> |
||||
|
<Form |
||||
|
class="p-4 enter-x" |
||||
|
:model="formData" |
||||
|
:rules="getFormRules" |
||||
|
ref="formRef" |
||||
|
colon |
||||
|
labelAlign="left" |
||||
|
layout="vertical" |
||||
|
@keypress.enter="handleLogin" |
||||
|
> |
||||
|
<FormItem name="userName" class="enter-x" :label="t('AbpAccount.DisplayName:UserName')"> |
||||
|
<BInput |
||||
|
size="large" |
||||
|
v-model:value="formData.userName" |
||||
|
:placeholder="t('AbpAccount.DisplayName:UserName')" |
||||
|
class="fix-auto-fill" |
||||
|
/> |
||||
|
</FormItem> |
||||
|
<FormItem name="password" class="enter-x" :label="t('AbpAccount.DisplayName:Password')"> |
||||
|
<InputPassword |
||||
|
size="large" |
||||
|
visibilityToggle |
||||
|
autocomplete="off" |
||||
|
v-model:value="formData.password" |
||||
|
:placeholder="t('AbpAccount.DisplayName:Password')" |
||||
|
/> |
||||
|
</FormItem> |
||||
|
|
||||
|
<FormItem class="enter-x"> |
||||
|
<Button type="primary" size="large" block @click="handleLogin" :loading="loading"> |
||||
|
{{ L('Login') }} |
||||
|
</Button> |
||||
|
<Button size="large" block class="mt-4" @click="handleBackLogin"> |
||||
|
{{ L('GoBack') }} |
||||
|
</Button> |
||||
|
</FormItem> |
||||
|
</Form> |
||||
|
<BasicModal @register="registerModal" :title="t('sys.login.loginToPortalTitle')" :height="400"> |
||||
|
<List item-layout="horizontal" :data-source="portalModel"> |
||||
|
<template #renderItem="{ item }"> |
||||
|
<ListItem> |
||||
|
<ListItemMeta> |
||||
|
<template #title> |
||||
|
<Button type="text" @click="handleLoginTo(item.Id)" :loading="loading" :disabled="loading">{{ item.Name }}</Button> |
||||
|
</template> |
||||
|
<template #avatar> |
||||
|
<Avatar :src="item.Logo" /> |
||||
|
</template> |
||||
|
</ListItemMeta> |
||||
|
</ListItem> |
||||
|
</template> |
||||
|
</List> |
||||
|
</BasicModal> |
||||
|
</template> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { reactive, ref, computed, unref, inject } from 'vue'; |
||||
|
import { Avatar, Form, Button, Input, List } from 'ant-design-vue'; |
||||
|
import { BasicModal, useModal } from '/@/components/Modal'; |
||||
|
import LoginFormTitle from './LoginFormTitle.vue'; |
||||
|
import { useLocalization } from '/@/hooks/abp/useLocalization'; |
||||
|
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin'; |
||||
|
import { useAbpStoreWithOut } from '/@/store/modules/abp'; |
||||
|
import { useUserStoreWithOut } from '/@/store/modules/user'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { useMessage } from '/@/hooks/web/useMessage'; |
||||
|
import { useGlobSetting } from '/@/hooks/setting'; |
||||
|
import { PortalLoginModel } from '/@/api/sys/model/userModel'; |
||||
|
|
||||
|
const FormItem = Form.Item; |
||||
|
const InputPassword = Input.Password; |
||||
|
const ListItem = List.Item; |
||||
|
const ListItemMeta = ListItem.Meta; |
||||
|
|
||||
|
const { notification } = useMessage(); |
||||
|
const [registerModal, { openModal, closeModal }] = useModal(); |
||||
|
const { t } = useI18n(); |
||||
|
const { L } = useLocalization('AbpAccount'); |
||||
|
const { handleBackLogin, getLoginState } = useLoginState(); |
||||
|
const userStore = useUserStoreWithOut(); |
||||
|
const abpStore = useAbpStoreWithOut(); |
||||
|
|
||||
|
const formRef = ref(); |
||||
|
const loading = ref(false); |
||||
|
const portalModel = ref<PortalLoginModel[]>([]); |
||||
|
|
||||
|
const formData = reactive({ |
||||
|
userName: '', |
||||
|
password: '', |
||||
|
}); |
||||
|
|
||||
|
const { validForm } = useFormValid(formRef); |
||||
|
const { getFormRules } = useFormRules(); |
||||
|
const globSetting = useGlobSetting(); |
||||
|
const cookies = inject<any>('$cookies'); |
||||
|
|
||||
|
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.Portal); |
||||
|
|
||||
|
async function handleLoginTo(enterpriseId?: string) { |
||||
|
const data = await validForm(); |
||||
|
if (!data) return; |
||||
|
try { |
||||
|
loading.value = true; |
||||
|
closeModal(); |
||||
|
const userInfo = await userStore.login({ |
||||
|
username: data.userName, |
||||
|
password: data.password, |
||||
|
enterpriseId: enterpriseId, |
||||
|
mode: 'none', //不要默认的错误提示 |
||||
|
isPortalLogin: true, |
||||
|
loginCallback: () => { |
||||
|
return new Promise((resolve) => { |
||||
|
var currentTenant = abpStore.getApplication.currentTenant; |
||||
|
if (currentTenant.id) { |
||||
|
setTimeout(() => { |
||||
|
cookies?.set(globSetting.multiTenantKey, currentTenant.id); |
||||
|
return resolve(); |
||||
|
}, 100); |
||||
|
} else { |
||||
|
return resolve(); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
}); |
||||
|
if (userInfo) { |
||||
|
notification.success({ |
||||
|
message: t('sys.login.loginSuccessTitle'), |
||||
|
description: `${t('sys.login.loginSuccessDesc')}: ${ |
||||
|
userInfo.realName ?? userInfo.username |
||||
|
}`, |
||||
|
duration: 3, |
||||
|
}); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
portalModel.value = JSON.parse(error as string) as PortalLoginModel[]; |
||||
|
openModal(true); |
||||
|
// createConfirm({ |
||||
|
// iconType: 'info', |
||||
|
// title: '请选择登陆平台', |
||||
|
// content: '', |
||||
|
// okCancel: false, |
||||
|
// }); |
||||
|
} finally { |
||||
|
loading.value = false; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function handleLogin() { |
||||
|
await handleLoginTo(); |
||||
|
} |
||||
|
</script> |
||||
Loading…
Reference in new issue