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

Write Preview
Loading…
Cancel
Save