adspecs 0.1.12

package/references/web-ui/src/views/login/FormLogin.vue

@@ -0,0 +1,1219 @@
+<template>
+  <div class="login-form-login">
+    <!-- 账号密码登录表单 -->
+    <el-form class="login-form" ref="loginForm" autocomplete="off" @submit.prevent :model="loginForm" :rules="rules"
+      @keydown.enter="onSubmit(false)">
+      <!-- 登录账号 -->
+      <el-form-item label prop="userName">
+        <!-- 国家区号选项 -->
+        <el-select size="large" v-model="loginForm.area" :placeholder="this.$t('otherLang.areaCode')" style="width: 31%"
+          class="el-input--square-topleft" :disabled="loginMode.mode.type == 'message'" v-if="loginMode.mode.type == 'message' || loginMode.mode.type == 'phone'
+            " filterable>
+          <el-option v-for="item in getAreas" :key="item.value" :label="item.value" :value="item.value">
+            {{ item.label }}
+          </el-option>
+        </el-select>
+        <el-input size="large" v-model.trim="loginForm.userName" clearable @blur="blurCheckCaptcha" class="el-input--square-bottomleft"
+          v-if="loginMode.mode.type == 'phone' || loginMode.mode.type == 'message'" :style="{
+            width:
+              loginMode.mode.type == 'message' || loginMode.mode.type == 'phone'
+                ? '69%'
+                : '100%'
+          }" @input="(value) => (loginForm.userName = value.replace(/[^\d]+/g, ''))"
+          :placeholder="$t(`login.${loginMode.mode.placeholder}`)">
+          <template #prefix>
+           <el-icon><el-icon-message v-if="loginMode.mode.icon === 'message'"/><PhoneFilled v-if="loginMode.mode.icon === 'phone'"/></el-icon>
+          </template>
+        </el-input>
+        <el-input v-model.trim="loginForm.userName" clearable @blur="blurCheckCaptcha"
+          v-if="loginMode.mode.type != 'phone' && loginMode.mode.type != 'message'"
+          :placeholder="$t(`login.${loginMode.mode.placeholder}`)">
+          <template v-slot:prefix>
+            <el-icon><el-icon-message v-if="loginMode.mode.icon === 'message'" />
+              <UserFilled v-if="loginMode.mode.icon === 'user-solid'" />
+            </el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 登录密码 -->
+      <el-form-item label prop="password" v-if="loginMode.mode.type !== 'message'">
+        <el-input :type="passwordType" v-model.trim="loginForm.password" :placeholder="$t('login.passwordPlaceholder')">
+          <template v-slot:prefix>
+            <i class="iconfont1 icon-mima" />
+          </template>
+          <template #suffix>
+            <el-icon class="eyes" v-show="showPassword" @click="revertStatus"><View /></el-icon>
+            <el-icon class="eyes" v-show="!showPassword" @click="revertStatus"><Hide /></el-icon>
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 短信验证码 -->
+      <el-form-item label prop="validatorCode" v-if="loginMode.mode.type == 'message'">
+        <div class="sms-item">
+          <el-input v-model.trim="loginForm.validatorCode" :placeholder="$t('login.smsVerifyCode')">
+            <template #prefix>
+              <el-icon><el-icon-message /></el-icon>
+            </template>
+          </el-input>
+          <el-button type="primary" @click="sendCode" data-login-button="true" :disabled="!smsCodeObj.canClick">{{ smsText
+          }}</el-button>
+        </div>
+      </el-form-item>
+      <!-- 登录验证码 -->
+      <el-form-item label class="captchaInput" v-show="checkCaptcha && loginMode.mode.type !== 'message'" prop="captcha">
+        <el-input v-model.trim="loginForm.captcha" :placeholder="$t('login.verificationCode')">
+          <template #prefix>
+            <i class="iconfont1 icon-yanzhengma" />
+          </template>
+          <template #suffix>
+            <el-image class="code-img" :src="identifyCode" alt @click="getCaptcha(loginForm.userName)" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <!-- 用户协议和隐私政策 -->
+      <el-form-item v-if="isShow" class="protocol-item" label>
+        <el-checkbox size="mini" class="protocol-checkBox" v-model="loginForm.protocol"></el-checkbox>
+        <div class="protocol-link">
+          {{ $t('login.agree') }}
+          <div class="a-link" @click="
+            protocolLink(
+              loginConfig?.userAgreementUrl
+            )
+            ">
+            《{{ loginConfig?.userAgreement }}》
+          </div>
+
+          {{ $t('login.and') }}
+          <div class="a-link" @click="
+            protocolLink(
+              loginConfig?.privacyPolicyUrl
+            )
+            ">
+            《{{ loginConfig?.privacyPolicy }}》
+          </div>
+        </div>
+      </el-form-item>
+      <!-- 账号密码登录表单按钮 -->
+      <el-form-item class="login-btn-item">
+        <el-button data-login-button="true" type="primary" size="large" @click="onSubmit(false)" :loading="loginLoading"
+          :disabled="!loginForm.protocol">
+          {{ $t('login.login') }}
+        </el-button>
+      </el-form-item>
+      <verification-dialog v-bind="verificationObj" ref="verification-dialog" :send-code="sendCode"
+        @update-form="updateForm" :ftaType="loginConfig?.tfaType" :login-origin="'login'" @login-login="codeLogin" />
+    </el-form>
+    <!-- 切换登录方式 -->
+    <div class="login-mode">
+      <div v-for="(item, index) in loginModeList" :key="item.type">
+        <el-divider v-if="index" direction="vertical"></el-divider>
+        <el-link :type="item.selected ? 'primary' : 'default'" :underline="false" @click="changeLoginMode(item.type)">
+          {{ getLang(item.type) }}
+        </el-link>
+      </div>
+      <div v-if="loginMode.list.length > 3">
+        <el-divider direction="vertical" />
+        <el-dropdown placement="bottom" trigger="click" style="display: inline-block;" @command="changeLoginMode">
+          <el-link type="default" :underline="false">
+            {{ $t('button.more') }}
+            <el-icon class="el-icon--right"><el-icon-arrow-down /></el-icon>
+          </el-link>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item v-for="item in loginMode.list.slice(3)" :command="item.type" :key="item.type">
+                {{ getLang(item.type) }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
+    <!-- 切换中英文以及忘记密码 -->
+    <slot name="forgetPwd" />
+  </div>
+</template>
+
+<script>
+import { $on, $off, $once, $emit } from '@/utils/events.ts'
+import {
+  Message as ElIconMessage,
+  UserFilled,
+  ArrowDown as ElIconArrowDown,
+  PhoneFilled,
+  View,
+  Hide
+} from '@element-plus/icons-vue'
+// vuex axios
+import { mapState, mapMutations } from '@/store/piniaToVuex'
+import CryptoJs from 'crypto-js'
+import VerificationDialog from '@/views/authorize/components/FormLogin/components/VerificationDialog'
+import { areas } from '@/utils/areas'
+// auth watermark base64
+import {
+  getDays,
+  setToken,
+  cookieSet,
+  setPwdVal,
+  removeToken,
+  setMenuList,
+  removeCookie,
+  TOKEN_OUT_ROUTE,
+  getTokenOutRoute,
+  setParentTenantId,
+  cookieGet,
+} from '@/utils/auth'
+import Watermark from '@/utils/watermark'
+// api
+import {
+  login,
+  autoLogin,
+  getPreCaptcha,
+  sendSsoValidatorCode,
+  sendSsoEmailValidatorCode,
+  getEnryption,
+} from '@/api/login'
+import { getBaseUserLoginSso } from '@/api/app'
+import { getsystemwatermark } from '@/api/system-manage/menu'
+
+export default {
+  components: {
+    VerificationDialog,
+    ElIconMessage,
+    ElIconArrowDown,
+    PhoneFilled,
+    UserFilled,
+    View,
+    Hide
+  },
+  name: 'FormLogin',
+  data() {
+    return {
+      showPassword: false,
+      areas,
+      // 是否等保登录
+      isISOlogin: false,
+      verificationMsg: '',
+      // 登录配置数据
+      loginObj: {
+        // 双因认证类型
+        ftaType: '',
+        // 登录协议
+        protocolType: '',
+        // 租户id
+        tenantId: 0,
+      },
+      // 密码登录提交Loading
+      loginLoading: false,
+      loginType: null,
+      // 密码登录表单
+      loginForm: {
+        areas: '',
+        area: '+86',
+        userName: '',
+        password: '',
+        userType: '86',
+        captcha: '',
+        // 短信验证码
+        validatorCode: '',
+        // 用户协议、隐私策略
+        protocol: true,
+      },
+      // 定时器
+      clock: undefined,
+      // 密码登录验证码标识
+      checkCaptcha: false,
+      // 图片验证码地址
+      identifyCode: '',
+      /**
+       * 登录方式种类
+       * loginType: 1 手机号登录, 2 邮箱登录, 3 账号登录, 4 手机号+短信验证码登录
+       */
+      loginMode: {
+        list: [
+          // 手机号登录
+          {
+            // 名称
+            label: this.$t('login.phone'),
+            // 类型
+            type: 'phone',
+            // 图标
+            icon: 'phone',
+            // 提示（没有输入时）
+            tip: 'phoneWarning',
+            // 校验正则
+            regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            // 正则提示
+            regularTip: 'phoneError',
+            // 是否选中
+            selected: true,
+            // 登录类型（接口提交用）
+            loginType: 1,
+            // 输入框的placeholder
+            placeholder: 'phonePlaceholder',
+          },
+          // 账号登录
+          {
+            label: this.$t('login.account'),
+            type: 'account',
+            icon: 'user-solid',
+            tip: 'accEmpty',
+            selected: false,
+            loginType: 3,
+            placeholder: 'accPlaceholder',
+          },
+          // 邮箱登录
+          {
+            label: this.$t('login.email'),
+            type: 'email',
+            icon: 'message',
+            tip: 'mailEmpty',
+            regular: /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
+            regularTip: 'mailError',
+            selected: false,
+            loginType: 2,
+            placeholder: 'mailPlaceholder',
+          },
+          // 短信验证码登录
+          {
+            label: this.$t('login.message'),
+            type: 'message',
+            icon: 'phone',
+            tip: 'phoneWarning',
+            regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+            regularTip: 'phoneError',
+            selected: false,
+            loginType: 4,
+            placeholder: 'phonePlaceholder',
+          },
+          // 域控登录
+          {
+            label: this.$t('login.ad_domain'),
+            type: 'ad_domain',
+            icon: 'user-solid',
+            tip: 'accEmpty',
+            selected: false,
+            loginType: 5,
+            placeholder: 'adPlaceholder',
+          },
+        ],
+        mode: {
+          // 名称
+          label: this.$t('login.phone'),
+          // 类型
+          type: 'phone',
+          // 图标
+          icon: 'phone',
+          // 提示（没有输入时）
+          tip: 'phoneWarning',
+          // 校验正则
+          regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+          // 正则提示
+          regularTip: 'phoneError',
+          // 是否选中
+          selected: true,
+          // 登录类型（接口提交用）
+          loginType: 1,
+          // 输入框的placeholder
+          placeholder: 'phonePlaceholder',
+        },
+      },
+      // 登录方式种类
+      modeList: [
+        // 手机号登录
+        {
+          // 名称
+          label: this.$t('login.phone'),
+          // 类型
+          type: 'phone',
+          // 图标
+          icon: 'phone',
+          // 提示（没有输入时）
+          tip: 'phoneWarning',
+          // 校验正则
+          regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+          // 正则提示
+          regularTip: 'phoneError',
+          // 是否选中
+          selected: true,
+          // 登录类型（接口提交用）
+          loginType: 1,
+          // 输入框的placeholder
+          placeholder: 'phonePlaceholder',
+        },
+        // 账号登录
+        {
+          label: this.$t('login.account'),
+          type: 'account',
+          icon: 'user-solid',
+          tip: 'accEmpty',
+          selected: false,
+          loginType: 3,
+          placeholder: 'accPlaceholder',
+        },
+        // 邮箱登录
+        {
+          label: this.$t('login.email'),
+          type: 'email',
+          icon: 'message',
+          tip: 'mailEmpty',
+          regular: /^\w{1,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/,
+          regularTip: 'mailError',
+          selected: false,
+          loginType: 2,
+          placeholder: 'mailPlaceholder',
+        },
+        // 短信验证码登录
+        {
+          label: this.$t('login.message'),
+          type: 'message',
+          icon: 'phone',
+          tip: 'phoneWarning',
+          regular: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+          regularTip: 'phoneError',
+          selected: false,
+          loginType: 4,
+          placeholder: 'phonePlaceholder',
+        },
+        // 域控登录
+        {
+          label: this.$t('login.ad_domain'),
+          type: 'ad_domain',
+          icon: 'user-solid',
+          tip: 'accEmpty',
+          selected: false,
+          loginType: 5,
+          placeholder: 'adPlaceholder',
+        },
+      ],
+      language: 'zh-cn',
+      // 发送短信验证码按钮提示
+      smsCodeObj: {
+        // 是否可点击
+        canClick: true,
+        // 按钮展示名称
+        getCodeText: this.$t('login.sendCode'),
+        // 重新获取短信验证码时间
+        totalTime: 60,
+        // 按钮状态
+        type: 'ready',
+      },
+      // 登录密码加密信息
+      encryptionMsg: {
+        // 加密方式
+        encryptionType: 'md5',
+        // 加密串
+        encrypted: '',
+      },
+    }
+  },
+  props: ['loginConfig'],
+  computed: {
+    isShow() {
+      return !(
+        this.loginConfig?.privacyPolicy === '' ||
+        this.loginConfig?.privacyPolicyUrl === '' ||
+        this.loginConfig?.userAgreement === '' ||
+        this.loginConfig?.userAgreementUrl === ''
+      )
+    },
+    passwordType() {
+      return this.showPassword ? 'text' : 'password'
+    },
+    curLang() {
+      return this.$i18n.locale
+    },
+    getAreas() {
+      const lang = this.curLang
+      return this.areas?.map((item) => {
+        return { label: item[lang] + '(' + item.code + ')', value: item.code }
+      })
+    },
+    // token
+    ...mapState({
+      token: (state) => state.user.token,
+    }),
+    // 是否展示短信验证码
+    isValidatorCode() {
+      const { type } = this.loginMode.mode
+      return type === 'message' || this.isISOlogin
+    },
+    // 密码登录验证规则
+    rules() {
+      const validateUserName = (rule, value, callback) => {
+        const mode = this.loginMode.mode
+        if (
+          ((this.loginMode.mode.type === 'phone' ||
+            this.loginMode.mode.type === 'message') &&
+            this.loginForm.area === '+86') ||
+          this.loginMode.mode.type === 'email'
+        ) {
+          if (value === '') {
+            callback(new Error(this.$t(`login.${mode.tip}`)))
+          } else if (mode.regular && !mode.regular.test(value)) {
+            callback(new Error(this.$t(`login.${mode.regularTip}`)))
+          } else {
+            callback()
+          }
+        } else {
+          callback()
+        }
+      }
+      return {
+        userName: [{ trigger: ['blur', 'change'], validator: validateUserName }],
+        password: [
+          {
+            required: true,
+            message: this.$t('login.pwdEmpty'),
+            trigger: 'blur',
+          },
+        ],
+        captcha: [
+          {
+            required: this.checkCaptcha,
+            message: this.$t('login.verifyCodeWarning'),
+            trigger: 'blur',
+          },
+        ],
+        // validatorCode: [{ required: true, message: this.$t('login.verifyCodeWarning'), trigger: 'blur' }]
+      }
+    },
+    verificationObj() {
+      return {
+        ...this.smsCodeObj,
+        ...this.loginForm,
+        ...this.loginMode,
+        ...this.loginObj,
+        verificationMsg: this.verificationMsg,
+      }
+    },
+    /**
+     * 按钮文字根据状态改变
+     * type 按钮当前状态
+     */
+    smsText() {
+      const locale = this.$i18n.locale
+      const { totalTime, type } = this.smsCodeObj
+      if (locale) {
+        switch (type) {
+          case 'ready':
+            return this.$t('login.sendCode')
+          case 'start':
+            return totalTime + this.$t('login.resend')
+          case 'again':
+            return this.$t('login.resendSMSCode')
+        }
+      }
+    },
+    loginModeList() {
+      return this.loginMode.list.slice(0, 3)
+    },
+  },
+  watch: {
+    rules() {
+      this.$nextTick(() => this.$refs.loginForm?.clearValidate())
+    },
+  },
+  methods: {
+    ...mapMutations(['SET_TENANTID', 'SET_USERLIMIT', 'SET_USERID']),
+    revertStatus() {
+      this.showPassword = !this.showPassword
+    },
+    // 协议跳转逻辑
+    protocolLink(link) {
+      window.open(link)
+    },
+    getLang(val) {
+      return this.$t(`login.${val}`)
+    },
+    setLang(val) {
+      this.language = val
+    },
+    // 短信验证码倒计时
+    verificationCode() {
+      if (!this.smsCodeObj.canClick) return
+      window.clearInterval(this.clock)
+      // 倒数开始
+      this.smsCodeObj.type = 'start'
+      this.smsCodeObj.canClick = false
+
+      this.clock = window.setInterval(() => {
+        this.smsCodeObj.totalTime--
+
+        // 倒数结束
+        if (this.smsCodeObj.totalTime < 0) {
+          window.clearInterval(this.clock)
+          this.smsCodeObj.type = 'again'
+          this.smsCodeObj.totalTime = 60
+          this.smsCodeObj.canClick = true
+        }
+      }, 1000)
+    },
+    getLoginConfig(v) {
+      const locale = this.$i18n.locale
+      const modeList =
+        locale &&
+        this.modeList.map((e) => {
+          return {
+            ...e,
+            selected: e.loginType == v.defLoginType,
+            label: this.$t(`login.${e.type}`),
+          }
+        })
+      this.loginObj.ftaType = v.tfaType ? v.tfaType : ''
+      let arr = []
+      v.loginTypes?.forEach((item) => {
+        modeList.forEach((it) => {
+          if (it.loginType == item.code) {
+            arr.push(it)
+          }
+        })
+      })
+      this.loginMode = {
+        list: arr.filter((e) => !(this.isISOlogin && e.type === 'message')),
+        mode: arr.find((e) => e.selected),
+      }
+      this.modeList = this.loginMode.list
+      this.$refs.loginForm.clearValidate()
+      if (this.$route.query) {
+        let params = this.$route.query
+        if (params.username && params.password) {
+          try {
+            this.loginForm.userName = atob(params.username)
+            this.loginForm.password = atob(params.password)
+            this.loginType = Number(params.logintype) || 3
+            this.onSubmit(true)
+          } catch (e) {
+            this.$message.warning('账号或密码无法解密')
+          }
+        } else if (params.username && !params.password) {
+          this.$message.warning('路由参数缺少密码，无法自动登录')
+        } else if (!params.username && params.password) {
+          this.$message.warning('路由参数缺少账号，无法自动登录')
+        }
+      }
+    },
+    // 重置发送短信验证码按钮数据
+    resetSMSCodeObj() {
+      this.smsCodeObj = {
+        // 是否可点击
+        canClick: true,
+        // 按钮展示名称
+        getCodeText: this.$t('login.sendCode'),
+        // 重新获取短信验证码时间
+        totalTime: 60,
+        // 按钮状态
+        type: 'ready',
+      }
+    },
+    // 发送短信验证码
+    async sendCode() {
+      const valid = await this.$refs.loginForm.validateField('userName')
+      // let valid = await this.$refs['loginForm'].validate((valid))
+
+      if (valid) {
+        let { loginType } = this.loginMode.mode
+        const params = {
+          loginAccount: this.loginForm.userName,
+          loginType: '',
+        }
+
+        let response = {}
+
+        if (loginType === 4) {
+          response = await sendSsoValidatorCode(params)
+        } else {
+          // 判断验证码类型 oidc/ oauth2
+          if (this.loginObj.ftaType === 'pwd2PhoneCode') {
+            response = await sendSsoValidatorCode(params)
+          } else {
+            response = await sendSsoEmailValidatorCode(params)
+          }
+        }
+        if (this.reqIsSucceed(response)) {
+          this.verificationMsg = response.msg
+          this.$message.success(response.msg)
+          this.verificationCode()
+        }
+      }
+    },
+    // 改变登录模式
+    changeLoginMode(type) {
+      this.loginMode.list = this.modeList.map((e) => {
+        return {
+          ...e,
+          selected: e.type === type ? true : false,
+        }
+      })
+      this.loginMode.list.forEach((it) => {
+        if (it.selected) {
+          this.loginMode.mode = { ...it }
+        }
+      })
+      if (this.loginMode.mode.type === 'message') {
+        return (this.loginForm.area = '+86')
+      }
+      this.$nextTick(() => {
+        this.$refs.loginForm.resetFields()
+      })
+    },
+    // 登录表单验证
+    async onSubmit(flag) {
+      // 需要用户勾选协议
+      if (!this.loginForm.protocol) {
+        this.$message.warning('请勾选用户协议和隐私政策')
+        return
+      }
+      if (flag) {
+        flag && this.goLogin()
+      } else {
+        // 表单校验提交
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            this.goLogin()
+          }
+        })
+      }
+    },
+    goLogin() {
+      this.loginLoading = true
+      // 有没有图片校验
+      if (this.checkCaptcha) {
+        this.getEnryption()
+      } else {
+        // 是否超过输入密码次数
+        getPreCaptcha(this.loginForm.userName)
+          .then((res) => {
+            if (res.data) {
+              this.checkCaptcha = true
+              this.loginLoading = false
+              this.getCaptcha(this.loginForm.userName)
+            } else {
+              // this.handleSubmit()
+              this.getEnryption()
+            }
+          })
+          .catch((err) => {
+            this.loginLoading = false
+          })
+      }
+    },
+    // 登录前获取加密方式
+    async getEnryption() {
+      try {
+        const loginType = this.loginType || this.loginMode.mode.loginType
+        const submitMethod =
+          this.loginConfig.tfaType && loginType != 4
+            ? this.handleSubmit1
+            : this.handleSubmit
+        // fix 如果是短信登录或域控登录，跳过获取加密方式的接口
+        if ([4, 5].includes(loginType)) {
+          await submitMethod()
+          return
+        }
+        const data = {
+          params: {
+            requestData: {
+              username: this.loginForm.userName,
+              loginType,
+              systemCode: _config.systemCode,
+              loginFrom: 'PC',
+              area: this.loginForm.area,
+            },
+          },
+        }
+        const res = await getEnryption(data)
+        if (this.reqIsSucceed(res)) {
+          this.encryptionMsg = {
+            encryptionType: res.data.encryptionType,
+            encrypted: res.data.encrypted,
+          }
+        }
+        await submitMethod()
+      } finally {
+        this.loginLoading = false
+      }
+    },
+    // 使用加密方式加密密码
+    encodePassword() {
+      const psw = this.loginForm.password
+      if (!psw) return
+      const { encrypted, encryptionType } = this.encryptionMsg
+      // 域控登录使用正常的 base64 加密
+      if (this.loginMode.mode.loginType === 5) {
+        return CryptoJs.enc.Base64.stringify(CryptoJs.enc.Utf8.parse(psw))
+      }
+      if (encryptionType === 'Md5Hash') {
+        return CryptoJs.MD5(encrypted + psw).toString()
+      }
+      return CryptoJs[encryptionType](psw, encrypted).toString()
+    },
+    async handleSubmit1(token = '') {
+      try {
+        const { type } = this.smsCodeObj
+        const { visible } = this.$refs['verification-dialog']
+        let { loginType } = this.loginMode.mode
+        // 控制只发送一次请求登录接口
+        // 短信登录跳过判断
+        if (type === 'start' && visible === false && loginType !== 4) {
+          this.$refs['verification-dialog'].visible = true
+          this.loginLoading = false
+          return
+        }
+
+        const { responseType, clientId, redirectUri, scope, state } =
+          this.$route.query
+        let { userName, password, captcha, area, validatorCode } =
+          this.loginForm
+        let params = {
+          params: {
+            requestData: {
+              username: userName,
+              password: this.encodePassword(),
+              captcha,
+              tfaType: this.loginConfig.tfaType,
+              validatorCode,
+              loginType: token ? 5 : loginType,
+              systemCode: _config.systemCode,
+              loginFrom: 'PC',
+              responseType,
+              redirectUri,
+              clientId,
+              scope,
+              state,
+              area,
+            },
+          },
+        }
+        let response = {}
+        // 请求之前重新设置一次token
+        setToken(token)
+        response = await login(params)
+        this.loginLoading = false
+        if (this.reqIsSucceed(response) && response.data) {
+          const {
+            data,
+            data: { code },
+          } = response
+          // 判断是否弹窗
+          if (code && code === 700) {
+            this.verificationCode()
+            this.verificationMsg = response.msg
+            this.$refs['verification-dialog'].visible = true
+          }
+          // 登录成功
+          if (this.reqIsSucceed(data)) {
+            const url = this.setUrlQuery({
+              url: data.redirectUrl,
+              query: data.urlParams,
+            })
+            if (url) {
+              location.href = url
+            }
+          }
+        } else {
+          if (this.checkCaptcha) this.getCaptcha(userName)
+        }
+      } catch (error) {
+        this.loginLoading = false
+      }
+    },
+    async codeLogin() {
+      let { loginType } = this.loginMode.mode
+      const { responseType, clientId, redirectUri, scope, state } =
+        this.$route.query
+      let { userName, password, captcha, area, validatorCode } = this.loginForm
+      let params = {
+        params: {
+          requestData: {
+            username: userName,
+            password: this.encodePassword(),
+            captcha,
+            tfaType: this.loginConfig.tfaType,
+            validatorCode,
+            loginType: loginType,
+            systemCode: _config.systemCode,
+            loginFrom: 'PC',
+            responseType,
+            redirectUri,
+            clientId,
+            scope,
+            state,
+            area,
+          },
+        },
+      }
+      // 请求之前重新设置一次token
+      login(params)
+        .then((res) => {
+          this.loginLoading = false
+          if (this.reqIsSucceed(res)) {
+            this.afterLoginSuccess(res, password)
+            this.getsystemwatermark(res.data.tenantId)
+          } else {
+            if (this.checkCaptcha) this.getCaptcha(userName)
+          }
+        })
+        .catch((err) => {
+          this.loginLoading = false
+        })
+    },
+    updateForm(key, value) {
+      this.loginForm[key] = value
+    },
+    // 登录表单提交
+    async handleSubmit() {
+      let { userName, password, captcha, area, validatorCode } = this.loginForm
+      let loginType = this.loginType || this.loginMode.mode.loginType
+      let params = {
+        params: {
+          requestData: {
+            username: userName,
+            password: this.encodePassword(),
+            captcha,
+            area,
+            loginType,
+            validatorCode,
+            systemCode: _config.systemCode,
+            loginFrom: 'PC',
+          },
+        },
+      }
+      login(params)
+        .then((res) => {
+          this.loginLoading = false
+          if (this.reqIsSucceed(res)) {
+            this.afterLoginSuccess(res, password)
+            this.getsystemwatermark(res.data.tenantId)
+          } else {
+            // this.$message.error(res.msg)
+            if (this.checkCaptcha) this.getCaptcha(userName)
+          }
+        })
+        .catch((err) => {
+          this.loginLoading = false
+        })
+    },
+    // 系统信息缓存
+    afterLoginSuccess(res, password) {
+      res.data.password = password
+      // 登录后设置当前微前端系统为默认系统
+      // localStorage['currentSystemCode'] = _config.systemCode
+      localStorage.setItem('currentSystemCode', _config.systemCode)
+      //获取默认主题颜色
+      // store.dispatch('GetDefaultThemecolor')
+      cookieSet(
+        'tokenInvalid',
+        res.data.tokenInvalid,
+        getDays(res.data.tokenInvalid)
+      )
+      setToken(res.data.authorization, res.data['refresh-authorization'])
+      setPwdVal(this.encodePassword())
+      setParentTenantId(res.data.parentTenantId)
+      this.SET_USERLIMIT(res.data.useLimitCode)
+      this.SET_TENANTID(res.data.tenantId)
+      this.SET_USERID(res.data.userId)
+      // 即将废弃 setUserHeadImgUrl 2023-08-08
+      // if (res.data.userHeadImgUrl !== 'defaultImgUrl' && res.data.userHeadImgUrl !== '') {
+      //   this.$store.commit('setUserHeadImgUrl', res.data.userHeadImgUrl)
+      // } else {
+      //   // 如果返回defaultImgUrl，要清除缓存，使用默认头像
+      //   this.$store.commit('setUserHeadImgUrl', '')
+      // }
+      this.autoLogin(res.data)
+    },
+
+    // 登录处理
+    async autoLogin(data) {
+      let res = await autoLogin(_config.systemCode)
+      if (!this.reqIsSucceed(res)) return
+      // 缓存菜单信息
+      setMenuList(res.data.menus)
+      /*
+       * 开始判断跳转优先级
+       * 1.缓存的失效路由地址
+       * 2.默认菜单或默认系统
+       * 3.portal 门户
+       */
+      // 缓存的失效路由地址
+      const tokenOutRoute = getTokenOutRoute()
+      // 前一个环境和当前环境一致，则可以进行跳转缓存路由
+      const isSameEnv = cookieGet('preEnv') === window.VUE_ENV
+      // by 昀康 失效路由地址和当前路由地址有包含关系
+      // const tokenOutRouteFlag = tokenOutRoute.indexOf(location.hostname) > -1
+      // 无效的缓存地址
+      const invalidPaths = ['login', 'portal']
+      const { defaultMenuUrl, defaultUrl } = res.data
+      // if (tokenOutRoute && tokenOutRouteFlag && !invalidPaths.some(path => tokenOutRoute.includes(path))) {
+      if (
+        tokenOutRoute &&
+        isSameEnv &&
+        !invalidPaths.some((path) => tokenOutRoute.includes(path))
+      ) {
+        removeCookie(TOKEN_OUT_ROUTE)
+        location.href = decodeURIComponent(tokenOutRoute)
+      } else if (defaultMenuUrl) {
+        if (defaultUrl && process.env.NODE_ENV !== 'development') {
+          const currentHost = window.location.host
+          // 判断当前登录的系统是否为默认系统
+          // 是登录了默认系统，跳转设置好的默认菜单
+          if (defaultUrl.includes(currentHost)) {
+            await this.$router.push(defaultMenuUrl.routePath)
+          } else {
+            // 不是登录了默认系统，但是有默认菜单，跳转系统就好了
+            location.href = defaultUrl
+          }
+        } else {
+          let jumpRoute = defaultMenuUrl.routePath || '/portal'
+          await this.$router.push(jumpRoute)
+        }
+      } else if (defaultUrl && process.env.NODE_ENV !== 'development') {
+        location.href = defaultUrl
+      } else {
+        await this.$router.push('/portal')
+      }
+      // 针对松下项目做的密码过期提示
+      if (data.useLimitCode == 2) {
+        setTimeout(() => {
+          this.$confirm(
+            this.$t('login.passwordExpirationWarning'),
+            this.$t('toast.tip'),
+            {
+              confirmButtonText: this.$t('login.changePwd'),
+              cancelButtonText: this.$t('login.later'),
+              showClose: false,
+              type: 'warning',
+            }
+          ).then(() => {
+            $emit(this.$bus, 'change-pwd')
+          })
+        }, 1000)
+      }
+    },
+    //获取系统水印
+    getsystemwatermark(tenantId) {
+      getsystemwatermark(_config.systemCode, '', tenantId).then((res) => {
+        if (this.reqIsSucceed(res)) {
+          if (res.data) {
+            window.localStorage.setItem(
+              'watermarkBean',
+              JSON.stringify(res.data)
+            )
+            res.data.watermarkType === 'compact'
+              ? watermarkcompact.set()
+              : Watermark.set()
+          }
+        }
+      })
+    },
+
+    // 检查是否需要开启密码登录验证码
+    async blurCheckCaptcha() {
+      const res = await getPreCaptcha(this.loginForm.userName)
+      this.checkCaptcha = res.data
+      if (res.data) this.getCaptcha(this.loginForm.userName)
+    },
+    // 获取验证码图片地址
+    getCaptcha(phone) {
+      this.identifyCode = `${window.VUE_APP_SERVERAPI
+        }${window.getVersionTypeApiUrl(
+          'baseURL'
+        )}/base-pa/imageCaptcha?phone=${phone}&${Math.random()}`
+    },
+  },
+  mounted() {
+    // 判断是否是等保登录
+    const hostname = document.location.hostname
+    if (hostname === 'demo.gushen.sieiot.com') {
+      // 等保默认勾选协议
+      this.loginForm.protocol = false
+      // 等保登录模式
+      this.isISOlogin = true
+    }
+
+    // 请求判断是否sso登录
+    // 需要跳过公共请求拦截
+    getBaseUserLoginSso({
+      800: (res) => {
+        const data = res.data || {}
+        // 子轩/韵康：单点登录优化处理，如果token不过期，直接跳转
+        location.href =
+          data?.data?.defaultUrl || `${window.VUE_SUBPATH ?? '/'}portal`
+      },
+      '-1': (res) => {
+        const data = res.data || {}
+        // 如果是sso登录不让他进入login页面跳转到urlLogin
+        if (data.code === '-1' && data.portalType === 'sso' && data.urlLogin) {
+          removeToken()
+          cookieSet('ssoType', data.ssoType, null)
+          cookieSet('urlLogout', data.urlLogout)
+          cookieSet('urlLogin', data.urlLogin)
+          cookieSet('portalType', data.portalType)
+          cookieSet('portalCode', data.portalCode)
+          location.href = data.urlLogin
+        }
+      }
+    })
+    this.$nextTick(() => {
+      this.$refs.loginForm.clearValidate()
+    })
+  },
+  emits: ['change-pwd'],
+}
+</script>
+
+<style lang="scss" scoped>
+.login-form-login {
+  width: 70%;
+
+  .login-form {
+    .el-button {
+      width: 100%;
+    }
+
+    .code-img {
+      cursor: pointer;
+      height: 40px;
+      position: relative;
+      border-radius: 0px 4px 4px 0;
+    }
+
+    .el-button {
+      margin: 10px 0 0 0;
+    }
+
+    .protocol-item {
+      margin-bottom: 0;
+
+      .protocol-checkBox {
+        align-items: start;
+      }
+
+      .protocol-link {
+        width: calc(100% - 24px);
+        color: #000;
+        font-size: 12px;
+        line-height: 16px;
+        white-space: normal;
+        word-break: break-all;
+        margin-left: 10px;
+
+        .a-link {
+          display: inline-block;
+          color: #1890ff;
+          text-decoration: none;
+          background-color: transparent;
+          outline: none;
+          cursor: pointer;
+          transition: color 0.3s;
+        }
+
+        .a-link:active,
+        .a-link:hover {
+          text-decoration: none;
+          outline: 0;
+        }
+
+        .a-link:hover {
+          color: #40a9ff;
+        }
+
+        .a-link,
+        .a-link:focus,
+        .a-link:hover {
+          cursor: pointer;
+          text-decoration: none;
+        }
+      }
+
+      ::v-deep .el-form-item__content {
+        display: flex;
+        align-items: flex-start;
+      }
+
+      ::v-deep .el-checkbox {
+        display: flex;
+        margin-top: 2px;
+      }
+    }
+
+    .login-btn-item {
+      margin-bottom: 15px;
+    }
+
+    .sms-item {
+      display: flex;
+
+      .el-input {
+        flex: 2;
+      }
+
+      .el-button {
+        display: inline-block;
+        height: 100%;
+        flex: 1;
+        margin: 0 0 0 10px;
+        padding: 12px 20px;
+      }
+    }
+  }
+}
+.eyes {
+  font-size: 16px;
+  cursor: pointer;
+}
+.captchaInput :deep(.el-input__wrapper) {
+  padding: 0 0 0 15px;
+  box-sizing: border-box;
+}
+
+.captchaInput :deep(.el-input__wrapper) {
+  padding: 0 0 0 15px;
+  box-sizing: border-box;
+}
+
+.login-mode {
+  display: flex;
+  justify-content: center;
+  line-height: 1;
+  margin-bottom: 15px;
+}
+
+// ::v-deep .el-input__inner {
+//   min-height: 40px !important;
+// }
+
+:deep(.el-input__wrapper) {
+  padding: 0 15px;
+}
+
+::v-deep {
+  // .el-input--square-bottomleft {
+    .el-input__wrapper {
+      border-radius: 0 4px 4px 0;
+      // border-left: none;
+      width: 100%;
+      box-shadow: none;
+      // border-color: var(--el-color-border-line);
+      border: 1px solid var(--color-border-line);
+      box-sizing: border-box;
+      height: 40px;
+    }
+  // }
+
+  .el-input--square-topleft {
+
+    .el-select__wrapper {
+      position: relative;
+      right: -1px;
+      border-right: none;
+      border-radius: 4px 0 0 4px;
+      box-shadow: none;
+      border: 1px solid var(--color-border-line);
+      border-right: none;
+      box-sizing: border-box;
+      height: 40px;
+      // z-index: 999;
+    }
+  }
+}
+</style>