优化登录/切换公司

2022-12-14 16:05:06 +08:00 · 2022-12-14 16:05:06 +08:00 · f7399f0c6a
parent 2a0c34f7ad
commit f7399f0c6a
10 changed files with 273 additions and 123 deletions
--- a/.env.development
+++ b/.env.development
@ -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
--- a/src/application/mk/components/switchCompany/switchCompany.vue
+++ b/src/application/mk/components/switchCompany/switchCompany.vue
@ -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>
+  
--- a/src/application/mk/index.js
+++ b/src/application/mk/index.js
@ -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) 

    },

--- a/src/components/login/loginActions.vue
+++ b/src/components/login/loginActions.vue
@ -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>
+ 
--- a/src/layouts/header/HeaderAvatar.vue
+++ b/src/layouts/header/HeaderAvatar.vue
@ -1,59 +1,116 @@
 <template>
-  <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>
-    </div>
-    <a-menu :class="['avatar-menu']" slot="overlay">
-      <a-menu-item @click="adminUser">
-        <a-icon type="user"/>
-        <span>用户管理</span>
-      </a-menu-item>
-      <a-menu-divider />
-      <a-menu-item @click="logout">
-        <a-icon style="margin-right: 8px;" type="poweroff" />
-        <span>退出登录</span>
-      </a-menu-item>
-    </a-menu>
-  </a-dropdown>
+  <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>
+      </div>
+      <a-menu :class="['avatar-menu']" slot="overlay">
+        <a-menu-item @click="adminUser">
+          <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" />
+          <span>退出登录</span>
+        </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{
-    display: inline-flex;
-    .avatar, .name{
-      align-self: center;
-    }
-    .avatar{
-      margin-right: 8px;
-    }
-    .name{
-      font-weight: 500;
-    }
-  }
-  .avatar-menu{
-    width: 150px;
+.header-avatar {
+  display: inline-flex;
+
+  .avatar,
+  .name {
+    align-self: center;
  }

+  .avatar {
+    margin-right: 8px;
+  }
+
+  .name {
+    font-weight: 500;
+  }
+}
+
+.avatar-menu {
+  width: 150px;
+}
 </style>
--- a/src/layouts/header/HeaderNotice.vue
+++ b/src/layouts/header/HeaderNotice.vue
@ -37,6 +37,7 @@
      </a-badge>
    </span>
  </a-dropdown>
+ 
 </template>

 <script>
--- a/src/pages/login/Login.vue
+++ b/src/pages/login/Login.vue
@ -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
-        }
-      })
    }
  }
 }
--- a/src/services/base/api.js
+++ b/src/services/base/api.js
@ -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}, // 获取公司信息
--- a/src/services/base/user.js
+++ b/src/services/base/user.js
@ -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
 }
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -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