|
|
@@ -1,30 +1,68 @@
|
|
|
<template>
|
|
|
<div class="login-container">
|
|
|
- <div class="company-name" style="margin-top: -88px;margin-bottom: 90px;">
|
|
|
+ <div class="company-name" style="margin-top: -88px; margin-bottom: 90px">
|
|
|
<!-- <img src="./images/logo.png"> -->
|
|
|
<div class="shadow-font">马边县城市供水综合管理平台</div>
|
|
|
<!-- 马边县城市供水综合管理平台 -->
|
|
|
</div>
|
|
|
<div class="fill-container">
|
|
|
<div class="left">
|
|
|
- <img src="./images/supplierPipe.png">
|
|
|
+ <img src="./images/supplierPipe.png" />
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<div class="top">
|
|
|
<!-- <span>欢迎登录</span>
|
|
|
<span>智慧水务综合管理平台</span> -->
|
|
|
- <div class="left-img" style="width: 33%;float: left;margin-top: -14px;text-align: right;">
|
|
|
- <img src="./images/left.png">
|
|
|
+ <div
|
|
|
+ class="left-img"
|
|
|
+ style="
|
|
|
+ width: 33%;
|
|
|
+ float: left;
|
|
|
+ margin-top: -14px;
|
|
|
+ text-align: right;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img src="./images/left.png" />
|
|
|
</div>
|
|
|
- <div class="center-span" style="width: 34%;float: left;font-size: 24px;font-weight: bold;text-align: center;color: #2F75E7;">
|
|
|
+ <div
|
|
|
+ class="center-span"
|
|
|
+ style="
|
|
|
+ width: 34%;
|
|
|
+ float: left;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #2f75e7;
|
|
|
+ "
|
|
|
+ >
|
|
|
<span>欢迎登录</span>
|
|
|
</div>
|
|
|
- <div class="right-img" style="width: 33%;float: left;margin-top: -14px;">
|
|
|
- <img src="./images/right.png">
|
|
|
+ <div
|
|
|
+ class="right-img"
|
|
|
+ style="width: 33%; float: left; margin-top: -14px"
|
|
|
+ >
|
|
|
+ <img src="./images/right.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form middle" auto-complete="on" label-position="left">
|
|
|
- <el-input ref="username" v-model="loginForm.username" suffix-icon="el-icon-user" placeholder="请输入账号" name="username" type="text" class="form-input" tabindex="1" auto-complete="on" />
|
|
|
+ <el-form
|
|
|
+ ref="loginForm"
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ class="login-form middle"
|
|
|
+ auto-complete="on"
|
|
|
+ label-position="left"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ ref="username"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ suffix-icon="el-icon-user"
|
|
|
+ placeholder="请输入账号"
|
|
|
+ name="username"
|
|
|
+ type="text"
|
|
|
+ class="form-input"
|
|
|
+ tabindex="1"
|
|
|
+ auto-complete="on"
|
|
|
+ />
|
|
|
<el-input
|
|
|
:key="passwordType"
|
|
|
ref="password"
|
|
|
@@ -38,220 +76,287 @@
|
|
|
suffix-icon="el-icon-lock"
|
|
|
@keyup.enter.native="handleLogin"
|
|
|
/>
|
|
|
+ <div class="form-input">
|
|
|
+ <el-input
|
|
|
+ v-model="loginForm.verifyCode"
|
|
|
+ name="verifyCode"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ style="float: left; width: calc(100% - 189px)"
|
|
|
+ ></el-input>
|
|
|
+ <img
|
|
|
+ :src="captchaUrl"
|
|
|
+ @click="refreshCaptcha"
|
|
|
+ style="float: left; height: 34px; width: 188px; cursor: pointer"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</el-form>
|
|
|
- <el-button class="login-btn" :loading="loading" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
+ <el-button
|
|
|
+ class="login-btn"
|
|
|
+ :loading="loading"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-dialog title="密码修改" :visible.sync="passwordDialog" append-to-body width="520px" top="25vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
|
|
|
- <el-form ref="changePwdForm" :model="changePwd" :rules="pwdRules" label-width="100px" label-position="right">
|
|
|
+ <el-dialog
|
|
|
+ title="密码修改"
|
|
|
+ :visible.sync="passwordDialog"
|
|
|
+ append-to-body
|
|
|
+ width="520px"
|
|
|
+ top="25vh"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ :show-close="false"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ ref="changePwdForm"
|
|
|
+ :model="changePwd"
|
|
|
+ :rules="pwdRules"
|
|
|
+ label-width="100px"
|
|
|
+ label-position="right"
|
|
|
+ >
|
|
|
<el-form-item label="密码：" prop="pass" style="margin-bottom: 25px">
|
|
|
- <el-input v-model="changePwd.pass" autocomplete="off" type="password" placeholder="请输入密码" suffix-icon="el-icon-lock" />
|
|
|
+ <el-input
|
|
|
+ v-model="changePwd.pass"
|
|
|
+ autocomplete="off"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ suffix-icon="el-icon-lock"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="确认密码：" prop="checkPass">
|
|
|
- <el-input v-model="changePwd.checkPass" autocomplete="off" type="password" placeholder="请输入密码" suffix-icon="el-icon-lock" />
|
|
|
+ <el-input
|
|
|
+ v-model="changePwd.checkPass"
|
|
|
+ autocomplete="off"
|
|
|
+ type="password"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ suffix-icon="el-icon-lock"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template slot="footer">
|
|
|
<el-button @click="handleDialogBtnClick('cancel')">取消</el-button>
|
|
|
- <el-button type="primary" @click="handleDialogBtnClick('confirm')">确定</el-button>
|
|
|
+ <el-button type="primary" @click="handleDialogBtnClick('confirm')"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { userFirstLogin } from '@/api/user'
|
|
|
-import { changePassword } from '@/api/base'
|
|
|
-import { regPassword } from '@/utils/reg'
|
|
|
-const sha1Hex = require('sha1-hex')
|
|
|
+import { userFirstLogin } from "@/api/user";
|
|
|
+import { changePassword } from "@/api/base";
|
|
|
+import { regPassword } from "@/utils/reg";
|
|
|
+import { IP } from "@/utils/request.js";
|
|
|
+const sha1Hex = require("sha1-hex");
|
|
|
export default {
|
|
|
- name: 'Login',
|
|
|
+ name: "Login",
|
|
|
data() {
|
|
|
const validatePwd1st = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请输入密码！'))
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入密码！"));
|
|
|
} else {
|
|
|
- if (this.changePwd.pass !== '') {
|
|
|
+ if (this.changePwd.pass !== "") {
|
|
|
if (!regPassword().test(value)) {
|
|
|
- callback(new Error('密码位数8-16位，必须包含大小写字母和数字，不可包含非法字符！'))
|
|
|
- return
|
|
|
+ callback(
|
|
|
+ new Error(
|
|
|
+ "密码位数8-16位，必须包含大小写字母和数字，不可包含非法字符！"
|
|
|
+ )
|
|
|
+ );
|
|
|
+ return;
|
|
|
}
|
|
|
}
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
const validatePwd2nd = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请再次输入密码'))
|
|
|
- } else if (value !== this.changePwd.pass && value !== '') {
|
|
|
- callback(new Error('两次输入密码不一致！'))
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请再次输入密码"));
|
|
|
+ } else if (value !== this.changePwd.pass && value !== "") {
|
|
|
+ callback(new Error("两次输入密码不一致！"));
|
|
|
} else {
|
|
|
- callback()
|
|
|
+ callback();
|
|
|
}
|
|
|
- }
|
|
|
+ };
|
|
|
return {
|
|
|
- url: '@/assets/images/login/logo.png',
|
|
|
+ url: "@/assets/images/login/logo.png",
|
|
|
loginForm: {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
+ username: "",
|
|
|
+ password: "",
|
|
|
+ verifyCode: "",
|
|
|
},
|
|
|
loginRules: {
|
|
|
- username: [{ required: true, trigger: 'blur', message: '请输入账号' }],
|
|
|
- password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
|
|
|
+ username: [{ required: true, trigger: "blur", message: "请输入账号" }],
|
|
|
+ password: [{ required: true, trigger: "blur", message: "请输入密码" }],
|
|
|
+ verifyCode: [{ required: true, trigger: "blur", message: "请输入验证码" }],
|
|
|
},
|
|
|
loading: false,
|
|
|
- passwordType: 'password',
|
|
|
+ passwordType: "password",
|
|
|
redirect: undefined,
|
|
|
error: 1,
|
|
|
// warning: true,
|
|
|
- msg: '',
|
|
|
+ msg: "",
|
|
|
passwordDialog: false, // 重置密码用弹窗显隐控制
|
|
|
changePwd: {
|
|
|
- pass: '', // 重置密码用新密码
|
|
|
- checkPass: '' // 重置密码用确认密码
|
|
|
+ pass: "", // 重置密码用新密码
|
|
|
+ checkPass: "", // 重置密码用确认密码
|
|
|
},
|
|
|
pwdRules: {
|
|
|
- pass: [{ required: true, validator: validatePwd1st, trigger: 'blur' }],
|
|
|
- checkPass: [{ required: true, validator: validatePwd2nd, trigger: 'blur' }]
|
|
|
+ pass: [{ required: true, validator: validatePwd1st, trigger: "blur" }],
|
|
|
+ checkPass: [
|
|
|
+ { required: true, validator: validatePwd2nd, trigger: "blur" },
|
|
|
+ ],
|
|
|
},
|
|
|
- userId: ''
|
|
|
- }
|
|
|
+ userId: "",
|
|
|
+ captchaUrl: IP + "/auth/token/getVerifyCode",
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
sysTitle() {
|
|
|
- return this.$store.state.settings.sysTitle
|
|
|
- }
|
|
|
+ return this.$store.state.settings.sysTitle;
|
|
|
+ },
|
|
|
},
|
|
|
watch: {
|
|
|
$route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
},
|
|
|
- immediate: true
|
|
|
- }
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
// 是否显示密码
|
|
|
showPwd() {
|
|
|
- if (this.passwordType === 'password') {
|
|
|
- this.passwordType = 'text'
|
|
|
+ if (this.passwordType === "password") {
|
|
|
+ this.passwordType = "text";
|
|
|
} else {
|
|
|
- this.passwordType = 'password'
|
|
|
+ this.passwordType = "password";
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.password.focus()
|
|
|
- })
|
|
|
+ this.$refs.password.focus();
|
|
|
+ });
|
|
|
},
|
|
|
// 登录
|
|
|
handleLogin() {
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- this.loading = true
|
|
|
- this.$store.dispatch('user/login', this.loginForm).then(res => {
|
|
|
- const { id } = res.result
|
|
|
- // 判断是否首次登录或者重置过密码
|
|
|
- userFirstLogin(id).then(res => {
|
|
|
- // 先判断用户是否被禁用了 如果是申请的用户 还需要要判断是否同意申请了
|
|
|
- const { auditstatus, enableFlag } = res.result
|
|
|
- if (enableFlag === '0') {
|
|
|
- this.$message({
|
|
|
- message: '用户已被禁用，请先启用！',
|
|
|
- type: 'error'
|
|
|
+ this.loading = true;
|
|
|
+ this.$store
|
|
|
+ .dispatch("user/login", this.loginForm)
|
|
|
+ .then((res) => {
|
|
|
+ const { id } = res.result;
|
|
|
+ // 判断是否首次登录或者重置过密码
|
|
|
+ userFirstLogin(id)
|
|
|
+ .then((res) => {
|
|
|
+ // 先判断用户是否被禁用了 如果是申请的用户 还需要要判断是否同意申请了
|
|
|
+ const { auditstatus, enableFlag } = res.result;
|
|
|
+ if (enableFlag === "0") {
|
|
|
+ this.$message({
|
|
|
+ message: "用户已被禁用，请先启用！",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ //this.loading = false
|
|
|
+ sessionStorage.clear();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (auditstatus !== "2" && auditstatus !== null) {
|
|
|
+ this.$message({
|
|
|
+ message:
|
|
|
+ auditstatus === 1
|
|
|
+ ? "账户还未审核通过！"
|
|
|
+ : "账户审核未被通过！",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ //this.loading = false
|
|
|
+ sessionStorage.clear();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 是首次登录 打开弹窗 修改密码
|
|
|
+ if (res.result.firstlog === "1") {
|
|
|
+ this.userId = id;
|
|
|
+ this.passwordDialog = true;
|
|
|
+ // 清除掉用户id 防止用户没有修改密码刷新进入页面
|
|
|
+ sessionStorage.removeItem("userId");
|
|
|
+ this.$store.state.user.userId = undefined;
|
|
|
+ } else {
|
|
|
+ //this.loading = false
|
|
|
+ this.$router.push({ path: "/" });
|
|
|
+ }
|
|
|
})
|
|
|
- //this.loading = false
|
|
|
- sessionStorage.clear()
|
|
|
- return
|
|
|
- }
|
|
|
- if (auditstatus !== '2' && auditstatus !== null) {
|
|
|
- this.$message({
|
|
|
- message: auditstatus === 1 ? '账户还未审核通过！' : '账户审核未被通过！',
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
- //this.loading = false
|
|
|
- sessionStorage.clear()
|
|
|
- return
|
|
|
- }
|
|
|
- // 是首次登录 打开弹窗 修改密码
|
|
|
- if (res.result.firstlog === '1') {
|
|
|
- this.userId = id
|
|
|
- this.passwordDialog = true
|
|
|
- // 清除掉用户id 防止用户没有修改密码刷新进入页面
|
|
|
- sessionStorage.removeItem('userId')
|
|
|
- this.$store.state.user.userId = undefined
|
|
|
- } else {
|
|
|
- //this.loading = false
|
|
|
- this.$router.push({ path: '/' })
|
|
|
- }
|
|
|
- }).catch(() => {
|
|
|
- sessionStorage.clear()
|
|
|
- this.loading = false
|
|
|
+ .catch(() => {
|
|
|
+ sessionStorage.clear();
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ // this.$router.push({ path: '/' })
|
|
|
})
|
|
|
- // this.$router.push({ path: '/' })
|
|
|
- })
|
|
|
.catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
} else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
}
|
|
|
// this.$router.push('/dashboard')
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
// 修改密码弹窗
|
|
|
handleDialogBtnClick(type) {
|
|
|
- if (type === 'cancel') {
|
|
|
+ if (type === "cancel") {
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.changePwdForm.resetFields()
|
|
|
- })
|
|
|
- this.passwordDialog = false
|
|
|
- this.changePwd.pass = ''
|
|
|
- this.changePwd.checkPass = ''
|
|
|
- sessionStorage.clear()
|
|
|
- this.loading = false
|
|
|
+ this.$refs.changePwdForm.resetFields();
|
|
|
+ });
|
|
|
+ this.passwordDialog = false;
|
|
|
+ this.changePwd.pass = "";
|
|
|
+ this.changePwd.checkPass = "";
|
|
|
+ sessionStorage.clear();
|
|
|
+ this.loading = false;
|
|
|
} else {
|
|
|
- this.$refs.changePwdForm.validate(valid => {
|
|
|
+ this.$refs.changePwdForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- const originalPassword = '000000'
|
|
|
+ const originalPassword = "000000";
|
|
|
const data = {
|
|
|
originalPassword: sha1Hex(originalPassword),
|
|
|
id: this.userId,
|
|
|
firstlog: 0,
|
|
|
- password: sha1Hex(this.changePwd.checkPass)
|
|
|
- }
|
|
|
- changePassword(data).then(res => {
|
|
|
+ password: sha1Hex(this.changePwd.checkPass),
|
|
|
+ };
|
|
|
+ changePassword(data).then((res) => {
|
|
|
if (res.code !== -1) {
|
|
|
this.$message({
|
|
|
- message: '密码修改成功，请您重新登录！',
|
|
|
- type: 'success'
|
|
|
- })
|
|
|
- this.passwordDialog = false
|
|
|
- this.loading = false
|
|
|
- this.changePwd.pass = ''
|
|
|
- this.changePwd.checkPass = ''
|
|
|
- sessionStorage.clear()
|
|
|
+ message: "密码修改成功，请您重新登录！",
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.passwordDialog = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.changePwd.pass = "";
|
|
|
+ this.changePwd.checkPass = "";
|
|
|
+ sessionStorage.clear();
|
|
|
} else {
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.changePwdForm.resetFields()
|
|
|
- })
|
|
|
- this.passwordDialog = false
|
|
|
- this.loading = false
|
|
|
- this.changePwd.pass = ''
|
|
|
- this.changePwd.checkPass = ''
|
|
|
- sessionStorage.clear()
|
|
|
+ this.$refs.changePwdForm.resetFields();
|
|
|
+ });
|
|
|
+ this.passwordDialog = false;
|
|
|
+ this.loading = false;
|
|
|
+ this.changePwd.pass = "";
|
|
|
+ this.changePwd.checkPass = "";
|
|
|
+ sessionStorage.clear();
|
|
|
|
|
|
this.$message({
|
|
|
message: res.message,
|
|
|
- type: 'error'
|
|
|
- })
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
}
|
|
|
- })
|
|
|
- } else return false
|
|
|
- })
|
|
|
+ });
|
|
|
+ } else return false;
|
|
|
+ });
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ refreshCaptcha() {
|
|
|
+ this.captchaUrl = `${IP}/auth/token/getVerifyCode?t=${new Date().getTime()}`; // 加时间戳防止缓存
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -273,7 +378,8 @@ export default {
|
|
|
display: flex;
|
|
|
border-radius: 10px;
|
|
|
background-color: #ffffff;
|
|
|
- box-shadow: 3px 3px 4px linear-gradient(#333333 40%, #333333 60%, black 80%, blue 100%);
|
|
|
+ box-shadow: 3px 3px 4px
|
|
|
+ linear-gradient(#333333 40%, #333333 60%, black 80%, blue 100%);
|
|
|
.left {
|
|
|
flex: 1;
|
|
|
overflow: hidden;
|
|
|
@@ -296,22 +402,25 @@ export default {
|
|
|
margin-bottom: 52px;
|
|
|
> span {
|
|
|
line-height: 30px;
|
|
|
- &:nth-of-type(2){
|
|
|
+ &:nth-of-type(2) {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.middle {
|
|
|
width: 320px;
|
|
|
- height: 106px;
|
|
|
+ height: 126px;
|
|
|
margin-bottom: 80px;
|
|
|
- >.form-input {
|
|
|
+ > .form-input {
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
::v-deep input {
|
|
|
height: 36px;
|
|
|
}
|
|
|
- &:nth-of-type(2){
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ margin-top: 34px;
|
|
|
+ }
|
|
|
+ &:nth-of-type(3) {
|
|
|
margin-top: 34px;
|
|
|
}
|
|
|
}
|
|
|
@@ -323,7 +432,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
font-size: 16px;
|
|
|
background: #2d74e7;
|
|
|
- transition: background .3s linear;
|
|
|
+ transition: background 0.3s linear;
|
|
|
color: #ffffff;
|
|
|
&:hover {
|
|
|
background: #2467d3;
|
|
|
@@ -331,7 +440,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .shadow-font{
|
|
|
+ .shadow-font {
|
|
|
color: #ffffff;
|
|
|
font-size: 40px;
|
|
|
font-weight: bold;
|
tengmingxue