refactor: user group

Author: wxg0103

ui/src/api/type/systemChatUser.ts

@@ -25,5 +25,6 @@ interface ChatUserGroupUserItem {
   is_active: boolean,
   create_time: string,
   update_time: string,
+  user_group_relation_id: string,
 }
-export type { ChatUserGroupUserItem, ChatUserItem }
+export type { ChatUserGroupUserItem, ChatUserItem }

ui/src/views/system-chat-user/group/index.vue

@@ -14,16 +14,18 @@
         <div class="user-left border-r p-16">
           <div class="user-left_title flex-between">
             <h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
-            <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
-              placement="top">
+            <el-tooltip effect="dark"
+                        :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
+                        placement="top">
               <el-button type="primary" text @click="createOrUpdate()">
                 <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">
@@ -34,7 +36,7 @@
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
-                          <MoreFilled />
+                          <MoreFilled/>
                         </el-icon>
                       </el-button>
                       <template #dropdown>
@@ -68,8 +70,9 @@
         <div class="user-right" v-loading="rightLoading">
           <div class="flex align-center">
             <h4 class="medium">{{ current?.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">
               {{ paginationConfig.total }}
             </span>
@@ -86,18 +89,22 @@
             </div>
             <div class="flex-between 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.searchBar.placeholder')" style="width: 220px" clearable />
+              <el-input v-if="searchType === 'username'" v-model="searchForm.username"
+                        @change="getList"
+                        :placeholder="$t('common.searchBar.placeholder')" style="width: 220px"
+                        clearable/>
             </div>
           </div>
 
-          <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
-            @changePage="getList" @selection-change="handleSelectionChange">
-            <el-table-column type="selection" width="55" />
-            <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
-            <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
+          <app-table :data="tableData" :pagination-config="paginationConfig"
+                     @sizeChange="handleSizeChange"
+                     @changePage="getList" @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55"/>
+            <el-table-column prop="nick_name"
+                             :label="$t('views.userManage.userForm.nick_name.label')"/>
+            <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')"/>
             <el-table-column prop="source" :label="$t('views.userManage.source.label')">
               <template #default="{ row }">
                 {{
@@ -117,10 +124,11 @@
             </el-table-column>
             <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="handleDeleteUser(row)">
                     <el-icon>
-                      <EditPen />
+                      <EditPen/>
                     </el-icon>
                   </el-button>
                 </el-tooltip>
@@ -131,20 +139,20 @@
       </div>
     </el-card>
   </ContentContainer>
-  <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh" />
-  <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList" />
+  <CreateOrUpdateGroupDialog ref="createOrUpdateGroupDialogRef" @refresh="refresh"/>
+  <CreateGroupUserDialog ref="createGroupUserDialogRef" @refresh="getList"/>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch, reactive } from 'vue'
+import {onMounted, ref, watch, reactive} from 'vue'
 import SystemGroupApi from '@/api/system/user-group'
-import { t } from '@/locales'
-import type { ChatUserGroupUserItem } from '@/api/type/systemChatUser'
+import {t} from '@/locales'
+import type {ChatUserGroupUserItem} from '@/api/type/systemChatUser'
 import iconMap from '@/components/app-icon/icons/common'
 import CreateOrUpdateGroupDialog from './component/CreateOrUpdateGroupDialog.vue'
 import CreateGroupUserDialog from './component/CreateGroupUserDialog.vue'
-import type { ListItem } from '@/api/type/common'
-import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import type {ListItem} from '@/api/type/common'
+import {MsgSuccess, MsgConfirm} from '@/utils/message'
 
 const filterText = ref('')
 const loading = ref(false)
@@ -187,6 +195,7 @@ function clickUserGroup(item: ListItem) {
 }
 
 const createOrUpdateGroupDialogRef = ref<InstanceType<typeof CreateOrUpdateGroupDialog>>()
+
 function createOrUpdate(item?: ListItem) {
   createOrUpdateGroupDialogRef.value?.open(item);
 }
@@ -252,26 +261,28 @@ watch(() => current.value?.id, () => {
 })
 
 const createGroupUserDialogRef = ref<InstanceType<typeof CreateGroupUserDialog>>()
+
 function createUser() {
   createGroupUserDialogRef.value?.open(current.value?.id);
 }
 
 const multipleSelection = ref<any[]>([])
+
 function handleSelectionChange(val: any[]) {
   multipleSelection.value = val
 }
 
 function handleDeleteUser(item?: ChatUserGroupUserItem) {
   MsgConfirm(
-    item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', { count: multipleSelection.value.length }),
+    item ? `${t('views.workspace.member.delete.confirmTitle')}${item.nick_name} ?` : t('views.chatUser.group.batchDeleteMember', {count: multipleSelection.value.length}),
     '',
     {
       confirmButtonText: t('common.confirm'),
       confirmButtonClass: 'danger',
     },
   )
     .then(() => {
-      SystemGroupApi.postRemoveMember(current.value?.id as string, { group_relation_ids: item ? [item.id] : multipleSelection.value.map(item => (item.id)) }, loading).then(async () => {
+      SystemGroupApi.postRemoveMember(current.value?.id as string, {group_relation_ids: item ? [item.user_group_relation_id] : multipleSelection.value.map(item => (item.user_group_relation_id))}, loading).then(async () => {
         MsgSuccess(t('common.deleteSuccess'))
         await getList()
       })
@@ -324,4 +335,4 @@ function handleDeleteUser(item?: ChatUserGroupUserItem) {
   flex-direction: column;
   padding: 24px;
 }
-</style>
+</style>