|
|
|
@ -1,15 +1,18 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="login-container">
|
|
|
|
|
|
|
|
|
|
<div class="login-version" v-if="sysConfig && sysConfig.sysVersion">
|
|
|
|
|
<p class="login-version-text">{{ sysConfig.sysVersion }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="login-left">
|
|
|
|
|
<a class="login-company-logo" target="_blank" href="">
|
|
|
|
|
<img class="login-company-logo-img" src="@/assets/images/LOGO.png" alt="">
|
|
|
|
|
<img
|
|
|
|
|
class="login-company-logo-img"
|
|
|
|
|
src="@/assets/images/LOGO.png"
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
<img class="login-banner" src="@/assets/images/image-01.png" alt="">
|
|
|
|
|
<img class="login-banner" src="@/assets/images/image-01.png" alt="" />
|
|
|
|
|
<div class="login-left-txt" v-if="showTxt">
|
|
|
|
|
<!-- <p class="title1">在线自动化,流程可视化, DevOps开发模式实现业务需求核心功能</p>-->
|
|
|
|
|
<!-- <p class="title2">企业宗旨:<span>致力于</span><传></传>统制造型企业完成数字化转型升级</p>-->
|
|
|
|
@ -18,57 +21,125 @@
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="login-content">
|
|
|
|
|
|
|
|
|
|
<div class="login-form">
|
|
|
|
|
<el-image class="login-logo" :src="define.comUrl+sysConfig.loginIcon"
|
|
|
|
|
v-if="sysConfig && sysConfig.loginIcon">
|
|
|
|
|
<el-image
|
|
|
|
|
class="login-logo"
|
|
|
|
|
:src="define.comUrl + sysConfig.loginIcon"
|
|
|
|
|
v-if="sysConfig && sysConfig.loginIcon"
|
|
|
|
|
>
|
|
|
|
|
<template slot="error">
|
|
|
|
|
<img class="login-logo" src="@/assets/images/login_logo.png" alt="">
|
|
|
|
|
<img
|
|
|
|
|
class="login-logo"
|
|
|
|
|
src="@/assets/images/login_logo.png"
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
</template>
|
|
|
|
|
</el-image>
|
|
|
|
|
<!-- <p class="title3"> ERP管理系统用户登录 </p>-->
|
|
|
|
|
<img class="login-logo001" src="@/assets/images/标题.png" alt="" v-else>
|
|
|
|
|
<img
|
|
|
|
|
class="login-logo001"
|
|
|
|
|
src="@/assets/images/标题.png"
|
|
|
|
|
alt=""
|
|
|
|
|
v-else
|
|
|
|
|
/>
|
|
|
|
|
<div class="login-tab" :class="'active' + active">
|
|
|
|
|
<a class="item" :class="{'active': active==1}" @click="active=1">{{$t('login.title')}}</a>
|
|
|
|
|
<a class="item" :class="{'active': active==2}"
|
|
|
|
|
@click="active=2">{{$t('login.scanTitle')}}</a>
|
|
|
|
|
<a
|
|
|
|
|
class="item"
|
|
|
|
|
:class="{ active: active == 1 }"
|
|
|
|
|
@click="active = 1"
|
|
|
|
|
>{{ $t("login.title") }}</a
|
|
|
|
|
>
|
|
|
|
|
<a
|
|
|
|
|
class="item"
|
|
|
|
|
:class="{ active: active == 2 }"
|
|
|
|
|
@click="active = 2"
|
|
|
|
|
>{{ $t("login.scanTitle") }}</a
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<el-form v-show="active==1" ref="loginForm" :model="loginForm" :rules="loginRules"
|
|
|
|
|
autocomplete="on" label-position="left">
|
|
|
|
|
<el-form
|
|
|
|
|
v-show="active == 1"
|
|
|
|
|
ref="loginForm"
|
|
|
|
|
:model="loginForm"
|
|
|
|
|
:rules="loginRules"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
label-position="left"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item prop="account">
|
|
|
|
|
<el-input ref="account" v-model="loginForm.account" :placeholder="$t('login.username')"
|
|
|
|
|
name="account" type="text" tabindex="1" autocomplete="on" prefix-icon="el-icon-user"
|
|
|
|
|
size="large" @change="getConfig"></el-input>
|
|
|
|
|
<el-input
|
|
|
|
|
ref="account"
|
|
|
|
|
v-model="loginForm.account"
|
|
|
|
|
:placeholder="$t('login.username')"
|
|
|
|
|
name="account"
|
|
|
|
|
type="text"
|
|
|
|
|
tabindex="1"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
prefix-icon="el-icon-user"
|
|
|
|
|
size="large"
|
|
|
|
|
@change="getConfig"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item class="rule-tip">{{$t('login.rule')}}</el-form-item>
|
|
|
|
|
<el-tooltip v-model="capsTooltip" :content="$t('login.upper')" placement="right" manual>
|
|
|
|
|
<el-form-item class="rule-tip">{{ $t("login.rule") }}</el-form-item>
|
|
|
|
|
<el-tooltip
|
|
|
|
|
v-model="capsTooltip"
|
|
|
|
|
:content="$t('login.upper')"
|
|
|
|
|
placement="right"
|
|
|
|
|
manual
|
|
|
|
|
>
|
|
|
|
|
<el-form-item prop="password">
|
|
|
|
|
<el-input ref="password" v-model="loginForm.password" show-password
|
|
|
|
|
:placeholder="$t('login.password')" name="password" tabindex="2" autocomplete="on"
|
|
|
|
|
@keyup.native="checkCapslock" @blur="capsTooltip = false" prefix-icon="el-icon-lock"
|
|
|
|
|
size="large"></el-input>
|
|
|
|
|
<el-input
|
|
|
|
|
ref="password"
|
|
|
|
|
v-model="loginForm.password"
|
|
|
|
|
show-password
|
|
|
|
|
:placeholder="$t('login.password')"
|
|
|
|
|
name="password"
|
|
|
|
|
tabindex="2"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
@keyup.native="checkCapslock"
|
|
|
|
|
@blur="capsTooltip = false"
|
|
|
|
|
prefix-icon="el-icon-lock"
|
|
|
|
|
size="large"
|
|
|
|
|
></el-input>
|
|
|
|
|
<!-- @keyup.enter.native="handleLogin" -->
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
<el-form-item prop="code" v-if="needCode">
|
|
|
|
|
<el-row type="flex" justify="space-between">
|
|
|
|
|
|
|
|
|
|
<el-col class="sms-input">
|
|
|
|
|
<el-input v-model="loginForm.code" :placeholder="$t('login.codeTip')" name="code"
|
|
|
|
|
autocomplete="on" prefix-icon="el-icon-key" size="large">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="loginForm.code"
|
|
|
|
|
:placeholder="$t('login.codeTip')"
|
|
|
|
|
name="code"
|
|
|
|
|
autocomplete="on"
|
|
|
|
|
prefix-icon="el-icon-key"
|
|
|
|
|
size="large"
|
|
|
|
|
>
|
|
|
|
|
</el-input>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col class="sms-right code-right">
|
|
|
|
|
<el-tooltip :content="$t('login.changeCode')" placement="bottom">
|
|
|
|
|
<img id="imgcode" :alt="$t('login.changeCode')" :src="define.comUrl+imgUrl"
|
|
|
|
|
@click="changeImg">
|
|
|
|
|
<el-tooltip
|
|
|
|
|
:content="$t('login.changeCode')"
|
|
|
|
|
placement="bottom"
|
|
|
|
|
>
|
|
|
|
|
<img
|
|
|
|
|
id="imgcode"
|
|
|
|
|
:alt="$t('login.changeCode')"
|
|
|
|
|
:src="define.comUrl + imgUrl"
|
|
|
|
|
@click="changeImg"
|
|
|
|
|
/>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<div class="loading-primary">
|
|
|
|
|
<el-button :loading="loading" type="primary" class="login-btn" size="large"
|
|
|
|
|
@click.native.prevent="handleLogin" >{{ $t('login.logIn') }}</el-button>
|
|
|
|
|
<div><el-checkbox v-model="checked">记住密码</el-checkbox></div>
|
|
|
|
|
<el-button
|
|
|
|
|
:loading="loading"
|
|
|
|
|
type="primary"
|
|
|
|
|
class="login-btn"
|
|
|
|
|
size="large"
|
|
|
|
|
@click.native.prevent="handleLogin"
|
|
|
|
|
>{{ $t("login.logIn") }}</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<P class="loading-size">
|
|
|
|
|
<span class="loading-size1">────</span>
|
|
|
|
@ -77,7 +148,7 @@
|
|
|
|
|
</P>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div v-show="active == 2" class="login-form-QRCode">
|
|
|
|
|
<img class="qrcode-img" src="@/assets/images/login_qr.png">
|
|
|
|
|
<img class="qrcode-img" src="@/assets/images/login_qr.png" />
|
|
|
|
|
<p class="qrcode-tip"></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
@ -88,30 +159,42 @@
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getConfig } from '@/api/user'
|
|
|
|
|
import { getConfig } from "@/api/user";
|
|
|
|
|
export default {
|
|
|
|
|
name: 'Login',
|
|
|
|
|
name: "Login",
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loginForm: {
|
|
|
|
|
account: '',
|
|
|
|
|
password: '',
|
|
|
|
|
code: '',
|
|
|
|
|
origin: 'password'
|
|
|
|
|
account: "",
|
|
|
|
|
password: "",
|
|
|
|
|
code: "",
|
|
|
|
|
origin: "password",
|
|
|
|
|
},
|
|
|
|
|
loginRules: {
|
|
|
|
|
account: [
|
|
|
|
|
{ required: true, trigger: 'blur', message: this.$t('login.accountTip') }
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
message: this.$t("login.accountTip"),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
password: [
|
|
|
|
|
{ required: true, trigger: 'blur', message: this.$t('login.passwordTip') }
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
message: this.$t("login.passwordTip"),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
code: [
|
|
|
|
|
{ required: true, trigger: 'blur', message: this.$t('login.codeTip') }
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
trigger: "blur",
|
|
|
|
|
message: this.$t("login.codeTip"),
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
imgUrl: "",
|
|
|
|
|
timestamp: '',
|
|
|
|
|
timestamp: "",
|
|
|
|
|
capsTooltip: false,
|
|
|
|
|
loading: false,
|
|
|
|
|
showDialog: false,
|
|
|
|
@ -120,117 +203,141 @@ export default {
|
|
|
|
|
redirect: undefined,
|
|
|
|
|
showTxt: false,
|
|
|
|
|
otherQuery: {},
|
|
|
|
|
active: 1
|
|
|
|
|
}
|
|
|
|
|
active: 1,
|
|
|
|
|
checked: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
sysConfig() {
|
|
|
|
|
return this.$store.state.settings.sysConfig
|
|
|
|
|
return this.$store.state.settings.sysConfig;
|
|
|
|
|
},
|
|
|
|
|
loginLoading() {
|
|
|
|
|
return this.$store.state.user.loginLoading
|
|
|
|
|
}
|
|
|
|
|
return this.$store.state.user.loginLoading;
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
loginLoading(val) {
|
|
|
|
|
if (!val) this.loading = false
|
|
|
|
|
if (!val) this.loading = false;
|
|
|
|
|
},
|
|
|
|
|
$route: {
|
|
|
|
|
handler: function (route) {
|
|
|
|
|
const query = route.query
|
|
|
|
|
const query = route.query;
|
|
|
|
|
if (query) {
|
|
|
|
|
this.redirect = query.redirect
|
|
|
|
|
this.otherQuery = this.getOtherQuery(query)
|
|
|
|
|
this.redirect = query.redirect;
|
|
|
|
|
this.otherQuery = this.getOtherQuery(query);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
immediate: true
|
|
|
|
|
}
|
|
|
|
|
immediate: true,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
const _this = this
|
|
|
|
|
const _this = this;
|
|
|
|
|
document.onkeydown = function (e) {
|
|
|
|
|
const { keyCode } = e
|
|
|
|
|
const { keyCode } = e;
|
|
|
|
|
if (keyCode === 13) {
|
|
|
|
|
_this.handleLogin()
|
|
|
|
|
}
|
|
|
|
|
_this.handleLogin();
|
|
|
|
|
}
|
|
|
|
|
if (this.needCode) this.changeImg()
|
|
|
|
|
};
|
|
|
|
|
if (this.needCode) this.changeImg();
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$store.commit('user/SET_LOGIN_LOADING', false)
|
|
|
|
|
this.setShowTxt()
|
|
|
|
|
window.onresize = () => {
|
|
|
|
|
this.setShowTxt()
|
|
|
|
|
if (localStorage.jg_keep_act_pwd === 'true') {
|
|
|
|
|
this.checked = true;
|
|
|
|
|
this.loginForm.account = localStorage.jg_account;
|
|
|
|
|
this.loginForm.password = localStorage.jg_password;
|
|
|
|
|
} else {
|
|
|
|
|
this.checked = false;
|
|
|
|
|
}
|
|
|
|
|
this.$store.commit("user/SET_LOGIN_LOADING", false);
|
|
|
|
|
this.setShowTxt();
|
|
|
|
|
window.onresize = () => {
|
|
|
|
|
this.setShowTxt();
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
destroyed() {
|
|
|
|
|
document.onkeydown = function (e) {
|
|
|
|
|
const { keyCode } = e
|
|
|
|
|
if (keyCode === 13) { }
|
|
|
|
|
const { keyCode } = e;
|
|
|
|
|
if (keyCode === 13) {
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setShowTxt() {
|
|
|
|
|
if (document.documentElement.clientHeight <= 840) {
|
|
|
|
|
this.showTxt = false
|
|
|
|
|
this.showTxt = false;
|
|
|
|
|
} else {
|
|
|
|
|
this.showTxt = true
|
|
|
|
|
this.showTxt = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
checkCapslock(e) {
|
|
|
|
|
const { key } = e
|
|
|
|
|
this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
|
|
|
|
|
const { key } = e;
|
|
|
|
|
this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
|
|
|
|
|
},
|
|
|
|
|
getConfig(val) {
|
|
|
|
|
if (!val) return
|
|
|
|
|
getConfig(this.loginForm.account).then(res => {
|
|
|
|
|
this.needCode = !!res.data.enableVerificationCode
|
|
|
|
|
if (!val) return;
|
|
|
|
|
getConfig(this.loginForm.account).then((res) => {
|
|
|
|
|
this.needCode = !!res.data.enableVerificationCode;
|
|
|
|
|
if (this.needCode) {
|
|
|
|
|
this.codeLength = res.data.verificationCodeNumber || 4
|
|
|
|
|
this.changeImg()
|
|
|
|
|
this.codeLength = res.data.verificationCodeNumber || 4;
|
|
|
|
|
this.changeImg();
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleLogin() {
|
|
|
|
|
if (this.loading) return
|
|
|
|
|
this.$refs.loginForm.validate(valid => {
|
|
|
|
|
if (this.loading) return;
|
|
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
this.loading = true
|
|
|
|
|
this.$store.commit('user/SET_LOGIN_LOADING', true)
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.$store.commit("user/SET_LOGIN_LOADING", true);
|
|
|
|
|
const query = {
|
|
|
|
|
...this.loginForm,
|
|
|
|
|
timestamp: this.timestamp
|
|
|
|
|
timestamp: this.timestamp,
|
|
|
|
|
};
|
|
|
|
|
this.$store
|
|
|
|
|
.dispatch("user/login", query)
|
|
|
|
|
.then((res) => {
|
|
|
|
|
if (this.checked) {
|
|
|
|
|
localStorage.setItem("jg_keep_act_pwd", this.checked);
|
|
|
|
|
localStorage.setItem("jg_account", query.account);
|
|
|
|
|
localStorage.setItem("jg_password", query.password);
|
|
|
|
|
} else {
|
|
|
|
|
localStorage.removeItem("jg_keep_act_pwd");
|
|
|
|
|
localStorage.removeItem("jg_account");
|
|
|
|
|
localStorage.removeItem("jg_password");
|
|
|
|
|
}
|
|
|
|
|
this.$store.dispatch('user/login', query).then(res => {
|
|
|
|
|
this.$router.push({
|
|
|
|
|
path: this.redirect || '/home',
|
|
|
|
|
query: this.otherQuery
|
|
|
|
|
})
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
this.$store.commit('user/SET_LOGIN_LOADING', false)
|
|
|
|
|
path: this.redirect || "/home",
|
|
|
|
|
query: this.otherQuery,
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
.catch(() => {
|
|
|
|
|
this.$store.commit("user/SET_LOGIN_LOADING", false);
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
return false
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
changeImg() {
|
|
|
|
|
let timestamp = Math.random()
|
|
|
|
|
this.timestamp = timestamp
|
|
|
|
|
this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`
|
|
|
|
|
let timestamp = Math.random();
|
|
|
|
|
this.timestamp = timestamp;
|
|
|
|
|
this.imgUrl = `/api/oauth/ImageCode/${this.codeLength || 4}/${timestamp}`;
|
|
|
|
|
},
|
|
|
|
|
getOtherQuery(query) {
|
|
|
|
|
return Object.keys(query).reduce((acc, cur) => {
|
|
|
|
|
if (cur !== 'redirect') {
|
|
|
|
|
acc[cur] = query[cur]
|
|
|
|
|
}
|
|
|
|
|
return acc
|
|
|
|
|
}, {})
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (cur !== "redirect") {
|
|
|
|
|
acc[cur] = query[cur];
|
|
|
|
|
}
|
|
|
|
|
return acc;
|
|
|
|
|
}, {});
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
@import "./index.scss";
|
|
|
|
|
.loading-primary {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|