李达明 1 month ago
parent
commit
69fb1eb859
  1. 531
      src/views/login/components/LoginForm.vue

531
src/views/login/components/LoginForm.vue

@ -1,6 +1,6 @@
<template> <template>
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" <el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
label-position="top" label-width="120px" size="large"> label-position="top" label-width="120px" size="large">
<el-row style="margin-right: -10px; margin-left: -10px"> <el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
@ -24,25 +24,20 @@
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username"> <el-form-item prop="username">
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" <el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar" style="height: 42px;" /> :prefix-icon="iconAvatar" style="height: 42px;" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password"> <el-form-item prop="password">
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" <el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="passwordEnter" style="height: 42px;" /> :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="code">
<Verify ref="VerifySlide" captchaType="blockPuzzle" mode="" :imgSize="{ width: '450px', height: '225px' }" @success="capctchaCheckSuccess" @error="capctchaCheckError"></Verify>
</el-form-item>
</el-col>
<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px" v-if="needCode">
<el-form-item prop="code"> <el-form-item prop="code">
<div class="flex w-[100%]"> <div class="flex w-[100%]">
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" <el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()"> style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
<template #prefix> <template #prefix>
<img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" /> <img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" />
</template> </template>
@ -52,18 +47,18 @@
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</el-col> --> </el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px; margin-top: -20px; margin-bottom: -20px">
<el-form-item> <el-form-item>
<el-row justify="space-between" style="width: 100%"> <el-row justify="space-between" style="width: 100%">
<el-col :span="6"> <el-col :span="6">
<!-- <el-checkbox v-model="loginData.loginForm.rememberMe"> <el-checkbox v-model="loginData.loginForm.rememberMe">
{{ t('login.remember') }} {{ t('login.remember') }}
</el-checkbox> --> </el-checkbox>
</el-col> </el-col>
<el-col :offset="6" :span="12"> <el-col :offset="6" :span="12">
<el-link style="float: right" type="primary" <el-link style="float: right" type="primary"
@click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link> @click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link>
<!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> --> <!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> -->
</el-col> </el-col>
</el-row> </el-row>
@ -72,332 +67,260 @@
<el-col :span="24" style="padding-right: 10px; padding-left: 10px"> <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item> <el-form-item>
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" <XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
@click="handleLogin()" /> @click="handleLogin()" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<!-- <Verify
ref="verify"
:captchaType="captchaType"
:imgSize="{ width: '400px', height: '200px' }"
mode="pop"
@success="handleLogin"
/> -->
</el-row> </el-row>
</el-form> </el-form>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ElLoading } from 'element-plus' import { ElLoading } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue' import LoginFormTitle from './LoginFormTitle.vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router' import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import * as authUtil from '@/utils/auth' import { useIcon } from '@/hooks/web/useIcon'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import * as PassWordApi from '@/api/system/password'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { getCodeImg } from "@/api/login";
import router from "@/router";
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import * as DeptApi from '@/api/system/dept'
import { getTenant } from '@/utils/systemParam'
import { getSystermUpdateAlert,getSystermUpdateUrl,getNeedCode } from '@/utils/systemParam'
import {validateResetTime} from "@/api/system/password";
import { Verify } from '@/components/Verifition'
const needCode = ref(getNeedCode()==true||getNeedCode()=='true') import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { getCodeImg } from "@/api/login";
import router from "@/router";
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import * as DeptApi from '@/api/system/dept'
import { getTenant } from '@/utils/systemParam'
import { getSystermUpdateAlert,getSystermUpdateUrl } from '@/utils/systemParam'
defineOptions({ name: 'LoginForm' }) defineOptions({ name: 'LoginForm' })
const { t } = useI18n() const { t } = useI18n()
const message = useMessage() const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' }) const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' }) const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' }) const iconLock = useIcon({ icon: 'ep:lock' })
const formLogin = ref() const formLogin = ref()
const { validForm } = useFormValid(formLogin) const { validForm } = useFormValid(formLogin)
const { setLoginState, getLoginState } = useLoginState() const { setLoginState, getLoginState } = useLoginState()
const { currentRoute, push, replace } = useRouter() const { currentRoute, push, replace } = useRouter()
const permissionStore = usePermissionStore() const permissionStore = usePermissionStore()
const redirect = ref<string>('') const redirect = ref<string>('')
const loginLoading = ref(false) const loginLoading = ref(false)
const VerifySlide = ref() const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle clickWord
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN) const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
// //
const captchaEnabled = ref(true) const captchaEnabled = ref(true)
const codeUrl = ref("") const codeUrl = ref("")
const tenantArray = ref(JSON.parse(getTenant())) const tenantArray = ref(JSON.parse(getTenant()))
const { wsCache } = useCache() const { wsCache } = useCache()
const language = wsCache.get('lang') const language = wsCache.get('lang')
if('en-US'==language){ if('en-US'==language){
tenantArray.value = tenantArray.value.map(item => ({ tenantArray.value = tenantArray.value.map(item => ({
name: item, name: item,
aliasName:item.replace('长春','ChangChun').replace('成都','ChengDu') aliasName:item.replace('长春','ChangChun').replace('成都','ChengDu')
})); }));
}else{ }else{
tenantArray.value = tenantArray.value.map(item => ({ tenantArray.value = tenantArray.value.map(item => ({
name: item, name: item,
aliasName:item aliasName:item
})); }));
}
const LoginRules = {
tenantName: [required],
username: [required],
password: [required]
}
const loginData = reactive({
isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: {
tenantName: tenantArray.value[0].name,
username: 'admin',
password: '123456',
captchaVerification: '',
rememberMe: false,
code: '',
uuid: ''
} }
const LoginRules = { })
tenantName: [required],
username: [required], const socialList = [
password: [required] { icon: 'ant-design:github-filled', type: 0 },
{ icon: 'ant-design:wechat-filled', type: 30 },
{ icon: 'ant-design:alipay-circle-filled', type: 0 },
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 }
]
//
// const getCode = async () => {
// //
// if (loginData.captchaEnable === 'false') {
// await handleLogin({})
// } else {
// //
// //
// verify.value.show()
// }
// }
function getCode() {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img;
loginData.loginForm.uuid = res.uuid;
}
});
}
//ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
authUtil.setTenantId(res)
} }
const loginData = reactive({ }
isShowPassword: false, //
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, const getCookie = () => {
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, const loginForm = authUtil.getLoginForm()
loginForm: { if (loginForm) {
tenantName: tenantArray.value[0].name, loginData.loginForm = {
username: '', ...loginData.loginForm,
password: '', username: loginForm.username ? loginForm.username : loginData.loginForm.username,
captchaVerification: '', password: loginForm.password ? loginForm.password : loginData.loginForm.password,
rememberMe: false, rememberMe: loginForm.rememberMe ? true : false,
code: '', tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
uuid: ''
} }
}) }
}
const socialList = [ const handleUpdate = () => {
{ icon: 'ant-design:github-filled', type: 0 }, router.push({
{ icon: 'ant-design:wechat-filled', type: 30 }, name: 'ForgetPassword',
{ icon: 'ant-design:alipay-circle-filled', type: 0 }, })
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 } };
]
// const loading = ref() // ElLoading.service
// const getCode = async () => { //
// // const handleLogin = async (params) => {
// if (loginData.captchaEnable === 'false') { console.log('登录-185')
// await handleLogin({}) if(getSystermUpdateAlert()=='true'||getSystermUpdateAlert()===true){
// } else { await ElMessageBox.alert(
// // '<strong>系统迁移,请移步至</strong>' +
// // `<a href=${getSystermUpdateUrl()} target="_blank">${getSystermUpdateUrl()}</a>`,
// verify.value.show() '重要提示',
// } {
// } dangerouslyUseHTMLString: true,
const passwordEnter = ()=>{ }
if(!needCode.value){ )
handleLogin() }
loginLoading.value = true
try {
await getTenantId()
const data = await validForm()
if (!data) {
return return
}else{
getCode()
} }
} const res = await LoginApi.login(loginData.loginForm)
function getCode() { if (!res) {
console.log('getCode') console.log('登录-195')
if(!needCode.value){ getCode()
return return
} }
VerifySlide.value.refresh() loading.value = ElLoading.service({
// getCodeImg().then(res => { lock: true,
// captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled; text: '正在加载系统中...',
// if (captchaEnabled.value) { background: 'rgba(0, 0, 0, 0.7)'
// codeUrl.value = "data:image/gif;base64," + res.img; })
// loginData.loginForm.uuid = res.uuid; if (loginData.loginForm.rememberMe) {
// } authUtil.setLoginForm(loginData.loginForm)
// }); } else {
} authUtil.removeLoginForm()
//ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
authUtil.setTenantId(res)
} }
} authUtil.setToken(res)
// if (!redirect.value) {
const getCookie = () => { redirect.value = '/'
const loginForm = authUtil.getLoginForm()
if (loginForm) {
loginData.loginForm = {
...loginData.loginForm,
username: loginForm.username ? loginForm.username : loginData.loginForm.username,
password: loginForm.password ? loginForm.password : loginData.loginForm.password,
rememberMe: loginForm.rememberMe ? true : false,
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
}
} }
} // SSO
if (redirect.value.indexOf('sso') !== -1) {
const handleUpdate = () => { window.location.href = window.location.href.replace('/login?redirect=', '')
router.push({ } else {
name: 'ForgetPassword', console.log(redirect.value)
}) replace({ path: redirect.value || permissionStore.addRouters[0].path })
};
//
const capctchaCheckSuccess = async ({captchaVerification})=>{
console.log('capctchaCheckSuccess',captchaVerification)
if(captchaVerification){
loginData.loginForm.code = captchaVerification
await handleLogin()
} }
//
const { wsCache } = useCache()
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
} finally {
console.log('登录-224')
getCode()
loginLoading.value = false
loading?.value?.close()
} }
// }
const capctchaCheckError = ()=>{
console.log('capctchaCheckError')
}
const loading = ref() // ElLoading.service //
// const doSocialLogin = async (type : number) => {
const handleLogin = async () => { if (type === 0) {
console.log('登录-185') message.error('此方式未配置')
} else {
loginLoading.value = true loginLoading.value = true
if (loginData.tenantEnable === 'true') {
try { await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
await getTenantId() const res = await LoginApi.getTenantIdByName(value)
authUtil.setTenantId(res)
const data = await validForm()
if (!data) {
return
}
let res = null
if(!needCode.value){
res = await LoginApi.loginNoCode(loginData.loginForm)
}else{
res = await LoginApi.login(loginData.loginForm)
}
console.log('登陆res',res)
const differenceDays = await PassWordApi.validateResetTime(res.userId)
switch (differenceDays){
case null:
break
case 0:
await ElMessageBox.alert(
'<strong>密码到期,请立即修改</strong>',
'重要提示',
{
dangerouslyUseHTMLString: true,
}
)
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}})
return
case 1:
await ElMessageBox.alert(
'<strong>密码到期,请立即修改</strong>',
'重要提示',
{
dangerouslyUseHTMLString: true,
}
)
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}})
return
default:
await ElMessageBox.alert(
'密码'+differenceDays+'到期,请尽快修改。',
'重要提示',
{
dangerouslyUseHTMLString: true,
}
)
break
}
if (!res) {
console.log('登录-195')
getCode()
return
}
loading.value = ElLoading.service({
lock: true,
text: '正在加载系统中...',
background: 'rgba(0, 0, 0, 0.7)'
}) })
if (loginData.loginForm.rememberMe) {
authUtil.setLoginForm(loginData.loginForm)
} else {
authUtil.removeLoginForm()
}
authUtil.setToken(res)
if(getSystermUpdateAlert()=='true'||getSystermUpdateAlert()===true){
await ElMessageBox.alert(
'<strong>系统迁移,请移步至</strong>' +
`<a href=${getSystermUpdateUrl()} target="_blank">${getSystermUpdateUrl()}</a>`,
'重要提示',
{
dangerouslyUseHTMLString: true,
}
)
}
if (!redirect.value) {
redirect.value = '/'
}
// SSO
if (redirect.value.indexOf('sso') !== -1) {
window.location.href = window.location.href.replace('/login?redirect=', '')
} else {
console.log(redirect.value)
replace({ path: redirect.value || permissionStore.addRouters[0].path })
}
//
const { wsCache } = useCache()
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
}catch (e){
if(e.code === 1002000008){
setTimeout(function (){
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}})
},1500)
}
}finally {
console.log('登录-224')
loginLoading.value = false
loading?.value?.close()
getCode()
} }
// redirectUri
const redirectUri =
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
//
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
console.log(33)
window.location.href = res
} }
// }
const doSocialLogin = async (type : number) => { watch(
if (type === 0) { () => currentRoute.value,
message.error('此方式未配置') (route : RouteLocationNormalizedLoaded) => {
} else { redirect.value = route?.query?.redirect as string
loginLoading.value = true },
if (loginData.tenantEnable === 'true') { {
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => { immediate: true
const res = await LoginApi.getTenantIdByName(value)
authUtil.setTenantId(res)
})
}
// redirectUri
const redirectUri =
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
//
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
console.log(33)
window.location.href = res
}
} }
watch( )
() => currentRoute.value, onMounted(() => {
(route : RouteLocationNormalizedLoaded) => { getCode();
redirect.value = route?.query?.redirect as string getCookie()
}, })
{
immediate: true
}
)
onMounted(() => {
getCode();
getCookie()
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.anticon) { :deep(.anticon) {
&:hover { &:hover {
color: var(--el-color-primary) !important; color: var(--el-color-primary) !important;
}
} }
}
.login-code { .login-code {
float: right; float: right;
width: 100%; width: 100%;
height: 38px; height: 38px;
img { img {
width: 100%; width: 100%;
height: auto; height: auto;
max-width: 100px; max-width: 100px;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
}
} }
}
</style> </style>

Loading…
Cancel
Save