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:16:11 +08:00
parent 494de72723
commit 993e65428f
2 changed files with 139 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,257 +1,164 @@
<template>
<div class="exam-apply-container">
<div class="examination-apply-container">
<!-- 左侧：检查项目分类 -->
<div class="left-panel">
<div class="panel-left">
<el-tree
:data="categoryTree"
class="category-tree"
:data="categories"
:props="{ label: 'name', children: 'children' }"
node-key="id"
highlight-current
@node-click="handleCategoryClick"
/>
</div>
<!-- 中间：检查项目列表 -->
<div class="middle-panel">
<div class="panel-header">检查项目</div>
<el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
<el-checkbox
v-for="item in currentCategoryItems"
:key="item.id"
:label="item.id"
class="item-checkbox"
>
<!-- 修复2：去除冗余“套餐”字样 -->
{{ item.name.replace(/套餐/g, '') }}
</el-checkbox>
</el-checkbox-group>
<div class="panel-middle">
<div class="item-list">
<div v-for="item in currentItems" :key="item.id" class="item-row" @click="handleItemSelect(item)">
<el-checkbox v-model="item.checked" @change="handleItemCheck(item)" />
<span class="item-name">{{ cleanName(item.name) }}</span>
</div>
</div>
</div>
<!-- 右侧/下方：已选择区域 -->
<div class="right-panel">
<div class="panel-header">已选择</div>
<div v-if="selectedExams.length === 0" class="empty-tip">暂无选择项目</div>
<!-- 修复3：严格遵循 检查项目 > 检查方法 的从属父子关系 -->
<div v-for="exam in selectedExams" :key="exam.id" class="selected-card">
<div class="card-header" @click="toggleExpand(exam.id)">
<el-checkbox
:model-value="exam.checked"
@change="(val) => toggleExamCheck(exam.id, val)"
@click.stop
/>
<!-- 修复2：宽度自适应 + 悬停提示完整名称 -->
<el-tooltip
:content="exam.name.replace(/套餐/g, '')"
placement="top"
:disabled="!exam.isTruncated"
>
<span
class="exam-name"
:ref="(el) => setNameRef(el, exam.id)"
>
{{ exam.name.replace(/套餐/g, '') }}
</span>
</el-tooltip>
<span class="expand-icon">{{ exam.expanded ? '▲' : '▼' }}</span>
</div>
<!-- 修复1 & 3：检查方法独立展示，默认收起，无冗余标签 -->
<div v-show="exam.expanded" class="method-details">
<div v-if="exam.methods.length === 0" class="no-methods">无关联检查方法</div>
<el-checkbox-group
v-else
v-model="exam.selectedMethods"
@change="onMethodChange(exam.id)"
>
<el-checkbox
v-for="method in exam.methods"
:key="method.id"
:label="method.id"
class="method-checkbox"
>
{{ method.name }}
</el-checkbox>
</el-checkbox-group>
<div class="panel-right">
<h4 class="section-title">已选择</h4>
<div class="selected-list">
<div v-for="item in selectedItems" :key="item.id" class="selected-card">
<div class="card-header">
<el-checkbox v-model="item.checked" @change="handleItemCheck(item)" />
<el-tooltip :content="cleanName(item.name)" placement="top" :show-after="300">
<span class="item-name">{{ cleanName(item.name) }}</span>
</el-tooltip>
<el-button class="expand-btn" link @click="item.expanded = !item.expanded">
<el-icon><ArrowDown v-if="item.expanded" /><ArrowRight v-else /></el-icon>
</el-button>
</div>
<!-- 检查方法明细面板（默认收起，严格父子解耦） -->
<div v-show="item.expanded" class="method-detail-panel">
<div v-for="method in item.methods" :key="method.id" class="method-item">
<el-checkbox v-model="method.checked" @change="handleMethodCheck(item, method)" />
<span class="method-name">{{ method.name }}</span>
</div>
</div>
</div>
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue'
import { ref, computed } from 'vue';
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
// ================= 数据定义 =================
const categoryTree = ref([])
const currentCategoryItems = ref([])
const selectedItemIds = ref([])
const selectedExams = reactive([])
const nameRefs = reactive({})
// 模拟分类与项目数据（实际应从API获取）
const categories = ref([
{ id: 1, name: '彩超', children: [] },
{ id: 2, name: 'CT', children: [] }
]);
// ================= 核心交互逻辑 =================
const currentItems = ref([]);
const selectedItems = ref([]);
// 修复1：项目勾选与检查方法完全解耦
const onItemSelectChange = (ids) => {
const newIds = ids || []
// 新增项目：仅初始化项目状态，不联动任何方法
newIds.forEach(id => {
if (!selectedExams.find(e => e.id === id)) {
const item = currentCategoryItems.value.find(i => i.id === id)
if (item) {
selectedExams.push({
id: item.id,
name: item.name,
checked: true,
expanded: false, // 修复3：默认收起
methods: item.methods || [],
selectedMethods: [], // 独立维护方法勾选状态
isTruncated: false
})
}
}
})
// 清理冗余前缀（如“套餐：”、“项目套餐”等）
const cleanName = (name) => {
if (!name) return '';
return name.replace(/^(套餐|项目套餐)[：:]/g, '').trim();
};
// 移除取消勾选的项目
const toRemove = selectedExams.filter(e => !newIds.includes(e.id))
toRemove.forEach(e => {
const idx = selectedExams.indexOf(e)
if (idx > -1) selectedExams.splice(idx, 1)
})
checkTruncation()
}
// 独立控制项目勾选状态
const toggleExamCheck = (id, checked) => {
const exam = selectedExams.find(e => e.id === id)
if (exam) exam.checked = checked
if (checked) {
if (!selectedItemIds.value.includes(id)) selectedItemIds.value.push(id)
} else {
selectedItemIds.value = selectedItemIds.value.filter(i => i !== id)
}
}
// 展开/收起明细
const toggleExpand = (id) => {
const exam = selectedExams.find(e => e.id === id)
if (exam) exam.expanded = !exam.expanded
}
// 修复1：方法变更仅影响当前项目，不向上/向下联动
const onMethodChange = (examId) => {
// 此处可对接后端保存逻辑，保持独立解耦
console.log(`[Bug#550] 项目 ${examId} 检查方法已独立更新:`, selectedExams.find(e => e.id === examId)?.selectedMethods)
}
// 修复2：动态检测文本截断以控制 Tooltip 显示
const setNameRef = (el, id) => {
if (el) nameRefs[id] = el
}
const checkTruncation = () => {
nextTick(() => {
selectedExams.forEach(exam => {
const el = nameRefs[exam.id]
if (el) {
exam.isTruncated = el.scrollWidth > el.clientWidth
}
})
})
}
// 模拟分类点击加载项目（实际项目请替换为 API 调用）
// 切换分类加载项目
const handleCategoryClick = (data) => {
// currentCategoryItems.value = await fetchItemsByCategory(data.id)
}
// 实际场景：调用API获取该分类下的项目列表
currentItems.value = [
{ id: '101', name: '套餐：128线排', checked: false, methods: [
{ id: 'm1', name: '常规扫描', checked: false },
{ id: 'm2', name: '增强扫描', checked: false }
]}
];
};
onMounted(() => {
// 初始化数据加载
})
// 中间列表勾选 -> 仅加入已选列表，不联动方法
const handleItemSelect = (item) => {
if (!selectedItems.value.find(s => s.id === item.id)) {
selectedItems.value.push({ ...item, expanded: false });
}
};
// 核心解耦逻辑：项目勾选独立
const handleItemCheck = (item) => {
// 仅更新当前项目状态，绝不自动勾选/取消子方法
const target = selectedItems.value.find(s => s.id === item.id);
if (target) target.checked = item.checked;
};
// 核心解耦逻辑：方法勾选独立
const handleMethodCheck = (item, method) => {
// 仅更新当前方法状态，绝不反向影响父项目
const target = selectedItems.value.find(s => s.id === item.id);
if (target) {
const m = target.methods.find(m => m.id === method.id);
if (m) m.checked = method.checked;
}
};
</script>
<style scoped>
.exam-apply-container {
.examination-apply-container {
display: flex;
gap: 16px;
padding: 16px;
height: 100%;
padding: 16px;
background: #f5f7fa;
}
.left-panel, .middle-panel, .right-panel {
border: 1px solid #ebeef5;
border-radius: 4px;
padding: 12px;
.panel-left, .panel-middle, .panel-right {
background: #fff;
border-radius: 8px;
padding: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.left-panel { width: 20%; }
.middle-panel { width: 40%; }
.right-panel { width: 40%; }
.panel-left { width: 200px; }
.panel-middle { flex: 1; }
.panel-right { width: 320px; display: flex; flex-direction: column; }
.panel-header {
font-weight: 600;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
.section-title { margin: 0 0 12px; font-size: 14px; color: #303133; }
.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-row {
display: flex; align-items: center; gap: 8px; padding: 8px;
cursor: pointer; border-radius: 4px; transition: background 0.2s;
}
.item-row:hover { background: #f0f2f5; }
.item-checkbox, .method-checkbox {
display: block;
margin-bottom: 8px;
}
.selected-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
/* 修复2 & 3：已选卡片样式优化 */
.selected-card {
border: 1px solid #dcdfe6;
border-radius: 6px;
margin-bottom: 10px;
background: #fafafa;
transition: all 0.2s;
border: 1px solid #ebeef5; border-radius: 6px; padding: 10px;
background: #fafafa; width: 100%; min-width: 250px;
}
.card-header {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
gap: 8px;
user-select: none;
display: flex; align-items: center; gap: 8px; width: 100%;
}
.exam-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
color: #303133;
.item-name {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 13px; color: #606266; cursor: default;
}
.expand-icon {
font-size: 12px;
color: #909399;
.expand-btn { padding: 0; min-width: 24px; }
.method-detail-panel {
margin-top: 8px; padding-left: 20px; border-top: 1px dashed #dcdfe6;
padding-top: 8px;
}
/* 修复3：层级缩进与明细区域 */
.method-details {
padding: 8px 12px 12px 32px; /* 左侧缩进体现父子层级 */
border-top: 1px dashed #e4e7ed;
background: #fff;
}
.no-methods {
color: #909399;
font-size: 12px;
padding: 4px 0;
}
.empty-tip {
text-align: center;
color: #909399;
padding: 40px 0;
.method-item {
display: flex; align-items: center; gap: 8px; padding: 4px 0;
font-size: 12px; color: #909399;
}
</style>