noob-components/packages/manage/common/login.vue

<template>
    <div class="login">
        <el-form label-position="right" class="login-form" :model="param" ref="loginForm" :rules="rules">
            <div class="logo-item" v-if="logo">
                <el-image class="logo" :src="logo" fit="fit" />
            </div>
            <el-form-item>
                <div  class="lte-title"> {{ t('title') }} </div >
            </el-form-item>
            <el-form-item prop="userId">
                <NoobInput v-model="param.userId" :placeholder="t('pwd.userId')" :full="true"></NoobInput>
            </el-form-item>
            <el-form-item prop="password">
                <NoobInput v-model="param.password" type="password" :placeholder="t('pwd.pwd')" :full="true">
                </NoobInput>
            </el-form-item>
            <el-form-item>
                <NoobButton @click="login">{{ t('pwd.login') }}</NoobButton>
            </el-form-item>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onBeforeMount, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { FormInstance } from "element-plus";
import { Api, NoobInput, NoobButton, Element } from "noob-mengyxu";
import md5 from "js-md5";
import { useI18n } from "vue3-i18n";

const { t } = useI18n();
const { state, commit, dispatch } = useStore();
const { SimpleRequired } = Element;

const emit = defineEmits(["login"]);
const param = ref<any>({});
const loginForm = ref<FormInstance>();

const rules = {
    userId: [new SimpleRequired('pwd.userId')],
    password: [new SimpleRequired('pwd.pwd')]
}

const props = defineProps({
    logo: {
        type: String,
        default: null,
    },
});

const router = useRouter();

onBeforeMount(() => {
    state.size.headHeight = '0px';
    state.size.asideWidth = '0px';
    commit("initSize");
});

const loginConfirm = user => {
    const param = JSON.parse(JSON.stringify(user));
    param.password = md5(param.password);
    Api.pub.login(param).then(rsp => {
        if (rsp) {
            state.size.headHeight = state.size.head + 'px';
            state.size.asideWidth = state.size.aside + 'px';
            commit("initSize");
            dispatch("getMenus");
            router.back();
        }
    })
};

const login = () => {
    if (!loginForm.value) return;
    loginForm.value?.validate((valid, fields) => {
        if (valid) {
            loginConfirm(param.value);
            loginForm.value?.clearValidate();
        }
    });
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form {
    width: v-bind('state.size.loginWidth');
    height: v-bind('state.size.loginHeight');
    align-self: center;
}

.logo-item {
    text-align: center;
    align-items: center;
}

.logo {
    width: 50px;
    height: 50px;

    img {
        display: inline !important;
    }
}

.lte-title {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    width: 100%;
    color: rgb(49, 89, 143);
}

.el-button {
    width: 100%;
}
</style>