Fix Bug #550: AI修复
This commit is contained in:
@@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div class="exam-item-selector">
|
||||||
|
<div class="selector-layout">
|
||||||
|
<!-- 左侧：检查项目分类 -->
|
||||||
|
<div class="panel category-panel">
|
||||||
|
<h4 class="panel-title">检查项目分类</h4>
|
||||||
|
<el-tree
|
||||||
|
:data="categoryTree"
|
||||||
|
node-key="id"
|
||||||
|
highlight-current
|
||||||
|
default-expand-all
|
||||||
|
@node-click="handleCategorySelect"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 中间：检查项目列表 -->
|
||||||
|
<div class="panel item-panel">
|
||||||
|
<h4 class="panel-title">检查项目</h4>
|
||||||
|
<el-checkbox-group v-model="selectedItemIds" @change="onItemChange" class="item-list">
|
||||||
|
<el-checkbox v-for="item in currentItems" :key="item.id" :label="item.id" class="item-checkbox">
|
||||||
|
{{ item.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧/下方：已选择区域 -->
|
||||||
|
<div class="panel selected-panel">
|
||||||
|
<h4 class="panel-title">已选择</h4>
|
||||||
|
<!-- 修复3：结构化展示 & 默认收起 -->
|
||||||
|
<el-collapse v-model="activeCollapseNames" accordion class="selected-collapse">
|
||||||
|
<el-collapse-item
|
||||||
|
v-for="group in selectedGroups"
|
||||||
|
:key="group.itemId"
|
||||||
|
:name="group.itemId"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<!-- 修复2：宽度自适应/提示完整名称，去除“套餐”前缀 -->
|
||||||
|
<el-tooltip :content="group.itemName" placement="top" :show-after="300">
|
||||||
|
<span class="group-title">{{ group.itemName }}</span>
|
||||||
|
</el-tooltip>
|
||||||
|
</template>
|
||||||
|
<div class="method-section">
|
||||||
|
<el-checkbox-group v-model="group.selectedMethodIds" @change="onMethodChange(group)">
|
||||||
|
<el-checkbox v-for="method in group.methods" :key="method.id" :label="method.id">
|
||||||
|
{{ method.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
</el-collapse>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, computed } from 'vue'
|
||||||
|
|
||||||
|
// 模拟数据结构 (实际应从API获取)
|
||||||
|
interface CategoryNode { id: string; name: string; children?: ExamItem[] }
|
||||||
|
interface ExamItem { id: string; name: string; methods?: ExamMethod[] }
|
||||||
|
interface ExamMethod { id: string; name: string }
|
||||||
|
|
||||||
|
const categoryTree = ref<CategoryNode[]>([
|
||||||
|
{
|
||||||
|
id: 'cat_1', name: '彩超', children: [
|
||||||
|
{ id: 'item_1', name: '128线排套餐', methods: [{ id: 'm1', name: '常规' }, { id: 'm2', name: '三维' }] },
|
||||||
|
{ id: 'item_2', name: '腹部彩超', methods: [{ id: 'm3', name: '常规' }] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
const currentItems = ref<ExamItem[]>([])
|
||||||
|
const selectedItemIds = ref<string[]>([])
|
||||||
|
// 修复3：默认空数组，实现面板默认收起状态
|
||||||
|
const activeCollapseNames = ref<string[]>([])
|
||||||
|
|
||||||
|
// 已选数据映射：独立维护项目与方法状态
|
||||||
|
const selectedDataMap = ref<Map<string, { id: string; name: string; methods: ExamMethod[]; selectedMethodIds: string[] }>>(new Map())
|
||||||
|
|
||||||
|
// 计算属性：渲染已选择分组
|
||||||
|
const selectedGroups = computed(() => {
|
||||||
|
return Array.from(selectedDataMap.value.values()).map(item => ({
|
||||||
|
itemId: item.id,
|
||||||
|
// 修复2：清理冗余“套餐”字样
|
||||||
|
itemName: item.name.replace(/套餐/g, ''),
|
||||||
|
methods: item.methods || [],
|
||||||
|
selectedMethodIds: item.selectedMethodIds || []
|
||||||
|
}))
|
||||||
|
})
|
||||||
|
|
||||||
|
// 分类点击
|
||||||
|
const handleCategorySelect = (node: CategoryNode) => {
|
||||||
|
currentItems.value = node.children || []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修复1：项目勾选与检查方法解耦
|
||||||
|
const onItemChange = (ids: string[]) => {
|
||||||
|
const added = ids.filter(id => !selectedItemIds.value.includes(id))
|
||||||
|
const removed = selectedItemIds.value.filter(id => !ids.includes(id))
|
||||||
|
|
||||||
|
// 处理新增项目
|
||||||
|
added.forEach(id => {
|
||||||
|
const item = currentItems.value.find(i => i.id === id)
|
||||||
|
if (item) {
|
||||||
|
selectedDataMap.value.set(id, {
|
||||||
|
id: item.id,
|
||||||
|
name: item.name,
|
||||||
|
methods: item.methods || [],
|
||||||
|
// 关键修复：不自动勾选关联方法，保持独立手动选择
|
||||||
|
selectedMethodIds: []
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 处理移除项目
|
||||||
|
removed.forEach(id => {
|
||||||
|
selectedDataMap.value.delete(id)
|
||||||
|
})
|
||||||
|
|
||||||
|
selectedItemIds.value = ids
|
||||||
|
}
|
||||||
|
|
||||||
|
// 方法独立勾选变更
|
||||||
|
const onMethodChange = (group: { itemId: string; selectedMethodIds: string[] }) => {
|
||||||
|
const item = selectedDataMap.value.get(group.itemId)
|
||||||
|
if (item) {
|
||||||
|
item.selectedMethodIds = group.selectedMethodIds
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.exam-item-selector {
|
||||||
|
padding: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.selector-layout {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
flex: 1;
|
||||||
|
border: 1px solid #ebeef5;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
.panel-title {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
.item-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.item-checkbox {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.selected-collapse {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.group-title {
|
||||||
|
max-width: 140px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
.method-section {
|
||||||
|
padding: 8px 0 8px 16px;
|
||||||
|
border-left: 2px solid #e4e7ed;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user