icore-pass/src/views/index/components/login.vue

<template>
  <div class="icore-lg">
    <img
      style="width: 100%; height: 100%; position: absolute"
      src="../../../assets/img/icore-shown-all.png"
    />
    <section v-if="isJump === true">
      <div class="jumpText">正在为您跳转,请稍后...</div>
    </section>
    <section v-else>
      <div>
        <div class="frame-area">
          <!-- <div class="desc-area"></div> -->
          <div style="position: absolute; left: 30px; width: 346px; top: 105px">
            <el-form
              class="lg-form"
              :inline="false"
              ref="loginForm"
              :model="loginForm"
              :rules="loginFormRules"
            >
              <el-form-item style="margin-bottom: 20px" prop="loginName">
                <el-input v-model="loginForm.loginName" placeholder="用户名">
                  <i class="oa-login-ibg oa-login-ibg1" slot="prefix"></i>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 20px" prop="password">
                <el-input
                  v-model="loginForm.password"
                  :type="pwdShow ? 'text' : 'password'"
                  placeholder="密码"
                  @keyup.enter.native="loginSubmit('loginForm')"
                >
                  <i class="oa-login-ibg oa-login-ibg2" slot="prefix"></i>
                  <i
                    class="icore-icons icore-icons-see oa-login-ibg4"
                    :class="{ 'icore-icons-see-reverse': !pwdShow }"
                    @click="showPwd"
                    slot="suffix"
                  ></i>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-bottom: 20px">
                <el-button
                  type="primary"
                  class="width100"
                  @click="loginSubmit('loginForm')"
                  :loading="loginBtnLoading"
                  >登&nbsp;录</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import { cookieUserId, cookieTime, cookieUserName } from '@/config/config.js'
import { setCookie, getCookie, formatDate } from '@/utils/util.js'
import store from '@/store/index.js'
import JsSHA from 'jssha'
const shaObj = new JsSHA('SHA-1', 'TEXT', { encoding: 'UTF8' })
export default {
  data() {
    return {
      store,
      loginBtnLoading: false,
      pwdShow: false,
      shaObj,
      loginForm: {
        loginName: '',
        password: ''
      },
      loginFormRules: {
        loginName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      isJump: false
    }
  },
  beforeCreate() {
    let token = getCookie('accessToken')
    if (token) {
      this.$router.push({ path: 'default' })
    } else {
      window.top.localStorage.setItem('lockpwd', '')
    }
    window.top.localStorage.setItem('allPrivilege', '')
    window.top.localStorage.setItem('ownPrivilege', '')
  },
  mounted() {
    // 从cookie中获取上一次的登录用户名，赋值给用户名
    this.loginForm.loginName = getCookie('loginName')
      ? getCookie('loginName')
      : ''
  },
  methods: {
    loginSubmit(formName) {
      this.loginForm.loginName = this.loginForm.loginName.trim()
      this.$refs[formName].validate(valid => {
        if (valid) {
          // 登陆中 登录按钮不可用
          this.loginBtnLoading = true
          let form = JSON.parse(JSON.stringify(this.loginForm))
          form.app_code = 'web' //终端code暂时写死
          //传递密码明文进去
          this.shaObj.update(form.password)
          console.log(form)
          //获得密码的哈希值
          form.password = this.shaObj.getHash('HEX')
          console.log(form.password)
          this.store
            .dispatch('index/login/login', form)
            .then(res => {
              console.log(res)
              if (res.code === '0') {
                console.log('login resonse', res.data)
                //  登录成功
                //  设置缓存信息
                setCookie('accessToken', res.data.accessToken, cookieTime, '/')
                setCookie(
                  'refreshToken',
                  res.data.refreshToken,
                  cookieTime,
                  '/'
                )
                setCookie('orgCode', res.data.user.orgCode)
                setCookie('userId', res.data.user.userId)
                setCookie('appId', res.data.appId)
                setCookie('loginId', res.data.user.userId) // 为配合bms取值添加
                setCookie('loginName', this.loginForm.loginName)
                let info = JSON.parse(JSON.stringify(res.data.user))
                for (let k in info) {
                  if (
                    k === 'sysGroup' ||
                    k === 'sysCompanys' ||
                    k === 'sysRoles' ||
                    k === 'photo' ||
                    k === 'sysOrgs'
                  ) {
                    delete info[k]
                  }
                }
                console.log('info', JSON.stringify(info))
                setCookie('userInfo', JSON.stringify(info))
                // 判断用户集团公司情况跳转
                let userInfo = res.data.user
                let sRedirect = this.$route.query.redirect
                // 超级管理员
                if (userInfo.userCode === 'admin') {
                  if (userInfo.sysCompanys) {
                    // 公司列表过多时cookie存放失败，存至localStorage
                    // setCookie('companys', JSON.stringify(userInfo.sysCompanys));
                    window.top.localStorage.setItem(
                      'sysGroup',
                      JSON.stringify(userInfo.sysGroup)
                    )
                    window.top.localStorage.setItem(
                      'companys',
                      JSON.stringify(userInfo.sysCompanys)
                    )
                    if (userInfo.hasOwnProperty('sysCompanys')) {
                      window.top.localStorage.setItem(
                        'companyId',
                        userInfo.sysCompanys[0].id
                      )
                    }
                  }
                  if (sRedirect) {
                    this.$router.push({ name: sRedirect })
                  } else {
                    this.$router.push({ name: 'default' }).catch(() => {})
                  }
                  // 普通用户
                } else {
                  if (
                    userInfo.hasOwnProperty('sysGroup') &&
                    userInfo.sysGroup !== '' &&
                    userInfo.sysGroup !== null &&
                    JSON.stringify(userInfo.sysGroup) !== '{}' &&
                    JSON.stringify(userInfo.sysGroup) !== '[]'
                  ) {
                    window.top.localStorage.setItem(
                      'sysGroup',
                      JSON.stringify(userInfo.sysGroup)
                    )
                    if (userInfo.hasOwnProperty('sysCompanys')) {
                      window.top.localStorage.setItem(
                        'companys',
                        JSON.stringify(userInfo.sysCompanys)
                      )
                      window.top.localStorage.setItem(
                        'companyId',
                        userInfo.sysCompanys[0].id
                      )
                      if (userInfo.sysCompanys.length > 1) {
                        // 跳转选择集团公司页面
                        this.$router.push({ name: 'selectCompany' })
                      } else {
                        if (sRedirect) {
                          this.$router.push({ name: sRedirect })
                        } else {
                          this.$router.push({ name: 'default' }).catch(() => {})
                        }
                      }
                    } else {
                      this.$message.error(
                        '后台返回数据缺少company信息，请联系开发人员！'
                      )
                    }
                  } else {
                    this.$message.error(
                      '必须隶属一个集团！请先联系管理员添加集团信息!'
                    )
                  }
                }
              } else {
                //  登录失败
                // 提示
                this.$message({
                  message: res.message,
                  type: 'error',
                  duration: 2000,
                  offset: 300
                })
                this.loginBtnLoading = false
                this.$router.go(0)
              }
            })
            .catch(() => {
              this.loginBtnLoading = false
            })
        } else {
          return false
        }
      })
    },
    showPwd() {
      this.pwdShow = !this.pwdShow
    }
  }
}
</script>

<style lang="less" scoped>
.jumpText {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 500px;
  color: white;
  font-size: 24px;
}
</style>