Fix Bug #550: AI修复
This commit is contained in:
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<div class="examination-apply-container">
|
||||
<el-row :gutter="16" class="main-layout">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<el-col :span="6" class="panel category-panel">
|
||||
<h3>检查项目分类</h3>
|
||||
<el-tree
|
||||
:data="categories"
|
||||
:props="{ label: 'name', children: 'children' }"
|
||||
@node-click="handleCategoryClick"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<!-- 中间：检查项目列表 -->
|
||||
<el-col :span="9" class="panel item-panel">
|
||||
<h3>检查项目</h3>
|
||||
<el-table
|
||||
:data="currentItems"
|
||||
@selection-change="handleItemSelectionChange"
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
>
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column prop="name" label="项目名称" show-overflow-tooltip />
|
||||
<el-table-column prop="code" label="编码" width="100" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：已选择 & 检查方法/明细 -->
|
||||
<el-col :span="9" class="panel selected-panel">
|
||||
<h3>已选择项目</h3>
|
||||
<div class="selected-list">
|
||||
<div
|
||||
v-for="item in selectedItems"
|
||||
:key="item.id"
|
||||
class="selected-item-card"
|
||||
@click.stop="toggleExpand(item.id)"
|
||||
>
|
||||
<div class="card-header">
|
||||
<!-- 修复 Bug #550-2：去掉“套餐”前缀，支持宽度自适应与完整名称提示 -->
|
||||
<el-tooltip :content="item.name" placement="top" :show-after="300">
|
||||
<span class="item-name">{{ item.name }}</span>
|
||||
</el-tooltip>
|
||||
<el-icon class="expand-icon" :class="{ 'is-expanded': item.expanded }">
|
||||
<ArrowDown />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 修复 Bug #550-3：结构化展示，默认收起，点击展开查看明细 -->
|
||||
<transition name="slide-fade">
|
||||
<div v-if="item.expanded" class="method-detail-list">
|
||||
<div class="hierarchy-path">检查项目 > 检查方法</div>
|
||||
<!-- 修复 Bug #550-1：项目与方法解耦，独立维护勾选状态 -->
|
||||
<el-checkbox-group
|
||||
v-model="item.selectedMethods"
|
||||
@change="handleMethodChange(item)"
|
||||
class="method-group"
|
||||
>
|
||||
<el-checkbox
|
||||
v-for="method in item.methods"
|
||||
:key="method.id"
|
||||
:label="method.id"
|
||||
class="method-checkbox"
|
||||
>
|
||||
{{ method.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
|
||||
// 模拟分类数据
|
||||
const categories = ref([
|
||||
{ id: 1, name: '彩超', children: [] },
|
||||
{ id: 2, name: 'CT', children: [] }
|
||||
])
|
||||
|
||||
// 模拟当前分类下的项目数据
|
||||
const currentItems = ref([
|
||||
{ id: 101, name: '128线排彩超检查', code: 'US128', methods: [
|
||||
{ id: 'm1', name: '常规扫描' },
|
||||
{ id: 'm2', name: '增强扫描' }
|
||||
]},
|
||||
{ id: 102, name: '腹部彩超', code: 'US001', methods: [
|
||||
{ id: 'm3', name: '平扫' }
|
||||
]}
|
||||
])
|
||||
|
||||
// 已选项目状态池
|
||||
const selectedItems = ref([])
|
||||
|
||||
/**
|
||||
* 修复 Bug #550-1：联动冲突解耦
|
||||
* 中间表格勾选仅同步“项目”维度，绝不自动触发“检查方法”勾选。
|
||||
* 方法勾选完全由右侧独立交互控制。
|
||||
*/
|
||||
const handleItemSelectionChange = (selection) => {
|
||||
const newSelected = selection.map(item => {
|
||||
const existing = selectedItems.value.find(s => s.id === item.id)
|
||||
// 若已存在则保留其方法勾选状态，否则初始化空数组与收起状态
|
||||
return existing || {
|
||||
...item,
|
||||
selectedMethods: [],
|
||||
expanded: false
|
||||
}
|
||||
})
|
||||
// 移除未勾选的项目（保持数据纯净）
|
||||
selectedItems.value = newSelected
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复 Bug #550-3：默认收起，点击切换展开/收起
|
||||
*/
|
||||
const toggleExpand = (itemId) => {
|
||||
const item = selectedItems.value.find(i => i.id === itemId)
|
||||
if (item) item.expanded = !item.expanded
|
||||
}
|
||||
|
||||
/**
|
||||
* 修复 Bug #550-1：方法独立变更事件
|
||||
* 仅更新当前 item 的 selectedMethods，不向上冒泡或影响其他项目
|
||||
*/
|
||||
const handleMethodChange = (item) => {
|
||||
// 实际业务中可在此处同步至后端或计算总价
|
||||
console.log(`[解耦] 项目 ${item.name} 方法变更:`, item.selectedMethods)
|
||||
}
|
||||
|
||||
const handleCategoryClick = (data) => {
|
||||
// 实际项目中此处会请求对应分类下的项目列表并更新 currentItems
|
||||
console.log('切换分类:', data.name)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.examination-apply-container { padding: 16px; height: 100%; }
|
||||
.main-layout { height: calc(100vh - 140px); }
|
||||
.panel {
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
|
||||
}
|
||||
.panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 8px; }
|
||||
.selected-list { flex: 1; overflow-y: auto; padding-right: 4px; }
|
||||
|
||||
/* 修复 Bug #550-2：卡片宽度自适应，悬停高亮 */
|
||||
.selected-item-card {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
padding: 10px;
|
||||
margin-bottom: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
background: #fafafa;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.selected-item-card:hover { border-color: #409eff; background: #f0f9ff; }
|
||||
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
|
||||
/* 修复 Bug #550-2：文本溢出省略，保留完整 title 提示 */
|
||||
.item-name {
|
||||
font-weight: 500;
|
||||
max-width: 85%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.expand-icon { transition: transform 0.3s; color: #909399; }
|
||||
.expand-icon.is-expanded { transform: rotate(180deg); }
|
||||
|
||||
/* 修复 Bug #550-3：明细区域层级样式 */
|
||||
.method-detail-list { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dcdfe6; }
|
||||
.hierarchy-path { font-size: 12px; color: #909399; margin-bottom: 8px; font-weight: 500; }
|
||||
.method-group { display: flex; flex-direction: column; gap: 4px; }
|
||||
.method-checkbox { margin-left: 0; }
|
||||
|
||||
/* 展开收起动画 */
|
||||
.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.25s ease; }
|
||||
.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-6px); }
|
||||
</style>
|
||||
Reference in New Issue
Block a user