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> <template>
<div class="examination-application"> <div class="examination-application-container">
<el-row :gutter="16" class="layout-row"> <el-row :gutter="16">
<!-- 左侧：检查项目分类 --> <!-- 左侧：检查项目分类 -->
<el-col :span="5"> <el-col :span="6">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="category-panel">
<template #header>检查项目分类</template> <template #header>检查项目分类</template>
<el-tree <el-tree
:data="categories" :data="categoryTree"
:props="{ label: 'name', children: 'children' }"
node-key="id" node-key="id"
highlight-current highlight-current
@node-click="handleCategoryClick" @node-click="handleCategorySelect"
data-cy="category-tree" data-cy="category-tree"
/> />
</el-card> </el-card>
@@ -17,65 +18,67 @@
<!-- 中间：检查项目列表 --> <!-- 中间：检查项目列表 -->
<el-col :span="9"> <el-col :span="9">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="item-panel">
<template #header>检查项目</template> <template #header>检查项目</template>
<div class="item-list"> <div class="item-scroll-area">
<div v-for="item in currentItems" :key="item.id" class="item-row"> <div v-for="item in currentItems" :key="item.id" class="item-row">
<el-checkbox <el-checkbox
v-model="item.selected" v-model="item.checked"
@change="handleItemToggle(item)" @change="handleItemToggle(item)"
data-cy="item-checkbox" data-cy="item-checkbox"
> >
{{ item.name }} {{ cleanDisplayName(item.name) }}
</el-checkbox> </el-checkbox>
</div> </div>
<el-empty v-if="currentItems.length === 0" description="请选择左侧分类" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 右侧：已选择区域 --> <!-- 右侧：已选择区域 -->
<el-col :span="10"> <el-col :span="9">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="selected-panel">
<template #header>已选择</template> <template #header>已选择</template>
<div class="selected-list"> <div class="selected-scroll-area">
<div v-if="selectedItems.length === 0" class="empty-tip">暂无选择项目</div>
<div <div
v-for="card in selectedCards" v-for="sel in selectedItems"
:key="card.id" :key="sel.id"
class="selected-card" class="selected-card"
data-cy="selected-card" data-cy="selected-card"
> >
<!-- 卡片头部：名称 + 展开/收起按钮 --> <div class="card-header" @click="toggleDetail(sel)">
<div class="card-header" @click="toggleCard(card)"> <el-icon class="arrow-icon" :class="{ expanded: sel.expanded }">
<el-tooltip :content="card.displayName" placement="top" :show-after="300"> <ArrowRight />
<span class="card-name" data-cy="selected-card-name">{{ card.displayName }}</span> </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-tooltip>
<el-icon class="expand-toggle" data-cy="expand-toggle"> <el-icon class="expand-toggle" data-cy="expand-toggle">
<ArrowDown v-if="!card.expanded" /> <ArrowDown />
<ArrowUp v-else />
</el-icon> </el-icon>
</div> </div>
<!-- 卡片明细：检查方法（默认收起，严格父子层级） --> <transition name="detail-slide">
<div v-show="card.expanded" class="card-details"> <div v-show="sel.expanded" class="card-details">
<div <div v-for="method in sel.methods" :key="method.id" class="method-row">
v-for="method in card.methods" <el-checkbox
:key="method.id" v-model="method.checked"
class="method-row" @change="handleMethodToggle(sel, method)"
data-cy="method-row" data-cy="method-checkbox"
> >
<el-checkbox {{ method.name }}
v-model="method.selected" </el-checkbox>
@change="handleMethodToggle(method)" </div>
data-cy="method-checkbox"
>
{{ method.name }}
</el-checkbox>
</div> </div>
<div v-if="!card.methods?.length" class="empty-method">无关联检查方法</div> </transition>
</div>
</div> </div>
<el-empty v-if="selectedCards.length === 0" description="暂无已选项目" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -85,182 +88,186 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue' 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 id: string
name: string name: string
selected: boolean checked: boolean
} }
interface ExamItem { interface ExamItem {
id: string id: string
name: string name: string
selected: boolean checked: boolean
methods: Method[] methods: ExamMethod[]
} }
interface Category { interface CategoryNode {
id: string id: string
name: string name: string
children: ExamItem[] children?: CategoryNode[]
items?: ExamItem[]
} }
// 状态管理 // 状态管理
const categories = ref<Category[]>([]) const categoryTree = ref<CategoryNode[]>([])
const currentItems = ref<ExamItem[]>([]) const currentItems = ref<ExamItem[]>([])
const selectedItems = 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) => { const handleItemToggle = (item: ExamItem) => {
if (item.selected) { if (item.checked) {
// 新增时，方法状态强制初始化为 false，保持独立 const exists = selectedItems.value.find(s => s.id === item.id)
const newItem = { if (!exists) {
...item, selectedItems.value.push({
expanded: false, // 默认收起 ...item,
methods: item.methods.map(m => ({ ...m, selected: false })) expanded: false, // 核心修复3：默认收起状态
methods: item.methods?.map(m => ({ ...m, checked: false })) || [] // 方法默认不勾选
})
} }
selectedItems.value.push(newItem)
} else { } 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) => { const handleMethodToggle = (parent: ExamItem, method: ExamMethod) => {
// 此处可触发后续业务逻辑（如价格计算），但绝不反向修改 item.selected // 仅记录方法状态，不触发父级联动逻辑
if (!method.checked) {
ElMessage.info(`已取消方法：${method.name}`)
}
} }
// 3. 卡片展开/收起控制 // 核心修复3：展开/收起明细交互
const toggleCard = (card: any) => { const toggleDetail = (sel: ExamItem) => {
card.expanded = !card.expanded 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> </script>
<style scoped> <style scoped>
.examination-application { .examination-application-container {
padding: 16px; padding: 16px;
background: #f5f7fa; background: #f5f7fa;
min-height: 100vh; min-height: 100vh;
} }
.panel-card { .category-panel, .item-panel, .selected-panel {
height: 100%; height: 600px;
display: flex;
flex-direction: column;
} }
.item-list { .category-panel :deep(.el-card__body),
max-height: 600px; .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; overflow-y: auto;
padding-right: 8px;
} }
.item-row { .item-row {
padding: 8px 0; padding: 10px 0;
border-bottom: 1px dashed #ebeef5; border-bottom: 1px dashed #ebeef5;
} }
/* 修复 Bug #550-2：卡片宽度自适应，移除固定宽度限制 */ /* 核心修复2：卡片宽度自适应，去除固定宽度导致的截断 */
.selected-list {
display: flex;
flex-direction: column;
gap: 12px;
max-height: 600px;
overflow-y: auto;
}
.selected-card { .selected-card {
background: #fff;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
border-radius: 6px; border-radius: 6px;
padding: 12px; margin-bottom: 12px;
width: 100%; /* 自适应父容器 */ background: #fff;
width: 100%;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.2s; overflow: hidden;
}
.selected-card:hover {
border-color: #409eff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
} }
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
padding: 12px;
cursor: pointer; cursor: pointer;
padding-bottom: 8px; background: #fafafa;
border-bottom: 1px solid #f0f0f0; 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 { .card-name {
flex: 1;
font-weight: 500; font-weight: 500;
color: #303133;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 85%; white-space: nowrap;
} margin-right: 8px;
.expand-toggle {
color: #909399;
transition: transform 0.2s;
} }
.card-details { .card-details {
padding-top: 8px; padding: 8px 12px 12px 32px;
padding-left: 16px; background: #fcfcfc;
border-top: 1px solid #ebeef5;
} }
.method-row { .method-row {
padding: 6px 0; padding: 6px 0;
color: #606266; display: flex;
align-items: center;
} }
.empty-method { .expand-toggle {
color: #c0c4cc; color: #909399;
font-size: 12px; font-size: 14px;
padding: 4px 0; }
.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> </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 // 3. 验证名称显示：去除“套餐”前缀，且支持完整显示/Tooltip
cy.get('[data-cy="selected-card-name"]').should('not.contain', '套餐') 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-name"]').should('contain', '128线排')
// 验证卡片宽度自适应，无固定宽度导致的截断溢出
cy.get('[data-cy="selected-card"]').invoke('css', 'width').should('not.equal', '0px') cy.get('[data-cy="selected-card"]').invoke('css', 'width').should('not.equal', '0px')
// 4. 验证默认收起状态 // 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) cy.get('[data-cy="selected-card"]').find('.method-row').should('have.length.greaterThan', 0)
// 6. 验证无冗余标签 // 6. 验证无冗余标签
cy.get('[data-cy="selected-card"]').contains('项目套餐明细').should('not.exist') cy.get('[data-cy="selected-card"]').should('not.contain', '项目套餐明细')
}) })
}) })