Fix Bug #550: AI修复
This commit is contained in:
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<div class="examination-apply-container">
|
||||
<!-- 左侧分类树 & 中间项目列表 (结构保留，聚焦右侧已选区修复) -->
|
||||
<div class="selection-area">
|
||||
<el-tree
|
||||
ref="categoryTree"
|
||||
:data="categoryData"
|
||||
:props="{ label: 'name', children: 'children' }"
|
||||
node-key="id"
|
||||
@node-click="handleCategoryClick"
|
||||
data-cy="category-tree"
|
||||
/>
|
||||
<div class="item-list" data-cy="item-list">
|
||||
<div v-for="item in currentCategoryItems" :key="item.id" class="item-row">
|
||||
<el-checkbox
|
||||
v-model="item.selected"
|
||||
:label="item.name"
|
||||
data-cy="item-checkbox"
|
||||
@change="handleItemCheck(item)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧/下方已选择区域 -->
|
||||
<div class="selected-panel">
|
||||
<h3 class="panel-title">已选择</h3>
|
||||
<div class="selected-list" data-cy="selected-list">
|
||||
<div
|
||||
v-for="item in selectedItems"
|
||||
:key="item.id"
|
||||
class="selected-card"
|
||||
data-cy="selected-card"
|
||||
>
|
||||
<!-- 卡片头部：名称自适应 + 展开/收起 -->
|
||||
<div class="card-header">
|
||||
<el-tooltip
|
||||
:content="item.fullName"
|
||||
placement="top"
|
||||
:disabled="!item.isTruncated"
|
||||
>
|
||||
<span
|
||||
class="card-name"
|
||||
data-cy="selected-card-name"
|
||||
@mouseenter="checkTruncate($event, item)"
|
||||
>
|
||||
{{ item.displayName }}
|
||||
</span>
|
||||
</el-tooltip>
|
||||
<el-button
|
||||
link
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="toggleExpand(item)"
|
||||
data-cy="expand-toggle"
|
||||
>
|
||||
{{ item.expanded ? '收起' : '展开' }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 明细区域：严格遵循 项目 > 检查方法 层级，默认收起 -->
|
||||
<transition name="el-fade-in">
|
||||
<div v-if="item.expanded" class="card-details" data-cy="method-list">
|
||||
<!-- 已移除冗余的“项目套餐明细”标签 -->
|
||||
<div
|
||||
v-for="method in item.methods"
|
||||
:key="method.id"
|
||||
class="method-item"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="method.checked"
|
||||
:label="method.name"
|
||||
data-cy="method-checkbox"
|
||||
@change="handleMethodChange(item, method)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
|
||||
// 模拟分类与项目数据
|
||||
const categoryData = ref([
|
||||
{ id: 'cat_1', name: '彩超', children: [] }
|
||||
])
|
||||
const currentCategoryItems = ref([
|
||||
{ id: 'item_1', name: '128线排', selected: false }
|
||||
])
|
||||
|
||||
// 已选项目列表
|
||||
const selectedItems = ref([])
|
||||
|
||||
/**
|
||||
* 修复点 1：独立解耦
|
||||
* 勾选项目时仅将项目加入已选列表，不联动勾选其下属检查方法。
|
||||
* 方法状态保持独立，由医生手动选择。
|
||||
*/
|
||||
const handleItemCheck = (item) => {
|
||||
if (item.selected) {
|
||||
// 初始化已选结构：去除“套餐”前缀，默认收起，方法未勾选
|
||||
const exists = selectedItems.value.find(i => i.id === item.id)
|
||||
if (!exists) {
|
||||
selectedItems.value.push({
|
||||
id: item.id,
|
||||
displayName: item.name.replace(/套餐/g, '').trim(), // 修复点 2：清理冗余文案
|
||||
fullName: item.name,
|
||||
expanded: false, // 修复点 3：默认收起
|
||||
isTruncated: false,
|
||||
methods: [
|
||||
{ id: `${item.id}_m1`, name: '常规检查', checked: false },
|
||||
{ id: `${item.id}_m2`, name: '血管多普勒', checked: false }
|
||||
]
|
||||
})
|
||||
}
|
||||
} else {
|
||||
selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复点 3：结构化展示与交互
|
||||
* 展开/收起明细，不改变项目选中状态。
|
||||
*/
|
||||
const toggleExpand = (item) => {
|
||||
item.expanded = !item.expanded
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复点 1：方法独立勾选
|
||||
* 仅更新方法自身状态，不反向影响父项目。
|
||||
*/
|
||||
const handleMethodChange = (item, method) => {
|
||||
// 独立处理逻辑，可在此处同步至医嘱草稿或计算费用
|
||||
console.log(`[解耦] 项目 ${item.displayName} 方法 ${method.name} 状态: ${method.checked}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复点 2：名称遮挡优化
|
||||
* 动态检测文本是否溢出，控制 Tooltip 显示。
|
||||
*/
|
||||
const checkTruncate = (e, item) => {
|
||||
const el = e.target
|
||||
nextTick(() => {
|
||||
item.isTruncated = el.scrollWidth > el.clientWidth
|
||||
})
|
||||
}
|
||||
|
||||
const handleCategoryClick = () => {
|
||||
// 分类切换逻辑占位
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.examination-apply-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #f5f7fa;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.selection-area {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.selected-panel {
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 修复点 2：卡片宽度自适应，支持弹性布局 */
|
||||
.selected-card {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 修复点 2：文本溢出省略，悬停提示 */
|
||||
.card-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
}
|
||||
|
||||
.method-item {
|
||||
padding: 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user