删除无用页面

Admin

2022-09-21 999cab6fb3fc6d2a288d365da991351c5a396bf0

 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-xianshimima' : 'icon-yincangmima'" @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-divider border-style="dashed">身份验证</el-divider>
            <el-form-item label="姓名" prop="realName">
                <el-input v-model="identity.realName"/>
            </el-form-item>
            <el-form-item label="身份证号" prop="identify">
                <el-input v-model="identity.identify"/>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="identity.phone"/>
            </el-form-item>
            <el-divider border-style="dashed">重设密码</el-divider>
            <el-form-item label="密码" prop="password">
                <el-input v-model="identity.password" :type="showPass ? 'text': 'password'" autocomplete="off">
                    <template #suffix>
                        <i class="iconfont el-input__icon login-content-password" :class="showPass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showPass = !showPass"> </i>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePassword">
                <el-input
                        v-model="identity.rePassword"
                        :type="showRePass ? 'text': 'password'"
                        autocomplete="off"
                >
                    <template #suffix>
                        <i class="iconfont el-input__icon login-content-password" :class="showRePass ? 'icon-xianshimima' : 'icon-yincangmima'" @click="showRePass = !showRePass"> </i>
                    </template>
                </el-input>
            </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>
</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,89 @@
        const router = useRouter();
        const state = reactive({
            isShowPassword: false,
            showPass: false,
            showRePass: false,
            saveCode: false,
            ruleForm: {
                username: '',
                password: ''
            },
            loading: {
                signIn: false
            }
            },
            identity:{
                realName: '',
                identify: '',
                phone: '',
                password: '',
                rePassword: ''
            },
            identifyDialog: false
        });
        const identifyRef = 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 validatePass = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('该内容不能为空'))
            } else {
                if (state.identity.rePassword !== '') {
                    if (!identifyRef.value) return
                    identifyRef.value.validateField('rePassword', () => null)
                }
                callback()
            }
        }
        const validatePass2 = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('该内容不能为空'))
            } else if (value !== state.identity.password) {
                callback(new Error("两次输入的密码不一致!"))
            } else {
                callback()
            }
        }
        const identityRules = reactive({
            realName: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
            identify: [{ required: true, validator: checkCode, trigger: 'blur'}],
            phone: [{ required: true, validator: checkPhone, trigger: 'blur' }],
            password: [{ required: true, validator: validatePass, trigger: 'blur' }],
            rePassword: [{ required: true, validator: validatePass2, trigger: 'blur' }]
        });

        // 时间获取
        const currentTime = computed(() => {
            return formatAxis(new Date());
@@ -96,9 +190,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 +233,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 +250,55 @@
            // 添加 loading，防止第一次进入界面时出现短暂空白
            // NextLoading.start();
        };

        // 修改密码
        const identify =()=>{
            state.identifyDialog = true
        }

        // 提交验证
        const confirmIdentity = (formEl: FormInstance | undefined) => {
            if (!formEl) return
            formEl.validate(async(valid) => {
                if (valid) {
                    const res = await useLoginApi().changeCode(state.identity);
                    if(res.data.code == '200'){
                        ElMessage({
                            type: 'success',
                            message: '修改成功，请使用新密码登录'
                        });
                    }else{
                        ElMessage({
                            type: 'warning',
                            message:  res.data.msg
                        });
                    }
                    state.identifyDialog = false
                } else {
                    console.log('error submit!')
                    return false
                }
            })
        }
        const clearIdentity = ()=>{
            state.identity = {
                realName: '',
                identify: '',
                phone: '',
                password: '',
                rePassword: ''
            }
        }

        return {
            identifyRef,
            identityRules,
            clearIdentity,
            onSignIn,
            identify,
            confirmIdentity,
            validatePass,
            validatePass2,
            ...toRefs(state)
        };
    }