La123123.
/
im-admin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善标签分组功能

master
[yxf] 16 hours ago
parent
fb2b5245fd
commit
4b9e737138
1 changed files with 179 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 232
      im-admin-ui/src/views/im/user/index.vue

232
im-admin-ui/src/views/im/user/index.vue
View File

@ -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;
editingUser.value = null;
selectedLabelIds.value = [];
};
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) => {
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;
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;
selectedLabelIds.value = [];
isBatchMode.value = false;
}
};
/** 取消设置标签 */
const cancelLabel = () => {
labelDialogVisible.value = false;
editingUser.value = null;
selectedGroupIds.value = [];
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 (mod && typeof mod.updateUser === 'function') {
await mod.updateUser(payload);
if (isBatchMode.value) {
// 批量设置分组
if (ids.value.length === 0) {
proxy?.$modal?.msgError('请至少选择一个用户');
return;
}
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;
}
const payload = [{
id: editingUser.value.id,
groupIds: selectedGroupIds.value.join(',')
}];
// 乐观更新 UI
editingUser.value.groupIds = payload[0].groupIds;
await updateBatchUser(payload);
proxy?.$modal?.msgSuccess('设置分组成功');
}
} catch (e) {
// ignore
// 刷新列表
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;
proxy?.$modal?.msgSuccess('设置分组成功');
await getList();
editingUser.value = null;
selectedGroupIds.value = [];
isBatchMode.value = false;
};
/** 查询用户列表 */
@ -361,18 +472,22 @@ const getList = async () => {
params.groupIds = params.groupIds.join(',');
}
const res = await listUser(params);
userList.value = res.rows;
total.value = res.total;
loading.value = false;
console.log('getList');
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;
}
};
/** 搜索按钮操作 */
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,11 +593,21 @@ 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();
});
</script>
</script>
Write Preview
Loading…
Cancel
Save