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