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

yubo

2026-04-06 6448ec15bfe0b65fb822a662105bceddc23b58d8

 src/views/login/index.vue

@@ -1,132 +1,139 @@
<template>
  <div class="login-container">
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="20"><img src="../../assets/login/pic02.png" width="500px" height="75px"></el-col>
    </el-row>
    <el-row>
      <el-col :span="4">&nbsp;</el-col>
      <el-col :span="9" style="background-color: #fff;height: 515px;"><img src="../../assets/login/pic03.png"></el-col>
      <el-col :span="0.5" style="background-color: #fff;height: 515px;"><img src="../../assets/login/pic04.png"></el-col>
      <el-col :span="6.5" style="background-color: #fff;height: 515px;"> <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" autocomplete="off" label-position="left">
        <h2 id="form-biao-dan"><span style="position: relative;">登陆</span></h2>
        <span v-if="login.type === 'up'">
          <el-form-item prop="username" class="form-input">
            <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" class="form-input">
            <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" class="submit-but" @click.native.prevent="handleLogin">
            {{ $t('login.logIn') }}
          </el-button>
        </span>
        <span v-if="login.type === 'social'">
          {{ $t('login.chooseToSignIn') }}
    <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>
            <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>
            <span>登录</span>
            <span />
          </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></el-col>
      <el-col :span="4">&nbsp;</el-col>
    </el-row>

        </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>
    <span class="login-footer">
      © 2021 <a target="_blank" href="">版权所有：深圳市太阳帆信息技术开发有限公司</a>客服电话： 0755-26491738
    </span>
@@ -344,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) })