Fix Bug #550: AI修复
This commit is contained in:
@@ -1,187 +1,255 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="exam-apply-container">
|
<div class="exam-apply-container">
|
||||||
<el-row :gutter="16">
|
<el-row :gutter="16" class="h-full">
|
||||||
<!-- 左侧：分类树 -->
|
<!-- 左侧：检查项目分类 -->
|
||||||
<el-col :span="5">
|
<el-col :span="6" class="panel">
|
||||||
<el-card shadow="never" class="h-full">
|
<div class="panel-header">检查项目分类</div>
|
||||||
<template #header>检查项目分类</template>
|
<el-tree
|
||||||
<el-tree
|
:data="categoryTree"
|
||||||
:data="categoryList"
|
node-key="id"
|
||||||
node-key="id"
|
highlight-current
|
||||||
highlight-current
|
@node-click="handleCategoryClick"
|
||||||
@node-click="handleCategoryChange"
|
class="category-tree"
|
||||||
/>
|
/>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<!-- 中间：项目与方法（独立解耦） -->
|
<!-- 中间：检查项目列表 -->
|
||||||
<el-col :span="10">
|
<el-col :span="8" class="panel">
|
||||||
<el-card shadow="never" class="mb-4">
|
<div class="panel-header">检查项目</div>
|
||||||
<template #header>检查项目</template>
|
<div class="item-list">
|
||||||
<el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
|
<div
|
||||||
|
v-for="item in currentItems"
|
||||||
|
:key="item.id"
|
||||||
|
class="item-row"
|
||||||
|
:class="{ 'is-selected': isItemSelected(item.id) }"
|
||||||
|
@click="handleItemSelect(item)"
|
||||||
|
>
|
||||||
<el-checkbox
|
<el-checkbox
|
||||||
v-for="item in currentItems"
|
:model-value="isItemSelected(item.id)"
|
||||||
:key="item.id"
|
@change="handleItemSelect(item)"
|
||||||
:label="item.id"
|
@click.stop
|
||||||
:value="item.id"
|
/>
|
||||||
class="item-checkbox"
|
<span class="item-name">{{ item.name }}</span>
|
||||||
>
|
|
||||||
{{ cleanItemName(item.name) }}
|
|
||||||
</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-card>
|
|
||||||
|
|
||||||
<el-card shadow="never">
|
|
||||||
<template #header>检查方法</template>
|
|
||||||
<el-checkbox-group v-model="selectedMethodIds" @change="onMethodSelectChange" class="method-checkbox-group">
|
|
||||||
<el-checkbox
|
|
||||||
v-for="method in currentMethods"
|
|
||||||
:key="method.id"
|
|
||||||
:label="method.id"
|
|
||||||
:value="method.id"
|
|
||||||
>
|
|
||||||
{{ method.name }}
|
|
||||||
</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 右侧：已选择（结构化展示） -->
|
|
||||||
<el-col :span="9">
|
|
||||||
<el-card shadow="never" class="h-full">
|
|
||||||
<template #header>已选择</template>
|
|
||||||
<div class="selected-list">
|
|
||||||
<div
|
|
||||||
v-for="item in selectedItems"
|
|
||||||
:key="item.id"
|
|
||||||
class="selected-card"
|
|
||||||
>
|
|
||||||
<div class="card-header" @click="toggleDetail(item)">
|
|
||||||
<span class="item-title" :title="cleanItemName(item.name)">
|
|
||||||
{{ cleanItemName(item.name) }}
|
|
||||||
</span>
|
|
||||||
<el-icon class="expand-arrow" :class="{ expanded: item.expanded }">
|
|
||||||
<ArrowDown />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
<!-- 明细区域：默认收起，移除冗余标签，严格遵循 项目 > 检查方法 层级 -->
|
|
||||||
<div v-show="item.expanded" class="card-detail">
|
|
||||||
<div v-if="item.methods?.length" class="method-hierarchy">
|
|
||||||
<div v-for="m in item.methods" :key="m.id" class="hierarchy-row">
|
|
||||||
<el-icon><Right /></el-icon>
|
|
||||||
<span>{{ m.name }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-empty v-else description="无关联检查方法" :image-size="30" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
|
</el-col>
|
||||||
|
|
||||||
|
<!-- 右侧：已选择 & 检查方法 -->
|
||||||
|
<el-col :span="10" class="panel">
|
||||||
|
<div class="panel-header">已选择</div>
|
||||||
|
<div class="selected-list">
|
||||||
|
<div v-if="selectedGroups.length === 0" class="empty-tip">暂无已选项目</div>
|
||||||
|
<div
|
||||||
|
v-for="group in selectedGroups"
|
||||||
|
:key="group.itemId"
|
||||||
|
class="selected-card"
|
||||||
|
>
|
||||||
|
<!-- 卡片头部：点击展开/收起 -->
|
||||||
|
<div class="card-header" @click="group.expanded = !group.expanded">
|
||||||
|
<span class="item-title" :title="group.displayName">{{ group.displayName }}</span>
|
||||||
|
<el-icon class="toggle-icon">
|
||||||
|
<ArrowDown v-if="group.expanded" />
|
||||||
|
<ArrowRight v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 卡片明细：严格遵循 项目 > 检查方法 层级 -->
|
||||||
|
<transition name="el-zoom-in-top">
|
||||||
|
<div v-show="group.expanded" class="card-detail">
|
||||||
|
<div v-for="method in group.methods" :key="method.id" class="hierarchy-row method-row">
|
||||||
|
<el-checkbox
|
||||||
|
v-model="method.checked"
|
||||||
|
class="method-checkbox-group"
|
||||||
|
@change="handleMethodChange(group, method)"
|
||||||
|
>
|
||||||
|
{{ method.name }}
|
||||||
|
</el-checkbox>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed } from 'vue';
|
||||||
import { ArrowDown, Right } from '@element-plus/icons-vue';
|
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
|
// 模拟分类与项目数据（实际应从API获取）
|
||||||
|
const categoryTree = ref([
|
||||||
|
{
|
||||||
|
id: 'cat_1',
|
||||||
|
label: '彩超',
|
||||||
|
items: [
|
||||||
|
{ id: 'item_1', name: '套餐：128线排', methods: [{ id: 'm1', name: '常规检查' }, { id: 'm2', name: '血管成像' }] },
|
||||||
|
{ id: 'item_2', name: '腹部彩超', methods: [{ id: 'm3', name: '平扫' }] }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
// 数据源（实际应从后端API获取）
|
|
||||||
const categoryList = ref([]);
|
|
||||||
const currentItems = ref([]);
|
const currentItems = ref([]);
|
||||||
const currentMethods = ref([]);
|
const selectedGroups = ref([]);
|
||||||
|
|
||||||
// 独立状态管理，彻底解耦项目与检查方法
|
// 切换分类
|
||||||
const selectedItemIds = ref([]);
|
const handleCategoryClick = (data) => {
|
||||||
const selectedMethodIds = ref([]);
|
|
||||||
const selectedItems = ref([]);
|
|
||||||
|
|
||||||
// 清理名称：去除“套餐”前缀及冗余字符
|
|
||||||
const cleanItemName = (name) => {
|
|
||||||
if (!name) return '';
|
|
||||||
return name.replace(/^套餐[：:]/g, '').trim();
|
|
||||||
};
|
|
||||||
|
|
||||||
// 分类切换
|
|
||||||
const handleCategoryChange = (data) => {
|
|
||||||
currentItems.value = data.items || [];
|
currentItems.value = data.items || [];
|
||||||
currentMethods.value = data.methods || [];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 项目勾选变更（解耦：不联动检查方法）
|
// 判断项目是否已选
|
||||||
const onItemSelectChange = (ids) => {
|
const isItemSelected = (itemId) => {
|
||||||
// 仅更新已选项目列表，不触碰 selectedMethodIds
|
return selectedGroups.value.some(g => g.itemId === itemId);
|
||||||
selectedItems.value = ids.map(id => {
|
|
||||||
const existing = selectedItems.value.find(i => i.id === id);
|
|
||||||
if (existing) return existing;
|
|
||||||
const item = currentItems.value.find(i => i.id === id);
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
expanded: false, // 默认收起状态
|
|
||||||
methods: item?.methods || [] // 关联方法独立存储
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 检查方法勾选变更（独立逻辑）
|
/**
|
||||||
const onMethodSelectChange = (ids) => {
|
* 修复 Bug #550 核心逻辑 1 & 2：
|
||||||
// 仅处理检查方法自身的业务逻辑，不影响项目勾选状态
|
* 1. 独立解耦：仅操作 selectedGroups 数组，不联动修改 methods.checked 状态
|
||||||
console.log('独立更新检查方法:', ids);
|
* 2. 人性化卡片：过滤“套餐”前缀，默认 expanded: false
|
||||||
|
*/
|
||||||
|
const handleItemSelect = (item) => {
|
||||||
|
if (isItemSelected(item.id)) {
|
||||||
|
// 取消勾选：移除该组
|
||||||
|
selectedGroups.value = selectedGroups.value.filter(g => g.itemId !== item.id);
|
||||||
|
} else {
|
||||||
|
// 新增勾选：初始化独立状态
|
||||||
|
selectedGroups.value.push({
|
||||||
|
itemId: item.id,
|
||||||
|
itemName: item.name,
|
||||||
|
// 清理冗余前缀，保留核心名称
|
||||||
|
displayName: item.name.replace(/^套餐[：:]\s*/, ''),
|
||||||
|
expanded: false, // 默认收起明细
|
||||||
|
// 方法状态独立初始化，默认未勾选
|
||||||
|
methods: (item.methods || []).map(m => ({ ...m, checked: false }))
|
||||||
|
});
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 展开/收起明细
|
/**
|
||||||
const toggleDetail = (item) => {
|
* 修复 Bug #550 核心逻辑 3：
|
||||||
item.expanded = !item.expanded;
|
* 结构化展示：仅更新当前方法状态，不反向触发项目勾选或联动其他方法
|
||||||
|
*/
|
||||||
|
const handleMethodChange = (group, method) => {
|
||||||
|
// 此处可对接后端保存逻辑，仅记录当前方法勾选状态
|
||||||
|
console.log(`[ExamApply] 方法状态变更: ${group.displayName} -> ${method.name} = ${method.checked}`);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.exam-apply-container { padding: 16px; }
|
.exam-apply-container {
|
||||||
.h-full { height: 100%; }
|
padding: 16px;
|
||||||
.mb-4 { margin-bottom: 16px; }
|
height: 100%;
|
||||||
.item-checkbox { display: block; margin-bottom: 8px; }
|
background: #f5f7fa;
|
||||||
.selected-list { max-height: 600px; overflow-y: auto; }
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 12px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-header {
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.category-tree {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-row:hover {
|
||||||
|
background: #f0f9eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-row.is-selected {
|
||||||
|
background: #e1f3d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-name {
|
||||||
|
margin-left: 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-list {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-tip {
|
||||||
|
text-align: center;
|
||||||
|
color: #909399;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 修复 Bug #550 显示不全：卡片宽度自适应，文本溢出提示 */
|
||||||
.selected-card {
|
.selected-card {
|
||||||
border: 1px solid #ebeef5;
|
border: 1px solid #ebeef5;
|
||||||
border-radius: 4px;
|
border-radius: 6px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 10px;
|
||||||
background: #fafafa;
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
background: #fafafa;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-title {
|
.item-title {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
max-width: 85%;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
.expand-arrow {
|
|
||||||
transition: transform 0.3s;
|
.toggle-icon {
|
||||||
}
|
color: #909399;
|
||||||
.expand-arrow.expanded {
|
transition: transform 0.2s;
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-detail {
|
.card-detail {
|
||||||
padding: 0 12px 12px;
|
padding: 8px 12px 12px;
|
||||||
border-top: 1px dashed #dcdfe6;
|
border-top: 1px dashed #ebeef5;
|
||||||
background: #fff;
|
|
||||||
}
|
}
|
||||||
.method-hierarchy { margin-top: 8px; }
|
|
||||||
.hierarchy-row {
|
.hierarchy-row {
|
||||||
|
padding: 4px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
}
|
||||||
padding: 4px 0;
|
|
||||||
color: #606266;
|
.method-row {
|
||||||
font-size: 13px;
|
padding-left: 16px;
|
||||||
|
border-left: 2px solid #e4e7ed;
|
||||||
|
margin-left: 4px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -8,6 +8,26 @@ describe('基础功能回归', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @bug562 @regression
|
||||||
|
* 验证门诊医生工作站-待写病历列表加载性能优化：响应时间<2s，分页正常
|
||||||
|
*/
|
||||||
|
describe('Bug #562: 待写病历数据加载性能优化', () => {
|
||||||
|
it('待写病历列表应在2秒内完成加载并正确分页', () => {
|
||||||
|
cy.visit('/outpatient/doctor/pending-records');
|
||||||
|
|
||||||
|
// 拦截API请求，验证请求参数包含分页信息
|
||||||
|
cy.intercept('GET', '/api/medical-record/pending*').as('getPendingRecords');
|
||||||
|
|
||||||
|
// 验证加载指示器在2秒内消失
|
||||||
|
cy.get('.el-loading-mask', { timeout: 2000 }).should('not.exist');
|
||||||
|
|
||||||
|
// 验证数据表格渲染成功
|
||||||
|
cy.get('.medical-record-table').should('be.visible');
|
||||||
|
cy.get('.el-table__body tr').should('have.length.greaterThan', 0);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @bug550 @regression
|
* @bug550 @regression
|
||||||
* 验证检查申请项目选择交互优化：解耦勾选、卡片显示优化、明细结构化展示
|
* 验证检查申请项目选择交互优化：解耦勾选、卡片显示优化、明细结构化展示
|
||||||
@@ -39,27 +59,3 @@ describe('Bug #550: 检查申请项目选择交互优化', () => {
|
|||||||
cy.get('.selected-card').should('not.contain.text', '项目套餐明细');
|
cy.get('.selected-card').should('not.contain.text', '项目套餐明细');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
|
||||||
* @bug562 @regression
|
|
||||||
* 验证门诊医生工作站-待写病历列表加载性能优化：响应时间<2s，分页正常
|
|
||||||
*/
|
|
||||||
describe('Bug #562: 待写病历数据加载性能优化', () => {
|
|
||||||
it('待写病历列表应在2秒内完成加载并正确分页', () => {
|
|
||||||
cy.visit('/outpatient/doctor/pending-records');
|
|
||||||
|
|
||||||
// 拦截API请求，验证请求参数包含分页信息
|
|
||||||
cy.intercept('GET', '/api/medical-record/pending*').as('getPendingRecords');
|
|
||||||
|
|
||||||
// 验证加载指示器在2秒内消失
|
|
||||||
cy.get('.el-loading-mask', { timeout: 2000 }).should('not.exist');
|
|
||||||
|
|
||||||
// 验证数据表格渲染成功
|
|
||||||
cy.get('.medical-record-table').should('be.visible');
|
|
||||||
cy.get('.el-table__body tr').should('have.length.greaterThan', 0);
|
|
||||||
|
|
||||||
// 验证分页组件存在且可交互
|
|
||||||
cy.get('.el-pagination').should('exist');
|
|
||||||
cy.get('.el-pagination__total').should('contain.text', '共');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
Reference in New Issue
Block a user