Fix Bug #550: AI修复
This commit is contained in:
@@ -0,0 +1,199 @@
|
|||||||
|
<template>
|
||||||
|
<div class="exam-apply-panel">
|
||||||
|
<!-- 左侧分类 & 中间项目选择区（保持原有布局逻辑） -->
|
||||||
|
<div class="selection-area">
|
||||||
|
<slot name="category-tree" />
|
||||||
|
<slot name="item-list" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧/下方已选择区域 -->
|
||||||
|
<div class="selected-area">
|
||||||
|
<h3 class="area-title">已选择项目</h3>
|
||||||
|
<div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
|
||||||
|
<div v-else class="selected-list">
|
||||||
|
<div
|
||||||
|
v-for="item in selectedItems"
|
||||||
|
:key="item.id"
|
||||||
|
class="selected-card"
|
||||||
|
@click="toggleExpand(item)"
|
||||||
|
>
|
||||||
|
<div class="card-header">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="item.checked"
|
||||||
|
@change="handleItemCheck(item)"
|
||||||
|
@click.stop
|
||||||
|
/>
|
||||||
|
<el-tooltip :content="item.displayName" placement="top" :show-after="300">
|
||||||
|
<span class="item-name">{{ item.displayName }}</span>
|
||||||
|
</el-tooltip>
|
||||||
|
<span class="expand-icon">{{ item.expanded ? '▼' : '▶' }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 明细/检查方法区域（默认收起，严格遵循 项目 > 检查方法 层级） -->
|
||||||
|
<div v-show="item.expanded" class="details-panel">
|
||||||
|
<!-- 已移除冗余的“项目套餐明细”标签 -->
|
||||||
|
<div v-if="item.methods && item.methods.length > 0" class="method-list">
|
||||||
|
<div
|
||||||
|
v-for="method in item.methods"
|
||||||
|
:key="method.id"
|
||||||
|
class="method-row"
|
||||||
|
>
|
||||||
|
<el-checkbox
|
||||||
|
v-model="method.checked"
|
||||||
|
@change="handleMethodCheck(item, method)"
|
||||||
|
@click.stop
|
||||||
|
/>
|
||||||
|
<span class="method-name">{{ method.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="no-methods">无关联检查方法</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
interface ExamMethod {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
checked: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ExamItem {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
checked: boolean
|
||||||
|
expanded: boolean
|
||||||
|
methods: ExamMethod[]
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectedItems = ref<ExamItem[]>([])
|
||||||
|
|
||||||
|
// 清理名称：去除“套餐”字样，保留核心名称
|
||||||
|
const cleanName = (name: string) => name.replace(/套餐/g, '').trim()
|
||||||
|
|
||||||
|
// 切换展开/收起
|
||||||
|
const toggleExpand = (item: ExamItem) => {
|
||||||
|
item.expanded = !item.expanded
|
||||||
|
}
|
||||||
|
|
||||||
|
// 项目勾选处理（解耦：不联动检查方法）
|
||||||
|
const handleItemCheck = (item: ExamItem) => {
|
||||||
|
// 保持方法状态独立，不自动勾选/取消关联方法
|
||||||
|
// 若业务后续需要级联取消，可在此处添加 item.methods.forEach(m => m.checked = false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查方法勾选处理（独立）
|
||||||
|
const handleMethodCheck = (_item: ExamItem, _method: ExamMethod) => {
|
||||||
|
// 仅更新方法自身状态，不影响父项目或其他方法
|
||||||
|
}
|
||||||
|
|
||||||
|
// 外部调用接口：添加选中项
|
||||||
|
const addItem = (rawItem: any) => {
|
||||||
|
const exists = selectedItems.value.find(i => i.id === rawItem.id)
|
||||||
|
if (!exists) {
|
||||||
|
selectedItems.value.push({
|
||||||
|
id: rawItem.id,
|
||||||
|
name: rawItem.name,
|
||||||
|
displayName: cleanName(rawItem.name),
|
||||||
|
checked: true,
|
||||||
|
expanded: false, // 默认收起
|
||||||
|
methods: (rawItem.methods || []).map((m: any) => ({
|
||||||
|
id: m.id,
|
||||||
|
name: m.name,
|
||||||
|
checked: false // 默认不勾选，彻底解耦
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ addItem, selectedItems })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.exam-apply-panel {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.selected-area {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 320px;
|
||||||
|
background: #f8f9fa;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 12px;
|
||||||
|
}
|
||||||
|
.area-title {
|
||||||
|
margin: 0 0 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
.selected-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
max-height: 400px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.selected-card {
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
.selected-card:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.item-name {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
.expand-icon {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #909399;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.details-panel {
|
||||||
|
margin-top: 8px;
|
||||||
|
padding-left: 24px;
|
||||||
|
border-top: 1px dashed #ebeef5;
|
||||||
|
padding-top: 8px;
|
||||||
|
}
|
||||||
|
.method-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
.method-name {
|
||||||
|
font-size: 13px;
|
||||||
|
color: #606266;
|
||||||
|
}
|
||||||
|
.empty-tip {
|
||||||
|
color: #909399;
|
||||||
|
text-align: center;
|
||||||
|
padding: 24px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
.no-methods {
|
||||||
|
color: #c0c4cc;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user