From 6448ec15bfe0b65fb822a662105bceddc23b58d8 Mon Sep 17 00:00:00 2001
From: yubo <autumnal_wind@yeah.net>
Date: 星期一, 06 四月 2026 21:34:44 +0800
Subject: [PATCH] feat(user): 新增员工档案管理视图组件
---
src/views/login/index.vue | 224 ++++++++++++++++++++++++++++++--------------------------
1 files changed, 120 insertions(+), 104 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 134c5c1..df7e7ad 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,126 +1,139 @@
<template>
<div class="login-container">
- <div class="login-info">
- <div class="title">中保亚太人力资源管理系统</div>
- <img class="zbyt-login" src="../../assets/login/zbyt-login.png" width='' />
+ <div class="login-title">
+ <img src="../../assets/login/pic02.png">
</div>
- <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="off" label-position="left">
-
- <span v-if="login.type === 'up'">
- <el-form-item prop="username">
- <el-input
- ref="username"
- v-model="loginForm.username"
- :placeholder="$t('login.username')"
- prefix-icon="el-icon-user"
- name="username"
- type="text"
- autocomplete="off"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- ref="password"
- v-model="loginForm.password"
- prefix-icon="el-icon-key"
- type="password"
- :placeholder="$t('login.password')"
- name="password"
- autocomplete="off"
- :show-password="true"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <el-form-item prop="code" class="code-input">
- <el-input
- ref="code"
- v-model="loginForm.code"
- prefix-icon="el-icon-lock"
- :placeholder="$t('login.code')"
- name="code"
- type="text"
- autocomplete="off"
- style="width: 70%"
- @keyup.enter.native="handleLogin"
- />
- </el-form-item>
- <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;" @click.native.prevent="handleLogin">
- {{ $t('login.logIn') }}
- </el-button>
- </span>
- <span v-if="login.type === 'social'">
- {{ $t('login.chooseToSignIn') }}
- <div>
- <template v-for="(l, index) in logo">
- <div :key="index" class="logo-wrapper">
- <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
- </div>
- </template>
+ <div class="login-main">
+ <div class="login-main-left">
+ <img src="../../assets/login/pic03.png">
+ <img src="../../assets/login/pic04.png">
+ </div>
+
+ <div class="login-main-right">
+ <div id="form-biao-dan">
+ <div>
+ <span>登录</span>
+ <span />
+ </div>
+
</div>
- </span>
- <span v-if="login.type === 'bind'" style="margin-top: -1rem">
- <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
- <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
- <el-form-item prop="bindUsername">
+ <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form-new" autocomplete="off" label-position="left">
+ <span v-if="login.type === 'up'">
+ <el-form-item prop="username" style="width: 26vw;">
<el-input
- ref="bindUsername"
- v-model="loginForm.bindUsername"
+ ref="username"
+ v-model="loginForm.username"
:placeholder="$t('login.username')"
prefix-icon="el-icon-user"
- name="bindUsername"
+ name="username"
type="text"
autocomplete="off"
+ @keyup.enter.native="handleLogin"
/>
</el-form-item>
- <el-form-item prop="bindPassword">
+ <el-form-item prop="password" style="width: 26vw;">
<el-input
- ref="bindPassword"
- v-model="loginForm.bindPassword"
- :placeholder="$t('login.password')"
+ ref="password"
+ v-model="loginForm.password"
prefix-icon="el-icon-key"
- name="bindPassword"
type="password"
- :show-password="true"
+ :placeholder="$t('login.password')"
+ name="password"
autocomplete="off"
+ @keyup.enter.native="handleLogin"
/>
</el-form-item>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;" @click.native.prevent="bindLogin">
- {{ $t('common.bindLogin') }}
- </el-button>
- </el-tab-pane>
- <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
- <el-form-item prop="signUsername">
+ <el-form-item prop="code" style="width: 26vw;">
<el-input
- ref="signUsername"
- v-model="loginForm.signUsername"
- :placeholder="$t('login.username')"
- prefix-icon="el-icon-user"
- name="signUsername"
+ ref="code"
+ v-model="loginForm.code"
+ prefix-icon="el-icon-lock"
+ :placeholder="$t('login.code')"
+ name="code"
type="text"
autocomplete="off"
+ style="width: 70%"
+ @keyup.enter.native="handleLogin"
/>
+ <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
</el-form-item>
- <el-form-item prop="signPassword">
- <el-input
- ref="signPassword"
- v-model="loginForm.signPassword"
- :placeholder="$t('login.password')"
- prefix-icon="el-icon-key"
- name="signPassword"
- type="password"
- :show-password="true"
- autocomplete="off"
- />
- </el-form-item>
- <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;" @click.native.prevent="signLogin">
- {{ $t('common.signLogin') }}
+ <el-button :loading="loading" type="primary" class="submit-but" @click.native.prevent="handleLogin">
+ {{ $t('login.logIn') }}
</el-button>
- </el-tab-pane>
- </el-tabs>
- </span>
- </el-form>
+ </span>
+ <span v-if="login.type === 'social'">
+ {{ $t('login.chooseToSignIn') }}
+ <div>
+ <template v-for="(l, index) in logo">
+ <div :key="index" class="logo-wrapper">
+ <img :src="resolveLogo(l.img)" alt="" :class="{ 'radius': l.radius }" @click="socialLogin(l.name)">
+ </div>
+ </template>
+ </div>
+ </span>
+ <span v-if="login.type === 'bind'" style="margin-top: -1rem">
+ <el-tabs v-model="tabActiveName" @tab-click="handleTabClick">
+ <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
+ <el-form-item prop="bindUsername">
+ <el-input
+ ref="bindUsername"
+ v-model="loginForm.bindUsername"
+ :placeholder="$t('login.username')"
+ prefix-icon="el-icon-user"
+ name="bindUsername"
+ type="text"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item prop="bindPassword">
+ <el-input
+ ref="bindPassword"
+ v-model="loginForm.bindPassword"
+ :placeholder="$t('login.password')"
+ prefix-icon="el-icon-key"
+ name="bindPassword"
+ type="password"
+ :show-password="true"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="bindLogin">
+ {{ $t('common.bindLogin') }}
+ </el-button>
+ </el-tab-pane>
+ <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
+ <el-form-item prop="signUsername">
+ <el-input
+ ref="signUsername"
+ v-model="loginForm.signUsername"
+ :placeholder="$t('login.username')"
+ prefix-icon="el-icon-user"
+ name="signUsername"
+ type="text"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-form-item prop="signPassword">
+ <el-input
+ ref="signPassword"
+ v-model="loginForm.signPassword"
+ :placeholder="$t('login.password')"
+ prefix-icon="el-icon-key"
+ name="signPassword"
+ type="password"
+ :show-password="true"
+ autocomplete="off"
+ />
+ </el-form-item>
+ <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:14px;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @click.native.prevent="signLogin">
+ {{ $t('common.signLogin') }}
+ </el-button>
+ </el-tab-pane>
+ </el-tabs>
+ </span>
+ </el-form>
+ </div>
+ </div>
<span class="login-footer">
© 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
</span>
@@ -338,23 +351,26 @@
const expireTime = current.setTime(current.getTime() + 1000 * data.expires_in)
this.$store.commit('account/setExpireTime', expireTime)
},
- getUserDetailInfo() {
- this.$get('auth/user').then((r) => {
+ async getUserDetailInfo() {
+ try {
+ const r = await this.$get('auth/user')
this.$store.commit('account/setUser', r.data.principal)
+ // 预加载字典数据到缓存
+ await this.$store.dispatch('dict/LoadAllDicts')
this.$message({
message: this.$t('tips.loginSuccess'),
type: 'success'
})
this.loading = false
this.$router.push('/')
- }).catch((error) => {
+ } catch (error) {
this.$message({
message: this.$t('tips.loginFail'),
type: 'error'
})
console.error(error)
this.loading = false
- })
+ }
},
loginSuccessCallback() {
this.$get('system/user/success').catch((e) => { console.log(e) })
--
Gitblit v1.8.0