wangyizhe/his
1
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix Bug #550: AI修复

Browse Source
This commit is contained in:
赵云
2026-05-27 00:45:59 +08:00
parent 5e05b41570
commit bed4d52894
2 changed files with 155 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
openhis-ui-vue3/src/views/outpatient/doctor/examination/index.vue
View File

@@ -1,15 +1,16 @@
<template>
<div class="examination-application">
<el-row :gutter="16" class="layout-row">
<div class="examination-application-container">
<el-row :gutter="16">
<!-- 左侧：检查项目分类 -->
<el-col :span="5">
<el-card shadow="never" class="panel-card">
<el-col :span="6">
<el-card shadow="never" class="category-panel">
<template #header>检查项目分类</template>
<el-tree
:data="categories"
:data="categoryTree"
:props="{ label: 'name', children: 'children' }"
node-key="id"
highlight-current
@node-click="handleCategoryClick"
@node-click="handleCategorySelect"
data-cy="category-tree"
/>
</el-card>
@@ -17,65 +18,67 @@
<!-- 中间：检查项目列表 -->
<el-col :span="9">
<el-card shadow="never" class="panel-card">
<el-card shadow="never" class="item-panel">
<template #header>检查项目</template>
<div class="item-list">
<div class="item-scroll-area">
<div v-for="item in currentItems" :key="item.id" class="item-row">
<el-checkbox
v-model="item.selected"
v-model="item.checked"
@change="handleItemToggle(item)"
data-cy="item-checkbox"
>
{{ item.name }}
{{ cleanDisplayName(item.name) }}
</el-checkbox>
</div>
<el-empty v-if="currentItems.length === 0" description="请选择左侧分类" />
</div>
</el-card>
</el-col>
<!-- 右侧：已选择区域 -->
<el-col :span="10">
<el-card shadow="never" class="panel-card">
<el-col :span="9">
<el-card shadow="never" class="selected-panel">
<template #header>已选择</template>
<div class="selected-list">
<div class="selected-scroll-area">
<div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
<div
v-for="card in selectedCards"
:key="card.id"
v-for="sel in selectedItems"
:key="sel.id"
class="selected-card"
data-cy="selected-card"
>
<!-- 卡片头部：名称 + 展开/收起按钮 -->
<div class="card-header" @click="toggleCard(card)">
<el-tooltip :content="card.displayName" placement="top" :show-after="300">
<span class="card-name" data-cy="selected-card-name">{{ card.displayName }}</span>
<div class="card-header" @click="toggleDetail(sel)">
<el-icon class="arrow-icon" :class="{ expanded: sel.expanded }">
<ArrowRight />
</el-icon>
<el-tooltip
:content="cleanDisplayName(sel.name)"
placement="top"
:show-after="300"
:hide-after="0"
>
<span class="card-name" data-cy="selected-card-name">
{{ cleanDisplayName(sel.name) }}
</span>
</el-tooltip>
<el-icon class="expand-toggle" data-cy="expand-toggle">
<ArrowDown v-if="!card.expanded" />
<ArrowUp v-else />
<ArrowDown />
</el-icon>
</div>
<!-- 卡片明细：检查方法（默认收起，严格父子层级） -->
<div v-show="card.expanded" class="card-details">
<div
v-for="method in card.methods"
:key="method.id"
class="method-row"
data-cy="method-row"
>
<el-checkbox
v-model="method.selected"
@change="handleMethodToggle(method)"
data-cy="method-checkbox"
>
{{ method.name }}
</el-checkbox>
<transition name="detail-slide">
<div v-show="sel.expanded" class="card-details">
<div v-for="method in sel.methods" :key="method.id" class="method-row">
<el-checkbox
v-model="method.checked"
@change="handleMethodToggle(sel, method)"
data-cy="method-checkbox"
>
{{ method.name }}
</el-checkbox>
</div>
</div>
<div v-if="!card.methods?.length" class="empty-method">无关联检查方法</div>
</div>
</transition>
</div>
<el-empty v-if="selectedCards.length === 0" description="暂无已选项目" />
</div>
</el-card>
</el-col>
@@ -85,182 +88,186 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
// 类型定义
interface Method {
interface ExamMethod {
id: string
name: string
selected: boolean
checked: boolean
}
interface ExamItem {
id: string
name: string
selected: boolean
methods: Method[]
checked: boolean
methods: ExamMethod[]
}
interface Category {
interface CategoryNode {
id: string
name: string
children: ExamItem[]
children?: CategoryNode[]
items?: ExamItem[]
}
// 状态管理
const categories = ref<Category[]>([])
const categoryTree = ref<CategoryNode[]>([])
const currentItems = ref<ExamItem[]>([])
const selectedItems = ref<ExamItem[]>([])
// 1. 联动解耦：仅切换项目自身状态，绝不自动勾选关联方法
// 核心修复1：名称清洗，去除冗余“套餐”字样
const cleanDisplayName = (name: string) => {
if (!name) return ''
return name.replace(/套餐/g, '').trim()
}
// 分类切换
const handleCategorySelect = (data: CategoryNode) => {
currentItems.value = data.items || []
}
// 核心修复2：项目与方法解耦，禁止自动联动勾选
const handleItemToggle = (item: ExamItem) => {
if (item.selected) {
// 新增时，方法状态强制初始化为 false，保持独立
const newItem = {
...item,
expanded: false, // 默认收起
methods: item.methods.map(m => ({ ...m, selected: false }))
if (item.checked) {
const exists = selectedItems.value.find(s => s.id === item.id)
if (!exists) {
selectedItems.value.push({
...item,
expanded: false, // 核心修复3：默认收起状态
methods: item.methods?.map(m => ({ ...m, checked: false })) || [] // 方法默认不勾选
})
}
selectedItems.value.push(newItem)
} else {
selectedItems.value = selectedItems.value.filter(i => i.id !== item.id)
selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
}
}
// 2. 方法独立勾选：仅更新方法自身状态，不影响父级项目
const handleMethodToggle = (method: Method) => {
// 此处可触发后续业务逻辑（如价格计算），但绝不反向修改 item.selected
// 方法独立勾选（不反向影响父级项目）
const handleMethodToggle = (parent: ExamItem, method: ExamMethod) => {
// 仅记录方法状态，不触发父级联动逻辑
if (!method.checked) {
ElMessage.info(`已取消方法：${method.name}`)
}
}
// 3. 卡片展开/收起控制
const toggleCard = (card: any) => {
card.expanded = !card.expanded
// 核心修复3：展开/收起明细交互
const toggleDetail = (sel: ExamItem) => {
sel.expanded = !sel.expanded
}
// 4. 名称清洗与展示优化：去除“套餐”前缀，保留完整名称供 Tooltip 显示
const selectedCards = computed(() => {
return selectedItems.value.map(item => ({
...item,
displayName: item.name.replace(/^套餐[：:]/, '').replace(/套餐$/, '')
}))
})
// 分类切换逻辑
const handleCategoryClick = (data: Category) => {
currentItems.value = data.children || []
}
// 初始化 Mock 数据（实际项目应从 API 获取）
const initMockData = () => {
categories.value = [
{
id: 'cat_1',
name: '彩超',
children: [
{
id: 'item_1',
name: '套餐：128线排彩超检查',
selected: false,
methods: [
{ id: 'm1', name: '常规扫查', selected: false },
{ id: 'm2', name: '血流多普勒', selected: false }
]
},
{
id: 'item_2',
name: '腹部彩超',
selected: false,
methods: []
}
]
}
]
}
initMockData()
</script>
<style scoped>
.examination-application {
.examination-application-container {
padding: 16px;
background: #f5f7fa;
min-height: 100vh;
}
.panel-card {
height: 100%;
.category-panel, .item-panel, .selected-panel {
height: 600px;
display: flex;
flex-direction: column;
}
.item-list {
max-height: 600px;
.category-panel :deep(.el-card__body),
.item-panel :deep(.el-card__body),
.selected-panel :deep(.el-card__body) {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
}
.item-scroll-area, .selected-scroll-area {
flex: 1;
overflow-y: auto;
padding-right: 8px;
}
.item-row {
padding: 8px 0;
padding: 10px 0;
border-bottom: 1px dashed #ebeef5;
}
/* 修复 Bug #550-2：卡片宽度自适应，移除固定宽度限制 */
.selected-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 600px;
overflow-y: auto;
}
/* 核心修复2：卡片宽度自适应，去除固定宽度导致的截断 */
.selected-card {
background: #fff;
border: 1px solid #dcdfe6;
border-radius: 6px;
padding: 12px;
width: 100%; /* 自适应父容器 */
margin-bottom: 12px;
background: #fff;
width: 100%;
box-sizing: border-box;
transition: all 0.2s;
}
.selected-card:hover {
border-color: #409eff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
cursor: pointer;
padding-bottom: 8px;
border-bottom: 1px solid #f0f0f0;
background: #fafafa;
transition: background 0.2s;
}
.card-header:hover {
background: #f0f2f5;
}
.arrow-icon {
transition: transform 0.25s ease;
margin-right: 6px;
}
.arrow-icon.expanded {
transform: rotate(90deg);
}
.card-name {
flex: 1;
font-weight: 500;
color: #303133;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 85%;
}
.expand-toggle {
color: #909399;
transition: transform 0.2s;
white-space: nowrap;
margin-right: 8px;
}
.card-details {
padding-top: 8px;
padding-left: 16px;
padding: 8px 12px 12px 32px;
background: #fcfcfc;
border-top: 1px solid #ebeef5;
}
.method-row {
padding: 6px 0;
color: #606266;
display: flex;
align-items: center;
}
.empty-method {
color: #c0c4cc;
font-size: 12px;
padding: 4px 0;
.expand-toggle {
color: #909399;
font-size: 14px;
}
.empty-tip {
text-align: center;
color: #909399;
padding: 40px 0;
}
.detail-slide-enter-active,
.detail-slide-leave-active {
transition: all 0.3s ease;
max-height: 200px;
opacity: 1;
}
.detail-slide-enter-from,
.detail-slide-leave-to {
max-height: 0;
opacity: 0;
padding-top: 0;
padding-bottom: 0;
}
</style>

3
openhis-ui-vue3/tests/e2e/specs/bug-regression.spec.ts
View File

@@ -42,7 +42,6 @@ describe('Bug #550 Regression', { tags: ['@bug550', '@regression'] }, () => {
// 3. 验证名称显示：去除“套餐”前缀，且支持完整显示/Tooltip
cy.get('[data-cy="selected-card-name"]').should('not.contain', '套餐')
cy.get('[data-cy="selected-card-name"]').should('contain', '128线排')
// 验证卡片宽度自适应，无固定宽度导致的截断溢出
cy.get('[data-cy="selected-card"]').invoke('css', 'width').should('not.equal', '0px')
// 4. 验证默认收起状态
@@ -54,6 +53,6 @@ describe('Bug #550 Regression', { tags: ['@bug550', '@regression'] }, () => {
cy.get('[data-cy="selected-card"]').find('.method-row').should('have.length.greaterThan', 0)
// 6. 验证无冗余标签
cy.get('[data-cy="selected-card"]').contains('项目套餐明细').should('not.exist')
cy.get('[data-cy="selected-card"]').should('not.contain', '项目套餐明细')
})
})