feat(user): 新增员工档案管理视图组件

yubo

2026-04-06 6448ec15bfe0b65fb822a662105bceddc23b58d8

 src/views/login/index.vue

@@ -1,127 +1,139 @@
<template>
  <div class="login-container">
    <div class="login-info">
      <div class="title">中保亚太人力资源管理系统</div>
      <div class="login-img">
        <img class="zbyt-login" src="../../assets/login/zbyt-login.png">
    <div class="login-title">
      <img src="../../assets/login/pic02.png">
    </div>
    <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>
        <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="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" style="width: 26vw;">
              <el-input
                ref="password"
                v-model="loginForm.password"
                prefix-icon="el-icon-key"
                type="password"
                :placeholder="$t('login.password')"
                name="password"
                autocomplete="off"
                @keyup.enter.native="handleLogin"
              />
            </el-form-item>
            <el-form-item prop="code" style="width: 26vw;">
              <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"
              />
              <img :src="imageCode" alt="codeImage" class="code-image" @click="getCodeImage">
            </el-form-item>
            <el-button :loading="loading" type="primary" class="submit-but" @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>
          </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>
    <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;background-color: rgba(163, 44, 48, 1);border-color: rgba(163, 44, 48, 1);border-radius: 20px;margin-top: 10%;" @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>
      </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>
    <span class="login-footer">
      © 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
    </span>
@@ -339,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) })