From bbc45d35dbf86e375fa8d09879f887673ec0fe19 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期五, 02 十二月 2022 01:58:41 +0800
Subject: [PATCH] 完成断流监控前端显示
---
src/views/login/components/loginForm.vue | 215 ++++++++++++++++++++++++-----------------------------
1 files changed, 96 insertions(+), 119 deletions(-)
diff --git a/src/views/login/components/loginForm.vue b/src/views/login/components/loginForm.vue
index ca53a63..a4b4e5a 100644
--- a/src/views/login/components/loginForm.vue
+++ b/src/views/login/components/loginForm.vue
@@ -11,10 +11,7 @@
class="demo-ruleForm"
>
<el-form-item prop="loginName">
- <el-input
- v-model.trim="user.loginName"
- placeholder="璇疯緭鍏ユ墜鏈哄彿 / 鐢ㄦ埛鍚�"
- >
+ <el-input v-model.trim="user.loginName" placeholder="璇疯緭鍏ユ墜鏈哄彿 / 鐢ㄦ埛鍚�">
<i slot="prefix" class="iconfont"></i>
</el-input>
</el-form-item>
@@ -42,9 +39,7 @@
<el-link class="cursor-register" target="_blank">
<router-link to="/Register">娉ㄥ唽</router-link>
</el-link>
- <el-link class="cursor-pointer" type="primary" @click="forget"
- >蹇樿瀵嗙爜</el-link
- >
+ <el-link class="cursor-pointer" type="primary" @click="forget">蹇樿瀵嗙爜</el-link>
</div>
</el-form>
</el-tab-pane>
@@ -72,12 +67,9 @@
>
<i slot="prefix" class="iconfont icon-yanzhengma"></i>
</el-input>
- <el-button
- class="code-btn"
- :disabled="codeDisabled"
- @click="getCode('phoneLogin')"
- >{{ codeMsg }}</el-button
- >
+ <el-button class="code-btn" :disabled="codeDisabled" @click="getCode('phoneLogin')">{{
+ codeMsg
+ }}</el-button>
</el-form-item>
<el-form-item>
<el-button
@@ -92,9 +84,7 @@
<el-link class="cursor-register" target="_blank">
<router-link to="/Register">娉ㄥ唽</router-link>
</el-link>
- <el-link class="cursor-pointer" type="primary" @click="forget"
- >蹇樿瀵嗙爜</el-link
- >
+ <el-link class="cursor-pointer" type="primary" @click="forget">蹇樿瀵嗙爜</el-link>
</div>
</el-form>
</el-tab-pane>
@@ -104,18 +94,13 @@
</template>
<script>
-import {
- tologin,
- getLoginUserData,
- makeVerifyCode,
- getMenuPermission,
-} from "@/api/login";
-import { isPhone } from "@/scripts/validate";
+import { tologin, getLoginUserData, makeVerifyCode, getMenuPermission } from "@/api/login"
+import { isPhone } from "@/scripts/validate"
export default {
name: "login-pgae",
metaInfo: {
- title: "鐧诲綍椤�",
+ title: "鐧诲綍椤�"
},
data: () => ({
activeName: "first",
@@ -130,32 +115,28 @@
user: {
loginName: "",
password: "",
- rememberMe: false,
+ rememberMe: false
},
phone: {
phoneNum: "",
- verifyCode: "",
+ verifyCode: ""
},
nullRule: {},
userRules: {
- loginName: [
- { required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "change" },
- ],
- password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "change" }],
+ loginName: [{ required: true, message: "璇疯緭鍏ョ敤鎴峰悕", trigger: "change" }],
+ password: [{ required: true, message: "璇疯緭鍏ュ瘑鐮�", trigger: "change" }]
},
phoneCodeRule: {
phoneNum: [{ validator: isPhone, trigger: "change" }],
- verifyCode: [
- { required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" },
- ],
+ verifyCode: [{ required: true, message: "璇疯緭鍏ラ獙璇佺爜", trigger: "change" }]
},
loading: "",
- vLoading: false,
+ vLoading: false
}),
methods: {
phoneLogin() {
- this.nullRule = this.phoneCodeRule;
+ this.nullRule = this.phoneCodeRule
this.$nextTick(() => {
this.$refs["phoneLogin"].validate((valid) => {
if (valid) {
@@ -163,23 +144,23 @@
// lock: true,
text: "Loading",
spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)",
- });
+ background: "rgba(0, 0, 0, 0.7)"
+ })
let param = {
phoneNum: this.phone.phoneNum,
- verifyCode: this.phone.verifyCode,
- };
- this.testLogin(param);
+ verifyCode: this.phone.verifyCode
+ }
+ this.testLogin(param)
// return false
} else {
- this.nullRule = {};
+ this.nullRule = {}
}
- });
- this.nullRule = {};
- });
+ })
+ this.nullRule = {}
+ })
},
userLogin() {
- this.nullRule = this.userRules;
+ this.nullRule = this.userRules
this.$nextTick(() => {
this.$refs["userLogin"].validate((valid) => {
if (valid) {
@@ -187,32 +168,32 @@
// lock: true,
text: "Loading",
spinner: "el-icon-loading",
- background: "rgba(0, 0, 0, 0.7)",
- });
+ background: "rgba(0, 0, 0, 0.7)"
+ })
let param = {
username: this.user.loginName,
- password: this.user.password,
- };
- this.testLogin(param);
+ password: this.user.password
+ }
+ this.testLogin(param)
// return false
} else {
- this.nullRule = {};
+ this.nullRule = {}
}
- });
- this.nullRule = {};
- });
+ })
+ this.nullRule = {}
+ })
},
getValidStr() {
if (this.countdown > 0 && this.countdown <= 60) {
- this.countdown--;
+ this.countdown--
if (this.countdown !== 0) {
- this.codeMsg = `${this.countdown}s`;
+ this.codeMsg = `${this.countdown}s`
} else {
- clearInterval(this.timer);
- this.codeMsg = "鑾峰彇楠岃瘉鐮�";
- this.countdown = 60;
- this.timer = null;
- this.codeDisabled = false;
+ clearInterval(this.timer)
+ this.codeMsg = "鑾峰彇楠岃瘉鐮�"
+ this.countdown = 60
+ this.timer = null
+ this.codeDisabled = false
}
}
},
@@ -233,86 +214,82 @@
this.$refs[formName].validateField("phoneNum", (res) => {
if (res) {
- document.querySelector(".phoneNum .el-input__inner").focus();
+ document.querySelector(".phoneNum .el-input__inner").focus()
}
if (!this.timer && !res) {
- this.codeDisabled = true;
- this.getValidStr();
- this.timer = setInterval(this.getValidStr, 1000);
+ this.codeDisabled = true
+ this.getValidStr()
+ this.timer = setInterval(this.getValidStr, 1000)
makeVerifyCode({ phoneNum: this.phone.phoneNum, type: 0 })
.then(() => {
- this.gotCode = true;
+ this.gotCode = true
})
.catch((err) => {
- console.log(this.$refs[formName].fields);
- this.$refs[formName].fields[0].validateState = "error";
+ console.log(this.$refs[formName].fields)
+ this.$refs[formName].fields[0].validateState = "error"
setTimeout(() => {
if (document.querySelector(".el-form-item__error")) {
document.querySelector(".el-form-item__error").innerHTML =
- '<span class="iconfont error"></span>鎵嬫満鍙锋湭娉ㄥ唽,鎮ㄥ彲浠�<span class="colorBlue toRegister">鍘绘敞鍐�</span>';
+ '<span class="iconfont error"></span>鎵嬫満鍙锋湭娉ㄥ唽,鎮ㄥ彲浠�<span class="colorBlue toRegister">鍘绘敞鍐�</span>'
this.$nextTick(() => {
- document
- .querySelector(".toRegister")
- .addEventListener("click", () => {
- this.$router.push("/register");
- });
- });
+ document.querySelector(".toRegister").addEventListener("click", () => {
+ this.$router.push("/register")
+ })
+ })
} else {
- this.$refs[formName].fields[0].validateMessage = err.data.msg;
+ this.$refs[formName].fields[0].validateMessage = err.data.msg
}
- document.querySelector(".phoneNum .el-input__inner").focus();
- }, 100);
- });
+ document.querySelector(".phoneNum .el-input__inner").focus()
+ }, 100)
+ })
}
- });
+ })
},
async testLogin(param) {
tologin(param)
.then((res) => {
- const data = res.data;
+ const data = res.data
const loginedInfo = {
access_token: data.token_type + " " + data.access_token,
- refresh_token: data.refresh_token,
- };
- sessionStorage.setItem("expires_in", data.expires_in);
- sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo));
+ refresh_token: data.refresh_token
+ }
+ sessionStorage.setItem("expires_in", data.expires_in)
+ sessionStorage.setItem("loginedInfo", JSON.stringify(loginedInfo))
getMenuPermission().then((rep) => {
- data.userInfo.permissions = rep.data.permissions;
- sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo));
- this.$router.push("/");
- });
- this.loading.close();
+ data.userInfo.permissions = rep.data.permissions
+ sessionStorage.setItem("userInfo", JSON.stringify(data.userInfo))
+ this.$router.push("/manageCenter")
+ })
+ this.loading.close()
})
.catch((err) => {
- this.loading.close();
+ this.loading.close()
if (err.data && err.data.msg == "楠岃瘉鐮佹湁璇�") {
- this.$refs["phoneLogin"].fields[1].validateState = "error";
+ this.$refs["phoneLogin"].fields[1].validateState = "error"
setTimeout(() => {
if (document.querySelector(".el-form-item__error")) {
document.querySelector(".el-form-item__error").innerHTML =
- '<span class="iconfont error"></span>楠岃瘉鐮佷笉姝ｇ‘锛岃閲嶆柊杈撳叆';
+ '<span class="iconfont error"></span>楠岃瘉鐮佷笉姝ｇ‘锛岃閲嶆柊杈撳叆'
} else {
- this.$refs["phoneLogin"].fields[1].validateMessage =
- err.data.msg;
+ this.$refs["phoneLogin"].fields[1].validateMessage = err.data.msg
}
- document.querySelector(".phoneNum .el-input__inner").focus();
- }, 100);
+ document.querySelector(".phoneNum .el-input__inner").focus()
+ }, 100)
} else if (err.data.msg == "鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎") {
- this.$refs["userLogin"].fields[1].validateState = "error";
+ this.$refs["userLogin"].fields[1].validateState = "error"
setTimeout(() => {
if (document.querySelector(".el-form-item__error")) {
document.querySelector(".el-form-item__error").innerHTML =
- '<span class="iconfont error"></span>鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎';
+ '<span class="iconfont error"></span>鐢ㄦ埛鍚嶆垨瀵嗙爜鏈夎'
} else {
- this.$refs["userLogin"].fields[1].validateMessage =
- err.data.msg;
+ this.$refs["userLogin"].fields[1].validateMessage = err.data.msg
}
- document.querySelector(".phoneNum .el-input__inner").focus();
- }, 100);
+ document.querySelector(".phoneNum .el-input__inner").focus()
+ }, 100)
}
// this.$notify({
@@ -323,29 +300,29 @@
// offset: 57,
// });
// this.$refs.pwd.focus();
- });
+ })
// this.loading = false
},
forget() {
this.$router.push({
path: "/Register",
query: {
- isReset: true,
- },
- });
+ isReset: true
+ }
+ })
},
async getLoginUserData() {
- let json = await getLoginUserData();
+ let json = await getLoginUserData()
if (!json.error) {
// this.loading.close()
- sessionStorage.setItem("userInfo", JSON.stringify(json));
+ sessionStorage.setItem("userInfo", JSON.stringify(json))
this.$notify({
title: "鎻愮ず",
type: "success",
message: "鐧诲綍鎴愬姛锛�",
duration: 2500,
- offset: 57,
- });
+ offset: 57
+ })
/* 鍒ゆ柇褰撳墠鏄惁鍦ㄧ櫥褰曢〉锛屽鏋滃湪鐧诲綍椤� */
// if (window.location.href.indexOf('/login') !== -1) {
// router.push({
@@ -356,21 +333,21 @@
// })
// }
// await this.getMenuList();
- this.$router.push("/Layout/ProductCenter");
- return json;
+ this.$router.push("/Layout/ProductCenter")
+ return json
} else {
this.$notify({
title: "鎻愮ず",
type: "error",
message: "鐧诲綍澶辫触锛�",
duration: 2500,
- offset: 57,
- });
+ offset: 57
+ })
// this.loading.close()
}
- },
- },
-};
+ }
+ }
+}
</script>
<style lang="scss" scoped>
@@ -548,4 +525,4 @@
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.8.0