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 02:41:51 +08:00
parent 2da8870ba1
commit 2f59915a7b
1 changed files with 96 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

268
openhis-ui-vue3/src/views/outpatient/doctor/Examination.vue
View File

@@ -1,194 +1,118 @@
<template>
<div class="examination-page">
<!-- 检查项目分类树 -->
<el-tree
:data="categoryTree"
node-key="id"
:props="defaultProps"
@node-click="onCategoryClick"
highlight-current
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ data.name }}</span>
</span>
</el-tree>
<div class="exam-layout">
<!-- 左侧：检查项目分类 -->
<div class="panel category-panel">
<el-tree
:data="categoryTree"
node-key="id"
:props="defaultProps"
@node-click="handleCategoryClick"
highlight-current
/>
</div>
<!-- 检查项目列表 -->
<div class="exam-item-list" v-if="selectedCategory">
<el-checkbox-group v-model="checkedItems">
<el-checkbox
v-for="item in examItems"
:key="item.id"
:label="item.id"
class="exam-item-checkbox"
>
{{ item.name }}
</el-checkbox>
</el-checkbox-group>
</div>
<!-- 中间：检查项目列表 -->
<div class="panel item-panel">
<el-checkbox-group v-model="checkedIds" @change="syncSelectedItems">
<el-checkbox v-for="item in currentItems" :key="item.id" :label="item.id">
{{ cleanName(item.name) }}
</el-checkbox>
</el-checkbox-group>
</div>
<!-- 已选检查项目卡片区 -->
<div class="selected-items">
<el-card
v-for="item in selectedItems"
:key="item.id"
class="selected-item-card"
>
<div class="card-header" @click="toggleDetail(item)">
<span class="item-name">{{ item.name }}</span>
<el-icon :class="{ 'rotate': !item.detailCollapsed }">
<arrow-down />
</el-icon>
<!-- 右侧：已选项目卡片 -->
<div class="panel selected-panel">
<div class="selected-list">
<el-card
v-for="item in selectedItems"
:key="item.id"
class="selected-item-card"
shadow="never"
>
<div class="card-header" @click="toggleDetail(item)">
<span class="item-name" :title="item.displayName">{{ item.displayName }}</span>
<el-icon :class="{ 'is-rotate': !item.detailCollapsed }">
<ArrowDown />
</el-icon>
</div>
<div class="card-detail" v-show="!item.detailCollapsed">
<div class="hierarchy-tip">检查项目 > 检查方法</div>
<div class="exam-method-checkbox">
<el-checkbox
v-model="item.methodChecked"
:true-label="1"
:false-label="0"
>
检查方法
</el-checkbox>
</div>
</div>
</el-card>
</div>
<!-- 检查方法（勾选框）与层级提示 -->
<div class="card-detail" v-show="!item.detailCollapsed">
<div class="hierarchy-tip">检查项目 > 检查方法</div>
<!-- 检查方法复选框，**不**随项目自动勾选 -->
<div class="exam-method-checkbox">
<el-checkbox
v-model="item.methodChecked"
:true-label="1"
:false-label="0"
>
检查方法
</el-checkbox>
</div>
<!-- 这里可以放置其他详情信息，确保不出现“项目套餐明细”等冗余标签 -->
<div class="detail-content">
<!-- 示例：显示项目编码或说明 -->
<p>编码：{{ item.code }}</p>
<p>说明：{{ item.description }}</p>
</div>
</div>
</el-card>
</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { getExamCategoryTree, getExamItemsByCategory } from '@/api/outpatient/examination';
import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
// ---------------------------
// 数据定义
// ---------------------------
const categoryTree = ref([]);
const defaultProps = {
children: 'children',
label: 'name',
};
const categoryTree = ref([])
const defaultProps = { children: 'children', label: 'name' }
const currentItems = ref([])
const checkedIds = ref([])
const selectedItems = ref([])
const selectedCategory = ref(null);
const examItems = ref([]); // 当前分类下的检查项目
const checkedItems = ref([]); // 选中的项目 ID（仅用于 UI 勾选展示）
// 清理冗余“套餐”字样
const cleanName = (name) => name ? name.replace(/套餐/g, '') : ''
// 已选项目的完整信息，包含展开/收起状态、方法勾选状态等
const selectedItems = ref([]);
// ---------------------------
// 初始化分类树
// ---------------------------
getExamCategoryTree().then(res => {
categoryTree.value = res.data;
});
// ---------------------------
// 分类点击处理
// ---------------------------
function onCategoryClick(nodeData) {
selectedCategory.value = nodeData;
// 加载该分类下的检查项目
getExamItemsByCategory(nodeData.id).then(res => {
examItems.value = res.data;
// 清空之前的勾选，防止跨分类残留
checkedItems.value = [];
});
const handleCategoryClick = (data) => {
// 实际项目中此处应调用 API 获取项目列表
currentItems.value = data.children || []
checkedIds.value = []
}
// ---------------------------
// 监听项目勾选变化 → 更新已选卡片列表
// ---------------------------
watch(
checkedItems,
(newVals) => {
// 只保留当前已勾选的项目，去重
const newSelected = newVals.map(id => {
const src = examItems.value.find(i => i.id === id);
return {
id: src.id,
name: src.name, // 直接使用项目名称，不添加任何前缀
code: src.code,
description: src.description,
detailCollapsed: true, // 默认收起
methodChecked: 0, // 检查方法默认未勾选，且与项目勾选解耦
};
});
// 合并已有的展开状态（如果用户已经展开了某卡片）
selectedItems.value = selectedItems.value
.filter(item => newVals.includes(item.id))
.map(item => {
const fresh = newSelected.find(i => i.id === item.id);
return {
...fresh,
detailCollapsed: item.detailCollapsed,
methodChecked: item.methodChecked,
};
});
// 添加新选中的项目（未在列表中的）
newSelected.forEach(item => {
if (!selectedItems.value.some(i => i.id === item.id)) {
selectedItems.value.push(item);
// 核心解耦逻辑：仅同步项目勾选状态，绝不自动联动检查方法
const syncSelectedItems = (newCheckedIds) => {
const updated = []
for (const id of newCheckedIds) {
const existing = selectedItems.value.find(i => i.id === id)
if (existing) {
updated.push(existing)
} else {
const raw = currentItems.value.find(i => i.id === id)
if (raw) {
updated.push({
id: raw.id,
name: raw.name,
displayName: cleanName(raw.name),
detailCollapsed: true, // 默认收起明细
methodChecked: 0 // 默认不勾选，与父项目完全解耦
})
}
});
},
{ deep: true }
);
}
}
selectedItems.value = updated
}
// ---------------------------
// 卡片展开/收起切换
// ---------------------------
function toggleDetail(item) {
item.detailCollapsed = !item.detailCollapsed;
const toggleDetail = (item) => {
item.detailCollapsed = !item.detailCollapsed
}
</script>
<style scoped>
.examination-page {
padding: 20px;
}
.exam-item-list {
margin-top: 20px;
}
.selected-items {
margin-top: 30px;
}
.selected-item-card {
margin-bottom: 15px;
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.item-name {
font-weight: 600;
}
.card-detail {
margin-top: 10px;
padding-left: 10px;
}
.hierarchy-tip {
color: #909399;
margin-bottom: 8px;
}
.rotate {
transform: rotate(180deg);
}
.examination-page { height: 100%; padding: 12px; box-sizing: border-box; }
.exam-layout { display: flex; gap: 12px; height: 100%; }
.panel { flex: 1; border: 1px solid #ebeef5; border-radius: 4px; padding: 10px; overflow-y: auto; background: #fff; }
.selected-item-card { margin-bottom: 10px; cursor: pointer; transition: box-shadow 0.2s; }
.selected-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
.item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; margin-right: 8px; }
.is-rotate { transform: rotate(180deg); transition: transform 0.2s ease; }
.card-detail { padding-top: 8px; border-top: 1px dashed #e4e7ed; margin-top: 8px; }
.hierarchy-tip { font-size: 12px; color: #909399; margin-bottom: 6px; }
.exam-method-checkbox { margin-left: 4px; }
</style>