Common Components

Shared management components (login, etc.).

Overview

Common components are shared UI elements used across the management module, primarily login components and other reusable pieces.

Components

Component	File	Purpose
Login	`common/login.vue`	User login form
Login2	`common/login2.vue`	Alternative login layout

Login Component (`login.vue`)

User authentication form with md5 password hashing.

Props

Prop	Type	Default	Description
`logo`	String	null	Logo image URL

Events

Event	Payload	Description
`login`	-	Emitted after successful login

Key Features

Form validation with Element Plus FormInstance
Enter key support for quick submit
MD5 password hashing before API call
Vuex state manipulation for layout (hides header/aside on login)
Dynamic routing (back or home based on history)

Implementation Pattern

<template>
    <el-form :model="param" ref="loginForm" :rules="rules">
        <NoobInput v-model="param.userId" :placeholder="t('pwd.userId')" />
        <NoobInput v-model="param.password" type="password" :placeholder="t('pwd.pwd')" />
        <NoobButton @click="login">{{ t('pwd.login') }}</NoobButton>
    </el-form>
</template>

<script setup>
const emit = defineEmits(["login"]);
const loginForm = ref<FormInstance>();

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

Vuex Layout Control

On mount, login page resets layout:

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

import md5 from "js-md5";

const loginConfirm = user => {
    const param = JSON.parse(JSON.stringify(user));
    param.password = md5(param.password);
    Api.pub.login(param).then(rsp => {
        if (rsp) {
            if (window.history.length <= 1) {
                router.push('/');
            } else {
                router.back();
            }
            dispatch('login');
        }
    })
};

Enter Key Support

const enter_up = (e) => {
    if (e.keyCode == 13 || e.keyCode == 100) {
        login();
    }
};

onMounted(() => {
    document.addEventListener('keyup', enter_up);
});

onBeforeUnmount(() => {
    document.removeEventListener('keyup', enter_up);
});

Validation Rules

Uses Element validators from noob-mengyxu:

const { SimpleRequired } = Element;

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

Login2 Component (`login2.vue`)

Alternative login layout - check source for specific variations.

Common Exports (`common/index.ts`)

import Login from './login.vue';
import Login2 from './login2.vue';

export default { Login, Login2 };

Anti-Patterns

Do not skip clearValidate() - Always clear form validation on submit
Do not use window.history.length - This is a known anti-pattern in the codebase
Do not forget onBeforeUnmount - Clean up event listeners to prevent memory leaks
Do not send plain passwords - Always hash with md5 first

3.4 KiB Raw Blame History