wms-vue/src/views/common/login.vue

<template>
  <div class="site-wrapper site-page--login">
    <div class="site-content__wrapper">
      <div class="site-content">
        <div class="login-main">
          <div class="login-language-wrapper">
            <el-select
              v-model="selectedLanguage"
              class="login-language-select"
              :placeholder="$t('login.selectLanguagePlaceholder')"
              @change="switchLoginLanguage">
              <el-option
                v-for="(item, index) in languageList"
                :key="'login-language-' + index"
                :label="item.languageName"
                :value="item.languageCode">
              </el-option>
            </el-select>
          </div>
          <h3 class="login-title">{{ $t('login.title') }}</h3>

          <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon>
            <el-form-item prop="userName">
              <el-input v-model="dataForm.userName" :placeholder="$t('login.accountPlaceholder')" @blur="handleUsernameBlur"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="dataForm.password" type="password" :placeholder="$t('login.passwordPlaceholder')"></el-input>
            </el-form-item>
            <el-form-item >
              <el-select v-model="selectedSite" :placeholder="$t('login.selectSitePlaceholder')" style="width: 100%;">
                <el-option
                  v-for="item in siteList"
                  :key="item.siteCode"
                  :label="item.siteName"
                  :value="item.siteCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">{{ $t('button.login') }}</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { getUUID } from '@/utils'
  import {getConfigParams} from '@/api/sysConfig.js'
  import {getUserAuthorizedSites} from '@/api/factory/accessSite.js'
  import {searchSysLanguage} from '@/api/sysLanguage.js'
  export default {
    data () {
      return {
        src: 'http://192.168.1.83/upload/ifs.png',
        dataForm: {
          userName: '',
          password: '',
          uuid: '',
          captcha: ''
        },
        siteList: [],
        selectedSite: '',
        selectedLanguage: 'cn',
        languageList: [],
        captchaPath: ''
      }
    },
    computed: {
      dataRule() {
        return {
          userName: [
            { required: true, message: this.$t('login.accountRequired'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('login.passwordRequired'), trigger: 'blur' }
          ]
        }
      },
      multiLanguage: {
        get() {
          return this.$store.state.user.multiLanguage
        },
        set(val) {
          this.$store.commit('user/updateMultiLanguage', val)
        }
      },
      authControl: {
        get() {
          return this.$store.state.user.authControl
        },
        set(val) {
          this.$store.commit('user/updateAuthControl', val)
        }
      }
    },
    created () {
      this.initLoginLanguage()
      this.getLanguageList()
       this.userName();
    },
    methods: {
      normalizeLanguageCode(languageCode) {
        const locale = (languageCode || '').toLowerCase()
        return (locale === 'en' || locale === 'en-us') ? 'en' : 'cn'
      },
      // 登录页默认中文，但保留用户上一次选择的语言
      initLoginLanguage() {
        const locale = this.normalizeLanguageCode(localStorage.getItem('locale') || 'cn')
        this.applyLoginLanguage(locale)
      },
      // 登录页多语言下拉兜底选项，避免接口异常时无法切换
      buildFallbackLanguageList() {
        return [
          { languageCode: 'cn', languageName: this.$t('login.languageOptionCn') },
          { languageCode: 'en', languageName: this.$t('login.languageOptionEn') }
        ]
      },
      // 获取多语言列表，接口异常时保留默认中英文选项
      getLanguageList() {
        this.languageList = this.buildFallbackLanguageList()
        searchSysLanguage({ languageCode: this.$i18n.locale }).then(({data}) => {
          const rows = (data && data.rows) ? data.rows : []
          if (rows.length > 0) {
            this.languageList = rows
            if (!this.languageList.find(item => this.normalizeLanguageCode(item.languageCode) === this.selectedLanguage)) {
              this.selectedLanguage = this.languageList[0].languageCode
            }
            this.selectedLanguage = this.normalizeLanguageCode(this.selectedLanguage)
          }
        }).catch(() => {
        })
      },
      // 统一处理登录页语言生效，保证请求头与页面语言一致
      applyLoginLanguage(languageCode) {
        const locale = this.normalizeLanguageCode(languageCode)
        this.selectedLanguage = locale
        this.$i18n.locale = locale
        localStorage.setItem('locale', locale)
      },
      switchLoginLanguage(languageCode) {
        this.applyLoginLanguage(languageCode)
        this.getLanguageList()
      },
      // 获取上次登陆的用户名
      userName(){
        this.dataForm.userName = localStorage.getItem('userName')
        this.handleUsernameBlur()
        this.dataForm.selectedSite = localStorage.getItem('site')
      },
      // 用户名失焦时获取工厂列表
      handleUsernameBlur() {
        if (this.dataForm.userName && this.dataForm.userName.trim()) {
          this.getUserSiteList(this.dataForm.userName);
        } else {
          this.siteList = [];
          this.selectedSite = '';
        }
      },
      // 根据用户名获取授权的工厂列表
      getUserSiteList(userName) {
        if (!userName || !userName.trim()) {
          this.siteList = [];
          this.selectedSite = '';
          return;
        }

        getUserAuthorizedSites({ userName: userName.trim() }).then(({data}) => {
          if (data && data.code === 0) {
            this.siteList = data.data || data.list || [];
            // 清空之前选择的工厂
            this.selectedSite = '';
            // 如果只有一个工厂，自动选中
            if (this.siteList.length === 1) {
              this.selectedSite = this.siteList[0].siteCode;
            }
          } else {
            this.siteList = [];
            this.selectedSite = '';
            this.$message.error(data.msg || this.$t('login.getSiteListFailed'));
          }
        }).catch(error => {
          this.siteList = [];
          this.selectedSite = '';
          console.error('获取工厂列表失败:', error);
          this.$message.error(this.$t('login.getSiteListFailed'));
        })
      },
      // 提交表单
      dataFormSubmit () {
        // 如果有工厂列表但未选择工厂，提示用户
        if (this.siteList.length > 0 && !this.selectedSite) {
          this.$message.error(this.$t('login.siteRequired'));
          return;
        }

        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/sys/login'),
              method: 'post',
              data: this.$http.adornData({
                'username': this.dataForm.userName,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'site': this.selectedSite
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                // 设置Cookie过期时间为8小时，与后端token同步 - rqrq
                this.$cookie.set('token_wms', data.token, { expires: '8h' })
                this.$router.replace({ name: 'home' })
                const loginLanguage = this.normalizeLanguageCode(this.selectedLanguage || data.language || 'cn')
                this.applyLoginLanguage(loginLanguage)
                localStorage.setItem('refresh', "0")
                localStorage.setItem('userName', this.dataForm.userName)
                localStorage.setItem('site', this.selectedSite) // 保存选择的工厂

                this.getConfigParams()
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      // 获取全局参数变量
      getConfigParams() {
        getConfigParams().then(({data}) => {
          if (data && data.code == 0) {
            localStorage.setItem('configParams', JSON.stringify(data.data))
            // this.multiLanguage = JSON.parse(localStorage.getItem('configParams')).multiLanguage
            // this.authControl = JSON.parse(localStorage.getItem('configParams')).authControl
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .site-wrapper.site-page--login {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(38, 50, 56, 0);
    overflow: hidden;
    &:before {
      position: fixed;
      top: 0;
      left: 0;
      z-index: -1;
      width: 80%;
      height: 100%;
      content: "";
      background-image: url(~@/assets/img/login_bg.jpg);
      background-size: cover;
    }
    .site-content__wrapper {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      padding: 0;
      margin: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: transparent;
    }
    .site-content {
      min-height: 100%;
      padding: 15% 500px 30px 30px;
    }
    .brand-info {
      margin: 220px 100px 0 90px;
      color: #fff;
    }
    .brand-info__text {
      margin:  0 0 22px 0;
      font-size: 48px;
      font-weight: 400;
      text-transform : uppercase;
    }
    .brand-info__intro {
      margin: 10px 0;
      font-size: 16px;
      line-height: 1.58;
      opacity: .6;
    }
    .login-main {
      position: absolute;
      top: 0;
      right: 0;
      padding: 15% 60px 180px;
      width: 350px;
      min-height: 100%;
      background-color: #fff;
      box-sizing: border-box;
    }
    .login-title {
      font-size: 30px;
      margin: 0 0 18px 0;
      text-align: center;
    }
    .login-language-wrapper {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 2;
    }
    .login-language-select {
      width: 140px;

      .el-input__inner {
        margin-top: 0 !important;
        height: 32px;
        line-height: 32px;
      }
    }
    .login-captcha {
      overflow: hidden;
      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    .login-btn-submit {
      width: 100%;

    }
    .login-main .el-input__inner{
      margin-top: 10px;
      height: 45px;
    }
    .el-button--medium {
      margin-top: 0px;
      padding: 5px 11px;
      font-size: 16px;
      border-radius: 4px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
  }



</style>