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 03:12:26 +08:00
parent 9628bd1be9
commit 81dea5c498
2 changed files with 202 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,14 +2,15 @@
<div class="examination-apply-container">
<el-row :gutter="16">
<!-- 左侧：检查项目分类 -->
<el-col :span="6">
<el-col :span="5">
<el-card shadow="never" class="panel-card">
<template #header>检查项目分类</template>
<el-tree
:data="categoryTree"
ref="categoryTreeRef"
:data="categoryList"
:props="{ label: 'name', children: 'children' }"
node-key="id"
highlight-current
node-key="id"
@node-click="handleCategoryClick"
/>
</el-card>
@@ -19,52 +20,51 @@
<el-col :span="9">
<el-card shadow="never" class="panel-card">
<template #header>检查项目</template>
<div class="exam-item-list">
<div v-for="item in currentItems" :key="item.id" class="item-row">
<el-checkbox
v-model="item.checked"
:label="cleanName(item.name)"
@change="handleItemCheck(item)"
/>
</div>
<el-empty v-if="currentItems.length === 0" description="请选择左侧分类" />
<div class="item-scroll-area">
<el-checkbox-group v-model="selectedItemIds" @change="handleItemChange">
<div v-for="item in currentItems" :key="item.id" class="list-item">
<el-checkbox :label="item.id" :value="item.id">
<span class="item-label">{{ item.name }}</span>
</el-checkbox>
</div>
</el-checkbox-group>
</div>
</el-card>
</el-col>
<!-- 右侧：已选择区域 -->
<el-col :span="9">
<!-- 右侧：已选择 & 检查方法 -->
<el-col :span="10">
<el-card shadow="never" class="panel-card">
<template #header>已选择</template>
<div class="selected-area">
<el-collapse v-model="activeCollapse" accordion>
<el-collapse-item
v-for="selected in selectedItems"
:key="selected.id"
:name="selected.id"
>
<template #title>
<div class="card-title" :title="cleanName(selected.name)">
{{ cleanName(selected.name) }}
</div>
</template>
<div class="detail-hierarchy">
<div class="method-section">
<span class="section-label">检查方法：</span>
<el-checkbox-group v-model="selected.selectedMethods">
<el-checkbox
v-for="method in selected.methods"
:key="method.id"
:label="method.id"
>
<template #header>已选择项目</template>
<div v-if="structuredSelected.length === 0" class="empty-state">
请在左侧选择检查项目
</div>
<div v-else class="selected-wrapper">
<div v-for="group in structuredSelected" :key="group.id" class="selected-group">
<!-- 父级项目卡片 -->
<div class="selected-card" @click="toggleExpand(group.id)">
<el-tooltip :content="group.name" placement="top" :show-after="300" :offset="10">
<span class="card-name">{{ group.name }}</span>
</el-tooltip>
<el-icon class="expand-icon">
<ArrowRight v-if="!group.expanded" />
<ArrowDown v-else />
</el-icon>
</div>
<!-- 子级检查方法明细（默认收起） -->
<transition name="slide-fade">
<div v-show="group.expanded" class="method-panel">
<el-checkbox-group v-model="selectedMethodIds" @change="handleMethodChange">
<div v-for="method in group.methods" :key="method.id" class="method-item">
<el-checkbox :label="method.id" :value="method.id">
{{ method.name }}
</el-checkbox>
</el-checkbox-group>
</div>
</div>
</el-checkbox-group>
</div>
</el-collapse-item>
</el-collapse>
<el-empty v-if="selectedItems.length === 0" description="暂无选择项目" />
</transition>
</div>
</div>
</el-card>
</el-col>
@@ -72,100 +72,158 @@
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
<script setup lang="ts">
import { ref, computed } from 'vue';
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 模拟分类数据
const categoryTree = ref([
{ id: 1, name: '彩超', children: [] },
{ id: 2, name: 'CT', children: [] }
])
// 模拟分类与项目数据结构（实际应从API获取）
interface Category { id: string; name: string; children?: Category[] }
interface ExamItem { id: string; name: string; methods?: { id: string; name: string }[] }
// 当前分类下的项目
const currentItems = ref([])
const categoryList = ref<Category[]>([]);
const currentItems = ref<ExamItem[]>([]);
const selectedItemIds = ref<string[]>([]);
const selectedMethodIds = ref<string[]>([]);
// 已选择项目列表
const selectedItems = ref([])
const activeCollapse = ref([]) // 默认空数组，实现默认收起
// 结构化已选数据：严格遵循 项目 > 检查方法 层级
const structuredSelected = ref<{
id: string;
name: string;
expanded: boolean;
methods: { id: string; name: string }[];
}[]>([]);
// 清理名称中的冗余“套餐”字样
const cleanName = (name) => name.replace(/套餐/g, '')
// 分类点击：加载对应项目，并准备关联方法（不自动勾选）
const handleCategoryClick = (data: any) => {
// 实际调用: fetchExamItemsByCategory(data.id)
currentItems.value = data.items || [];
};
// 切换分类加载项目
const handleCategoryClick = (data) => {
// 实际项目中此处应调用 API 获取项目列表
currentItems.value = [
{ id: 101, name: '128线排套餐', checked: false, methods: [
{ id: 'm1', name: '常规' },
{ id: 'm2', name: '增强' }
]}
]
}
// 项目勾选变化（独立解耦）
const handleItemChange = (ids: string[]) => {
const added = ids.filter(id => !selectedItemIds.value.includes(id));
const removed = selectedItemIds.value.filter(id => !ids.includes(id));
// 核心修复1：项目勾选与检查方法解耦，禁止自动联动勾选
const handleItemCheck = (item) => {
if (item.checked) {
// 仅当未添加时才加入已选列表
const exists = selectedItems.value.find(s => s.id === item.id)
if (!exists) {
selectedItems.value.push({
// 新增项目：清理"套餐"前缀，默认收起，注入关联方法
added.forEach(id => {
const item = currentItems.value.find(i => i.id === id);
if (item) {
structuredSelected.value.push({
id: item.id,
name: item.name,
methods: item.methods,
selectedMethods: [], // 独立维护方法勾选状态，初始为空
checked: true
})
name: item.name.replace(/^套餐[：:]/, ''), // 去除冗余前缀
expanded: false, // 默认收起
methods: item.methods || []
});
}
} else {
// 取消勾选时移除
selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
activeCollapse.value = activeCollapse.value.filter(id => id !== item.id)
});
// 移除项目：同步清理其下的已选方法
if (removed.length > 0) {
structuredSelected.value = structuredSelected.value.filter(g => ids.includes(g.id));
const validMethodIds = new Set(
structuredSelected.value.flatMap(g => g.methods.map(m => m.id))
);
selectedMethodIds.value = selectedMethodIds.value.filter(mId => validMethodIds.has(mId));
}
}
selectedItemIds.value = ids;
};
// 检查方法勾选变化（独立解耦）
const handleMethodChange = (ids: string[]) => {
selectedMethodIds.value = ids;
};
// 展开/收起明细
const toggleExpand = (id: string) => {
const group = structuredSelected.value.find(g => g.id === id);
if (group) group.expanded = !group.expanded;
};
</script>
<style scoped>
.examination-apply-container {
padding: 16px;
background: #f5f7fa;
min-height: 100%;
min-height: 100vh;
}
.panel-card {
height: 100%;
border-radius: 8px;
}
.exam-item-list {
.item-scroll-area {
max-height: 500px;
overflow-y: auto;
padding-right: 8px;
}
.list-item {
padding: 10px 0;
border-bottom: 1px dashed #ebeef5;
}
.item-label {
font-size: 14px;
color: #303133;
}
.selected-wrapper {
max-height: 500px;
overflow-y: auto;
}
.item-row {
padding: 8px 0;
border-bottom: 1px dashed #ebeef5;
.selected-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
background: #ffffff;
border: 1px solid #dcdfe6;
border-radius: 6px;
cursor: pointer;
margin-bottom: 8px;
transition: all 0.2s;
}
.selected-area {
min-height: 200px;
.selected-card:hover {
border-color: #409eff;
background: #ecf5ff;
}
/* 核心修复2：卡片宽度自适应，超长省略并支持悬停提示 */
.card-title {
width: 100%;
max-width: 220px;
.card-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-right: 12px;
font-weight: 500;
color: #303133;
}
/* 核心修复3：结构化展示，移除冗余标签，明确层级 */
.detail-hierarchy {
padding: 12px 0 4px;
.expand-icon {
color: #909399;
font-size: 14px;
}
.method-section {
display: flex;
align-items: flex-start;
gap: 8px;
.method-panel {
padding: 8px 0 8px 24px; /* 缩进体现层级 */
margin-bottom: 12px;
background: #fafafa;
border-radius: 4px;
}
.section-label {
font-weight: bold;
color: #606266;
white-space: nowrap;
margin-top: 2px;
.method-item {
padding: 6px 0;
border-bottom: 1px dashed #eee;
}
.method-item:last-child {
border-bottom: none;
}
.empty-state {
text-align: center;
color: #909399;
padding: 40px 0;
font-size: 14px;
}
.slide-fade-enter-active,
.slide-fade-leave-active {
transition: all 0.3s ease;
}
.slide-fade-enter-from,
.slide-fade-leave-to {
opacity: 0;
transform: translateY(-8px);
}
</style>

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

@@ -1,39 +1,46 @@
import { test, expect } from '@playwright/test';
import { describe, it, cy } from 'cypress';
// ... 原有测试用例 ...
describe('门诊医生站-检查申请模块回归测试', () => {
beforeEach(() => {
cy.visit('/outpatient/examination/apply');
cy.wait(500);
});
// @bug550 @regression
test('Bug #550: 检查申请项目选择交互优化 - 解耦勾选、卡片显示与层级结构', async ({ page }) => {
// 1. 进入门诊医生站-检查申请单
await page.goto('/clinic/outpatient/examination');
await page.waitForLoadState('networkidle');
it('should load examination categories and items correctly', () => {
cy.get('.category-tree').should('be.visible');
cy.contains('彩超').click();
cy.get('.item-list').should('contain', '128线排');
});
// 2. 展开彩超分类并勾选项目
await page.click('text=彩超');
await page.click('text=128线排');
// ... 其他已有测试用例 ...
// 3. 验证检查方法未被自动勾选（解耦验证）
const methodCheckbox = page.locator('.selected-card .method-details .el-checkbox');
await expect(methodCheckbox).toHaveCount(0); // 默认收起，无可见勾选框
await page.locator('.selected-card .card-header').first().click(); // 展开
await expect(methodCheckbox.first()).not.toBeChecked();
// @bug550 @regression
describe('Bug #550: 检查申请项目选择交互优化', () => {
it('should decouple item and method selection, show full names, and render hierarchical details', () => {
// 1. 展开彩超分类并勾选项目
cy.contains('彩超').click();
cy.get('.item-list').contains('128线排').click();
// 4. 验证已选卡片无“套餐”前缀，且支持完整名称提示
const cardName = page.locator('.selected-card .exam-name');
await expect(cardName).toHaveText('128线排');
await expect(cardName).not.toContainText('套餐');
// 验证悬停提示（通过 title 属性或 tooltip）
const titleAttr = await cardName.getAttribute('title');
expect(titleAttr).toContain('128线排');
// 2. 验证检查方法未被自动勾选（解耦）
cy.get('.method-list .el-checkbox').should('not.have.class', 'is-checked');
// 5. 验证默认收起状态与层级结构
const methodList = page.locator('.selected-card .method-details');
await expect(methodList).toBeVisible(); // 点击后展开
await expect(methodList).not.toContainText('项目套餐明细'); // 冗余标签已移除
// 验证父子层级：项目 > 检查方法
const header = page.locator('.selected-card .card-header');
await expect(header).toBeVisible();
await expect(methodList).toHaveCSS('padding-left', '24px'); // 缩进体现层级
// 3. 验证已选卡片无"套餐"前缀，且支持悬停显示全名
cy.get('.selected-card .item-name').should('not.contain', '套餐');
cy.get('.selected-card .item-name').trigger('mouseover');
cy.get('.el-tooltip__popper').should('contain', '128线排');
// 4. 验证默认收起状态
cy.get('.method-detail-panel').should('not.be.visible');
// 5. 点击展开，验证层级结构（项目 > 检查方法）
cy.get('.selected-card .expand-btn').click();
cy.get('.method-detail-panel').should('be.visible');
cy.get('.method-item').first().should('have.css', 'padding-left').and('match', /16px|20px/);
// 6. 验证可独立勾选检查方法
cy.get('.method-item').first().find('.el-checkbox').click();
cy.get('.method-item').first().find('.el-checkbox').should('have.class', 'is-checked');
cy.get('.selected-card .item-name').parent().find('.el-checkbox').should('not.have.class', 'is-checked');
});
});
});