<template>
|
<div class="login-page">
|
<div class="login-panel">
|
<div class="login-brand">
|
<repair-logo></repair-logo>
|
<div>
|
<h1>临抢修管理系统</h1>
|
</div>
|
</div>
|
<el-form ref="form" :model="form" :rules="rules" label-position="top" @keyup.enter.native="submit">
|
<el-form-item label="用户名" prop="username">
|
<el-input v-model="form.username" prefix-icon="el-icon-user" autocomplete="off"></el-input>
|
</el-form-item>
|
<el-form-item label="密码" prop="password">
|
<el-input v-model="form.password" type="password" show-password prefix-icon="el-icon-lock"></el-input>
|
</el-form-item>
|
<el-button type="primary" class="login-btn" :loading="loading" @click="submit">登录系统</el-button>
|
</el-form>
|
<div class="login-tip">第一版暂不启用角色控制，使用 admin / admin123 体验全部功能。</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import api from '@/api'
|
import RepairLogo from '@/components/RepairLogo.vue'
|
|
export default {
|
name: 'Login',
|
components: { RepairLogo },
|
data() {
|
return {
|
loading: false,
|
form: { username: 'admin', password: 'admin123' },
|
rules: {
|
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
|
}
|
}
|
},
|
methods: {
|
submit() {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
this.loading = true
|
api.post('/auth/login', this.form).then(res => {
|
sessionStorage.setItem('token', res.data.token)
|
sessionStorage.setItem('username', res.data.username)
|
sessionStorage.setItem('realName', res.data.realName)
|
sessionStorage.setItem('deptName', res.data.deptName || '')
|
this.$router.push('/dashboard')
|
}).finally(() => { this.loading = false })
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.login-page {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
padding: 24px;
|
background: #e9eff5;
|
}
|
.login-panel {
|
width: 420px;
|
padding: 30px 34px 26px;
|
border: 1px solid #d5e0ea;
|
border-radius: 6px;
|
background: #fff;
|
box-shadow: 0 12px 35px rgba(35, 63, 88, .13);
|
}
|
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
|
.login-brand .repair-logo { color: #1769aa; font-size: 44px; }
|
.login-brand h1 { margin: 0; color: #1d3b57; font-size: 22px; line-height: 30px; }
|
.login-btn { width: 100%; margin-top: 4px; }
|
.login-tip { margin-top: 18px; color: #8a98a8; font-size: 12px; line-height: 18px; }
|
</style>
|
