appFormLowcode/src/views/login/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-10-23 08:52:35
@ 备注: 登录页面
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'
import { userStror } from "@/utils/pinia/stores/modules/userOrders";
import { loginStruct } from '@/api/login/type'
import { getTimeUnix } from '@/api/common/index'
import { getVerifyCode } from '@/api/login/index'
const router = useRouter()
const route = useRoute()
const userPinia = userStror();
const loginTitle = import.meta.env.VITE_APP_TITLE
const loginInfo = reactive<loginStruct>({
    username: "",
    password: "",
    captchaId: "",
    captcha:"",
    verifyCodeKey:"",
    time: getTimeUnix()
})
const singButLoading = ref(false)
//验证码图片
const codePic = ref<string>("")
const getSignCode = () => {
    getVerifyCode()
        .then(({data}) => {
            // console.log("验证码",data);
            loginInfo.captchaId = data.captchaid
            loginInfo.verifyCodeKey = data.captchaid
            codePic.value = data.picPath
        });
        
}
onBeforeMount(() => {
    getSignCode()
})
const loginForm = ref(ElForm);  //表单实例化

/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:25:15
@ 功能: 重置表单
*/
const resetForm = () => {
    loginForm.value.resetFields();
    loginForm.value.clearValidate();

    loginInfo.username = ""
    loginInfo.password = ""
    loginInfo.captchaId = ""
    loginInfo.captcha = ""
    loginInfo.verifyCodeKey = ""
    loginInfo.time = ""
    getSignCode()
}
/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:28:09
@ 功能: 表格验证规则
*/
const rules = reactive({
    username: [{ required: true, message: "请输入工号！", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码！", trigger: "blur" }],
    captcha: [{ required: true, message: "请输入验证码！", trigger: "blur" }],
});
/**
@ 作者: 秦东
@ 时间: 2024-10-24 16:30:18
@ 功能: 登录系统
*/
const submitLoginForm = () => {
    singButLoading.value = true
    loginForm.value.validate((valid: any) => {
        if (valid) {
            userPinia.login(loginInfo)
                .then(()=>{
                    const query: LocationQuery = route.query;

                    const redirect = (query.redirect as LocationQueryValue) ?? "/";

                    const otherQueryParams = Object.keys(query).reduce(
                        (acc: any, cur: string) => {
                            if (cur !== "redirect") {
                            acc[cur] = query[cur];
                            }
                            return acc;
                        },
                        {}
                    );
                    console.log("登陆输出：",redirect,otherQueryParams);
                    nextTick(() =>{
                        router.push({ path: redirect, query: otherQueryParams });
                    })
                })
                .catch(() => {
                    // 验证失败，重新生成验证码
                    getSignCode();
                })
                .finally(()=>{
                    singButLoading.value = false
                });
            
        }else{
            singButLoading.value = false
        }
    });
}
</script>
<template>
    <div class="appBodyBeiJing appBody contentCenter">
        <el-card style="max-width: 90%; background-color: rgba(255,255,255,0.6); border:  rgba(255,255,255,0.6);">
            <template #header>
                <div class="card-header">
                    <el-text class="loginTitle">{{ loginTitle }}</el-text>
                </div>
            </template>
            <el-form
                ref="loginForm"
                :model="loginInfo"
                :rules="rules"
                :label-width = "80"
            >
                <el-form-item label="工号：" prop="username">
                    <el-input v-model="loginInfo.username" clearable />
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-input v-model="loginInfo.password" type="password" autocomplete="off" clearable  />
                </el-form-item>
                <el-form-item label="验证码：" prop="captcha">
                    <el-row>
                        <el-col :span="14">
                            <el-input v-model="loginInfo.captcha" clearable />
                        </el-col>
                        <el-col :span="10">
                            <el-image style="width: 100%; height: 35px" :src="codePic" fit="cover" @click="getSignCode" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item>
                    <el-button v-loading="singButLoading" type="primary" @click="submitLoginForm()">登录</el-button>
                    <el-button @click="resetForm()">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<style  lang='scss' scoped>
.loginTitle{
    display: block;
    font-size: 20pt;
    // margin-bottom: 15px;
    text-align: center;
}
</style>