Fix Bug #550: AI修复
This commit is contained in:
216
openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue
Normal file
216
openhis-ui-vue3/src/views/outpatient/exam/ExamRequest.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div class="exam-request-wrapper">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<div class="left-panel">
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleCategorySelect"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 中间：检查项目列表 -->
|
||||
<div class="middle-panel">
|
||||
<el-checkbox-group v-model="selectedItemIds" @change="handleItemChange">
|
||||
<el-checkbox
|
||||
v-for="item in currentItems"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
class="item-checkbox"
|
||||
>
|
||||
{{ formatItemName(item.name) }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
|
||||
<!-- 右侧/下方：已选择区域 -->
|
||||
<div class="right-panel">
|
||||
<div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
|
||||
<div v-else class="selected-list">
|
||||
<div v-for="item in selectedItems" :key="item.id" class="selected-card">
|
||||
<div class="card-header" @click="toggleExpand(item.id)">
|
||||
<span class="item-title" :title="item.name">{{ formatItemName(item.name) }}</span>
|
||||
<el-icon class="expand-icon">
|
||||
<ArrowDown v-if="!item.expanded" />
|
||||
<ArrowUp v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
<!-- 明细/检查方法区域，默认收起 -->
|
||||
<div v-show="item.expanded" class="card-body">
|
||||
<div class="method-section">
|
||||
<span class="section-label">检查方法</span>
|
||||
<el-checkbox-group v-model="selectedMethodIds" @change="handleMethodChange">
|
||||
<el-checkbox
|
||||
v-for="method in item.methods"
|
||||
:key="method.id"
|
||||
:label="method.id"
|
||||
>
|
||||
{{ method.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
|
||||
|
||||
// 模拟数据结构（实际应从 API 获取）
|
||||
interface ExamItem {
|
||||
id: string
|
||||
name: string
|
||||
methods: { id: string; name: string }[]
|
||||
}
|
||||
|
||||
const categoryTree = ref<any[]>([])
|
||||
const currentItems = ref<ExamItem[]>([])
|
||||
const selectedItemIds = ref<string[]>([])
|
||||
const selectedMethodIds = ref<string[]>([])
|
||||
|
||||
// 已选项目状态管理（独立维护展开状态）
|
||||
const selectedItems = reactive<{ id: string; name: string; methods: ExamItem['methods']; expanded: boolean }[]>([])
|
||||
|
||||
// 格式化名称：去除冗余“套餐”字样
|
||||
const formatItemName = (name: string) => {
|
||||
return name.replace(/^套餐|套餐$/g, '').trim()
|
||||
}
|
||||
|
||||
// 分类切换
|
||||
const handleCategorySelect = (data: any) => {
|
||||
// TODO: 调用 API 加载对应分类下的项目
|
||||
currentItems.value = data.items || []
|
||||
}
|
||||
|
||||
// 项目勾选（核心修复1：解耦，不联动勾选方法）
|
||||
const handleItemChange = (ids: string[]) => {
|
||||
const addedIds = ids.filter(id => !selectedItemIds.value.includes(id))
|
||||
const removedIds = selectedItemIds.value.filter(id => !ids.includes(id))
|
||||
|
||||
// 新增项目
|
||||
addedIds.forEach(id => {
|
||||
const item = currentItems.value.find(i => i.id === id)
|
||||
if (item && !selectedItems.find(s => s.id === id)) {
|
||||
selectedItems.push({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
methods: item.methods || [],
|
||||
expanded: false // 核心修复3：默认收起
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 移除项目
|
||||
removedIds.forEach(id => {
|
||||
const idx = selectedItems.findIndex(s => s.id === id)
|
||||
if (idx > -1) selectedItems.splice(idx, 1)
|
||||
// 清理该项目关联的已选方法，保持状态干净
|
||||
const item = selectedItems.find(s => s.id === id)
|
||||
if (item) {
|
||||
selectedMethodIds.value = selectedMethodIds.value.filter(mid => !item.methods.some(m => m.id === mid))
|
||||
}
|
||||
})
|
||||
|
||||
selectedItemIds.value = ids
|
||||
}
|
||||
|
||||
// 检查方法勾选（核心修复1：独立控制）
|
||||
const handleMethodChange = (ids: string[]) => {
|
||||
selectedMethodIds.value = ids
|
||||
}
|
||||
|
||||
// 展开/收起切换
|
||||
const toggleExpand = (id: string) => {
|
||||
const item = selectedItems.find(s => s.id === id)
|
||||
if (item) item.expanded = !item.expanded
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.exam-request-wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.left-panel, .middle-panel, .right-panel {
|
||||
flex: 1;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.selected-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.selected-card {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* 核心修复2：宽度自适应，超长省略，悬停提示 */
|
||||
.item-title {
|
||||
font-weight: 500;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 8px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-top: 1px dashed #e4e7ed;
|
||||
}
|
||||
|
||||
.method-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 核心修复3：移除冗余标签，保留清晰层级 */
|
||||
.section-label {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-bottom: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 40px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user