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. 479
      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;

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

@ -1,12 +1,13 @@
<template> <template>
<el-form class="login-form" <el-form
status-icon class="login-form"
:rules="loginRules" status-icon
ref="loginForm" :rules="loginRules"
:model="loginForm" ref="loginForm"
label-width="0" :model="loginForm"
label-position="top" label-width="0"
> label-position="top"
>
<!-- <el-form-item v-if="tenantMode" prop="tenantId" label="用户名"> <!-- <el-form-item v-if="tenantMode" prop="tenantId" label="用户名">
<el-input size="small" <el-input size="small"
@keyup.enter.native="handleLogin" @keyup.enter.native="handleLogin"
@ -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
@keyup.enter.native="handleLogin" size="small"
v-model="loginForm.username" @keyup.enter.native="handleLogin"
auto-complete="off" v-model="loginForm.username"
:placeholder="$t('login.username')"> auto-complete="off"
: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
@keyup.enter.native="handleLogin" size="small"
:type="passwordType" @keyup.enter.native="handleLogin"
v-model="loginForm.password" :type="passwordType"
auto-complete="off" v-model="loginForm.password"
:placeholder="$t('login.password')"> auto-complete="off"
<i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/> :placeholder="$t('login.password')"
>
<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,179 +63,209 @@
</el-row> </el-row>
</el-form-item> --> </el-form-item> -->
<el-form-item> <el-form-item>
<el-button type="primary" <el-button
size="small" type="primary"
@click.native.prevent="handleLogin" size="small"
class="login-submit">{{$t('login.submit')}} @click.native.prevent="handleLogin"
class="login-submit"
>{{ $t("login.submit") }}
</el-button> </el-button>
</el-form-item> </el-form-item>
<el-dialog title="用户信息选择" <el-dialog
append-to-body title="用户信息选择"
:visible.sync="userBox" append-to-body
width="350px"> :visible.sync="userBox"
<avue-form :option="userOption" v-model="userForm" @submit="submitLogin"/> width="350px"
>
<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 {
tenantMode: this.website.tenantMode, tenantMode: this.website.tenantMode,
rememberPwd: false, rememberPwd: false,
loginForm: { loginForm: {
//租户ID //租户ID
tenantId: "000000", tenantId: "000000",
//部门ID //部门ID
deptId: "", deptId: "",
//角色ID //角色ID
roleId: "", roleId: "",
//用户名 //用户名
username: "admin", username: "",
//密码 //密码
password: "admin", password: "",
//账号类型 //账号类型
type: "account", type: "account",
//验证码的值 //验证码的值
code: "", code: "",
//验证码的索引 //验证码的索引
key: "", key: "",
//预加载白色背景 //预加载白色背景
image: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", image:
}, "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
loginRules: { },
// tenantId: [ loginRules: {
// {required: false, message: "请输入租户ID", trigger: "blur"} // tenantId: [
// ], // {required: false, message: "请输入租户ID", trigger: "blur"}
username: [ // ],
{required: true, message: "请输入用户名", trigger: "blur"} username: [
], { required: true, message: "请输入用户名", trigger: "blur" },
password: [ ],
{required: true, message: "请输入密码", trigger: "blur"}, password: [
{min: 1, message: "密码长度最少为6位", trigger: "blur"} { required: true, message: "请输入密码", trigger: "blur" },
] { min: 1, message: "密码长度最少为6位", trigger: "blur" },
}, ],
passwordType: "password", },
userBox: false, passwordType: "password",
userForm: { userBox: false,
deptId: '', userForm: {
roleId: '' deptId: "",
}, roleId: "",
userOption: { },
labelWidth: 70, userOption: {
submitBtn: true, labelWidth: 70,
emptyBtn: false, submitBtn: true,
submitText: '登录', emptyBtn: false,
column: [ submitText: "登录",
{ column: [
label: '部门', {
prop: 'deptId', label: "部门",
type: 'select', prop: "deptId",
props: { type: "select",
label: 'deptName', props: {
value: 'id' label: "deptName",
}, value: "id",
dicUrl: '/api/blade-system/dept/select', },
span: 24, dicUrl: "/api/blade-system/dept/select",
display: false, span: 24,
rules: [{ display: false,
rules: [
{
required: true, required: true,
message: "请选择部门", message: "请选择部门",
trigger: "blur" trigger: "blur",
}],
},
{
label: '角色',
prop: 'roleId',
type: 'select',
props: {
label: 'roleName',
value: 'id'
}, },
dicUrl: '/api/blade-system/role/select', ],
span: 24, },
display: false, {
rules: [{ label: "角色",
prop: "roleId",
type: "select",
props: {
label: "roleName",
value: "id",
},
dicUrl: "/api/blade-system/role/select",
span: 24,
display: false,
rules: [
{
required: true, required: true,
message: "请选择角色", message: "请选择角色",
trigger: "blur" trigger: "blur",
}], },
}, ],
] },
} ],
}; },
}, };
created() { },
this.getTenant(); created() {
this.refreshCode(); this.getTenant();
this.refreshCode();
},
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: {
"loginForm.deptId"() {
const column = this.findObject(this.userOption.column, "deptId");
if (this.loginForm.deptId.includes(",")) {
column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
column.display = true;
} else {
column.dicUrl = "";
}
}, },
mounted() { "loginForm.roleId"() {
const column = this.findObject(this.userOption.column, "roleId");
if (this.loginForm.roleId.includes(",")) {
column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
column.display = true;
} else {
column.dicUrl = "";
}
}, },
watch: { },
'loginForm.deptId'() { computed: {
const column = this.findObject(this.userOption.column, "deptId"); ...mapGetters(["tagWel", "userInfo"]),
if (this.loginForm.deptId.includes(",")) { },
column.dicUrl = `/api/blade-system/dept/select?deptId=${this.loginForm.deptId}`; props: [],
column.display = true; methods: {
} else { refreshCode() {
column.dicUrl = ''; if (this.website.captchaMode) {
} getCaptcha().then((res) => {
}, const data = res.data;
'loginForm.roleId'() { this.loginForm.key = data.key;
const column = this.findObject(this.userOption.column, "roleId"); this.loginForm.image = data.image;
if (this.loginForm.roleId.includes(",")) { });
column.dicUrl = `/api/blade-system/role/select?roleId=${this.loginForm.roleId}`;
column.display = true;
} else {
column.dicUrl = '';
}
} }
}, },
computed: { showPassword() {
...mapGetters(["tagWel", "userInfo"]) this.passwordType === ""
? (this.passwordType = "password")
: (this.passwordType = "");
}, },
props: [], submitLogin(form, done) {
methods: { if (form.deptId !== "") {
refreshCode() { this.loginForm.deptId = form.deptId;
if (this.website.captchaMode) { }
getCaptcha().then(res => { if (form.roleId !== "") {
const data = res.data; this.loginForm.roleId = form.roleId;
this.loginForm.key = data.key; }
this.loginForm.image = data.image; this.handleLogin();
}) done();
} },
}, handleLogin() {
showPassword() { this.$refs.loginForm.validate((valid) => {
this.passwordType === "" if (valid) {
? (this.passwordType = "password") /* ------ 账号密码的存储 ------ */
: (this.passwordType = ""); if (this.rememberPwd) {
}, let password = Base64.encode(this.loginForm.password); // base64加密
submitLogin (form, done) { localStorage.setItem("username", this.loginForm.username);
if (form.deptId !== '') { localStorage.setItem("password", password);
this.loginForm.deptId = form.deptId; } else {
} localStorage.removeItem("username");
if (form.roleId !== '') { localStorage.removeItem("password");
this.loginForm.roleId = form.roleId; }
} const loading = this.$loading({
this.handleLogin(); lock: true,
done(); text: "登录中,请稍后。。。",
}, spinner: "el-icon-loading",
handleLogin() { });
this.$refs.loginForm.validate(valid => { this.$store
if (valid) { .dispatch("LoginByUsername", this.loginForm)
const loading = this.$loading({ .then(() => {
lock: true,
text: '登录中,请稍后。。。',
spinner: "el-icon-loading"
});
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,31 +279,77 @@
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();
}); });
} }
}); });
}, },
getTenant() { getTenant() {
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