Fix rbac (#1341)

* fix: 修改导航组件样式；组织组件分组文案颜色

* fix: 修复Select2组件没有处理array数据的问题, 触发场景比如(邀请用户的对话框)

Co-authored-by: “怀磊” <2280131253@qq.com>

src/components/FormFields/Select2.vue

@@ -143,10 +143,18 @@ export default {
       }
       const transformOption = this.ajax.transformOption || defaultTransformOption
       const defaultProcessResults = (data) => {
-        let results = data.results
+        let results = []
+        let more = false
+        let total = 0
+        if (Array.isArray(data)) {
+          results = data
+          total = data.length
+        } else if (typeof data === 'object') {
+          results = data.results
+          more = !!data.next
+          total = data.count
+        }
         results = results.map(transformOption)
-        const more = !!data.next
-        const total = data.count
         return { results: results, pagination: more, total: total }
       }
       const defaultAjax = {

src/i18n/langs/cn.json

@@ -1479,6 +1479,7 @@
     "Organization": {
       "AllOrganization": "所有组织",
       "OrganizationCreate": "创建组织",
+      "OrganizationLists": "组织列表",
       "OrganizationDetail": "组织详情",
       "OrganizationList": "组织管理",
       "OrganizationUpdate": "更新组织",

src/i18n/langs/en.json

@@ -1425,6 +1425,7 @@
     "Organization": {
       "AllOrganization": "All organization",
       "OrganizationCreate": "Create organization",
+      "OrganizationLists": "Organization lists",
       "OrganizationDetail": "Org detail",
       "OrganizationList": "Organizations",
       "OrganizationUpdate": "Update org",

src/layout/components/NavHeader/Organization.vue

@@ -14,6 +14,7 @@
       v-for="group in orgOption"
       :key="group.label"
       :label="group.label"
+      class="option-group"
     >
       <el-option
         v-for="item in group.options"
@@ -57,6 +58,9 @@ export default {
         options: [{
           id: 'create',
           name: this.$t('xpack.Organization.OrganizationCreate')
+        }, {
+          id: 'list',
+          name: this.$t('xpack.Organization.OrganizationLists')
         }]
       },
       {
@@ -68,6 +72,8 @@ export default {
   methods: {
     changeOrg(orgId) {
       if (orgId === 'create') {
+        this.$router.push('/settings/orgs/create')
+      } else if (orgId === 'list') {
         this.$router.push('/settings/orgs')
       } else {
         orgUtil.changeOrg(orgId)
@@ -87,7 +93,6 @@ export default {
     font-weight: 600;
     font-size: 15px;
     //border-top: solid 1px rgb(47, 64, 80);
-
     ::v-deep .el-input {
       input.el-input__inner {
         line-height: 55px;
@@ -108,7 +113,6 @@ export default {
     background: #E0E0E0;
     border-radius: 19px;
     color: #606266;
-    //margin-right: -15px;
     &:after {
       position: absolute;
       top: 15%;
@@ -132,4 +136,7 @@ export default {
       color: #606266;
     }
   }
+  .option-group >>> .el-select-group__title {
+    color: #909399 !important;
+  }
 </style>

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -74,12 +74,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.el-menu--popup-bottom-start{
-  margin-top: 130px;
-}
-
 .menu-main.el-menu {
   background-color: transparent;
+  // margin-top: -5px;
   ::v-deep .el-submenu .el-submenu__title {
     height: 55px;
     line-height: 55px;
@@ -129,9 +126,6 @@ export default {
   display: inline-block;
   font-size: 14px;
 }
-ul.el-menu--popup-bottom-start {
-  margin-top: 0!important;
-}
 .el-menu-item.is-active {
   font-weight: bold;
 }

src/styles/index.scss

@@ -161,3 +161,12 @@ input[type=file] {
 .el-tooltip__popper.is-dark {
   max-width: 60% !important;
 }
+
+.view-switcher {
+  .el-menu--popup-bottom-start {
+    margin-top: 0!important;
+  }
+  .el-menu--popup {
+    min-width: 70px!important;
+  }
+}

src/views/users/User/components/InviteUsersDialog.vue

@@ -58,7 +58,7 @@ export default {
               ajax: {
                 url: '/api/v1/rbac/roles/?scope=org',
                 transformOption: (item) => {
-                  return { label: `${item.name_display}`, value: item.id }
+                  return { label: `${item.name}`, value: item.id }
                 }
               }
             }