Fix Bug #550: AI修复
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="examination-apply-container">
|
||||
<!-- 左侧分类树 & 中间项目列表 (结构保留，聚焦右侧已选区修复) -->
|
||||
<!-- 左侧分类树 & 中间项目列表 -->
|
||||
<div class="selection-area">
|
||||
<el-tree
|
||||
ref="categoryTree"
|
||||
@@ -58,20 +58,19 @@
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 明细区域：严格遵循 项目 > 检查方法 层级，默认收起 -->
|
||||
<transition name="el-fade-in">
|
||||
<div v-if="item.expanded" class="card-details" data-cy="method-list">
|
||||
<!-- 已移除冗余的“项目套餐明细”标签 -->
|
||||
<!-- 结构化明细：项目 > 检查方法 (默认收起) -->
|
||||
<transition name="slide-fade">
|
||||
<div v-if="item.expanded && item.methods?.length" class="card-details">
|
||||
<div
|
||||
v-for="method in item.methods"
|
||||
:key="method.id"
|
||||
class="method-item"
|
||||
class="method-row"
|
||||
>
|
||||
<el-checkbox
|
||||
v-model="method.checked"
|
||||
v-model="method.selected"
|
||||
:label="method.name"
|
||||
data-cy="method-checkbox"
|
||||
@change="handleMethodChange(item, method)"
|
||||
@change="handleMethodCheck(item, method)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,40 +81,52 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { ElTree, ElCheckbox, ElButton, ElTooltip } from 'element-plus'
|
||||
|
||||
// 模拟分类与项目数据
|
||||
const categoryData = ref([
|
||||
{ id: 'cat_1', name: '彩超', children: [] }
|
||||
])
|
||||
const currentCategoryItems = ref([
|
||||
{ id: 'item_1', name: '128线排', selected: false }
|
||||
])
|
||||
// 模拟数据结构 (实际应从API获取)
|
||||
interface Method {
|
||||
id: string
|
||||
name: string
|
||||
selected: boolean
|
||||
}
|
||||
|
||||
// 已选项目列表
|
||||
const selectedItems = ref([])
|
||||
interface ExamItem {
|
||||
id: string
|
||||
name: string
|
||||
fullName: string
|
||||
selected: boolean
|
||||
expanded: boolean
|
||||
isTruncated: boolean
|
||||
methods: Method[]
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复点 1：独立解耦
|
||||
* 勾选项目时仅将项目加入已选列表，不联动勾选其下属检查方法。
|
||||
* 方法状态保持独立，由医生手动选择。
|
||||
*/
|
||||
const handleItemCheck = (item) => {
|
||||
const categoryData = ref<any[]>([])
|
||||
const currentCategoryItems = ref<ExamItem[]>([])
|
||||
const selectedItems = ref<ExamItem[]>([])
|
||||
|
||||
// 清理名称：去除冗余的“套餐”前缀
|
||||
const cleanName = (name: string) => name.replace(/^套餐[：:]/, '').trim()
|
||||
|
||||
// 处理分类点击
|
||||
const handleCategoryClick = (data: any) => {
|
||||
// 实际逻辑：根据分类加载项目列表
|
||||
// 此处仅演示解耦逻辑
|
||||
currentCategoryItems.value = data.items || []
|
||||
}
|
||||
|
||||
// 修复联动冲突：仅更新项目状态，绝不自动勾选检查方法
|
||||
const handleItemCheck = (item: ExamItem) => {
|
||||
if (item.selected) {
|
||||
// 初始化已选结构：去除“套餐”前缀，默认收起，方法未勾选
|
||||
const exists = selectedItems.value.find(i => i.id === item.id)
|
||||
if (!exists) {
|
||||
// 首次选中时初始化状态，默认收起，方法独立未勾选
|
||||
if (!selectedItems.value.find(i => i.id === item.id)) {
|
||||
selectedItems.value.push({
|
||||
id: item.id,
|
||||
displayName: item.name.replace(/套餐/g, '').trim(), // 修复点 2：清理冗余文案
|
||||
fullName: item.name,
|
||||
expanded: false, // 修复点 3：默认收起
|
||||
...item,
|
||||
displayName: cleanName(item.name),
|
||||
expanded: false,
|
||||
isTruncated: false,
|
||||
methods: [
|
||||
{ id: `${item.id}_m1`, name: '常规检查', checked: false },
|
||||
{ id: `${item.id}_m2`, name: '血管多普勒', checked: false }
|
||||
]
|
||||
methods: item.methods?.map(m => ({ ...m, selected: false })) || []
|
||||
})
|
||||
}
|
||||
} else {
|
||||
@@ -123,36 +134,22 @@ const handleItemCheck = (item) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复点 3：结构化展示与交互
|
||||
* 展开/收起明细，不改变项目选中状态。
|
||||
*/
|
||||
const toggleExpand = (item) => {
|
||||
// 检查方法独立勾选逻辑
|
||||
const handleMethodCheck = (parentItem: ExamItem, method: Method) => {
|
||||
// 仅更新当前方法状态，不影响父项目或其他方法
|
||||
// 实际业务中可在此处同步至全局表单数据
|
||||
console.log(`Method ${method.name} toggled independently.`)
|
||||
}
|
||||
|
||||
// 展开/收起控制
|
||||
const toggleExpand = (item: ExamItem) => {
|
||||
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 = () => {
|
||||
// 分类切换逻辑占位
|
||||
// 文本截断检测
|
||||
const checkTruncate = (event: MouseEvent, item: ExamItem) => {
|
||||
const el = event.target as HTMLElement
|
||||
item.isTruncated = el.scrollWidth > el.clientWidth
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -161,8 +158,7 @@ const handleCategoryClick = () => {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
background: #f5f7fa;
|
||||
min-height: 500px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.selection-area {
|
||||
@@ -173,73 +169,96 @@ const handleCategoryClick = () => {
|
||||
}
|
||||
|
||||
.item-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.item-row {
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px dashed #f0f0f0;
|
||||
}
|
||||
|
||||
.selected-panel {
|
||||
width: 320px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-left: 1px solid #ebeef5;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 修复点 2：卡片宽度自适应，支持弹性布局 */
|
||||
/* 修复固定宽度导致的遮挡：使用 flex 自适应 */
|
||||
.selected-card {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
background: #f9fafc;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 修复点 2：文本溢出省略，悬停提示 */
|
||||
/* 名称自适应与省略号 */
|
||||
.card-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
border-top: 1px dashed #dcdfe6;
|
||||
}
|
||||
|
||||
.method-item {
|
||||
padding: 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.method-row {
|
||||
padding: 4px 0 4px 16px;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 展开收起动画 */
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
max-height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user