Fix Bug #550: AI修复
This commit is contained in:
@@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div class="exam-apply-container">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<div class="left-panel">
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
:props="{ label: 'name', children: 'children' }"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleCategoryClick"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 中间：检查项目列表 -->
|
||||
<div class="middle-panel">
|
||||
<div class="panel-header">检查项目</div>
|
||||
<el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
|
||||
<el-checkbox
|
||||
v-for="item in currentCategoryItems"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
class="item-checkbox"
|
||||
>
|
||||
<!-- 修复2：去除冗余“套餐”字样 -->
|
||||
{{ item.name.replace(/套餐/g, '') }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- 右侧/下方：已选择区域 -->
|
||||
<div class="right-panel">
|
||||
<div class="panel-header">已选择</div>
|
||||
<div v-if="selectedExams.length === 0" class="empty-tip">暂无选择项目</div>
|
||||
|
||||
<!-- 修复3：严格遵循 检查项目 > 检查方法 的从属父子关系 -->
|
||||
<div v-for="exam in selectedExams" :key="exam.id" class="selected-card">
|
||||
<div class="card-header" @click="toggleExpand(exam.id)">
|
||||
<el-checkbox
|
||||
:model-value="exam.checked"
|
||||
@change="(val) => toggleExamCheck(exam.id, val)"
|
||||
@click.stop
|
||||
/>
|
||||
<!-- 修复2：宽度自适应 + 悬停提示完整名称 -->
|
||||
<el-tooltip
|
||||
:content="exam.name.replace(/套餐/g, '')"
|
||||
placement="top"
|
||||
:disabled="!exam.isTruncated"
|
||||
>
|
||||
<span
|
||||
class="exam-name"
|
||||
:ref="(el) => setNameRef(el, exam.id)"
|
||||
>
|
||||
{{ exam.name.replace(/套餐/g, '') }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<span class="expand-icon">{{ exam.expanded ? '▲' : '▼' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 修复1 & 3：检查方法独立展示，默认收起，无冗余标签 -->
|
||||
<div v-show="exam.expanded" class="method-details">
|
||||
<div v-if="exam.methods.length === 0" class="no-methods">无关联检查方法</div>
|
||||
<el-checkbox-group
|
||||
v-else
|
||||
v-model="exam.selectedMethods"
|
||||
@change="onMethodChange(exam.id)"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="method in exam.methods"
|
||||
:key="method.id"
|
||||
:label="method.id"
|
||||
class="method-checkbox"
|
||||
>
|
||||
{{ method.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, nextTick, onMounted } from 'vue'
|
||||
|
||||
// ================= 数据定义 =================
|
||||
const categoryTree = ref([])
|
||||
const currentCategoryItems = ref([])
|
||||
const selectedItemIds = ref([])
|
||||
const selectedExams = reactive([])
|
||||
const nameRefs = reactive({})
|
||||
|
||||
// ================= 核心交互逻辑 =================
|
||||
|
||||
// 修复1：项目勾选与检查方法完全解耦
|
||||
const onItemSelectChange = (ids) => {
|
||||
const newIds = ids || []
|
||||
|
||||
// 新增项目：仅初始化项目状态，不联动任何方法
|
||||
newIds.forEach(id => {
|
||||
if (!selectedExams.find(e => e.id === id)) {
|
||||
const item = currentCategoryItems.value.find(i => i.id === id)
|
||||
if (item) {
|
||||
selectedExams.push({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
checked: true,
|
||||
expanded: false, // 修复3：默认收起
|
||||
methods: item.methods || [],
|
||||
selectedMethods: [], // 独立维护方法勾选状态
|
||||
isTruncated: false
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 移除取消勾选的项目
|
||||
const toRemove = selectedExams.filter(e => !newIds.includes(e.id))
|
||||
toRemove.forEach(e => {
|
||||
const idx = selectedExams.indexOf(e)
|
||||
if (idx > -1) selectedExams.splice(idx, 1)
|
||||
})
|
||||
|
||||
checkTruncation()
|
||||
}
|
||||
|
||||
// 独立控制项目勾选状态
|
||||
const toggleExamCheck = (id, checked) => {
|
||||
const exam = selectedExams.find(e => e.id === id)
|
||||
if (exam) exam.checked = checked
|
||||
|
||||
if (checked) {
|
||||
if (!selectedItemIds.value.includes(id)) selectedItemIds.value.push(id)
|
||||
} else {
|
||||
selectedItemIds.value = selectedItemIds.value.filter(i => i !== id)
|
||||
}
|
||||
}
|
||||
|
||||
// 展开/收起明细
|
||||
const toggleExpand = (id) => {
|
||||
const exam = selectedExams.find(e => e.id === id)
|
||||
if (exam) exam.expanded = !exam.expanded
|
||||
}
|
||||
|
||||
// 修复1：方法变更仅影响当前项目，不向上/向下联动
|
||||
const onMethodChange = (examId) => {
|
||||
// 此处可对接后端保存逻辑，保持独立解耦
|
||||
console.log(`[Bug#550] 项目 ${examId} 检查方法已独立更新:`, selectedExams.find(e => e.id === examId)?.selectedMethods)
|
||||
}
|
||||
|
||||
// 修复2：动态检测文本截断以控制 Tooltip 显示
|
||||
const setNameRef = (el, id) => {
|
||||
if (el) nameRefs[id] = el
|
||||
}
|
||||
|
||||
const checkTruncation = () => {
|
||||
nextTick(() => {
|
||||
selectedExams.forEach(exam => {
|
||||
const el = nameRefs[exam.id]
|
||||
if (el) {
|
||||
exam.isTruncated = el.scrollWidth > el.clientWidth
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 模拟分类点击加载项目（实际项目请替换为 API 调用）
|
||||
const handleCategoryClick = (data) => {
|
||||
// currentCategoryItems.value = await fetchItemsByCategory(data.id)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始化数据加载
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.exam-apply-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.left-panel, .middle-panel, .right-panel {
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.left-panel { width: 20%; }
|
||||
.middle-panel { width: 40%; }
|
||||
.right-panel { width: 40%; }
|
||||
|
||||
.panel-header {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.item-checkbox, .method-checkbox {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 修复2 & 3：已选卡片样式优化 */
|
||||
.selected-card {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
background: #fafafa;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
gap: 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.exam-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 修复3：层级缩进与明细区域 */
|
||||
.method-details {
|
||||
padding: 8px 12px 12px 32px; /* 左侧缩进体现父子层级 */
|
||||
border-top: 1px dashed #e4e7ed;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.no-methods {
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user