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