From 23f1bf22c42a904c05cee63e10c9fd8b60dfe8f5 Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 20 九月 2022 14:54:56 +0800
Subject: [PATCH] Default Changelist
---
src/views/loginPage/component/accountLogin.vue | 260 ++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 214 insertions(+), 46 deletions(-)
diff --git a/src/views/loginPage/component/accountLogin.vue b/src/views/loginPage/component/accountLogin.vue
index 9abfc1b..7455f9e 100644
--- a/src/views/loginPage/component/accountLogin.vue
+++ b/src/views/loginPage/component/accountLogin.vue
@@ -1,48 +1,25 @@
<template>
<el-form size="large" class="login-content-form">
<el-form-item class="login-animation1">
- <el-input
- type="text"
- :placeholder="$t('message.account.accountPlaceholder1')"
- v-model="ruleForm.username"
- clearable
- autocomplete="off"
- size="large"
- >
+ <el-input type="text" :placeholder="$t('message.account.accountPlaceholder1')" v-model="ruleForm.username" clearable autocomplete="off" size="large">
<template #prefix>
- <el-icon class="el-input__icon" style="margin-right: 20px"
- ><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px"
- /></el-icon>
+ <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_user.png" style="width: 24px; height: 24px" /></el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation2">
- <el-input
- :type="isShowPassword ? 'text' : 'password'"
- :placeholder="$t('message.account.accountPlaceholder2')"
- v-model="ruleForm.password"
- autocomplete="off"
- size="large"
- @keyup.enter.native="onSignIn"
- >
+ <el-input :type="isShowPassword ? 'text' : 'password'" :placeholder="$t('message.account.accountPlaceholder2')" v-model="ruleForm.password" autocomplete="off" size="large" @keyup.enter.native="onSignIn">
<template #prefix>
- <el-icon class="el-input__icon" style="margin-right: 20px"
- ><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px"
- /></el-icon>
+ <el-icon class="el-input__icon" style="margin-right: 20px"><img src="../../../assets/loginPage/login_icon_password.png" style="width: 24px; height: 24px" /></el-icon>
</template>
<template #suffix>
- <i
- class="iconfont el-input__icon login-content-password"
- :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
- @click="isShowPassword = !isShowPassword"
- >
- </i>
+ <i class="iconfont el-input__icon login-content-password" :class="isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'" @click="isShowPassword = !isShowPassword"> </i>
</template>
</el-input>
</el-form-item>
<el-form-item class="login-animation4 codeDeal">
<el-checkbox v-model="saveCode" label="记住密码" size="large" />
- <span class="forgetCode">忘记密码？</span>
+ <span class="forgetCode" @click="identify">忘记密码？</span>
</el-form-item>
<el-form-item class="login-animation4">
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
@@ -50,10 +27,49 @@
</el-button>
</el-form-item>
</el-form>
+ <el-dialog v-model="identifyDialog" title="重置密码须进行身份校验(仅供测试)" width="30%" center @close="clearIdentity">
+ <el-form :model="identity" label-width="80px" ref="identifyRef" :rules="identityRules">
+ <el-form-item label="姓名" prop="userName">
+ <el-input v-model="identity.userName"/>
+ </el-form-item>
+ <el-form-item label="身份证号" prop="ID">
+ <el-input v-model="identity.ID"/>
+ </el-form-item>
+ <el-form-item label="手机号" prop="phone">
+ <el-input v-model="identity.phone"/>
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="warning" @click="identifyDialog = false" size="default">取消</el-button>
+ <el-button type="primary" @click="confirmIdentity(identifyRef)" size="default">确认</el-button>
+ </span>
+ </template>
+ </el-dialog>
+ <el-dialog v-model="changeDialog" title="修改密码" width="30%" center @close="clearCode">
+ <el-form :model="codeForm" label-width="80px" ref="codeRef" :rules="codeRules">
+ <el-form-item label="密码" prop="pass">
+ <el-input v-model="codeForm.pass" type="password" autocomplete="off" />
+ </el-form-item>
+ <el-form-item label="确认密码" prop="checkPass">
+ <el-input
+ v-model="codeForm.checkPass"
+ type="password"
+ autocomplete="off"
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <span class="dialog-footer">
+ <el-button type="warning" @click="changeDialog = false" size="default">取消</el-button>
+ <el-button type="primary" @click="confirmChange(codeRef)" size="default">确认修改</el-button>
+ </span>
+ </template>
+ </el-dialog>
</template>
<script lang="ts">
-import { toRefs, reactive, defineComponent, computed } from 'vue';
+import {toRefs, reactive, defineComponent, computed, ref, onMounted} from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
@@ -67,7 +83,10 @@
import { NextLoading } from '/@/utils/loading';
import { useLoginApi } from '/@/api/login';
import { useUserInfo } from '/@/stores/userInfo';
-
+import type { FormInstance, FormRules } from 'element-plus'
+import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
+import {verifyPhone,verifyIdCard} from "/@/utils/toolsValidate"
+import { Base64 } from 'js-base64'
export default defineComponent({
name: 'accountLogin',
setup() {
@@ -77,14 +96,68 @@
const router = useRouter();
const state = reactive({
isShowPassword: false,
+ saveCode: false,
ruleForm: {
username: '',
password: ''
},
loading: {
signIn: false
- }
+ },
+ identity:{
+ name: '',
+ ID: '',
+ phone: ''
+ },
+ codeForm:{
+ pass: '',
+ checkPass: ''
+ },
+ identifyDialog: false,
+ changeDialog: false
});
+ const identifyRef = ref<FormInstance>()
+ const codeRef = ref<FormInstance>()
+
+ // 页面载入时执行方法
+ onMounted(() => {
+ hasUserCodeOrPassword()
+ // getAllDepartment();
+ });
+
+ const hasUserCodeOrPassword =()=> {
+ if (localStorage.getItem('userCode') && localStorage.getItem('userPassword')) {
+ state.ruleForm.username = localStorage.getItem('userCode')
+ state.ruleForm.password = Base64.decode(localStorage.getItem('userPassword'))//解密
+ state.saveCode = true
+ }
+ }
+ const checkCode = (rule: any, value: any, callback: any) => {
+ if (value == '') {
+ return callback(new Error('该内容不能为空'))
+ }
+ setTimeout(() => {
+ if (!verifyIdCard(value)) {
+ callback(new Error('身份证格式不正确'))
+ }else callback();
+ }, 400)
+ }
+ const checkPhone = (rule: any, value: any, callback: any) => {
+ if (value == '') {
+ return callback(new Error('该内容不能为空'))
+ }
+ setTimeout(() => {
+ if (!verifyPhone(value)) {
+ callback(new Error('手机号格式不正确'))
+ }else callback();
+ }, 400)
+ }
+ const identityRules = reactive({
+ userName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
+ ID: [{ required: true, validator: checkCode, trigger: 'blur'}],
+ phone: [{ required: true, validator: checkPhone, trigger: 'blur' }]
+ });
+
// 时间获取
const currentTime = computed(() => {
return formatAxis(new Date());
@@ -96,9 +169,19 @@
let res = await useLoginApi().signIn(state.ruleForm);
if (res.data.code === '200') {
await userInfo.setUserInfos(res.data.data);
- Session.set('token', res.data.data.accessToken);
- Session.set('projectId', '');
- Session.set('uid', res.data.data.uid);
+ Cookies.set('token', res.data.data.accessToken);
+ Cookies.set('projectId', '');
+ Cookies.set('uid', res.data.data.uid);
+ // Session.set('token', res.data.data.accessToken);
+ // Session.set('projectId', '');
+ // Session.set('uid', res.data.data.uid);
+ if (state.saveCode) {
+ localStorage.setItem('userCode', state.ruleForm.username)
+ localStorage.setItem('userPassword', Base64.encode(state.ruleForm.password),)
+ } else {
+ localStorage.removeItem('userCode')
+ localStorage.removeItem('userPassword')
+ }
await signInSuccess();
} else {
state.loading.signIn = false;
@@ -129,15 +212,15 @@
let currentTimeInfo = currentTime.value;
// 登录成功，跳到转首页
// 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
- if (route.query?.redirect) {
- router.push('/homeMenu');
- // router.push({
- // path: <string>route.query?.redirect,
- // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
- // });
- } else {
- router.push('/loginPage');
- }
+ // if (route.query?.redirect) {
+ router.push('/newMenu');
+ // router.push({
+ // path: <string>route.query?.redirect,
+ // query: Object.keys(<string>route.query?.params).length > 0 ? JSON.parse(<string>route.query?.params) : '',
+ // });
+ // } else {
+ // router.push('/loginPage');
+ // }
state.loading.signIn = true;
const signInText = t('message.signInText');
ElMessage.success(`${currentTimeInfo}，${signInText}`);
@@ -146,8 +229,94 @@
// 添加 loading，防止第一次进入界面时出现短暂空白
// NextLoading.start();
};
+
+ // 修改密码
+ const identify =()=>{
+ state.identifyDialog = true
+ }
+
+ // 提交验证
+ const confirmIdentity = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.validate((valid) => {
+ if (valid) {
+ state.identifyDialog = false
+ state.changeDialog = true
+ } else {
+ console.log('error submit!')
+ return false
+ }
+ })
+ }
+ const clearIdentity = ()=>{
+ state.identity = {
+ name: '',
+ ID: '',
+ phone: ''
+ }
+ }
+ // 修改密码
+ const validatePass = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('请输入密码'))
+ } else {
+ if (state.codeForm.checkPass !== '') {
+ if (!codeRef.value) return
+ codeRef.value.validateField('checkPass', () => null)
+ }
+ callback()
+ }
+ }
+ const validatePass2 = (rule: any, value: any, callback: any) => {
+ if (value === '') {
+ callback(new Error('请输入密码'))
+ } else if (value !== state.codeForm.pass) {
+ callback(new Error("两次输入的密码不一致!"))
+ } else {
+ callback()
+ }
+ }
+
+ const codeRules = reactive({
+ pass: [{ required: true, validator: validatePass, trigger: 'blur' }],
+ checkPass: [{ required: true, validator: validatePass2, trigger: 'blur' }]
+ })
+
+ const confirmChange = (formEl: FormInstance | undefined) => {
+ if (!formEl) return
+ formEl.validate((valid) => {
+ if (valid) {
+ ElMessage({
+ type: 'success',
+ message: '修改成功，请使用新密码登录'
+ });
+ state.changeDialog = false
+ router.push('/login');
+ } else {
+ console.log('error submit!')
+ return false
+ }
+ })
+ }
+ const clearCode=()=>{
+ state.codeForm = {
+ pass: '',
+ checkPass: ''
+ }
+ }
return {
+ identifyRef,
+ codeRef,
+ identityRules,
+ codeRules,
+ clearIdentity,
onSignIn,
+ identify,
+ confirmIdentity,
+ confirmChange,
+ clearCode,
+ validatePass,
+ validatePass2,
...toRefs(state)
};
}
@@ -157,7 +326,7 @@
<style scoped lang="scss">
.login-content-form {
margin-top: 40px;
- width: 420px;
+ width: 100%;
.el-input::v-deep .el-input__wrapper {
height: 56px;
@@ -189,7 +358,6 @@
.login-content-password {
width: 100%;
display: inline-block;
- width: 20px;
cursor: pointer;
&:hover {
color: #909399;
--
Gitblit v1.9.2