fix:Tenant selection problem (#1512)

Co-authored-by: 吹泡泡的团子 <baoxinyi_i@didiglobal.com>

threadpool/console/src/layout/components/Navbar.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
-               @toggleClick="toggleSideBar"/>
+      @toggleClick="toggleSideBar" />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container"/>
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
 
     <div class="right-menu">
-      <template v-if="device!=='mobile'">
+      <template v-if="device !== 'mobile'">
         <!--        <search id="header-search" class="right-menu-item" />-->
 
         <!-- <error-log class="errLog-container right-menu-item hover-effect"/> -->
@@ -16,26 +16,19 @@
         <!--        <el-tooltip content="Global Size" effect="dark" placement="bottom">-->
         <!--          <size-select id="size-select" class="right-menu-item hover-effect" />-->
         <!--        </el-tooltip>-->
-        
+
       </template>
-      <el-select class="select-tenant" v-model="tenant.index" filterable @change="changeTenant">
+      <el-select v-model="currentTenant" class="select-tenant" @change="changeTenant">
-        <el-option
+        <el-option v-for="item in tenantList" :key="item.tenantId" :label="item.resource" :value="item.tenantId">
-          v-for="(item, index) in tenantList"
-          :key="index"
-          :label="item.resource"
-          :value="item.index">
         </el-option>
       </el-select>
       <langChange />
       <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img src="../../../public/hippo4j.gif" class="user-avatar">
-          <i class="el-icon-caret-bottom"/>
+          <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <!--<router-link to="/profile/index">
-            <el-dropdown-item>Profile</el-dropdown-item>
-          </router-link>-->
           <router-link to="/">
             <el-dropdown-item>{{ this.$t('menu.dashboard') }}</el-dropdown-item>
           </router-link>
@@ -49,211 +42,185 @@
 </template>
 
 <script>
-  import * as jobProjectApi from '@/api/hippo4j-tenant';
+import * as user from '@/api/hippo4j-user';
-  import * as user from '@/api/hippo4j-user';
+import { mapGetters } from 'vuex'
-  import { mapGetters, mapState } from 'vuex'
+import Breadcrumb from '@/components/Breadcrumb'
-  import Breadcrumb from '@/components/Breadcrumb'
+import Hamburger from '@/components/Hamburger'
-  import Hamburger from '@/components/Hamburger'
+import langChange from '@/locale/langChange'
-  import ErrorLog from '@/components/ErrorLog'
+
-  import langChange from '@/locale/langChange'
+export default {
-  import { i18nConfig } from '@/locale/config'
+  components: {
-
+    Breadcrumb,
-  export default {
+    Hamburger,
-    data() {
+    langChange
-      return {
+  },
-        tenant: {
+  data() {
-          action: '',
+    return {
-          resource: '',
+      tenant: {
-          username: ''
+        action: '',
-        },
+        resource: '',
-      }
+        username: ''
-    },
+      },
-    components: {
+      currentTenant: undefined
-      Breadcrumb,
+    }
-      Hamburger,
+  },
-      ErrorLog,
+  computed: {
-      langChange
+    ...mapGetters([
+      'sidebar',
+      'avatar',
+      'device',
+      'tenantList',
+      'tenantInfo'
+    ])
+  },
+  mounted() {
+    this.getTenantList()
+  },
+
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
     },
-    computed: {
+    async logout() {
-      ...mapGetters([
+      this.$cookie.delete('userName')
-        'sidebar',
+      this.$cookie.delete('tenantInfo')
-        'avatar',
+      await this.$store.dispatch('user/logout')
-        'device',
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-        'tenantList',
-        'tenantInfo'
-      ])
     },
-    watch: {
+    async getTenantList() {
-      tenantInfo(newVal) {
+      const userName = this.$cookie.get('userName')
-        this.tenant.tenantId = newVal.tenantId
+      await user
-        this.tenant.resource = newVal.resource
-        console.log("ischangLang", newVal, this.tenantList)
-      }
-    },
-    methods: {
-      toggleSideBar() {
-        this.$store.dispatch('app/toggleSideBar')
-      },
-      async logout() {
-        this.$cookie.delete('userName')
-        this.$cookie.delete('tenantInfo')
-        await this.$store.dispatch('user/logout')
-        this.$router.push(`/login?redirect=${this.$route.fullPath}`)
-      },
-      async getTenantList() {
-        const userName = this.$cookie.get('userName')
-        await user
         .getCurrentUser(userName)
         .then((response) => {
           const { resources } = response;
-        console.log("isTenList1", resources, this.tenantList)
+          let resourcesRes = resources.map((item) => {
+            let query = {
+              ...item,
+              tenantId: item.resource,
+            }
+            return query
+          })
           if (response.role == 'ROLE_ADMIN') {
-            resources.unshift({
+            resourcesRes = [{
               action: "rw",
               resource: this.$t('common.allTenant'),
               username: userName,
               tenantId: this.$t('common.allTenant'),
-              index: 0,
+            }, ...resourcesRes]
-            })
           }
-        console.log("isTenList1111111", this.$t('common.allTenant'), resources, this.tenantList)
+
-          const resourcesRes = resources.map((item, index) => {
-            let query = {
-              ...item,
-            tenantId: item.resource,
-            index: index,
-            }
-            console.log("=============", index, query, item)
-            return query
-        })
-        console.log("isTenList22222", resourcesRes, this.tenantList)
           this.$store.dispatch('tenant/setTenantList', resourcesRes)
           this.tenant = JSON.parse(this.$cookie.get('tenantInfo')) || resourcesRes[0]
-          this.$store.dispatch('tenant/setTenantInfo', this.tenant || resourcesRes[0])
+          this.$store.dispatch('tenant/setTenantInfo', resourcesRes[0])
           this.$cookie.set('tenantInfo', JSON.stringify(this.tenant));
-        console.log("isTenList2", this.tenantList)
+          this.currentTenant = resourcesRes[0]?.tenantId
+          // console.log('resourceRes:::', this.tenantInfo, this.tenantList)
         })
-        .catch(() => {});
+        .catch(() => { });
-        
+
-      },
-      async changeTenant(index) {
-        console.log("isTenList", this.tenantList)
-        let tenant = {
-          tenantId: this.tenantList[index].resource,
-          resource: this.tenantList[index].resource,
-          index: this.tenantList[index].index,
-          current: 1,
-          desc: true,
-          size: 10,
-        }
-        this.$store.dispatch('tenant/setTenantInfo', tenant)
-        this.$cookie.set('tenantInfo', JSON.stringify(tenant));
-        let isAllTenant = tenant.tenantId == i18nConfig.messages.zh.common.allTenant || tenant.tenantId == i18nConfig.messages.en.common.allTenant
-        tenant.tenantId = isAllTenant ? '' : tenant.tenantId
-        await jobProjectApi.list(tenant).then((response) => {
-          console.log("isRes", response)
-          // this.$store.dispatch('tenant/setTenantList', resources)
-        });
-      }
-    },
-    async mounted() {
-      this.getTenantList()
     },
-  }
+    changeTenant(id) {
+      const tenant = this.tenantList.find(item => item.tenantId === id)
+      this.currentTenant = id
+      this.$store.dispatch('tenant/setTenantInfo', tenant)
+    }
+  },
+}
 </script>
 
 <style lang="scss" scoped>
-  .navbar {
+.navbar {
-    height: 50px;
+  height: 50px;
-    overflow: hidden;
+  overflow: hidden;
-    position: relative;
+  position: relative;
-    background: #fff;
+  background: #fff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
 
-    .hamburger-container {
+  .breadcrumb-container {
-      line-height: 46px;
+    float: left;
-      height: 100%;
+  }
-      float: left;
-      cursor: pointer;
-      transition: background 0.3s;
-      -webkit-tap-highlight-color: transparent;
 
-      &:hover {
+  .errLog-container {
-        background: rgba(0, 0, 0, 0.025);
+    display: inline-block;
-      }
+    vertical-align: top;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+    display: flex;
+
+    &:focus {
+      outline: none;
     }
 
-    .breadcrumb-container {
+    ::v-deep .el-input__inner {
-      float: left;
+      border: none;
+      box-shadow: none;
     }
 
-    .errLog-container {
+    .select-tenant {
-      display: inline-block;
+      margin-right: 20px;
-      vertical-align: top;
+      border: 0;
+      width: 150px;
     }
 
-    .right-menu {
+
-      float: right;
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
       height: 100%;
-      line-height: 50px;
+      font-size: 18px;
-      display: flex;
+      color: #5a5e66;
-      &:focus {
+      vertical-align: text-bottom;
-        outline: none;
-      }
 
-      ::v-deep  .el-input__inner {
+      &.hover-effect {
-        border: none;
+        cursor: pointer;
-        box-shadow: none;
+        transition: background 0.3s;
-      }
 
-      .select-tenant {
+        &:hover {
-        margin-right: 20px;
+          background: rgba(0, 0, 0, 0.025);
-        border: 0;
+        }
-        width: 150px;
       }
+    }
 
+    .avatar-container {
+      margin-right: 30px;
 
-      .right-menu-item {
+      .avatar-wrapper {
-        display: inline-block;
+        margin-top: 5px;
-        padding: 0 8px;
+        position: relative;
-        height: 100%;
-        font-size: 18px;
-        color: #5a5e66;
-        vertical-align: text-bottom;
 
-        &.hover-effect {
+        .user-avatar {
           cursor: pointer;
-          transition: background 0.3s;
+          width: 40px;
-
+          height: 40px;
-          &:hover {
+          border-radius: 10px;
-            background: rgba(0, 0, 0, 0.025);
-          }
         }
-      }
 
-      .avatar-container {
+        .el-icon-caret-bottom {
-        margin-right: 30px;
+          cursor: pointer;
-
+          position: absolute;
-        .avatar-wrapper {
+          right: -20px;
-          margin-top: 5px;
+          top: 25px;
-          position: relative;
+          font-size: 12px;
-
-          .user-avatar {
-            cursor: pointer;
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-          }
-
-          .el-icon-caret-bottom {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
         }
       }
     }
   }
-</style>
+}
+</style>