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 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"> <div class="examination-apply-container">
<el-row :gutter="16"> <el-row :gutter="16">
<!-- 左侧：检查项目分类 --> <!-- 左侧：检查项目分类 -->
<el-col :span="6"> <el-col :span="5">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="panel-card">
<template #header>检查项目分类</template> <template #header>检查项目分类</template>
<el-tree <el-tree
:data="categoryTree" ref="categoryTreeRef"
:data="categoryList"
:props="{ label: 'name', children: 'children' }" :props="{ label: 'name', children: 'children' }"
node-key="id"
highlight-current highlight-current
node-key="id"
@node-click="handleCategoryClick" @node-click="handleCategoryClick"
/> />
</el-card> </el-card>
@@ -19,52 +20,51 @@
<el-col :span="9"> <el-col :span="9">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="panel-card">
<template #header>检查项目</template> <template #header>检查项目</template>
<div class="exam-item-list"> <div class="item-scroll-area">
<div v-for="item in currentItems" :key="item.id" class="item-row"> <el-checkbox-group v-model="selectedItemIds" @change="handleItemChange">
<el-checkbox <div v-for="item in currentItems" :key="item.id" class="list-item">
v-model="item.checked" <el-checkbox :label="item.id" :value="item.id">
:label="cleanName(item.name)" <span class="item-label">{{ item.name }}</span>
@change="handleItemCheck(item)" </el-checkbox>
/> </div>
</div> </el-checkbox-group>
<el-empty v-if="currentItems.length === 0" description="请选择左侧分类" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
<!-- 右侧：已选择区域 --> <!-- 右侧：已选择 & 检查方法 -->
<el-col :span="9"> <el-col :span="10">
<el-card shadow="never" class="panel-card"> <el-card shadow="never" class="panel-card">
<template #header>已选择</template> <template #header>已选择项目</template>
<div class="selected-area"> <div v-if="structuredSelected.length === 0" class="empty-state">
<el-collapse v-model="activeCollapse" accordion> 请在左侧选择检查项目
<el-collapse-item </div>
v-for="selected in selectedItems" <div v-else class="selected-wrapper">
:key="selected.id" <div v-for="group in structuredSelected" :key="group.id" class="selected-group">
:name="selected.id" <!-- 父级项目卡片 -->
> <div class="selected-card" @click="toggleExpand(group.id)">
<template #title> <el-tooltip :content="group.name" placement="top" :show-after="300" :offset="10">
<div class="card-title" :title="cleanName(selected.name)"> <span class="card-name">{{ group.name }}</span>
{{ cleanName(selected.name) }} </el-tooltip>
</div> <el-icon class="expand-icon">
</template> <ArrowRight v-if="!group.expanded" />
<div class="detail-hierarchy"> <ArrowDown v-else />
<div class="method-section"> </el-icon>
<span class="section-label">检查方法：</span> </div>
<el-checkbox-group v-model="selected.selectedMethods">
<el-checkbox <!-- 子级检查方法明细（默认收起） -->
v-for="method in selected.methods" <transition name="slide-fade">
:key="method.id" <div v-show="group.expanded" class="method-panel">
:label="method.id" <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 }} {{ method.name }}
</el-checkbox> </el-checkbox>
</el-checkbox-group> </div>
</div> </el-checkbox-group>
</div> </div>
</el-collapse-item> </transition>
</el-collapse> </div>
<el-empty v-if="selectedItems.length === 0" description="暂无选择项目" />
</div> </div>
</el-card> </el-card>
</el-col> </el-col>
@@ -72,100 +72,158 @@
</div> </div>
</template> </template>
<script setup> <script setup lang="ts">
import { ref, reactive } from 'vue' import { ref, computed } from 'vue';
import { ArrowRight, ArrowDown } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
// 模拟分类数据 // 模拟分类与项目数据结构（实际应从API获取）
const categoryTree = ref([ interface Category { id: string; name: string; children?: Category[] }
{ id: 1, name: '彩超', children: [] }, interface ExamItem { id: string; name: string; methods?: { id: string; name: string }[] }
{ id: 2, name: 'CT', children: [] }
])
// 当前分类下的项目 const categoryList = ref<Category[]>([]);
const currentItems = ref([]) const currentItems = ref<ExamItem[]>([]);
const selectedItemIds = ref<string[]>([]);
const selectedMethodIds = ref<string[]>([]);
// 已选择项目列表 // 结构化已选数据：严格遵循 项目 > 检查方法 层级
const selectedItems = ref([]) const structuredSelected = ref<{
const activeCollapse = 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) => { const handleItemChange = (ids: string[]) => {
// 实际项目中此处应调用 API 获取项目列表 const added = ids.filter(id => !selectedItemIds.value.includes(id));
currentItems.value = [ const removed = selectedItemIds.value.filter(id => !ids.includes(id));
{ id: 101, name: '128线排套餐', checked: false, methods: [
{ id: 'm1', name: '常规' },
{ id: 'm2', name: '增强' }
]}
]
}
// 核心修复1：项目勾选与检查方法解耦，禁止自动联动勾选 // 新增项目：清理"套餐"前缀，默认收起，注入关联方法
const handleItemCheck = (item) => { added.forEach(id => {
if (item.checked) { const item = currentItems.value.find(i => i.id === id);
// 仅当未添加时才加入已选列表 if (item) {
const exists = selectedItems.value.find(s => s.id === item.id) structuredSelected.value.push({
if (!exists) {
selectedItems.value.push({
id: item.id, id: item.id,
name: item.name, name: item.name.replace(/^套餐[：:]/, ''), // 去除冗余前缀
methods: item.methods, expanded: false, // 默认收起
selectedMethods: [], // 独立维护方法勾选状态，初始为空 methods: item.methods || []
checked: true });
})
} }
} 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> </script>
<style scoped> <style scoped>
.examination-apply-container { .examination-apply-container {
padding: 16px; padding: 16px;
background: #f5f7fa; background: #f5f7fa;
min-height: 100%; min-height: 100vh;
} }
.panel-card { .panel-card {
height: 100%; 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; max-height: 500px;
overflow-y: auto; overflow-y: auto;
} }
.item-row { .selected-card {
padding: 8px 0; display: flex;
border-bottom: 1px dashed #ebeef5; 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 { .selected-card:hover {
min-height: 200px; border-color: #409eff;
background: #ecf5ff;
} }
/* 核心修复2：卡片宽度自适应，超长省略并支持悬停提示 */ .card-name {
.card-title { flex: 1;
width: 100%;
max-width: 220px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: 12px;
font-weight: 500; font-weight: 500;
color: #303133;
} }
/* 核心修复3：结构化展示，移除冗余标签，明确层级 */ .expand-icon {
.detail-hierarchy { color: #909399;
padding: 12px 0 4px; font-size: 14px;
} }
.method-section { .method-panel {
display: flex; padding: 8px 0 8px 24px; /* 缩进体现层级 */
align-items: flex-start; margin-bottom: 12px;
gap: 8px; background: #fafafa;
border-radius: 4px;
} }
.section-label { .method-item {
font-weight: bold; padding: 6px 0;
color: #606266; border-bottom: 1px dashed #eee;
white-space: nowrap; }
margin-top: 2px; .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> </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 it('should load examination categories and items correctly', () => {
test('Bug #550: 检查申请项目选择交互优化 - 解耦勾选、卡片显示与层级结构', async ({ page }) => { cy.get('.category-tree').should('be.visible');
// 1. 进入门诊医生站-检查申请单 cy.contains('彩超').click();
await page.goto('/clinic/outpatient/examination'); cy.get('.item-list').should('contain', '128线排');
await page.waitForLoadState('networkidle'); });
// 2. 展开彩超分类并勾选项目 // ... 其他已有测试用例 ...
await page.click('text=彩超');
await page.click('text=128线排');
// 3. 验证检查方法未被自动勾选（解耦验证） // @bug550 @regression
const methodCheckbox = page.locator('.selected-card .method-details .el-checkbox'); describe('Bug #550: 检查申请项目选择交互优化', () => {
await expect(methodCheckbox).toHaveCount(0); // 默认收起，无可见勾选框 it('should decouple item and method selection, show full names, and render hierarchical details', () => {
await page.locator('.selected-card .card-header').first().click(); // 展开 // 1. 展开彩超分类并勾选项目
await expect(methodCheckbox.first()).not.toBeChecked(); cy.contains('彩超').click();
cy.get('.item-list').contains('128线排').click();
// 4. 验证已选卡片无“套餐”前缀，且支持完整名称提示 // 2. 验证检查方法未被自动勾选（解耦）
const cardName = page.locator('.selected-card .exam-name'); cy.get('.method-list .el-checkbox').should('not.have.class', 'is-checked');
await expect(cardName).toHaveText('128线排');
await expect(cardName).not.toContainText('套餐');
// 验证悬停提示（通过 title 属性或 tooltip）
const titleAttr = await cardName.getAttribute('title');
expect(titleAttr).toContain('128线排');
// 5. 验证默认收起状态与层级结构 // 3. 验证已选卡片无"套餐"前缀，且支持悬停显示全名
const methodList = page.locator('.selected-card .method-details'); cy.get('.selected-card .item-name').should('not.contain', '套餐');
await expect(methodList).toBeVisible(); // 点击后展开 cy.get('.selected-card .item-name').trigger('mouseover');
await expect(methodList).not.toContainText('项目套餐明细'); // 冗余标签已移除 cy.get('.el-tooltip__popper').should('contain', '128线排');
// 验证父子层级：项目 > 检查方法 // 4. 验证默认收起状态
const header = page.locator('.selected-card .card-header'); cy.get('.method-detail-panel').should('not.be.visible');
await expect(header).toBeVisible();
await expect(methodList).toHaveCSS('padding-left', '24px'); // 缩进体现层级 // 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');
});
});
}); });