suojin
/
workorder_front
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

登录

Browse Source
main
赵培友 3 years ago
parent 09bf6e9d58
commit 7890467511
5 changed files with 348 additions and 261 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/page/index/logo.vue
  2. 55
      src/page/index/top/index.vue
  3. 225
      src/page/login/userlogin.vue
  4. 43
      src/styles/login.scss
  5. 2
      src/styles/sidebar.scss

30
src/page/index/logo.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="avue-logo"> <div class="avue-logo">
<transition name="fade"> <!-- <transition name="fade">
<span v-if="keyCollapse" <span v-if="keyCollapse"
class="avue-logo_subtitle" class="avue-logo_subtitle"
key="0"> key="0">
@ -12,7 +12,9 @@
<span class="avue-logo_title" <span class="avue-logo_title"
key="1">{{website.indexTitle}} </span> key="1">{{website.indexTitle}} </span>
</template> </template>
</transition-group> </transition-group> -->
<div class="logo">logo</div>
<div class="title">运维管理系统</div>
</div> </div>
</template> </template>
@ -47,27 +49,23 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
width: 240px; width: 240px;
height: 64px; height: 92px;
line-height: 64px; line-height: 64px;
background-color: #20222a;
font-size: 20px; font-size: 20px;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
z-index: 1024; z-index: 1024;
&_title { display: flex;
display: block; .logo {
text-align: center; width: 90px;
font-weight: 300; background: skyblue;
font-size: 20px;
} }
&_subtitle { .title {
display: block; line-height: 92px;
text-align: center; font-size: 20px;
font-size: 18px; padding-left: 10px;
font-weight: bold; box-sizing: border-box;
color: #fff;
} }
} }
</style> </style>

55
src/page/index/top/index.vue
Unescape View File

@ -2,17 +2,64 @@
<div class="avue-top"> <div class="avue-top">
<div class="top-left">{{tag.label}}</div> <div class="top-left">{{tag.label}}</div>
<div class="top-right"> <div class="top-right">
<div class="avatar"></div> <div class="avatar">
<i class="el-icon-arrow-down"></i> <img :src="userInfo.avatar" alt="" width="56px" height="56px">
</div>
<el-dropdown >
<span class="el-dropdown-link">
<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
</el-dropdown-item>
<el-dropdown-item v-if="this.website.switchMode" @click.native="switchDept"
>{{$t('navbar.switchDept')}}
</el-dropdown-item>
<el-dropdown-item @click.native="logout"
divided>{{$t('navbar.logOut')}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { resetRouter } from '@/router/router'
export default { export default {
name: "top",
data () {
return {
}
},
filters: {},
created () {
},
mounted () {
console.log(this.userInfo)
},
computed: { computed: {
...mapGetters(["tagWel", "tagList", "tag", "website"]), ...mapGetters([
"userInfo",
"tag",
])
}, },
methods: {
logout () {
this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
confirmButtonText: this.$t("submitText"),
cancelButtonText: this.$t("cancelText"),
type: "warning"
}).then(() => {
this.$store.dispatch("LogOut").then(() => {
resetRouter()
this.$router.push({ path: "/login" })
})
})
}
}
}; };
</script> </script>
@ -29,8 +76,8 @@ export default {
width: 56px; width: 56px;
height: 56px; height: 56px;
border-radius: 50%; border-radius: 50%;
background: skyblue;
margin-right: 18px; margin-right: 18px;
border: 2px solid #fff;
} }
i { i {
font-style: normal; font-style: normal;

225
src/page/login/userlogin.vue
Unescape View File

@ -1,5 +1,6 @@
<template> <template>
<el-form class="login-form" <el-form
class="login-form"
status-icon status-icon
:rules="loginRules" :rules="loginRules"
ref="loginForm" ref="loginForm"
@ -16,21 +17,29 @@
</el-input> </el-input>
</el-form-item> --> </el-form-item> -->
<el-form-item prop="username" label="用户名"> <el-form-item prop="username" label="用户名">
<el-input size="small" <el-input
size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
v-model="loginForm.username" v-model="loginForm.username"
auto-complete="off" auto-complete="off"
:placeholder="$t('login.username')"> :placeholder="$t('login.username')"
>
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password" label="密码"> <el-form-item prop="password" label="密码">
<el-input size="small" <el-input
size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
:type="passwordType" :type="passwordType"
v-model="loginForm.password" v-model="loginForm.password"
auto-complete="off" auto-complete="off"
:placeholder="$t('login.password')"> :placeholder="$t('login.password')"
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/> >
<i
class="el-icon-view el-input__icon"
slot="suffix"
@click="showPassword"
/>
</el-input> </el-input>
</el-form-item> </el-form-item>
<div><el-checkbox v-model="rememberPwd">记住密码</el-checkbox></div> <div><el-checkbox v-model="rememberPwd">记住密码</el-checkbox></div>
@ -54,28 +63,36 @@
</el-row> </el-row>
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button type="primary" <el-button
type="primary"
size="small" size="small"
@click.native.prevent="handleLogin" @click.native.prevent="handleLogin"
class="login-submit">{{$t('login.submit')}} class="login-submit"
>{{ $t("login.submit") }}
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-dialog title="用户信息选择" <el-dialog
title="用户信息选择"
append-to-body append-to-body
:visible.sync="userBox" :visible.sync="userBox"
width="350px"> width="350px"
<avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/> >
<avue-form
:option="userOption"
v-model="userForm"
@submit="submitLogin"
/>
</el-dialog> </el-dialog>
</el-form> </el-form>
</template> </template>
<script> <script>
import {mapGetters} from "vuex"; import { mapGetters } from "vuex";
import {info} from "@/api/system/tenant"; import { info } from "@/api/system/tenant";
import {getCaptcha} from "@/api/user"; import { getCaptcha } from "@/api/user";
import {getTopUrl} from "@/util/util"; import { getTopUrl } from "@/util/util";
import { Base64 } from 'js-base64';
export default { export default {
name: "userlogin", name: "userlogin",
data() { data() {
return { return {
@ -89,9 +106,9 @@
//角色ID //角色ID
roleId: "", roleId: "",
//用户名 //用户名
username: "admin", username: "",
//密码 //密码
password: "admin", password: "",
//账号类型 //账号类型
type: "account", type: "account",
//验证码的值 //验证码的值
@ -99,68 +116,73 @@
//验证码的索引 //验证码的索引
key: "", key: "",
//预加载白色背景 //预加载白色背景
image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", image:
"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
}, },
loginRules: { loginRules: {
// tenantId: [ // tenantId: [
// {required: false, message: "请输入租户ID", trigger: "blur"} // {required: false, message: "请输入租户ID", trigger: "blur"}
// ], // ],
username: [ username: [
{required: true, message: "请输入用户名", trigger: "blur"} { required: true, message: "请输入用户名", trigger: "blur" },
], ],
password: [ password: [
{required: true, message: "请输入密码", trigger: "blur"}, { required: true, message: "请输入密码", trigger: "blur" },
{min: 1, message: "密码长度最少为6位", trigger: "blur"} { min: 1, message: "密码长度最少为6位", trigger: "blur" },
] ],
}, },
passwordType: "password", passwordType: "password",
userBox: false, userBox: false,
userForm: { userForm: {
deptId: '', deptId: "",
roleId: '' roleId: "",
}, },
userOption: { userOption: {
labelWidth: 70, labelWidth: 70,
submitBtn: true, submitBtn: true,
emptyBtn: false, emptyBtn: false,
submitText: '登录', submitText: "登录",
column: [ column: [
{ {
label: '部门', label: "部门",
prop: 'deptId', prop: "deptId",
type: 'select', type: "select",
props: { props: {
label: 'deptName', label: "deptName",
value: 'id' value: "id",
}, },
dicUrl: '/api/blade-system/dept/select', dicUrl: "/api/blade-system/dept/select",
span: 24, span: 24,
display: false, display: false,
rules: [{ rules: [
{
required: true, required: true,
message: "请选择部门", message: "请选择部门",
trigger: "blur" trigger: "blur",
}], },
],
}, },
{ {
label: '角色', label: "角色",
prop: 'roleId', prop: "roleId",
type: 'select', type: "select",
props: { props: {
label: 'roleName', label: "roleName",
value: 'id' value: "id",
}, },
dicUrl: '/api/blade-system/role/select', dicUrl: "/api/blade-system/role/select",
span: 24, span: 24,
display: false, display: false,
rules: [{ rules: [
{
required: true, required: true,
message: "请选择角色", message: "请选择角色",
trigger: "blur" trigger: "blur",
}], },
],
},
],
}, },
]
}
}; };
}, },
created() { created() {
@ -168,39 +190,45 @@
this.refreshCode(); this.refreshCode();
}, },
mounted() { mounted() {
let username = localStorage.getItem("username");
if (username) {
this.loginForm.username = localStorage.getItem("username");
this.loginForm.password = Base64.decode(localStorage.getItem("password")); // base64解密
this.rememberPwd = true;
}
}, },
watch: { watch: {
'loginForm.deptId'() { "loginForm.deptId"() {
const column = this.findObject(this.userOption.column, "deptId"); const column = this.findObject(this.userOption.column, "deptId");
if (this.loginForm.deptId.includes(",")) { if (this.loginForm.deptId.includes(",")) {
column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`; column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
column.display = true; column.display = true;
} else { } else {
column.dicUrl = ''; column.dicUrl = "";
} }
}, },
'loginForm.roleId'() { "loginForm.roleId"() {
const column = this.findObject(this.userOption.column, "roleId"); const column = this.findObject(this.userOption.column, "roleId");
if (this.loginForm.roleId.includes(",")) { if (this.loginForm.roleId.includes(",")) {
column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`; column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
column.display = true; column.display = true;
} else { } else {
column.dicUrl = ''; column.dicUrl = "";
}
} }
}, },
},
computed: { computed: {
...mapGetters(["tagWel", "userInfo"]) ...mapGetters(["tagWel", "userInfo"]),
}, },
props: [], props: [],
methods: { methods: {
refreshCode() { refreshCode() {
if (this.website.captchaMode) { if (this.website.captchaMode) {
getCaptcha().then(res => { getCaptcha().then((res) => {
const data = res.data; const data = res.data;
this.loginForm.key = data.key; this.loginForm.key = data.key;
this.loginForm.image = data.image; this.loginForm.image = data.image;
}) });
} }
}, },
showPassword() { showPassword() {
@ -208,25 +236,36 @@
? (this.passwordType = "password") ? (this.passwordType = "password")
: (this.passwordType = ""); : (this.passwordType = "");
}, },
submitLogin (form, done) { submitLogin(form, done) {
if (form.deptId !== '') { if (form.deptId !== "") {
this.loginForm.deptId = form.deptId; this.loginForm.deptId = form.deptId;
} }
if (form.roleId !== '') { if (form.roleId !== "") {
this.loginForm.roleId = form.roleId; this.loginForm.roleId = form.roleId;
} }
this.handleLogin(); this.handleLogin();
done(); done();
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
/* ------ 账号密码的存储 ------ */
if (this.rememberPwd) {
let password = Base64.encode(this.loginForm.password); // base64加密
localStorage.setItem("username", this.loginForm.username);
localStorage.setItem("password", password);
} else {
localStorage.removeItem("username");
localStorage.removeItem("password");
}
const loading = this.$loading({ const loading = this.$loading({
lock: true, lock: true,
text: '登录中,请稍后。。。', text: "登录中,请稍后。。。",
spinner: "el-icon-loading" spinner: "el-icon-loading",
}); });
this.$store.dispatch("LoginByUsername", this.loginForm).then(() => { this.$store
.dispatch("LoginByUsername", this.loginForm)
.then(() => {
if (this.website.switchMode) { if (this.website.switchMode) {
const deptId = this.userInfo.dept_id; const deptId = this.userInfo.dept_id;
const roleId = this.userInfo.role_id; const roleId = this.userInfo.role_id;
@ -240,9 +279,10 @@
return false; return false;
} }
} }
this.$router.push({path: this.tagWel.value}); this.$router.push({ path: this.tagWel.value });
loading.close(); loading.close();
}).catch(() => { })
.catch(() => {
loading.close(); loading.close();
this.refreshCode(); this.refreshCode();
}); });
@ -253,18 +293,63 @@
let domain = getTopUrl(); let domain = getTopUrl();
// 临时指定域名，方便测试 // 临时指定域名，方便测试
//domain = "https://bladex.vip"; //domain = "https://bladex.vip";
info(domain).then(res => { info(domain).then((res) => {
const data = res.data; const data = res.data;
if (data.success && data.data.tenantId) { if (data.success && data.data.tenantId) {
this.tenantMode = false; this.tenantMode = false;
this.loginForm.tenantId = data.data.tenantId; this.loginForm.tenantId = data.data.tenantId;
this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`; this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
} }
}) });
} },
} },
}; };
</script> </script>
<style> <style lang="scss" scoped>
.login-submit {
width: 100%;
height: 50px;
background: #2e92f6;
font-size: 16px;
color: #fff;
letter-spacing: 2px;
cursor: pointer;
margin-top: 50px;
font-family: "neo";
transition: 0.25s;
}
.login-form {
margin: 10px 0;
i {
position: absolute;
right: 6px;
}
}
/deep/ .el-input--small .el-input__inner {
width: 330px;
height: 50px;
line-height: 50px;
border-radius: 3px 3px 3px 3px;
color: #333;
position: relative;
}
/deep/ .el-form--label-top .el-form-item__label {
font-size: 16px;
color: #333;
padding: 0 !important;
}
/deep/ .el-form-item__label:before {
display: none;
}
/deep/ .el-checkbox__inner {
border-color: #999;
}
/deep/ .el-checkbox__label {
color: #999;
}
/deep/ .el-input__validateIcon {
display: none;
}
</style> </style>

43
src/styles/login.scss
Unescape View File

@ -81,46 +81,3 @@
margin-bottom: 46px; margin-bottom: 46px;
} }
.login-submit {
width: 100%;
height: 50px;
background: #2E92F6;
font-size: 16px;
color: #fff;
letter-spacing: 2px;
cursor: pointer;
margin-top: 50px;
font-family: "neo";
transition: 0.25s;
}
.login-form {
margin: 10px 0;
i {
position: absolute;
right: 6px;
}
}
.el-input--small .el-input__inner {
width: 330px;
height: 50px;
line-height: 50px;
border-radius: 3px 3px 3px 3px;
color: #333;
position: relative;
}
.el-form--label-top .el-form-item__label {
font-size: 16px;
color: #333;
padding: 0!important;
}
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
display: none;
}
.el-checkbox__inner {
border-color: #999;
}
.el-checkbox__label {
color: #999;
}

2
src/styles/sidebar.scss
Unescape View File

@ -32,7 +32,7 @@
.avue-sidebar { .avue-sidebar {
user-select: none; user-select: none;
position: relative; position: relative;
padding-top: 60px; padding-top: 92px;
height: 100%; height: 100%;
position: relative; position: relative;
background-color: #20222a; background-color: #20222a;

Write Preview
Loading…
Cancel
Save