Mes
/
middle-admin-ant
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化登录/切换公司

This commit is contained in:
xielue 2022-12-14 16:05:06 +08:00
parent 2a0c34f7ad
commit f7399f0c6a
10 changed files with 273 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@ -1,4 +1,4 @@
VUE_APP_API_BASE_URL=http://zxx4.f3322.net:46000
VUE_APP_API_BASE_URL=http://192.168.31.166:46000
VUE_APP_USER_MODEL2=AdminUser
VUE_APP_USER_MODEL=BaseAdmin

44
src/application/mk/components/switchCompany/switchCompany.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<vxe-modal v-model="value" @confirm="confirmEvent" width="600" show-footer>
<template #title>
<span>选择公司</span>
</template>
<template #default>
<vxe-table ref="xTable" show-overflow auto-resize height="300" :rowConfig="{ isCurrent: true, isHover: true }"
:data="data">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="title" title="公司名"></vxe-column>
<vxe-column field="desc" title="描述"></vxe-column>
</vxe-table>
</template>
</vxe-modal>
</template>
<script>
export default {
name: "switchCompany",
props: {
value : {
type: Boolean,
default: false
},
data : {
type: Array
}
},
data() {
return {
};
},
methods: {
confirmEvent(){
let row = this.$refs.xTable.getCurrentRecord();
this.$emit("confirm",{row});
}
}
};
</script>

2
src/application/mk/index.js
View File

@ -8,6 +8,7 @@ import VXETable from 'vxe-table'
import MkGridSelect from './components/editors/MkGridSelect.vue'
import MkGridDataSelector from './components/editors/MkGridDataSelector.vue'
import MkFormDataSelector from './components/editors/MkFormDataSelector.vue'
import switchCompany from './components/switchCompany/switchCompany'
import XEUtils from 'xe-utils'
// 创建一个下拉表格渲染
@ -99,6 +100,7 @@ var mk = {
Vue.component(MkGridDataSelector.name, MkGridDataSelector)
Vue.component(MkGridSelect.name, MkGridSelect)
Vue.component(switchCompany.name, switchCompany)
},

104
src/components/login/loginActions.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div>
</div>
</template>
<script>
import { getUserInfo, getRoutesConfig, getPermission, getSettings, getCompany } from '@/services/base/user'
import { setAuthorization, setCompany } from '@/utils/request'
import { loadRoutes } from '@/utils/routerUtil'
import { mapMutations } from 'vuex'
import Cookie from 'js-cookie'
import { USER_MODEL } from '@/services/base/api.js';
//封装 登录的相关操作
export default {
name: 'loginActions',
components: { },
data() {
return {
logging: false,
error: '',
form: this.$form.createForm(this),
user: {
mobile: '18192398883',
password: '888888'
},
Project: [],
companyShow: false,
companyData: [],
company: Cookie.get('company'),
loginResult: null
}
},
computed: {
},
beforeMount() {
},
created() {
},
methods: {
...mapMutations('account', ['setUid', 'setUser', 'setPermissions', 'setRoutesConfig', 'setSettings', 'setCompany', 'setProject']),
isMiddleAdmin() {
return USER_MODEL == "AdminUser";
},
afterLoginSuccess({ token, access_expire, uid, msg = '登录成功',pushTo = '/dashboard/workplace' }) {
setAuthorization({ token: token, expireAt: new Date(access_expire * 1000) }) // 设置token
this.setUid(uid) // 设置用户id
getUserInfo().then(result => { // 获取用户信息
if (result.data.data != null) {
const UserInfo = result.data.data.user_info
this.setUser(UserInfo)
}
})
getPermission().then(result => { // 获取权限
if (result.data.data != null) {
const Permission = result.data.data.setPermissions
this.setPermissions(Permission)
}
})
getRoutesConfig().then(result => { // 获取路由配置
if (result.data.data != null) {
const routesConfig = result.data.data
this.setRoutesConfig(routesConfig)
loadRoutes([routesConfig])
this.$router.push(pushTo)
this.$message.success(msg, 3)
}
})
getSettings().then(result => { // 获取系统配置
if (result.data.data != null) {
const settings = result.data.data
this.setSettings(settings)
}
})
getCompany().then(result => { // 获取公司信息
if (result.data.data != null) {
const company = result.data.data
this.setCompany(company) // 将公司信息存入vuex
setCompany(company.company_info) // 将公司信息存入cookies
}
})
}
}
}
</script>
<style lang="less" scoped>
</style>

85
src/layouts/header/HeaderAvatar.vue
View File

@ -1,14 +1,22 @@
<template>
<div>
<a-dropdown>
<div class="header-avatar" style="cursor: pointer">
<a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
<span class="name">{{user.nickname}}</span>
<a-avatar class="avatar" size="small" shape="circle" :src="user.avatar" />
<span class="name">{{ user.nickname }}</span>
</div>
<a-menu :class="['avatar-menu']" slot="overlay">
<a-menu-item @click="adminUser">
<a-icon type="user"/>
<a-icon type="user" />
<span>用户管理</span>
</a-menu-item>
<a-menu-item @click="showCompany" v-if="!isMiddleAdmin()">
<a-icon type="compass" />
<span>切换公司</span>
</a-menu-item>
<a-menu-divider />
<a-menu-item @click="logout">
<a-icon style="margin-right: 8px;" type="poweroff" />
@ -16,44 +24,93 @@
</a-menu-item>
</a-menu>
</a-dropdown>
<switch-company v-model="companyShow" :data="companyData" @confirm="companyconfirm"
ref="switchCompany"></switch-company>
<login-actions ref="loginActions"></login-actions>
</div>
</template>
<script>
import {mapGetters} from 'vuex' // 加载vuex的mapGetters辅助函数
import {logout} from '@/services/base/user' // 加载退出登录的接口
import { mapGetters } from 'vuex' // 加载vuex的mapGetters辅助函数
import { logout } from '@/services/base/user' // 加载退出登录的接口
import LoginActions from '@/components/login/loginActions.vue'
import { switchCompany, companyList } from '@/services/base/user'
import { USER_MODEL } from '@/services/base/api.js';
export default {
name: 'HeaderAvatar', // 组件名称 头部头像
components: { LoginActions },
computed: {
...mapGetters('account', ['user']), // 获取用户信息
},
data() {
return {
companyShow: false,
companyData: []
};
},
methods: {
adminUser(){
adminUser() {
this.$router.push('/AdminUser/AdminUserList');
},
logout() { // 退出登录
logout() // 调用退出登录接口
this.$router.push('/login') // 跳转到登录页
},
showCompany() {
this.companyShow = true;
companyList().then(result => {
result = result.data;
this.companyData = result.data.company_switch;
});
},
isMiddleAdmin() {
return USER_MODEL == "AdminUser";
},
companyconfirm({ row }) {
if (!row) {
return;
}
this.companyShow = false;
switchCompany(row.id).then(result => {
result = result.data;
this.$refs.loginActions.afterLoginSuccess({
token: result.data.access_token,
access_expire: result.data.access_expire,
uid: result.data.uid,
msg: "切换成功"
});
});
}
}
}
</script>
<style lang="less">
.header-avatar{
.header-avatar {
display: inline-flex;
.avatar, .name{
.avatar,
.name {
align-self: center;
}
.avatar{
.avatar {
margin-right: 8px;
}
.name{
.name {
font-weight: 500;
}
}
.avatar-menu{
width: 150px;
}
}
.avatar-menu {
width: 150px;
}
</style>

1
src/layouts/header/HeaderNotice.vue
View File

@ -37,6 +37,7 @@
</a-badge>
</span>
</a-dropdown>
</template>
<script>

85
src/pages/login/Login.vue
View File

@ -29,9 +29,6 @@
</a-input>
</a-form-item>
<a-form-item v-if="false">
<a-input-search placeholder="选择公司" enter-button @search="onCompanySearch" />
</a-form-item>
@ -74,45 +71,29 @@
</div>
</a-form>
<vxe-modal v-model="companyShow" @confirm="confirmEvent" width="600" show-footer>
<template #title>
<span>选择公司</span>
</template>
<template #default>
<vxe-table ref="xTable" show-overflow auto-resize height="300" :rowConfig="{ isCurrent: true, isHover: true }"
:data="companyData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="title" title="公司名"></vxe-column>
<vxe-column field="desc" title="描述"></vxe-column>
</vxe-table>
</template>
</vxe-modal>
<switch-company v-model="companyShow" :data="companyData" @confirm="companyconfirm" ref="switchCompany" ></switch-company>
</div>
<login-actions ref="loginActions"></login-actions>
</common-layout>
</template>
<script>
import CommonLayout from '@/layouts/CommonLayout'
import { login, switchCompany, getUserInfo, getRoutesConfig, getPermission, getSettings, getCompany, getProject } from '@/services/base/user'
import { setAuthorization, setCompany } from '@/utils/request'
import { loadRoutes } from '@/utils/routerUtil'
import { login, switchCompany, getProject } from '@/services/base/user'
import { setAuthorization } from '@/utils/request'
import { mapMutations } from 'vuex'
import Cookie from 'js-cookie'
import { USER_MODEL } from '@/services/base/api.js';
import LoginActions from '@/components/login/loginActions.vue'
export default {
name: 'Login',
components: { CommonLayout },
components: { CommonLayout, LoginActions },
data() {
return {
logging: false,
@ -163,12 +144,8 @@ export default {
...mapMutations('account', ['setUid', 'setUser', 'setPermissions', 'setRoutesConfig', 'setSettings', 'setCompany', 'setProject']),
onCompanySearch() {
this.companyShow = true;
},
confirmEvent() {
let row = this.$refs.xTable.getCurrentRecord();
companyconfirm({row}) {
this.companyShow = false;
//没有选择公司，或者选择了第一个公司，直接登录
if (!row || row.id == this.companyData[0].id) {
this.afterLoginSuccess({
@ -201,7 +178,6 @@ export default {
},
isMiddleAdmin() {
console.log(USER_MODEL)
return USER_MODEL == "AdminUser";
},
onSubmit(e) {
@ -237,56 +213,15 @@ export default {
} else {
console.log("登录失败")
this.error = loginRes.message
this.error = loginRes.message || loginRes.msg
}
},
afterLoginSuccess({ token, access_expire, uid, loginResMsg }) {
setAuthorization({ token: token, expireAt: new Date(access_expire * 1000) }) // 设置token
this.$refs.loginActions.afterLoginSuccess({ token, access_expire, uid, msg :loginResMsg});
this.setUid(uid) // 设置用户id
getUserInfo().then(result => { // 获取用户信息
if (result.data.data != null) {
const UserInfo = result.data.data.user_info
this.setUser(UserInfo)
}
})
getPermission().then(result => { // 获取权限
if (result.data.data != null) {
const Permission = result.data.data.setPermissions
this.setPermissions(Permission)
}
})
getRoutesConfig().then(result => { // 获取路由配置
if (result.data.data != null) {
const routesConfig = result.data.data
this.setRoutesConfig(routesConfig)
loadRoutes([routesConfig])
this.$router.push('/dashboard/workplace')
this.$message.success(loginResMsg, 3)
}
})
getSettings().then(result => { // 获取系统配置
if (result.data.data != null) {
const settings = result.data.data
this.setSettings(settings)
}
})
getCompany().then(result => { // 获取公司信息
if (result.data.data != null) {
const company = result.data.data
this.setCompany(company) // 将公司信息存入vuex
setCompany(company.company_info) // 将公司信息存入cookies
}
})
}
}
}

1
src/services/base/api.js
View File

@ -16,6 +16,7 @@ module.exports = {
}, // 获取项目信息
LOGIN: {url:`${BASE_URL}/${USER_MODEL}/v1/login`, method:METHOD.POST}, // 登录
SWITCHCOMPANY: {url:`${BASE_URL}/${USER_MODEL}/v1/switch/company`, method:METHOD.POST}, // 登录
COMPANYLIST: {url:`${BASE_URL}/${USER_MODEL}/v1/user/company/list`, method:METHOD.POST}, // 登录
ROUTERS: {url:`${BASE_URL}/${USER_MODEL}/v1/routers`, method:METHOD.POST}, // 获取路由配置
USERINFO: {url:`${BASE_URL}/${USER_MODEL}/v1/userinfo`, method:METHOD.POST}, // 获取用户信息
COMPANY: {url:`${BASE_URL}/${USER_MODEL}/v1/company`, method:METHOD.POST}, // 获取公司信息

10
src/services/base/user.js
View File

@ -1,4 +1,4 @@
import { LOGIN, SWITCHCOMPANY , ROUTERS, USERINFO, PERMISSION, SETTINGS, PROJECT, COMPANY } from '@/services/base/api'
import { LOGIN, SWITCHCOMPANY ,COMPANYLIST , ROUTERS, USERINFO, PERMISSION, SETTINGS, PROJECT, COMPANY } from '@/services/base/api'
import { request, removeAuthorization } from '@/utils/request'
/**
* 登录服务
@ -35,7 +35,10 @@ export async function switchCompany(company_id) { // 获取用户信息
company_id: company_id
})
}
export async function companyList() { // 获取用户信息
return request(COMPANYLIST.url, COMPANYLIST.method, {
})
}
/**
* 获取路由配置
* @param uid
@ -118,5 +121,6 @@ export default {
getSettings,
getProject,
getCompany,
switchCompany
switchCompany,
companyList
}

2
src/utils/request.js
View File

@ -74,8 +74,10 @@ async function request(url, method, params, config) { // 请求方法
function setAuthorization(auth, authType = AUTH_TYPE.BEARER) { // 设置认证信息
switch (authType) {
case AUTH_TYPE.BEARER:
Cookie.set(xsrfHeaderName, 'Bearer ' + auth.token, {expires: auth.expireAt}) // 设置cookie中的认证信息// 设置axios请求头
// 如果 xsrfHeaderName 存在于 cookie 中，则设置到 axios 的请求头中
axios.defaults.headers.common[xsrfHeaderName] = Cookie.get(xsrfHeaderName)
break