refactor: role add user count

ui/src/api/type/role.ts

@@ -6,6 +6,7 @@ interface RoleItem {
   type: RoleTypeEnum,
   create_user: string,
   internal: boolean,
+  user_count?: number,
 }
 
 interface ChildrenPermissionItem {
@@ -65,4 +66,4 @@ interface FormItemModel {
   }
 }
 
-export type { RoleItem, FormItemModel, RolePermissionItem, RoleTableDataItem, CreateOrUpdateParams, ChildrenPermissionItem, RoleMemberItem, CreateMemberParamsItem }
+export type { RoleItem, FormItemModel, RolePermissionItem, RoleTableDataItem, CreateOrUpdateParams, ChildrenPermissionItem, RoleMemberItem, CreateMemberParamsItem }

ui/src/api/type/workspace.ts

@@ -1,6 +1,7 @@
 interface WorkspaceItem {
   name: string,
-  id?: string
+  id?: string,
+  user_count?: number,
 }
 
 interface CreateWorkspaceMemberParamsItem {
@@ -16,4 +17,4 @@ interface WorkspaceMemberItem {
   role_id: string,
   role_name: string,
 }
-export type { WorkspaceItem, CreateWorkspaceMemberParamsItem, WorkspaceMemberItem }
+export type { WorkspaceItem, CreateWorkspaceMemberParamsItem, WorkspaceMemberItem }

ui/src/views/role/component/Member.vue

@@ -6,23 +6,26 @@
       </el-button>
       <div class="flex complex-search">
         <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
-          <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
+          <el-option :label="$t('views.login.loginForm.username.label')" value="username"/>
         </el-select>
         <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
-          :placeholder="$t('common.inputPlaceholder')" style="width: 220px" clearable />
+                  :placeholder="$t('common.inputPlaceholder')" style="width: 220px" clearable/>
       </div>
     </div>
-    <app-table class="mt-16" :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
-      @changePage="getList" v-loading="loading">
-      <el-table-column prop="nick_name" :label="$t('views.userManage.form.nick_name.label')" />
-      <el-table-column prop="username" :label="$t('views.userManage.form.username.label')" />
-      <el-table-column prop="workspace_name" :label="$t('views.role.member.workspace')" />
+    <app-table class="mt-16" :data="tableData" :pagination-config="paginationConfig"
+               @sizeChange="handleSizeChange"
+               @changePage="getList" v-loading="loading">
+      <el-table-column prop="nick_name" :label="$t('views.userManage.form.nick_name.label')"/>
+      <el-table-column prop="username" :label="$t('views.userManage.form.username.label')"/>
+      <el-table-column prop="workspace_name" :label="$t('views.role.member.workspace')"
+                       v-if="currentRole?.type !==RoleTypeEnum.ADMIN"/>
       <el-table-column :label="$t('common.operation')" width="100" fixed="right">
         <template #default="{ row }">
-          <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
+          <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`"
+                      placement="top">
             <el-button type="primary" text @click.stop="handleDelete(row)">
               <el-icon>
-                <EditPen />
+                <Delete/>
               </el-icon>
             </el-button>
           </el-tooltip>
@@ -30,16 +33,17 @@
       </el-table-column>
     </app-table>
   </div>
-  <AddMemberDrawer ref="addMemberDrawerRef" :currentRole="props.currentRole" @refresh="getList" />
+  <AddMemberDrawer ref="addMemberDrawerRef" :currentRole="props.currentRole" @refresh="getList"/>
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, reactive, watch } from 'vue'
+import {onMounted, ref, reactive, watch} from 'vue'
 import RoleApi from '@/api/system/role'
-import type { RoleItem, RoleMemberItem } from '@/api/type/role'
-import { MsgSuccess, MsgConfirm } from '@/utils/message'
-import { t } from '@/locales'
+import type {RoleItem, RoleMemberItem} from '@/api/type/role'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
+import {t} from '@/locales'
 import AddMemberDrawer from './AddMemberDrawer.vue'
+import {RoleTypeEnum} from "@/enums/system.ts";
 
 const props = defineProps<{
   currentRole?: RoleItem
@@ -86,6 +90,7 @@ watch(() => props.currentRole?.id, () => {
 })
 
 const addMemberDrawerRef = ref<InstanceType<typeof AddMemberDrawer>>()
+
 function handleAdd() {
   addMemberDrawerRef.value?.open();
 }
@@ -105,6 +110,7 @@ function handleDelete(row: RoleMemberItem) {
         getList()
       })
     })
-    .catch(() => { })
+    .catch(() => {
+    })
 }
-</script>
+</script>

ui/src/views/role/index.vue

@@ -5,21 +5,23 @@
       <div class="flex h-full">
         <div class="role-left border-r p-16">
           <div class="p-8 pb-0">
-            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
+            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
+                      clearable/>
           </div>
           <div class="list-height-left mt-8">
             <el-scrollbar v-loading="loading">
               <div class="role-left_title color-secondary lighter">
                 <span>{{ $t('views.role.internalRole') }}</span>
               </div>
-              <common-list :data="filterInternalRole" @click="clickRole" :default-active="currentRole?.id">
+              <common-list :data="filterInternalRole" @click="clickRole"
+                           :default-active="currentRole?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
                     <span class="mr-8">{{ row.role_name }}</span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
-                          <MoreFilled />
+                          <MoreFilled/>
                         </el-icon>
                       </el-button>
                       <template #dropdown>
@@ -42,28 +44,32 @@
                 </template>
               </common-list>
               <div class="role-left_divider">
-                <el-divider />
+                <el-divider/>
               </div>
               <div class="role-left_title">
                 <span class="color-secondary lighter">{{ $t('views.role.customRole') }}</span>
-                <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.role.customRole')}`"
-                  placement="top">
+                <el-tooltip effect="dark"
+                            :content="`${$t('common.create')}${$t('views.role.customRole')}`"
+                            placement="top">
                   <el-button type="primary" text @click="createOrUpdateRole()">
                     <AppIcon iconName="app-copy"></AppIcon>
                   </el-button>
                 </el-tooltip>
               </div>
-              <common-list :data="filterCustomRole" @click="clickRole" :default-active="currentRole?.id">
+              <common-list :data="filterCustomRole" @click="clickRole"
+                           :default-active="currentRole?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
                     <span>
                       {{ row.role_name }}
-                      <span class="color-input-placeholder ml-4">({{ roleTypeMap[row.type as RoleTypeEnum] }})</span>
+                      <span class="color-input-placeholder ml-4">({{
+                          roleTypeMap[row.type as RoleTypeEnum]
+                        }})</span>
                     </span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
-                          <MoreFilled />
+                          <MoreFilled/>
                         </el-icon>
                       </el-button>
                       <template #dropdown>
@@ -95,42 +101,46 @@
             <div class="flex align-center">
               <span>
                 {{ currentRole?.role_name }}
-                <span v-if="currentRole?.type && !currentRole.internal" class="color-input-placeholder ml-4">({{
-                  roleTypeMap[currentRole?.type as
-                  RoleTypeEnum] }})
+                <span v-if="currentRole?.type && !currentRole.internal"
+                      class="color-input-placeholder ml-4">({{
+                    roleTypeMap[currentRole?.type as
+                      RoleTypeEnum]
+                  }})
                 </span>
               </span>
-              <el-divider direction="vertical" class="mr-8 ml-8" />
-              <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
+              <el-divider direction="vertical" class="mr-8 ml-8"/>
+              <AppIcon iconName="app-wordspace" style="font-size: 16px"
+                       class="color-input-placeholder"></AppIcon>
               <span class="color-input-placeholder ml-4">
-                数字
+                {{ currentRole?.user_count }}
               </span>
             </div>
             <el-radio-group v-model="currentTab">
-              <el-radio-button v-for="item in tabList" :key="item.value" :label="item.label" :value="item.value" />
+              <el-radio-button v-for="item in tabList" :key="item.value" :label="item.label"
+                               :value="item.value"/>
             </el-radio-group>
           </div>
-          <PermissionConfiguration v-if="currentTab === 'permission'" :currentRole="currentRole" />
-          <Member v-else :currentRole="currentRole" />
+          <PermissionConfiguration v-if="currentTab === 'permission'" :currentRole="currentRole"/>
+          <Member v-else :currentRole="currentRole"/>
         </div>
       </div>
     </el-card>
 
-    <CreateOrUpdateRoleDialog ref="createOrUpdateRoleDialogRef" @refresh="refresh" />
+    <CreateOrUpdateRoleDialog ref="createOrUpdateRoleDialogRef" @refresh="refresh"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import RoleApi from '@/api/system/role'
-import { t } from '@/locales'
+import {t} from '@/locales'
 import PermissionConfiguration from './component/PermissionConfiguration.vue'
 import Member from './component/Member.vue'
 import CreateOrUpdateRoleDialog from './component/CreateOrUpdateRoleDialog.vue'
-import type { RoleItem } from '@/api/type/role'
-import { RoleTypeEnum } from '@/enums/system'
-import { roleTypeMap } from './index'
-import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import type {RoleItem} from '@/api/type/role'
+import {RoleTypeEnum} from '@/enums/system'
+import {roleTypeMap} from './index'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -182,6 +192,7 @@ function clickRole(item: RoleItem) {
 }
 
 const createOrUpdateRoleDialogRef = ref<InstanceType<typeof CreateOrUpdateRoleDialog>>()
+
 function createOrUpdateRole(item?: RoleItem) {
   createOrUpdateRoleDialogRef.value?.open(item);
 }
@@ -202,7 +213,8 @@ function deleteRole(item: RoleItem) {
         currentRole.value = item.id === currentRole.value?.id ? internalRoleList.value[0] : currentRole.value
       })
     })
-    .catch(() => { })
+    .catch(() => {
+    })
 }
 
 

ui/src/views/workspace/index.vue

@@ -6,25 +6,29 @@
         <div class="workspace-left border-r p-16">
           <div class="workspace-left_title">
             <h4 class="medium">{{ $t('views.workspace.list') }}</h4>
-            <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.workspace.title')}`" placement="top">
+            <el-tooltip effect="dark"
+                        :content="`${$t('common.create')}${$t('views.workspace.title')}`"
+                        placement="top">
               <el-button type="primary" text @click="createOrUpdateWorkspace()">
                 <AppIcon iconName="app-copy"></AppIcon>
               </el-button>
             </el-tooltip>
           </div>
           <div class="p-8">
-            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
+            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
+                      clearable/>
           </div>
           <div class="list-height-left">
             <el-scrollbar v-loading="loading">
-              <common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id">
+              <common-list :data="filterList" @click="clickWorkspace"
+                           :default-active="currentWorkspace?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
                     <span>{{ row.name }}</span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
-                          <MoreFilled />
+                          <MoreFilled/>
                         </el-icon>
                       </el-button>
                       <template #dropdown>
@@ -32,7 +36,8 @@
                           <el-dropdown-item @click.stop="createOrUpdateWorkspace(row)" class="p-8">
                             <AppIcon iconName="app-copy"></AppIcon>
                             {{
-                              $t('common.rename') }}
+                              $t('common.rename')
+                            }}
                           </el-dropdown-item>
                           <el-dropdown-item @click.stop="deleteWorkspace(row)" class="border-t p-8">
                             <AppIcon iconName="app-copy"></AppIcon>
@@ -57,29 +62,30 @@
         <div class="workspace-right" v-loading="loading">
           <div class="flex align-center" style="margin-bottom: 20px;">
             <h4 class="medium">{{ currentWorkspace?.name }}</h4>
-            <el-divider direction="vertical" class="mr-8 ml-8" />
-            <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
+            <el-divider direction="vertical" class="mr-8 ml-8"/>
+            <AppIcon iconName="app-wordspace" style="font-size: 16px"
+                     class="color-input-placeholder"></AppIcon>
             <span class="color-input-placeholder ml-4">
-              数字
+              {{ currentWorkspace?.user_count }}
             </span>
           </div>
-          <Member :currentWorkspace="currentWorkspace" />
+          <Member :currentWorkspace="currentWorkspace"/>
         </div>
       </div>
     </el-card>
 
-    <CreateOrUpdateWorkspaceDialog ref="createOrUpdateWorkspaceDialogRef" @refresh="refresh" />
+    <CreateOrUpdateWorkspaceDialog ref="createOrUpdateWorkspaceDialogRef" @refresh="refresh"/>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from 'vue'
+import {onMounted, ref, watch} from 'vue'
 import WorkspaceApi from '@/api/workspace'
-import { t } from '@/locales'
+import {t} from '@/locales'
 import Member from './component/Member.vue'
 import CreateOrUpdateWorkspaceDialog from './component/CreateOrUpdateWorkspaceDialog.vue'
-import type { WorkspaceItem } from '@/api/type/workspace'
-import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import type {WorkspaceItem} from '@/api/type/workspace'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -126,6 +132,7 @@ function clickWorkspace(item: WorkspaceItem) {
 }
 
 const createOrUpdateWorkspaceDialogRef = ref<InstanceType<typeof CreateOrUpdateWorkspaceDialog>>()
+
 function createOrUpdateWorkspace(item?: WorkspaceItem) {
   createOrUpdateWorkspaceDialogRef.value?.open(item);
 }
@@ -147,7 +154,8 @@ function deleteWorkspace(item: WorkspaceItem) {
         currentWorkspace.value = item.id === currentWorkspace.value?.id ? list.value[0] : currentWorkspace.value
       })
     })
-    .catch(() => { })
+    .catch(() => {
+    })
 }
 </script>