完善标签分组功能

im-admin-ui/src/views/im/user/index.vue

@@ -173,7 +173,7 @@
       </template>
     </el-dialog>
     <!-- 设置标签对话框 -->
-    <el-dialog v-model="labelDialogVisible" title="设置标签" width="520px">
+    <el-dialog v-model="labelDialogVisible" :title="labelDialogTitle" width="520px">
       <div>
         <el-select v-model="selectedLabelIds" multiple filterable placeholder="请选择标签" style="width: 100%">
           <el-option v-for="opt in labelOptions" :key="opt.id" :label="opt.labelName" :value="opt.id" />
@@ -188,7 +188,7 @@
     </el-dialog>
 
     <!-- 设置分组对话框 -->
-    <el-dialog v-model="groupDialogVisible" title="设置分组" width="520px">
+    <el-dialog v-model="groupDialogVisible" :title="groupDialogTitle" width="520px">
       <div>
         <el-select v-model="selectedGroupIds" multiple filterable placeholder="请选择群组" style="width: 100%">
           <el-option v-for="opt in groupOptions" :key="opt.id" :label="opt.groupName" :value="opt.id" />
@@ -207,6 +207,7 @@
 <script setup name="User" lang="ts">
 import { listUser, getUser, ban, unban, getLabelList, getGroupList, updateBatchUser } from '@/api/im/user';
 import { UserVO, UserQuery, UserForm } from '@/api/im/user/types';
+import { ElMessageBox, ElFormInstance, ComponentInternalInstance } from 'element-plus';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -270,14 +271,46 @@ const groupDialogVisible = ref(false);
 const editingUser = ref<UserVO | null>(null);
 const selectedLabelIds = ref<Array<string | number>>([]);
 const selectedGroupIds = ref<Array<string | number>>([]);
+const isBatchMode = ref(false); // 是否为批量模式
 
-/** 打开标签设置窗口 */
+/** 批量设置标签 */
+const handleLabelIds = () => {
+  if (ids.value.length === 0) {
+    proxy?.$modal?.msgError('请至少选择一个用户');
+    return;
+  }
+  isBatchMode.value = true;
+  editingUser.value = null;
+  selectedLabelIds.value = [];
+  labelDialogVisible.value = true;
+};
+
+/** 批量设置分组 */
+const handleGroupIds = () => {
+  if (ids.value.length === 0) {
+    proxy?.$modal?.msgError('请至少选择一个用户');
+    return;
+  }
+  isBatchMode.value = true;
+  editingUser.value = null;
+  selectedGroupIds.value = [];
+  groupDialogVisible.value = true;
+};
+
+/** 打开单个用户标签设置窗口 */
 const handleLabel = (row?: UserVO) => {
+  if (!row && ids.value.length !== 1) {
+    proxy?.$modal?.msgError('请选择一个用户');
+    return;
+  }
+  
   editingUser.value = row || userList.value.find((u) => u.id === ids.value[0]) || null;
   if (!editingUser.value) {
     proxy?.$modal?.msgError('请先选择一个用户');
     return;
   }
+  
+  isBatchMode.value = false;
   selectedLabelIds.value = (editingUser.value.labelIds || '')
     .toString()
     .split(',')
@@ -286,37 +319,20 @@ const handleLabel = (row?: UserVO) => {
   labelDialogVisible.value = true;
 };
 
-const cancelLabel = () => {
+/** 打开单个用户分组设置窗口 */
-  labelDialogVisible.value = false;
+const handleGroup = (row?: UserVO) => {
-  editingUser.value = null;
+  if (!row && ids.value.length !== 1) {
-  selectedLabelIds.value = [];
+    proxy?.$modal?.msgError('请选择一个用户');
-};
+    return;
-
-const confirmLabel = async () => {
-  if (!editingUser.value) return;
-  const payload: any = { id: editingUser.value.id, labelIds: selectedLabelIds.value.join(',') };
-  // optimistic update in UI
-  editingUser.value.labelIds = payload.labelIds;
-  try {
-    const mod: any = await await updateBatchUser(payload);
-    if (mod && typeof mod.updateUser === 'function') {
-      await mod.updateUser(payload);
-    }
-  } catch (e) {
-    // ignore if API not present
   }
-  labelDialogVisible.value = false;
-  proxy?.$modal?.msgSuccess('设置标签成功');
-  await getList();
-};
   
-/** 打开群组设置窗口 */
-const handleGroup = (row?: UserVO) => {
   editingUser.value = row || userList.value.find((u) => u.id === ids.value[0]) || null;
   if (!editingUser.value) {
     proxy?.$modal?.msgError('请先选择一个用户');
     return;
   }
+  
+  isBatchMode.value = false;
   selectedGroupIds.value = (editingUser.value.groupIds || '')
     .toString()
     .split(',')
@@ -325,27 +341,122 @@ const handleGroup = (row?: UserVO) => {
   groupDialogVisible.value = true;
 };
 
-const cancelGroup = () => {
+/** 确认设置标签（支持单个和批量） */
-  groupDialogVisible.value = false;
+const confirmLabel = async () => {
+  try {
+    if (isBatchMode.value) {
+      // 批量设置标签
+      if (ids.value.length === 0) {
+        proxy?.$modal?.msgError('请至少选择一个用户');
+        return;
+      }
+      
+      const labelIdsStr = selectedLabelIds.value.join(',');
+      const payload = ids.value.map(id => ({
+        id: id,
+        labelIds: labelIdsStr
+      }));
+      
+      await updateBatchUser(payload);
+      proxy?.$modal?.msgSuccess(`成功为 ${ids.value.length} 个用户设置标签`);
+    } else {
+      // 单个用户设置标签
+      if (!editingUser.value) {
+        proxy?.$modal?.msgError('用户信息不存在');
+        return;
+      }
+      
+      const payload = [{
+        id: editingUser.value.id,
+        labelIds: selectedLabelIds.value.join(',')
+      }];
+      
+      // 乐观更新 UI
+      editingUser.value.labelIds = payload[0].labelIds;
+      
+      await updateBatchUser(payload);
+      proxy?.$modal?.msgSuccess('设置标签成功');
+    }
+    
+    // 刷新列表
+    await getList();
+  } catch (error) {
+    console.error('设置标签失败:', error);
+    proxy?.$modal?.msgError('设置标签失败');
+  } finally {
+    // 关闭对话框并重置状态
+    labelDialogVisible.value = false;
     editingUser.value = null;
-  selectedGroupIds.value = [];
+    selectedLabelIds.value = [];
+    isBatchMode.value = false;
+  }
+};
+
+/** 取消设置标签 */
+const cancelLabel = () => {
+  labelDialogVisible.value = false;
+  editingUser.value = null;
+  selectedLabelIds.value = [];
+  isBatchMode.value = false;
 };
 
+/** 确认设置分组（支持单个和批量） */
 const confirmGroup = async () => {
-  if (!editingUser.value) return;
-  const payload: any = { id: editingUser.value.id, groupIds: selectedGroupIds.value.join(',') };
-  editingUser.value.groupIds = payload.groupIds;
   try {
-    const mod: any = await updateBatchUser(payload);
+    if (isBatchMode.value) {
-    if (mod && typeof mod.updateUser === 'function') {
+      // 批量设置分组
-      await mod.updateUser(payload);
+      if (ids.value.length === 0) {
+        proxy?.$modal?.msgError('请至少选择一个用户');
+        return;
       }
-  } catch (e) {
+      
-    // ignore
+      const groupIdsStr = selectedGroupIds.value.join(',');
+      const payload = ids.value.map(id => ({
+        id: id,
+        groupIds: groupIdsStr
+      }));
+      
+      await updateBatchUser(payload);
+      proxy?.$modal?.msgSuccess(`成功为 ${ids.value.length} 个用户设置分组`);
+    } else {
+      // 单个用户设置分组
+      if (!editingUser.value) {
+        proxy?.$modal?.msgError('用户信息不存在');
+        return;
       }
-  groupDialogVisible.value = false;
+      
+      const payload = [{
+        id: editingUser.value.id,
+        groupIds: selectedGroupIds.value.join(',')
+      }];
+      
+      // 乐观更新 UI
+      editingUser.value.groupIds = payload[0].groupIds;
+      
+      await updateBatchUser(payload);
       proxy?.$modal?.msgSuccess('设置分组成功');
+    }
+    
+    // 刷新列表
     await getList();
+  } catch (error) {
+    console.error('设置分组失败:', error);
+    proxy?.$modal?.msgError('设置分组失败');
+  } finally {
+    // 关闭对话框并重置状态
+    groupDialogVisible.value = false;
+    editingUser.value = null;
+    selectedGroupIds.value = [];
+    isBatchMode.value = false;
+  }
+};
+
+/** 取消设置分组 */
+const cancelGroup = () => {
+  groupDialogVisible.value = false;
+  editingUser.value = null;
+  selectedGroupIds.value = [];
+  isBatchMode.value = false;
 };
 
 /** 查询用户列表 */
@@ -361,18 +472,22 @@ const getList = async () => {
     params.groupIds = params.groupIds.join(',');
   }
 
+  try {
     const res = await listUser(params);
     userList.value = res.rows;
     total.value = res.total;
+  } catch (error) {
+    console.error('查询用户列表失败:', error);
+    proxy?.$modal?.msgError('查询用户列表失败');
+  } finally {
     loading.value = false;
-  console.log('getList');
+  }
 };
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
-  console.log('handleQuery');
 };
 
 /** 重置按钮操作 */
@@ -382,22 +497,19 @@ const resetQuery = () => {
   queryParams.value.labelIds = [] as any;
   queryParams.value.groupIds = [] as any;
   handleQuery();
-  console.log('handleQuery');
 };
 
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: UserVO[]) => {
   ids.value = selection.map((item) => item.id);
-  single.value = selection.length != 1;
+  single.value = selection.length !== 1;
   multiple.value = !selection.length;
-  console.log('handleSelectionChange');
 };
 
 /** 表单重置 */
 const reset = () => {
   form.value = { ...initFormData };
   userFormRef.value?.resetFields();
-  console.log('reset');
 };
 
 /** 修改按钮操作 */
@@ -415,6 +527,7 @@ const submitForm = () => {
   dialog.visible = false;
 };
 
+/** 封禁用户 */
 const banHandle = (user: any) => {
   ElMessageBox.prompt('封禁原因:', '确定对该用户进行封禁？', {
     inputPattern: /\S/,
@@ -426,12 +539,14 @@ const banHandle = (user: any) => {
     ban(data).then(() => {
       user.isBanned = true;
       ElMessage.success(`用户'${user.userName}'已被封禁`);
+      getList();
     });
   });
 };
 
+/** 解封用户 */
 const unbanHandle = (user: any) => {
-  ElMessageBox.confirm('确定解除该用户的封禁状态？？', '提示', {
+  ElMessageBox.confirm('确定解除该用户的封禁状态？', '提示', {
     confirmButtonText: '确定',
     cancelButtonText: '取消'
   }).then(() => {
@@ -439,6 +554,7 @@ const unbanHandle = (user: any) => {
     unban(data).then(() => {
       user.isBanned = false;
       ElMessage.success(`用户'${user.userName}'解锁成功`);
+      getList();
     });
   });
 };
@@ -477,9 +593,19 @@ const getLabelAndGroupList = async () => {
     groupOptions.value = groupsRes.data || [];
   } catch (error) {
     console.error('获取标签和群组列表失败:', error);
+    proxy?.$modal?.msgError('获取标签和群组列表失败');
   }
 };
 
+// 添加对话框标题的 computed 属性
+const labelDialogTitle = computed(() => {
+  return isBatchMode.value ? `批量设置标签 (已选择 ${ids.value.length} 个用户)` : '设置标签';
+});
+
+const groupDialogTitle = computed(() => {
+  return isBatchMode.value ? `批量设置分组 (已选择 ${ids.value.length} 个用户)` : '设置分组';
+});
+
 onMounted(async () => {
   await getLabelAndGroupList();
   getList();