244 lines
7.5 KiB
Vue
244 lines
7.5 KiB
Vue
<template>
|
||
<el-form
|
||
size="large"
|
||
class="login-content-form"
|
||
ref="loginFormRef"
|
||
:rules="loginRules"
|
||
:model="state.ruleForm"
|
||
label-position="top"
|
||
hide-required-asterisk
|
||
@keyup.enter="handleVerify"
|
||
>
|
||
<el-form-item class="login-animation1" prop="username" :label="$t('password.phoneAndJobCodeLabel')">
|
||
<el-input text :placeholder="$t('password.phoneAndJobCodePlaceholder')" v-model="state.ruleForm.username" clearable autocomplete="off">
|
||
<template #prefix>
|
||
<el-icon class="el-input__icon">
|
||
<ele-User />
|
||
</el-icon>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item class="login-animation2" prop="password" :label="$t('password.accountLabel2')">
|
||
<el-input
|
||
:type="state.isShowPassword ? 'text' : 'password'"
|
||
:placeholder="$t('password.accountPlaceholder2')"
|
||
v-model="state.ruleForm.password"
|
||
autocomplete="off"
|
||
>
|
||
<template #prefix>
|
||
<el-icon class="el-input__icon">
|
||
<ele-Unlock />
|
||
</el-icon>
|
||
</template>
|
||
<template #suffix>
|
||
<i
|
||
class="iconfont el-input__icon login-content-password"
|
||
:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||
@click="state.isShowPassword = !state.isShowPassword"
|
||
>
|
||
</i>
|
||
</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
<el-form-item class="login-animation2" prop="code" v-if="verifyImageEnable" :label="$t('mobile.label2')">
|
||
<el-col :span="15">
|
||
<el-input text maxlength="4" :placeholder="$t('mobile.placeholder2')" v-model="state.ruleForm.code" clearable autocomplete="off">
|
||
<template #prefix>
|
||
<el-icon class="el-input__icon">
|
||
<ele-Position />
|
||
</el-icon>
|
||
</template>
|
||
</el-input>
|
||
</el-col>
|
||
<el-col :span="1"></el-col>
|
||
<el-col :span="8">
|
||
<img :src="imgSrc" @click="getVerifyImageCode" />
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item class="login-animation4 mt-4">
|
||
<el-button type="primary" class="login-content-submit rounded-lg" v-waves @click="handleVerify" :loading="loading">
|
||
<span class="tracking-wide font-semibold">{{ $t('password.accountBtnText') }}</span>
|
||
</el-button>
|
||
</el-form-item>
|
||
|
||
<div class="relative flex items-center justify-between">
|
||
<div class="text-sm ml-auto">
|
||
<!-- <a href="#" class="ml-2 text-primary hover:text-blue-600" @click="emit('change', LoginTypeEnum.MOBILE)"> {{ $t('component.password.091035-2') }} </a> -->
|
||
<a
|
||
v-if="autoRegisterEnable && enableConfigByTenant(['base'])"
|
||
href="#"
|
||
class="ml-2 text-primary hover:text-blue-600"
|
||
@click="emit('change', LoginTypeEnum.REGISTER)"
|
||
>
|
||
{{ $t('component.password.091035-3') }}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="showBrowserMsgText" class="font12 mt30 login-animation4 login-msg text-center">{{ $t('browserMsgText') }}</div>
|
||
<div class="forget-pw">
|
||
<el-tooltip placement="right">
|
||
<template #content>
|
||
如忘记仿真数据管理平台密码可通过以下方式修改<br />
|
||
1、进入即时通<br />
|
||
2、进入工作台<br />
|
||
3、点击仿真数据管理平台按钮，进入仿真数据管理平台
|
||
</template>
|
||
<div class="password-tip">
|
||
<img src="/@/assets/question.svg" class="question-img" />
|
||
<span class="text">忘记密码</span>
|
||
</div>
|
||
</el-tooltip>
|
||
</div>
|
||
</el-form>
|
||
<Verify
|
||
@success="verifySuccess"
|
||
:mode="'pop'"
|
||
:captchaType="'blockPuzzle'"
|
||
v-if="verifyEnable"
|
||
:imgSize="{ width: '330px', height: '155px' }"
|
||
ref="verifyref"
|
||
/>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="password">
|
||
import { defineAsyncComponent, reactive, ref } from 'vue';
|
||
import { useUserInfo } from '/@/stores/userInfo';
|
||
import { generateUUID } from '/@/utils/other';
|
||
import { LoginTypeEnum } from '/@/api/login';
|
||
import { rule } from '/@/utils/validate';
|
||
import { uploadFormat } from '/@/utils/commonFunction';
|
||
import { Session } from '/@/utils/storage';
|
||
import { useLocalStorage } from '@vueuse/core';
|
||
import { enableConfigByTenant } from '/@/spdm/utils/index'; // SPDM CODE
|
||
|
||
const props = defineProps({
|
||
showBrowserMsgText: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
});
|
||
|
||
// 使用国际化插件
|
||
const { t } = useI18n();
|
||
|
||
// 动态加载滑块验证码组件
|
||
const Verify = defineAsyncComponent(() => import('/@/components/Verifition/Verify.vue'));
|
||
|
||
// 定义变量内容
|
||
const autoRegisterEnable = ref(import.meta.env.VITE_REGISTER_ENABLE === 'true');
|
||
const emit = defineEmits(['signInSuccess', 'change']); // 声明事件名称
|
||
const loginFormRef = ref(); // 定义LoginForm表单引用
|
||
const loading = ref(false); // 定义是否正在登录中
|
||
const state = reactive({
|
||
isShowPassword: false, // 是否显示密码
|
||
ruleForm: {
|
||
// 表单数据
|
||
username: '', // 用户名
|
||
password: '', // 密码
|
||
code: '', // 验证码
|
||
randomStr: 'blockPuzzle', // 验证码随机数
|
||
account: '', // 工号
|
||
},
|
||
});
|
||
const isPhoneNum = (num: string) => {
|
||
// 长度为11时做手机号格式判断
|
||
return num.length === 11;
|
||
};
|
||
const validatePhoneAndId = (rule1: any, value: any, callback: any, source: any, options: any) => {
|
||
if (!value) {
|
||
callback(new Error(t('password.phoneAndJobCodePlaceholder')));
|
||
} else {
|
||
if (isPhoneNum(value)) {
|
||
rule.validatePhone?.(rule1, value, callback, source, options);
|
||
} else {
|
||
callback();
|
||
}
|
||
}
|
||
};
|
||
|
||
const loginRules = reactive({
|
||
username: [{ required: true, trigger: 'blur', validator: validatePhoneAndId }], // 用户名校验规则
|
||
password: [{ required: true, trigger: 'blur', message: t('password.accountPlaceholder2') }], // 密码校验规则
|
||
});
|
||
|
||
const verifyref = ref<InstanceType<typeof Verify>>(null); // 定义verify组件引用
|
||
// 是否开启验证码
|
||
const verifyEnable = ref(import.meta.env.VITE_VERIFY_ENABLE === 'true');
|
||
const verifyImageEnable = ref(import.meta.env.VITE_VERIFY_IMAGE_ENABLE === 'true');
|
||
const imgSrc = ref('');
|
||
|
||
// 调用图形证码进行校验
|
||
const getVerifyImageCode = () => {
|
||
state.ruleForm.randomStr = generateUUID();
|
||
imgSrc.value = uploadFormat(`${import.meta.env.VITE_IS_MICRO == 'false' ? '/admin' : ''}/code/image?randomStr=${state.ruleForm.randomStr}`);
|
||
};
|
||
|
||
// 调用滑块验证码进行校验
|
||
const handleVerify = async () => {
|
||
const valid = await loginFormRef.value.validate().catch(() => {}); // 表单校验
|
||
if (valid && verifyEnable.value) {
|
||
verifyref.value.show(); // 显示验证组件
|
||
} else if (valid) {
|
||
onSignIn(); // 调用登录方法
|
||
}
|
||
};
|
||
|
||
// 滑块验证码校验成功调用后台登录接口
|
||
const verifySuccess = (params: any) => {
|
||
state.ruleForm.code = params.captchaVerification; // 获取验证码
|
||
onSignIn(); // 调用登录方法
|
||
};
|
||
|
||
// 账号密码登录
|
||
const onSignIn = async () => {
|
||
loading.value = true; // 正在登录中
|
||
try {
|
||
Session.clear();
|
||
// SPDM CODE 工号走账号密码登录
|
||
await useUserInfo().login(state.ruleForm); // 调用登录方法
|
||
emit('signInSuccess'); // 触发事件
|
||
// if (!isPhoneNum(state.ruleForm.username)) {
|
||
// await useUserInfo().loginTenant(state.ruleForm)
|
||
// emit('signInSuccess'); // 触发事件
|
||
// } else {
|
||
// await useUserInfo().login(state.ruleForm); // 调用登录方法
|
||
// emit('signInSuccess'); // 触发事件
|
||
// }
|
||
} finally {
|
||
loading.value = false; // 登录结束
|
||
if (verifyImageEnable.value) {
|
||
getVerifyImageCode();
|
||
}
|
||
}
|
||
};
|
||
|
||
onMounted(() => {
|
||
// console.log('clear first');
|
||
// Session.clear();
|
||
if (verifyImageEnable.value) {
|
||
getVerifyImageCode();
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.forget-pw {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
.question-img {
|
||
width: 14px;
|
||
height: 14px;
|
||
}
|
||
.password-tip {
|
||
display: flex;
|
||
align-items: center;
|
||
.text {
|
||
color: #409eff;
|
||
margin-left: 6px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style>
|