feat: 添加配置管理的批量删除,复选框
Build and Deploy Vue3 / build (push) Successful in 2m0s
Build and Deploy Vue3 / deploy (push) Successful in 53s

This commit is contained in:
2026-03-10 16:23:14 +08:00
parent 5d16589e54
commit 3ca956d9f0
+66 -13
View File
@@ -22,8 +22,8 @@
<el-button type="primary" @click="handleAddSetting">
<el-icon><Plus /></el-icon>新增配置
</el-button>
<el-button type="danger" :disabled="!selectedNode" @click="handleBatchDelete">
<el-icon><Delete /></el-icon>删除选中
<el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
<el-icon><Delete /></el-icon>批量删除 ({{ selectedRows.length }})
</el-button>
</div>
</div>
@@ -39,7 +39,9 @@
row-key="id"
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
class="setting-tree-table"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column label="名称" min-width="300">
<template #default="{ row }">
<div class="tree-item-content" :style="{ paddingLeft: (row.level - 1) * 24 + 'px' }">
@@ -727,22 +729,74 @@ const resetQuery = () => {
// 批量删除
const handleBatchDelete = () => {
if (!selectedNode.value) {
if (selectedRows.value.length === 0) {
ElMessage.warning('请先选择要删除的项目')
return
}
const type = selectedNode.value.type
const data = selectedNode.value.data
// 分离配置组和配置项
const groups = selectedRows.value.filter(row => row.type === 'group')
const settings = selectedRows.value.filter(row => row.type === 'setting')
let confirmMessage = ''
if (groups.length > 0 && settings.length > 0) {
confirmMessage = `确认删除选中的 ${groups.length} 个配置组和 ${settings.length} 个配置项吗?删除配置组将同时删除其下的所有配置项。`
} else if (groups.length > 0) {
confirmMessage = `确认删除选中的 ${groups.length} 个配置组吗?删除配置组将同时删除其下的所有配置项。`
} else {
confirmMessage = `确认删除选中的 ${settings.length} 个配置项吗?`
}
ElMessageBox.confirm(confirmMessage, '批量删除警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const deletePromises = []
// 删除配置组
groups.forEach(row => {
deletePromises.push(deleteSettingGroup({ setting_group_id: row.data.id }))
})
// 删除配置项
settings.forEach(row => {
deletePromises.push(deleteSetting({ id: row.data.id }))
})
try {
const results = await Promise.all(deletePromises)
const successCount = results.filter(res => res.data.code === 200).length
if (successCount === selectedRows.value.length) {
ElMessage.success('批量删除成功')
} else {
ElMessage.warning(`成功删除 ${successCount} 项,失败 ${selectedRows.value.length - successCount}`)
}
// 清空选择
selectedRows.value = []
handleQuery()
} catch (error) {
console.error('批量删除失败:', error)
ElMessage.error('批量删除失败')
}
}).catch(() => {})
}
// 删除节点
const handleDelete = (data) => {
const type = data.type
const rowData = data.data
if (type === 'group') {
ElMessageBox.confirm(`确认删除配置组 "${data.name}" 吗?`, '警告', {
ElMessageBox.confirm(`确认删除配置组 "${rowData.name}" 吗?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
try {
const res = await deleteSettingGroup({ setting_group_id: data.id })
const res = await deleteSettingGroup({ setting_group_id: rowData.id })
if (res.data.code === 200) {
ElMessage.success('删除成功')
handleQuery()
@@ -753,13 +807,13 @@ const handleBatchDelete = () => {
}
}).catch(() => {})
} else if (type === 'setting') {
ElMessageBox.confirm(`确认删除配置 "${data.name}" 吗?`, '警告', {
ElMessageBox.confirm(`确认删除配置 "${rowData.name}" 吗?`, '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
try {
const res = await deleteSetting({ id: data.id })
const res = await deleteSetting({ id: rowData.id })
if (res.data.code === 200) {
ElMessage.success('删除成功')
handleQuery()
@@ -772,10 +826,9 @@ const handleBatchDelete = () => {
}
}
// 删除节点
const handleDelete = (data) => {
selectedNode.value = data
handleBatchDelete()
// 处理表格选择变化
const handleSelectionChange = (selection) => {
selectedRows.value = selection
}
// ==================== 配置组方法 ====================