yunxi
/
SC-MOM
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PC记住密码

Browse Source
product
mhsnet 2 years ago
parent 727f35a542
commit 5b01fe301c
1 changed files with 217 additions and 110 deletions
Show Stats Download Patch File Download Diff File

327
SC-web/src/views/login/index.vue
Unescape View File

@ -1,83 +1,154 @@
<template>
<div class="login-container">
<div class="login-version" v-if="sysConfig && sysConfig.sysVersion">
<p class="login-version-text">{{sysConfig.sysVersion}}</p>
<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>-->
<!-- <a class="link" target="_blank" href="">了解更多</a>-->
<!-- <p class="title1">在线自动化，流程可视化， DevOps开发模式实现业务需求核心功能</p>-->
<!-- <p class="title2">企业宗旨：<span>致力于</span><传></传>统制造型企业完成数字化转型升级</p>-->
<!-- <a class="link" target="_blank" href="">了解更多</a>-->
</div>
</div>
<div class="login-content" >
<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>
<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>
<!-- <p class="title3"> ERP管理系统用户登录 </p>-->
<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
>
</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>
<div class="loading-primary">
<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>
<span class="loading-size1">────</span>
版权归上海长江云息数字科技公司所有
<span class="loading-size1">────</span>
</P>
</el-form>
<div v-show="active==2" class="login-form-QRCode">
<img class="qrcode-img" src="@/assets/images/login_qr.png">
<div v-show="active == 2" class="login-form-QRCode">
<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
}
this.$store.dispatch('user/login', query).then(res => {
this.$router.push({
path: this.redirect || '/home',
query: this.otherQuery
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.$router.push({
path: this.redirect || "/home",
query: this.otherQuery,
});
})
}).catch(() => {
this.$store.commit('user/SET_LOGIN_LOADING', false)
})
.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]
if (cur !== "redirect") {
acc[cur] = query[cur];
}
return acc
}, {})
}
}
}
return acc;
}, {});
},
},
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.loading-primary {
margin-top: 10px;
}
</style>

Write Preview
Loading…
Cancel
Save