feat: 添加层级分析结果页面删除选中组件功能
- 在HierarchyAnalysisResult组件中集成删除选中组件功能 - 复用现有的creoApi.deleteComponentsByPath API - 遵循系统钩子机制,通知由apiClient自动处理 - 添加删除按钮到底部操作区域,使用现有action-btn样式 - 实现选中状态清理和用户确认对话框 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
ad1d4fe2a1
commit
4f1666e7d2
@ -169,10 +169,20 @@
|
||||
<div class="operation-info">
|
||||
<span>完成层级分析,可以继续进行删除配置</span>
|
||||
</div>
|
||||
<button class="continue-btn primary" @click="continueToDeleteConfig">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
<span>继续层级删除配置</span>
|
||||
</button>
|
||||
<div class="operation-buttons">
|
||||
<button
|
||||
class="action-btn danger"
|
||||
@click="deleteSelectedComponents"
|
||||
:disabled="selectedComponents.size === 0"
|
||||
>
|
||||
<i class="fas fa-trash"></i>
|
||||
<span>删除选中组件 ({{ selectedComponents.size }})</span>
|
||||
</button>
|
||||
<button class="continue-btn primary" @click="continueToDeleteConfig">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
<span>继续层级删除配置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -181,6 +191,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { creoApi } from '@/services/creoApi'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
const props = defineProps({
|
||||
analysisData: {
|
||||
@ -356,6 +368,34 @@ const exportResults = () => {
|
||||
const continueToDeleteConfig = () => {
|
||||
emit('show-hierarchy-deletion-params')
|
||||
}
|
||||
|
||||
const deleteSelectedComponents = async () => {
|
||||
if (selectedComponents.value.size === 0) {
|
||||
return
|
||||
}
|
||||
|
||||
await ElMessageBox.confirm(
|
||||
`确定要删除选中的 ${selectedComponents.value.size} 个组件吗?此操作不可撤销。`,
|
||||
'删除确认',
|
||||
{
|
||||
type: 'warning',
|
||||
confirmButtonText: '确定删除',
|
||||
cancelButtonText: '取消'
|
||||
}
|
||||
)
|
||||
|
||||
// 收集选中组件的路径
|
||||
const componentPaths = Array.from(selectedComponents.value)
|
||||
.map(id => hierarchyData.value.find(c => c.id === id)?.path)
|
||||
.filter(Boolean)
|
||||
|
||||
// 调用现有API删除组件(通知由apiClient钩子自动处理)
|
||||
const result = await creoApi.deleteComponentsByPath(componentPaths)
|
||||
if (result.success) {
|
||||
// 清空选中状态
|
||||
selectedComponents.value.clear()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -499,6 +539,23 @@ const continueToDeleteConfig = () => {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: var(--color-error);
|
||||
color: var(--color-text-primary);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.action-btn.danger:hover:not(:disabled) {
|
||||
background: #d73757;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.action-btn.danger:disabled {
|
||||
background: var(--color-text-secondary);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* 层级内容区域 */
|
||||
.hierarchy-content {
|
||||
display: flex;
|
||||
@ -907,6 +964,12 @@ const continueToDeleteConfig = () => {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.operation-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.operation-info {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user