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

Fix Bug #550: AI修复

Browse Source
This commit is contained in:
赵云
2026-05-27 08:22:01 +08:00
parent 041de38149
commit 91bd1ec9c2
2 changed files with 167 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
openhis-ui-vue3/src/views/outpatient/examination/ExaminationApply.vue
View File

@@ -1,177 +1,169 @@
<template> <template>
<div class="examination-apply-container"> <div class="examination-apply-container">
<!-- 左侧：检查项目分类 --> <!-- 左侧：检查项目分类 -->
<div class="panel-left"> <div class="panel left-panel">
<el-tree <el-tree
class="exam-category-tree"
:data="categoryTree" :data="categoryTree"
:props="{ label: 'name', children: 'children' }"
node-key="id" node-key="id"
highlight-current
@node-click="handleCategoryClick" @node-click="handleCategoryClick"
class="category-tree"
/> />
</div> </div>
<!-- 中间：检查项目列表 --> <!-- 中间：检查项目列表 -->
<div class="panel-middle"> <div class="panel middle-panel">
<el-table :data="currentItems" border style="width: 100%" class="exam-item-list"> <div class="panel-title">检查项目</div>
<el-table-column label="项目名称" prop="name" /> <el-checkbox-group v-model="selectedItemIds" class="item-list">
<el-table-column label="操作" width="100"> <el-checkbox
<template #default="{ row }"> v-for="item in currentItems"
<el-button type="primary" link @click="handleItemSelect(row)">选择</el-button> :key="item.id"
</template> :label="item.id"
</el-table-column> class="item-checkbox"
</el-table> @change="handleItemSelect(item)"
>
<!-- Bug #550 Fix 2: 清理冗余“套餐”字样 -->
{{ item.name.replace(/套餐/g, '') }}
</el-checkbox>
</el-checkbox-group>
</div> </div>
<!-- 右侧/下方：已选择区域 --> <!-- 右侧：已选择区域 -->
<div class="panel-right"> <div class="panel right-panel">
<div class="selected-header">已选择项目</div> <div class="panel-title">已选择</div>
<div class="selected-list"> <div v-if="selectedGroups.length === 0" class="empty-tip">暂无选择项目</div>
<div
v-for="item in selectedItems" <!-- Bug #550 Fix 3 & 4: 结构化展示，默认收起，移除“项目套餐明细”标签 -->
:key="item.id" <div v-for="group in selectedGroups" :key="group.itemId" class="selected-card">
class="selected-item-card" <div class="card-header" @click="toggleExpand(group.itemId)">
> <el-icon class="expand-icon">
<!-- 卡片头部：点击展开/收起 --> <ArrowRight v-if="!group.expanded" />
<div class="card-header" @click="toggleExpand(item)"> <ArrowDown v-else />
<el-icon class="expand-icon"> </el-icon>
<ArrowRight v-if="!item.expanded" /> <!-- Bug #550 Fix 2: 宽度自适应/提示完整名称 -->
<ArrowDown v-else /> <el-tooltip :content="group.itemName" placement="top" :show-after="300">
</el-icon> <span class="item-name">{{ group.itemName }}</span>
<!-- 修复 #550-2：去除“套餐”前缀，支持宽度自适应与完整提示 --> </el-tooltip>
<span class="item-name" :title="cleanName(item.name)">{{ cleanName(item.name) }}</span> </div>
<el-button type="danger" link size="small" @click.stop="removeItem(item)">移除</el-button>
</div>
<!-- 修复 #550-3：默认收起，结构化展示明细，移除冗余“项目套餐明细”标签 --> <!-- 明细区域：严格遵循 项目 > 检查方法 层级 -->
<div v-show="item.expanded" class="detail-section"> <div v-show="group.expanded" class="details-panel">
<div class="method-group"> <div class="method-section">
<span class="group-label">检查方法</span> <span class="section-title">检查方法</span>
<div class="method-list exam-method-list"> <!-- Bug #550 Fix 1: 独立解耦，不随项目勾选自动联动 -->
<el-checkbox <el-checkbox-group
v-for="method in item.methods" v-model="group.selectedMethods"
:key="method.id" class="method-checkbox-group"
v-model="method.checked" @change="handleMethodChange(group)"
@change="onMethodChange(item, method)" >
> <el-checkbox
{{ method.name }} v-for="method in group.methods"
</el-checkbox> :key="method.id"
</div> :label="method.id"
</div> class="method-checkbox"
>
{{ method.name }}
</el-checkbox>
</el-checkbox-group>
</div> </div>
</div> </div>
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup>
import { ref, reactive } from 'vue'; import { ref, computed } from 'vue'
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'; import { ArrowRight, ArrowDown } from '@element-plus/icons-vue'
import type { ElTree } from 'element-plus';
// 模拟数据结构
interface ExamMethod {
id: string;
name: string;
checked: boolean;
}
interface ExamItem {
id: string;
name: string;
methods: ExamMethod[];
expanded: boolean; // 修复 #550-3：默认收起状态
}
// 模拟分类树数据（实际应从API获取）
const categoryTree = ref([ const categoryTree = ref([
{ id: '1', name: '彩超', children: [] } { id: 'c1', label: '彩超', children: [] }
]); ])
const currentItems = ref<ExamItem[]>([ const currentItems = ref([])
{ id: '101', name: '128线排彩超套餐', methods: [{ id: 'm1', name: '常规扫描', checked: false }, { id: 'm2', name: '三维重建', checked: false }], expanded: false } const selectedItemIds = ref([])
]); const selectedGroups = ref([])
const selectedItems = reactive<ExamItem[]>([]); // 切换分类加载项目
const handleCategoryClick = (data) => {
// 实际项目中此处调用API获取项目列表
currentItems.value = data.items || []
}
// 修复 #550-1：项目勾选与检查方法完全解耦，不触发任何自动联动 // Bug #550 Fix 1: 解耦勾选逻辑。仅维护项目选中状态，绝不自动勾选检查方法
const handleItemSelect = (item: ExamItem) => { const handleItemSelect = (item) => {
const exists = selectedItems.find(i => i.id === item.id); const isAdding = selectedItemIds.value.includes(item.id)
if (!exists) {
// 深拷贝避免引用污染，默认 expanded: false if (isAdding) {
selectedItems.push({ // 新增选中项：初始化独立状态，默认收起
...item, const exists = selectedGroups.value.find(g => g.itemId === item.id)
methods: item.methods.map(m => ({ ...m, checked: false })), if (!exists) {
expanded: false selectedGroups.value.push({
}); itemId: item.id,
itemName: item.name.replace(/套餐/g, ''),
methods: item.methods || [],
selectedMethods: [], // 独立维护方法勾选状态
expanded: false // Bug #550 Fix 4: 默认收起
})
}
} else {
// 取消选中：移除对应组
selectedGroups.value = selectedGroups.value.filter(g => g.itemId !== item.id)
} }
}; }
// 修复 #550-2：清理冗余“套餐”字样 // 展开/收起明细
const cleanName = (name: string) => { const toggleExpand = (itemId) => {
return name.replace(/套餐/g, '').trim(); const group = selectedGroups.value.find(g => g.itemId === itemId)
}; if (group) group.expanded = !group.expanded
}
// 修复 #550-3：展开/收起控制 // 检查方法变更处理（仅记录或触发后续业务，不影响项目状态）
const toggleExpand = (item: ExamItem) => { const handleMethodChange = (group) => {
item.expanded = !item.expanded; console.log(`项目 ${group.itemName} 的检查方法已更新:`, group.selectedMethods)
}; // 可在此处调用API同步方法选择状态
}
const removeItem = (item: ExamItem) => {
const idx = selectedItems.findIndex(i => i.id === item.id);
if (idx > -1) selectedItems.splice(idx, 1);
};
// 检查方法独立勾选逻辑，不反向影响父级项目
const onMethodChange = (parent: ExamItem, method: ExamMethod) => {
// 仅记录方法状态，不触发父级联动或自动展开
console.log(`方法 ${method.name} 状态变更为: ${method.checked}`);
};
const handleCategoryClick = (data: any) => {
// 实际业务中此处应请求对应分类下的项目列表
console.log('切换分类:', data.name);
};
</script> </script>
<style scoped> <style scoped>
.examination-apply-container { .examination-apply-container {
display: flex; display: flex;
gap: 16px; gap: 16px;
padding: 16px;
height: 100%; height: 100%;
}
.panel-left, .panel-middle, .panel-right {
background: #fff;
border-radius: 8px;
padding: 12px; padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); background: #fff;
} }
.panel-left { width: 20%; } .panel {
.panel-middle { width: 40%; } flex: 1;
.panel-right { width: 40%; display: flex; flex-direction: column; } border: 1px solid #e4e7ed;
border-radius: 4px;
padding: 12px;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.selected-header { .panel-title {
font-weight: bold; font-weight: 600;
margin-bottom: 12px; margin-bottom: 12px;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #ebeef5;
} }
.selected-list { .item-list, .method-checkbox-group {
flex: 1; display: flex;
overflow-y: auto; flex-direction: column;
gap: 8px;
} }
/* 修复 #550-2：卡片宽度自适应，名称超长省略并支持悬停提示 */ .selected-card {
.selected-item-card { border: 1px solid #dcdfe6;
border: 1px solid #e4e7ed; border-radius: 4px;
border-radius: 6px;
margin-bottom: 10px; margin-bottom: 10px;
background: #fafafa; background: #fafafa;
overflow: hidden;
} }
.card-header { .card-header {
@@ -179,43 +171,46 @@ const handleCategoryClick = (data: any) => {
align-items: center; align-items: center;
padding: 10px; padding: 10px;
cursor: pointer; cursor: pointer;
user-select: none; background: #f5f7fa;
transition: background 0.2s;
}
.card-header:hover {
background: #e9ecef;
} }
.expand-icon { .expand-icon {
margin-right: 8px; margin-right: 8px;
transition: transform 0.2s; color: #909399;
} }
/* Bug #550 Fix 2: 名称截断与自适应提示 */
.item-name { .item-name {
flex: 1; flex: 1;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; font-size: 14px;
max-width: 100%; color: #303133;
font-weight: 500;
} }
.detail-section { .details-panel {
padding: 0 10px 10px 28px; padding: 10px;
border-top: 1px dashed #e4e7ed; border-top: 1px solid #ebeef5;
background: #fff; background: #fff;
} }
.method-group { .section-title {
margin-top: 8px;
}
.group-label {
font-size: 12px;
color: #909399;
margin-bottom: 6px;
display: block; display: block;
font-size: 13px;
color: #606266;
margin-bottom: 8px;
font-weight: 500;
} }
.method-list { .empty-tip {
display: flex; color: #909399;
flex-wrap: wrap; text-align: center;
gap: 12px; margin-top: 40px;
} }
</style> </style>

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

@@ -43,4 +43,30 @@ describe('Bug Regression Tests', () => {
cy.get('.detail-count').invoke('text').should('eq', summaryCount) cy.get('.detail-count').invoke('text').should('eq', summaryCount)
}) })
}) })
/**
* @bug550 @regression
* 验证门诊检查申请项目选择交互优化：解耦勾选、名称完整显示、明细默认收起及层级结构
*/
it('Bug #550: 检查申请项目选择交互优化', () => {
cy.login('doctor1', '123456')
cy.visit('/outpatient/doctor/examination')
// 1. 展开彩超分类并勾选项目
cy.get('.category-tree').contains('彩超').click()
cy.get('.item-checkbox').contains('128线排').click()
// 2. 验证检查方法未自动勾选（解耦）
cy.get('.method-checkbox-group .el-checkbox').should('not.be.checked')
// 3. 验证已选卡片：无“套餐”前缀，名称完整或可悬停查看
cy.get('.selected-card').should('not.contain', '套餐')
cy.get('.selected-card .item-name').should('have.attr', 'title', '128线排')
// 4. 验证明细默认收起，且层级为 项目 > 检查方法
cy.get('.details-panel').should('not.be.visible')
cy.get('.card-header').first().click()
cy.get('.details-panel').should('be.visible')
cy.get('.method-section').should('exist')
})
}) })