dongchi
/
dongchi-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

11

master
李达明 1 month ago
parent
e53ab85149
commit
69fb1eb859
1 changed files with 227 additions and 304 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 305
      src/views/login/components/LoginForm.vue

305
src/views/login/components/LoginForm.vue
View File

@ -30,15 +30,10 @@
<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')"
@ -52,14 +47,14 @@
</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"
@ -74,138 +69,127 @@
<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 = { const LoginRules = {
tenantName: [required], tenantName: [required],
username: [required], username: [required],
password: [required] password: [required]
} }
const loginData = reactive({ const loginData = reactive({
isShowPassword: false, isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE, captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE, tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: { loginForm: {
tenantName: tenantArray.value[0].name, tenantName: tenantArray.value[0].name,
username: '', username: 'admin',
password: '', password: '123456',
captchaVerification: '', captchaVerification: '',
rememberMe: false, rememberMe: false,
code: '', code: '',
uuid: '' uuid: ''
} }
}) })
const socialList = [ const socialList = [
{ icon: 'ant-design:github-filled', type: 0 }, { icon: 'ant-design:github-filled', type: 0 },
{ icon: 'ant-design:wechat-filled', type: 30 }, { icon: 'ant-design:wechat-filled', type: 30 },
{ icon: 'ant-design:alipay-circle-filled', type: 0 }, { icon: 'ant-design:alipay-circle-filled', type: 0 },
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 } { icon: 'ant-design:dingtalk-circle-filled', type: 20 }
] ]
// 获取验证码 // 获取验证码
// const getCode = async () => { // const getCode = async () => {
// // 情况一，未开启：则直接登录 // // 情况一，未开启：则直接登录
// if (loginData.captchaEnable === 'false') { // if (loginData.captchaEnable === 'false') {
// await handleLogin({}) // await handleLogin({})
// } else { // } else {
// // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录 // // 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// // 弹出验证码 // // 弹出验证码
// verify.value.show() // verify.value.show()
// } // }
// } // }
const passwordEnter = ()=>{ function getCode() {
if(!needCode.value){ getCodeImg().then(res => {
handleLogin() captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
return if (captchaEnabled.value) {
}else{ codeUrl.value = "data:image/gif;base64," + res.img;
getCode() loginData.loginForm.uuid = res.uuid;
} }
} });
function getCode() { }
console.log('getCode') //获取租户ID
if(!needCode.value){ const getTenantId = async () => {
return
}
VerifySlide.value.refresh()
// 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') { if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName) const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
authUtil.setTenantId(res) authUtil.setTenantId(res)
} }
} }
// 记住我 // 记住我
const getCookie = () => { const getCookie = () => {
const loginForm = authUtil.getLoginForm() const loginForm = authUtil.getLoginForm()
if (loginForm) { if (loginForm) {
loginData.loginForm = { loginData.loginForm = {
@ -216,82 +200,36 @@
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
} }
} }
} }
const handleUpdate = () => { const handleUpdate = () => {
router.push({ router.push({
name: 'ForgetPassword', name: 'ForgetPassword',
}) })
}; };
// 滑块校验成功
const capctchaCheckSuccess = async ({captchaVerification})=>{
console.log('capctchaCheckSuccess',captchaVerification)
if(captchaVerification){
loginData.loginForm.code = captchaVerification
await handleLogin()
}
}
// 滑块校验失败
const capctchaCheckError = ()=>{
console.log('capctchaCheckError')
}
const loading = ref() // ElLoading.service 返回的实例 const loading = ref() // ElLoading.service 返回的实例
// 登录 // 登录
const handleLogin = async () => { const handleLogin = async (params) => {
console.log('登录-185') console.log('登录-185')
loginLoading.value = true if(getSystermUpdateAlert()=='true'||getSystermUpdateAlert()===true){
try {
await getTenantId()
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( await ElMessageBox.alert(
'<strong>密码到期，请立即修改</strong>', '<strong>系统迁移，请移步至</strong>' +
`<a href=${getSystermUpdateUrl()} target="_blank">${getSystermUpdateUrl()}</a>`,
'重要提示', '重要提示',
{ {
dangerouslyUseHTMLString: true, dangerouslyUseHTMLString: true,
} }
) )
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}})
return
case 1:
await ElMessageBox.alert(
'<strong>密码到期，请立即修改</strong>',
'重要提示',
{
dangerouslyUseHTMLString: true,
} }
) loginLoading.value = true
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}}) try {
await getTenantId()
const data = await validForm()
if (!data) {
return return
default:
await ElMessageBox.alert(
'密码'+differenceDays+'到期，请尽快修改。',
'重要提示',
{
dangerouslyUseHTMLString: true,
}
)
break
} }
const res = await LoginApi.login(loginData.loginForm)
if (!res) { if (!res) {
console.log('登录-195') console.log('登录-195')
getCode() getCode()
@ -308,16 +246,6 @@
authUtil.removeLoginForm() authUtil.removeLoginForm()
} }
authUtil.setToken(res) 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) { if (!redirect.value) {
redirect.value = '/' redirect.value = '/'
} }
@ -331,21 +259,16 @@
// 存储 部门信息 // 存储 部门信息
const { wsCache } = useCache() const { wsCache } = useCache()
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList()) wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
}catch (e){ } finally {
if(e.code === 1002000008){
setTimeout(function (){
router.push({path:"/updatePasswordNewTips",query:{username:loginData.loginForm.username}})
},1500)
}
}finally {
console.log('登录-224') console.log('登录-224')
getCode()
loginLoading.value = false loginLoading.value = false
loading?.value?.close() loading?.value?.close()
getCode()
}
} }
// 社交登录 }
const doSocialLogin = async (type : number) => {
// 社交登录
const doSocialLogin = async (type : number) => {
if (type === 0) { if (type === 0) {
message.error('此方式未配置') message.error('此方式未配置')
} else { } else {
@ -364,8 +287,8 @@
console.log(33) console.log(33)
window.location.href = res window.location.href = res
} }
} }
watch( watch(
() => currentRoute.value, () => currentRoute.value,
(route : RouteLocationNormalizedLoaded) => { (route : RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string redirect.value = route?.query?.redirect as string
@ -373,21 +296,21 @@
{ {
immediate: true immediate: true
} }
) )
onMounted(() => { onMounted(() => {
getCode(); getCode();
getCookie() 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;
@ -399,5 +322,5 @@
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save