|
@@ -1,40 +1,35 @@
|
|
<template>
|
|
<template>
|
|
- <el-form ref="formRef" :model="state.ruleForm" :rules="rules" class="login-content-form" size="large"
|
|
|
|
- @keyup.enter="loginClick">
|
|
|
|
|
|
+ <el-form ref="formRef" size="large" class="login-content-form" :model="state.ruleForm" :rules="rules" @keyup.enter="loginClick">
|
|
<el-form-item class="login-animation1" prop="username">
|
|
<el-form-item class="login-animation1" prop="username">
|
|
- <el-input v-model="ruleForm.username" :placeholder="$t('message.account.accountPlaceholder1')" autocomplete="off"
|
|
|
|
- clearable type="text">
|
|
|
|
|
|
+ <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username"
|
|
|
|
+ clearable autocomplete="off">
|
|
<template #prefix>
|
|
<template #prefix>
|
|
- <el-icon class="el-input__icon">
|
|
|
|
- <ele-User />
|
|
|
|
- </el-icon>
|
|
|
|
|
|
+ <el-icon class="el-input__icon"><ele-User /></el-icon>
|
|
</template>
|
|
</template>
|
|
</el-input>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item class="login-animation2" prop="password">
|
|
<el-form-item class="login-animation2" prop="password">
|
|
- <el-input v-model="ruleForm.password" :placeholder="$t('message.account.accountPlaceholder2')"
|
|
|
|
- :type="isShowPassword ? 'text' : 'password'">
|
|
|
|
|
|
+ <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')"
|
|
|
|
+ v-model="ruleForm.password">
|
|
<template #prefix>
|
|
<template #prefix>
|
|
<el-icon class="el-input__icon">
|
|
<el-icon class="el-input__icon">
|
|
<ele-Unlock />
|
|
<ele-Unlock />
|
|
</el-icon>
|
|
</el-icon>
|
|
</template>
|
|
</template>
|
|
<template #suffix>
|
|
<template #suffix>
|
|
- <i :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
|
|
|
- class="iconfont el-input__icon login-content-password"
|
|
|
|
|
|
+ <i class="iconfont el-input__icon login-content-password"
|
|
|
|
+ :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
|
@click="isShowPassword = !isShowPassword">
|
|
@click="isShowPassword = !isShowPassword">
|
|
</i>
|
|
</i>
|
|
</template>
|
|
</template>
|
|
</el-input>
|
|
</el-input>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
- <el-form-item v-if="isShowCaptcha" class="login-animation3" prop="captcha">
|
|
|
|
|
|
+ <el-form-item class="login-animation3" v-if="isShowCaptcha" prop="captcha">
|
|
<el-col :span="15">
|
|
<el-col :span="15">
|
|
- <el-input v-model="ruleForm.captcha" :placeholder="$t('message.account.accountPlaceholder3')" autocomplete="off"
|
|
|
|
- clearable maxlength="4" type="text">
|
|
|
|
|
|
+ <el-input type="text" maxlength="4" :placeholder="$t('message.account.accountPlaceholder3')"
|
|
|
|
+ v-model="ruleForm.captcha" clearable autocomplete="off">
|
|
<template #prefix>
|
|
<template #prefix>
|
|
- <el-icon class="el-input__icon">
|
|
|
|
- <ele-Position />
|
|
|
|
- </el-icon>
|
|
|
|
|
|
+ <el-icon class="el-input__icon"><ele-Position /></el-icon>
|
|
</template>
|
|
</template>
|
|
</el-input>
|
|
</el-input>
|
|
</el-col>
|
|
</el-col>
|
|
@@ -46,8 +41,8 @@
|
|
</el-col>
|
|
</el-col>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item class="login-animation4">
|
|
<el-form-item class="login-animation4">
|
|
- <el-button :loading="loginLoading" class="login-content-submit" round type="primary"
|
|
|
|
- @click="loginClick">
|
|
|
|
|
|
+ <el-button type="primary" class="login-content-submit" round @click="loginClick"
|
|
|
|
+ :loading="loading.signIn">
|
|
<span>{{ $t('message.account.accountBtnText') }}</span>
|
|
<span>{{ $t('message.account.accountBtnText') }}</span>
|
|
</el-button>
|
|
</el-button>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
@@ -79,7 +74,6 @@ import emitter from '/@/utils/emitter'
|
|
export default defineComponent({
|
|
export default defineComponent({
|
|
name: 'loginAccount',
|
|
name: 'loginAccount',
|
|
setup() {
|
|
setup() {
|
|
- const loginLoading = ref(false);
|
|
|
|
const { t } = useI18n();
|
|
const { t } = useI18n();
|
|
const storesThemeConfig = useThemeConfig();
|
|
const storesThemeConfig = useThemeConfig();
|
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
@@ -93,31 +87,31 @@ export default defineComponent({
|
|
password: '',
|
|
password: '',
|
|
captcha: '',
|
|
captcha: '',
|
|
captchaKey: '',
|
|
captchaKey: '',
|
|
- captchaImgBase: ''
|
|
|
|
|
|
+ captchaImgBase: '',
|
|
},
|
|
},
|
|
loading: {
|
|
loading: {
|
|
- signIn: false
|
|
|
|
- }
|
|
|
|
|
|
+ signIn: false,
|
|
|
|
+ },
|
|
});
|
|
});
|
|
const rules = reactive<FormRules>({
|
|
const rules = reactive<FormRules>({
|
|
username: [
|
|
username: [
|
|
- { required: true, message: '请填写账号', trigger: 'blur' }
|
|
|
|
|
|
+ { required: true, message: '请填写账号', trigger: 'blur' },
|
|
],
|
|
],
|
|
password: [
|
|
password: [
|
|
{
|
|
{
|
|
required: true,
|
|
required: true,
|
|
message: '请填写密码',
|
|
message: '请填写密码',
|
|
- trigger: 'blur'
|
|
|
|
- }
|
|
|
|
|
|
+ trigger: 'blur',
|
|
|
|
+ },
|
|
],
|
|
],
|
|
captcha: [
|
|
captcha: [
|
|
{
|
|
{
|
|
required: true,
|
|
required: true,
|
|
message: '请填写验证码',
|
|
message: '请填写验证码',
|
|
- trigger: 'blur'
|
|
|
|
- }
|
|
|
|
- ]
|
|
|
|
- });
|
|
|
|
|
|
+ trigger: 'blur',
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ })
|
|
const formRef = ref();
|
|
const formRef = ref();
|
|
// 时间获取
|
|
// 时间获取
|
|
const currentTime = computed(() => {
|
|
const currentTime = computed(() => {
|
|
@@ -135,17 +129,16 @@ export default defineComponent({
|
|
});
|
|
});
|
|
};
|
|
};
|
|
const refreshCaptcha = async () => {
|
|
const refreshCaptcha = async () => {
|
|
- state.ruleForm.captcha = '';
|
|
|
|
|
|
+ state.ruleForm.captcha=''
|
|
loginApi.getCaptcha().then((ret: any) => {
|
|
loginApi.getCaptcha().then((ret: any) => {
|
|
state.ruleForm.captchaImgBase = ret.data.image_base;
|
|
state.ruleForm.captchaImgBase = ret.data.image_base;
|
|
state.ruleForm.captchaKey = ret.data.key;
|
|
state.ruleForm.captchaKey = ret.data.key;
|
|
});
|
|
});
|
|
};
|
|
};
|
|
const loginClick = async () => {
|
|
const loginClick = async () => {
|
|
- if (!formRef.value) return;
|
|
|
|
|
|
+ if (!formRef.value) return
|
|
await formRef.value.validate((valid: any) => {
|
|
await formRef.value.validate((valid: any) => {
|
|
if (valid) {
|
|
if (valid) {
|
|
- loginLoading.value = true;
|
|
|
|
loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((res: any) => {
|
|
loginApi.login({ ...state.ruleForm, password: Md5.hashStr(state.ruleForm.password) }).then((res: any) => {
|
|
if (res.code === 2000) {
|
|
if (res.code === 2000) {
|
|
Session.set('token', res.data.access);
|
|
Session.set('token', res.data.access);
|
|
@@ -165,13 +158,11 @@ export default defineComponent({
|
|
}).catch((err: any) => {
|
|
}).catch((err: any) => {
|
|
// 登录错误之后,刷新验证码
|
|
// 登录错误之后,刷新验证码
|
|
refreshCaptcha();
|
|
refreshCaptcha();
|
|
- }).finally(() => {
|
|
|
|
- loginLoading.value = false;
|
|
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
- errorMessage('请填写登录信息');
|
|
|
|
|
|
+ errorMessage("请填写登录信息")
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ })
|
|
|
|
|
|
};
|
|
};
|
|
const getUserInfo = () => {
|
|
const getUserInfo = () => {
|
|
@@ -195,6 +186,7 @@ export default defineComponent({
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
|
|
+
|
|
// 登录成功后的跳转
|
|
// 登录成功后的跳转
|
|
const loginSuccess = () => {
|
|
const loginSuccess = () => {
|
|
//登录成功获取用户信息,获取系统字典数据
|
|
//登录成功获取用户信息,获取系统字典数据
|
|
@@ -209,7 +201,7 @@ export default defineComponent({
|
|
if (route.query?.redirect) {
|
|
if (route.query?.redirect) {
|
|
router.push({
|
|
router.push({
|
|
path: <string>route.query?.redirect,
|
|
path: <string>route.query?.redirect,
|
|
- query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : ''
|
|
|
|
|
|
+ query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
|
|
});
|
|
});
|
|
} else {
|
|
} else {
|
|
router.push('/');
|
|
router.push('/');
|
|
@@ -218,7 +210,7 @@ export default defineComponent({
|
|
// 关闭 loading
|
|
// 关闭 loading
|
|
state.loading.signIn = true;
|
|
state.loading.signIn = true;
|
|
const signInText = t('message.signInText');
|
|
const signInText = t('message.signInText');
|
|
- ElMessage.success(`${ currentTimeInfo },${ signInText }`);
|
|
|
|
|
|
+ ElMessage.success(`${currentTimeInfo},${signInText}`);
|
|
// 添加 loading,防止第一次进入界面时出现短暂空白
|
|
// 添加 loading,防止第一次进入界面时出现短暂空白
|
|
NextLoading.start();
|
|
NextLoading.start();
|
|
};
|
|
};
|
|
@@ -228,8 +220,8 @@ export default defineComponent({
|
|
SystemConfigStore().getSystemConfigs();
|
|
SystemConfigStore().getSystemConfigs();
|
|
});
|
|
});
|
|
|
|
|
|
|
|
+
|
|
return {
|
|
return {
|
|
- loginLoading,
|
|
|
|
refreshCaptcha,
|
|
refreshCaptcha,
|
|
loginClick,
|
|
loginClick,
|
|
loginSuccess,
|
|
loginSuccess,
|
|
@@ -237,13 +229,13 @@ export default defineComponent({
|
|
state,
|
|
state,
|
|
formRef,
|
|
formRef,
|
|
rules,
|
|
rules,
|
|
- ...toRefs(state)
|
|
|
|
|
|
+ ...toRefs(state),
|
|
};
|
|
};
|
|
- }
|
|
|
|
|
|
+ },
|
|
});
|
|
});
|
|
</script>
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
.login-content-form {
|
|
.login-content-form {
|
|
margin-top: 20px;
|
|
margin-top: 20px;
|
|
|
|
|