feat: 添加配置管理的批量删除,复选框
This commit is contained in:
@@ -22,8 +22,8 @@
|
|||||||
<el-button type="primary" @click="handleAddSetting">
|
<el-button type="primary" @click="handleAddSetting">
|
||||||
<el-icon><Plus /></el-icon>新增配置
|
<el-icon><Plus /></el-icon>新增配置
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button type="danger" :disabled="!selectedNode" @click="handleBatchDelete">
|
<el-button type="danger" :disabled="selectedRows.length === 0" @click="handleBatchDelete">
|
||||||
<el-icon><Delete /></el-icon>删除选中
|
<el-icon><Delete /></el-icon>批量删除 ({{ selectedRows.length }})
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -39,7 +39,9 @@
|
|||||||
row-key="id"
|
row-key="id"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
:header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 600 }"
|
||||||
class="setting-tree-table"
|
class="setting-tree-table"
|
||||||
|
@selection-change="handleSelectionChange"
|
||||||
>
|
>
|
||||||
|
<el-table-column type="selection" width="55" />
|
||||||
<el-table-column label="名称" min-width="300">
|
<el-table-column label="名称" min-width="300">
|
||||||
<template #default="{ row }">
|
<template #default="{ row }">
|
||||||
<div class="tree-item-content" :style="{ paddingLeft: (row.level - 1) * 24 + 'px' }">
|
<div class="tree-item-content" :style="{ paddingLeft: (row.level - 1) * 24 + 'px' }">
|
||||||
@@ -727,22 +729,74 @@ const resetQuery = () => {
|
|||||||
|
|
||||||
// 批量删除
|
// 批量删除
|
||||||
const handleBatchDelete = () => {
|
const handleBatchDelete = () => {
|
||||||
if (!selectedNode.value) {
|
if (selectedRows.value.length === 0) {
|
||||||
ElMessage.warning('请先选择要删除的项目')
|
ElMessage.warning('请先选择要删除的项目')
|
||||||
return
|
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') {
|
if (type === 'group') {
|
||||||
ElMessageBox.confirm(`确认删除配置组 "${data.name}" 吗?`, '警告', {
|
ElMessageBox.confirm(`确认删除配置组 "${rowData.name}" 吗?`, '警告', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(async () => {
|
}).then(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await deleteSettingGroup({ setting_group_id: data.id })
|
const res = await deleteSettingGroup({ setting_group_id: rowData.id })
|
||||||
if (res.data.code === 200) {
|
if (res.data.code === 200) {
|
||||||
ElMessage.success('删除成功')
|
ElMessage.success('删除成功')
|
||||||
handleQuery()
|
handleQuery()
|
||||||
@@ -753,13 +807,13 @@ const handleBatchDelete = () => {
|
|||||||
}
|
}
|
||||||
}).catch(() => {})
|
}).catch(() => {})
|
||||||
} else if (type === 'setting') {
|
} else if (type === 'setting') {
|
||||||
ElMessageBox.confirm(`确认删除配置 "${data.name}" 吗?`, '警告', {
|
ElMessageBox.confirm(`确认删除配置 "${rowData.name}" 吗?`, '警告', {
|
||||||
confirmButtonText: '确定',
|
confirmButtonText: '确定',
|
||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning'
|
type: 'warning'
|
||||||
}).then(async () => {
|
}).then(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await deleteSetting({ id: data.id })
|
const res = await deleteSetting({ id: rowData.id })
|
||||||
if (res.data.code === 200) {
|
if (res.data.code === 200) {
|
||||||
ElMessage.success('删除成功')
|
ElMessage.success('删除成功')
|
||||||
handleQuery()
|
handleQuery()
|
||||||
@@ -772,10 +826,9 @@ const handleBatchDelete = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除节点
|
// 处理表格选择变化
|
||||||
const handleDelete = (data) => {
|
const handleSelectionChange = (selection) => {
|
||||||
selectedNode.value = data
|
selectedRows.value = selection
|
||||||
handleBatchDelete()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ==================== 配置组方法 ====================
|
// ==================== 配置组方法 ====================
|
||||||
|
|||||||
Reference in New Issue
Block a user