imcs_yj_fe/imcs-ui/src/views/login/index.vue

<template>
  <div class="login-container">
    <div class="login-info">
    	<img :src="require(`@/assets/logo/logo1.png`)"/>
    	<div>
	    	<div class="title">{{$t('login.shuoming.title')}}</div>
	      <div class="title">{{$t('login.shuoming.tips')}}</div>
      </div>
    </div>
    <el-form
      :model="loginForm"
      :rules="rules"
      autocomplete="off"
      class="login-form"
      label-position="left"
      ref="loginForm"
    >
	    <el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="扫码登录" name="first">
		    	<div class="saomaDom">
		    		<img :src="require(`@/assets/logo/saoma.png`)"/>
            <el-select
              v-model="opValue"
              :span="2"
              @change="selectChange"
              :placeholder="$t('common.pleaseSelect')"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
		    		<div>请选择上下料站并扫码登录<el-input id="qcodeUserInput" name="qcodeUserInput"  type="password" style="z-index: -100" v-model="loginForm.qcodeUser" onfocus="this.style.imeMode = 'disabled'"  @input="showQcodeUser()"/></div>
		    	</div>
		    </el-tab-pane>
		    <el-tab-pane label="密码登录" name="second">
		      <div class="title-container">
		        <h3 class="title">{{$t('login.title')}}</h3>
		        <lang-select class="set-language"/>
		      </div>
		      <span v-if="login.type === 'up'">
		        <el-form-item prop="tenant" v-show="isMultiTenant">
		          <el-input
		            :placeholder="$t('login.tenant')"
		            @keyup.enter.native="handleLogin"
		            autocomplete="off"
		            name="tenantView"
		            prefix-icon="el-icon-user"
		            ref="tenant"
		            type="text"
		            v-model="loginForm.tenantView"
		          />
		        </el-form-item>
		        <el-form-item prop="account">
		          <el-input
		            :placeholder="$t('login.username')"
		            @keyup.enter.native="handleLogin"
		            autocomplete="off"
		            name="account"
		            prefix-icon="el-icon-user"
		            ref="account"
		            type="text"
		            v-model="loginForm.account"
		          />
		        </el-form-item>
		        <el-form-item prop="password">
		          <el-input
		            :placeholder="$t('login.password')"
		            :show-password="true"
		            @keyup.enter.native="handleLogin"
		            autocomplete="off"
		            name="password"
		            prefix-icon="el-icon-key"
		            ref="password"
		            type="password"
		            v-model="loginForm.password"
		          />
		        </el-form-item>
		        <el-form-item class="code-input" prop="code" v-show="isCaptcha">
		          <el-input
		            :placeholder="$t('login.code')"
		            @keyup.enter.native="handleLogin"
		            autocomplete="off"
		            name="code"
		            prefix-icon="el-icon-lock"
		            ref="code"
		            style="width: 70%"
		            type="text"
		            v-model="loginForm.code"
		          />
		        </el-form-item>
		        <img
		          v-show="isCaptcha"
		          :src="imageCode"
		          @click="getCodeImage"
		          alt="codeImage"
		          class="code-image"
		        />
		        <el-button
		          :loading="loading"
		          @click.native.prevent="handleLogin"
		          style="width:100%;margin-bottom:14px;"
		          type="primary"
		        >{{ $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
		                :class="{ radius: l.radius }"
		                :src="resolveLogo(l.img)"
		                @click="socialLogin(l.name)"
		                alt
		              />
		            </div>
		          </template>
		        </div>
		      </span>
		      <span style="margin-top: -1rem" v-if="login.type === 'bind'">
		        <el-tabs @tab-click="handleTabClick" v-model="tabActiveName">
		          <el-tab-pane :label="$t('common.bindLogin')" name="bindLogin">
		            <el-form-item prop="bindAccount">
		              <el-input
		                :placeholder="$t('login.account')"
		                autocomplete="off"
		                name="bindAccount"
		                prefix-icon="el-icon-user"
		                ref="bindAccount"
		                type="text"
		                v-model="loginForm.bindAccount"
		              />
		            </el-form-item>
		            <el-form-item prop="bindPassword">
		              <el-input
		                :placeholder="$t('login.password')"
		                :show-password="true"
		                autocomplete="off"
		                name="bindPassword"
		                prefix-icon="el-icon-key"
		                ref="bindPassword"
		                type="password"
		                v-model="loginForm.bindPassword"
		              />
		            </el-form-item>
		            <el-button
		              :loading="loading"
		              @click.native.prevent="bindLogin"
		              style="width:100%;margin-bottom:14px;"
		              type="primary"
		            >{{ $t("common.bindLogin") }}</el-button
		            >
		          </el-tab-pane>
		          <el-tab-pane :label="$t('common.signLogin')" name="signLogin">
		            <el-form-item prop="signAccount">
		              <el-input
		                :placeholder="$t('login.account')"
		                autocomplete="off"
		                name="signAccount"
		                prefix-icon="el-icon-user"
		                ref="signAccount"
		                type="text"
		                v-model="loginForm.signAccount"
		              />
		            </el-form-item>
		            <el-form-item prop="signPassword">
		              <el-input
		                :placeholder="$t('login.password')"
		                :show-password="true"
		                autocomplete="off"
		                name="signPassword"
		                prefix-icon="el-icon-key"
		                ref="signPassword"
		                type="password"
		                v-model="loginForm.signPassword"
		              />
		            </el-form-item>
		            <el-button
		              :loading="loading"
		              @click.native.prevent="signLogin"
		              style="width:100%;margin-bottom:14px;"
		              type="primary"
		            >{{ $t("common.signLogin") }}</el-button
		            >
		          </el-tab-pane>
		        </el-tabs>
		      </span>
		      <!--<el-dropdown class="login-type" placement="top-end">
		        <span class="el-dropdown-link">
		          <el-link type="primary">{{ $t("login.ortherLoginType") }}</el-link>
		        </span>
		        <el-dropdown-menu slot="dropdown">
		          <el-dropdown-item
		            :disabled="login.type === 'up'"
		            @click.native="login.type = 'up'"
		          >{{ $t("login.type.up") }}
		          </el-dropdown-item
		          >
		          <el-dropdown-item
		            :disabled="login.type === 'social'"
		            @click.native="login.type = 'social'"
		          >{{ $t("login.type.social") }}
		          </el-dropdown-item
		          >
		        </el-dropdown-menu>
		      </el-dropdown>-->
		    </el-tab-pane>
		  </el-tabs>
    </el-form>
    <span class="login-footer">
      © 2019 - 2022
      <span>{{$t('login.shuoming.tips')}}</span>
    </span>
  </div>
</template>

<script>
  import LangSelect from "@/components/LangSelect";
  import db from "@/utils/localstorage";
  import {randomNum} from "@/utils";
  import {socialLoginUrl} from "@/settings";
  import loginApi from "@/api/Login.js";
  import oauthApi from '@/api/Oauth'
  import {Base64} from 'js-base64';
  import productionResourcesMgrApi from "@/api/resourceProductMgr/productionResourcesMgr";

  export default {
    name: "Login",
    components: {LangSelect},
    data() {
      return {
        options: [],
        opValue:'',
      	activeName: 'first',
        //是否启用多租户
        isMultiTenant:
         false,
        isCaptcha:
          process.env.VUE_APP_IS_CAPTCHA === "true" ? true : false,
        tabActiveName: "bindLogin",
        login: {
          type: "up"
        },
        logo: [
          {img: "gitee.png", name: "gitee", radius: true},
          {img: "github.png", name: "github", radius: true},
          {img: "tencent_cloud.png", name: "tencent_cloud", radius: true},
          {img: "qq.png", name: "qq", radius: false},
          {img: "dingtalk.png", name: "dingtalk", radius: true},
          {img: "microsoft.png", name: "microsoft", radius: false}
        ],
        loginForm: {
          account: "zuihou",
          password: "",   // zuihou
          tenantView: "0000", //显示用的
          tenant: "", //传递给后端的
          key: randomNum(24, 16),
          code: "",
          grantType: process.env.VUE_APP_IS_CAPTCHA === "true" ? "captcha" : "password",
          bindAccount: "",
          bindPassword: "",
          signAccount: "",
          signPassword: "",
          qcodeUser: "",
          stationResourceId: "",
        },
        rules: {
          account: {
            required: true,
            message: this.$t("rules.require"),
            trigger: "blur"
          },
          tenantView: {
            required: true,
            message: this.$t("rules.require"),
            trigger: "blur"
          },
          password: {
            required: true,
            message: this.$t("rules.require"),
            trigger: "blur"
          },
          code: {
            validator: (rule, value, callback) => {
              if (this.isCaptcha && value === '') {
                callback(this.$t("rules.require"))
              } else {
                callback()
              }
              callback()
            }, trigger: 'blur'
          },
          bindAccount: {
            required: true,
            message: this.$t("rules.require"),
            trigger: "blur"
          },
          bindPassword: {
            required: true,
            message: this.$t("rules.require"),
            trigger: "blur"
          },
          signAccount: [
            {
              required: true,
              message: this.$t("rules.require"),
              trigger: "blur"
            },
            {
              min: 4,
              max: 10,
              message: this.$t("rules.range4to10"),
              trigger: "blur"
            }
          ],
          signPassword: [
            {
              required: true,
              message: this.$t("rules.require"),
              trigger: "blur"
            },
            {
              min: 6,
              max: 20,
              message: this.$t("rules.range6to20"),
              trigger: "blur"
            }
          ]
        },
        authUser: null,
        loading: false,
        showDialog: false,
        redirect: undefined,
        otherQuery: {},
        imageCode: "",
        page: {
          width: window.screen.width * 0.5,
          height: window.screen.height * 0.5
        }
      };
    },
    created() {
      this.getStations()
    },
    mounted() {
      db.clear();
      this.getCodeImage();
      this.$nextTick(
        window.onload = function () { // 光标默认位置
          var oInput = document.getElementById('qcodeUserInput');
          oInput.focus();
        }
      )
    },
    destroyed() {
      window.removeEventListener("message", this.resolveSocialLogin);
    },
    methods: {
    	// Tabs切换-事件
    	handleClick(tab, event) {
    	    // tab切换初始化focus及内容
    	    if(tab.name === 'first'){
              this.$nextTick(
                  window.onload = function () { // 光标默认位置
                      document.getElementById('qcodeUserInput').value = "";
                      var oInput = document.getElementById('qcodeUserInput');
                      oInput.focus();
                  }
              )
          }
        console.log(tab, event);
      },

      getCodeImage() {
        loginApi
          .getCaptcha(this.loginForm.key)
          .then(response => {
            const res = response.data;
            if (res.byteLength <= 100) {
              this.$message({
                message: this.$t("tips.systemError"),
                type: "error"
              });
            }
            return (
              "data:image/png;base64," +
              btoa(
                new Uint8Array(res).reduce(
                  (data, byte) => data + String.fromCharCode(byte),
                  ""
                )
              )
            );
          })
          .then(res => {
            this.imageCode = res;
          })
          .catch(e => {
            if (e.toString().indexOf("429") !== -1) {
              this.$message({
                message: this.$t("tips.tooManyRequest"),
                type: "error"
              });
            } else {
              this.$message({
                message: this.$t("tips.getCodeImageFailed"),
                type: "error"
              });
            }
          });
      },
      handleTabClick(tab) {
        this.tabActiveName = tab.name;
      },
      resolveLogo(logo) {
        return require(`@/assets/logo/${logo}`);
      },
      socialLogin(oauthType) {
        const url = `${socialLoginUrl}/${oauthType}/login`;
        window.open(
          url,
          "newWindow",
          `resizable=yes, height=${this.page.height}, width=${this.page.width}, top=10%, left=10%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`
        );
        window.addEventListener("message", this.resolveSocialLogin, false);
      },
      resolveSocialLogin(e) {
        const data = e.data;
        const that = this;
        if (data.message === "not_bind") {
          that.login.type = "bind";
          const authUser = data.data;
          that.authUser = authUser;
          that
            .$confirm(
              that.$t("common.current") +
              authUser.source +
              that.$t("common.socialAccount") +
              authUser.nickname +
              that.$t("common.socialTips"),
              that.$t("common.tips"),
              {
                confirmButtonText: that.$t("common.signLogin"),
                cancelButtonText: that.$t("common.bindLogin"),
                type: "warning"
              }
            )
            .then(() => {
              that.tabActiveName = "signLogin";
            })
            .catch(() => {
              that.tabActiveName = "bindLogin";
            });
        } else if (data.message === "social_login_success") {
          that.saveLoginData(data.data);
          that.getUserDetailInfo();
          that.loginSuccessCallback(data.account);
        } else {
          // do nothing
        }
      },
      bindLogin() {
        let account_c = false;
        let password_c = false;
        this.$refs.loginForm.validateField("bindAccount", e => {
          if (!e) {
            account_c = true;
          }
        });
        this.$refs.loginForm.validateField("bindPassword", e => {
          if (!e) {
            password_c = true;
          }
        });
        if (account_c && password_c) {
          this.loading = true;
          const that = this;
          const params = {
            bindAccount: that.loginForm.bindAccount,
            bindPassword: that.loginForm.bindPassword,
            ...that.authUser
          };
          params.token = null;
          that
            .$post("auth/social/bind/login", params)
            .then(r => {
              const data = r.data.data;
              this.saveLoginData(data);
              this.getUserDetailInfo();
              this.loginSuccessCallback(that.loginForm.bindAccount);
            })
            .catch(error => {
              console.error(error);
              that.loading = false;
            });
        }
      },
      signLogin() {
        let account_c = false;
        let password_c = false;
        this.$refs.loginForm.validateField("signAccount", e => {
          if (!e) {
            account_c = true;
          }
        });
        this.$refs.loginForm.validateField("signPassword", e => {
          if (!e) {
            password_c = true;
          }
        });
        if (account_c && password_c) {
          this.loading = true;
          const that = this;
          const params = {
            bindAccount: that.loginForm.signAccount,
            bindPassword: that.loginForm.signPassword,
            ...that.authUser
          };
          params.token = null;
          that
            .$post("auth/social/sign/login", params)
            .then(r => {
              const data = r.data.data;
              this.saveLoginData(data);
              this.getUserDetailInfo();
              this.loginSuccessCallback(that.loginForm.signAccount);
            })
            .catch(error => {
              console.error(error);
              that.loading = false;
            });
        }
      },
      handleLogin() {
        this.loginForm.tenant = `${Base64.encode(this.loginForm.tenantView)}`;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.loginSubmit();
          } else {
            return false
          }
        })
      },
      loginSubmit() {
        this.loading = true;
        const that = this;
        this.$store.commit("account/setTenant", this.loginForm.tenant);
        loginApi.login(this.loginForm).then(response => {
          const res = response.data;
          if (res.isSuccess) {
            that.saveLoginData(res.data['token'], res.data['refreshToken'], res.data['expiration']);
            that.saveUserInfo(res.data);
            that.getResource();
          } else {
            that.getCodeImage();
          }
        }).finally(() => that.loading = false);
      },
      saveLoginData(token, refreshToken, expiration) {
        this.$store.commit("account/setToken", token);
        this.$store.commit("account/setRefreshToken", refreshToken);
        this.$store.commit("account/setExpireTime", expiration);
      },
      saveUserInfo(user) {
        this.$store.commit("account/setUser", {
        });
        this.$store.commit("account/setUser", {
          id: user.userId,
          account: user.account,
          name: user.name,
          avatar: user.avatar,
          expire: user.expire,
          workDescribe: user.workDescribe,
          roles: user.roles
        });
      },
      getResource() {
        oauthApi.getResource().then(response => {
          const res = response.data;
          if (res.isSuccess) {
            const permissionsList = res.data;
            this.$store.commit("account/setPermissions", permissionsList ? permissionsList : []);

            this.loginSuccess();
          } else {
            this.getCodeImage();
          }
        });
      },
      loginSuccess() {
        this.$message({
          message: this.$t("tips.loginSuccess"),
          type: "success"
        });
        this.$router.push("/");
      },
      loginSuccessCallback(user) {
        console.log(user);
      },

      qcodelogin(qcodeUserValue) {
        this.loading = true;
        const that = this;
        this.loginForm.tenant = `${Base64.encode(this.loginForm.tenantView)}`;
        this.$store.commit("account/setTenant", this.loginForm.tenant);
        this.loginForm.qcodeUserValue = qcodeUserValue
        this.loginForm.grantType="password";
        loginApi.qcodelogin(this.loginForm).then(response => {
          const res = response.data;
          if (res.isSuccess) {
            that.saveLoginData(res.data['token'], res.data['refreshToken'], res.data['expiration']);
            that.saveUserInfo(res.data);
            that.getResource();
          } else {
            that.getCodeImage();
          }
        }).finally(() => that.loading = false);
      },

      showQcodeUser(){
        console.log(this.loginForm.qcodeUser.substr(this.loginForm.qcodeUser.length-1,1));
        if(this.loginForm.qcodeUser.substr(this.loginForm.qcodeUser.length-1,1) == "#"){
            this.qcodelogin()
        }
      },

      getStations() {
        productionResourcesMgrApi.getStations({}).then((res) => {
          res = res.data;
          if (res.isSuccess) {
            if (res.data.length > 0) {
              this.options = res.data;
            }
          }
        });
      },
      selectChange(value) {
        console.log(value);
        this.loginForm.stationResourceId = value;
        this.$nextTick(
          window.onload = function () { // 光标默认位置
            document.getElementById('qcodeUserInput').value = "";
            var oInput = document.getElementById('qcodeUserInput');
            oInput.focus();
          }
        )
      },
    }
  };
</script>
<style lang="scss">
	.login-form {
		.el-tabs__item {
			font-size: 16px;
			color: white;
		}
		.el-tabs__item.is-active {
			color: #1890ff;
		}
		.el-tabs__active-bar {
			background: none;
		}
	}
</style>
<style lang="scss" scoped>
  $bg: #2d3a4b;
  $dark_gray: #aaa;
  $light_gray: #eee;

  .login-container {
  	/*background: url(../../assets/logo/loginBg.gif) 50% no-repeat;
    background-size: cover;*/
    /*background: url(../../assets/background.jpg) 50% no-repeat;*/
   	/*background: url(../../assets/logo/logoBg1.jpg) 50% no-repeat;*/
   	/*background: url(../../assets/logo/logoBg2.png) 50% no-repeat;
    background-size: cover;*/
   	background: #000000;

    width: 100%;
    height: 100vh;
		.saomaDom {
			text-align: center;
			color: white;
			cursor: pointer;
		}
    .login-info {
    	display: flex;
    	align-items: center;
      position: absolute;
      left: 10%;
      top: 44%;
      margin-top: -100px;
      color: #fff;

			img{
				width: 300px;
				margin-right: 40px;
			}
      .title {
        font-size: 1.8rem;
        font-weight: 600;
      }
			.title:first-child{
				margin-bottom: 15px;
			}
      .sub-title {
        font-size: 1.5rem;
        margin: 0.3rem 0 0.7rem 1rem;
      }

      .desc {
        font-size: 0.96rem;
        line-height: 1.9rem;
      }
    }

    .login-form {
      position: absolute;
      top: 45%;
      left: 70%;
      margin: -180px 0 0 -160px;
      width: 320px;
      height: 440px;
      padding: 10px 36px 36px 36px;
      background: #4F535B;
      border-radius: 3px;

			.el-tabs__item {
				font-size: 16px;
			}
      .code-input {
        width: 50%;
        display: inline-block;
        vertical-align: middle;
      }

      .code-image {
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
      }

      .login-type {
        text-align: right;
        display: inline-block;
        width: 100%;
      }

      .logo-wrapper {
        display: inline-block;
        margin: 10px 0;

        img {
          width: 1.9rem;
          display: inline-block;
          margin: 0.8rem 0.8rem -0.8rem 0.8rem;
          cursor: pointer;

          &.radius {
            border-radius: 50%;
          }
        }
      }
    }

    .login-footer {
      position: fixed;
      bottom: 1rem;
      width: 100%;
      text-align: center;
      color: white;
      font-size: 0.85rem;
      line-height: 1rem;
      height: 1rem;
    }

    .tips {
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .title-container {
      position: relative;

      .title {
        font-size: 20px;
        color: #FFFFFF;
        margin: 0 auto 40px auto;
        text-align: center;
        font-weight: bold;
      }

      .set-language {
        color: #aaa;
        position: absolute;
        top: 3px;
        font-size: 18px;
        right: 0;
        cursor: pointer;
      }
    }

    .thirdparty-button {
      position: absolute;
      right: 0;
      bottom: 6px;
    }

    @media only screen and (max-width: 470px) {
      .thirdparty-button {
        display: none;
      }
    }

    @media screen and (max-width: 1100px) {
      .login-info {
        left: 8%;
      }
    }

    @media screen and (max-width: 970px) {
      .login-form {
        left: 50%;
      }
      .login-info {
        display: none;
      }
    }
  }
</style>