Fix Bug #550: fallback修复
This commit is contained in:
@@ -1,118 +1,147 @@
|
||||
<template>
|
||||
<div class="examination-page">
|
||||
<div class="exam-layout">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<div class="panel category-panel">
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
@node-click="handleCategoryClick"
|
||||
highlight-current
|
||||
/>
|
||||
<!-- 检查项目分类树 -->
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
@node-click="handleCategoryClick"
|
||||
highlight-current
|
||||
/>
|
||||
|
||||
<!-- 检查方法列表 -->
|
||||
<el-table
|
||||
v-if="methodList.length"
|
||||
:data="methodList"
|
||||
style="width: 100%; margin-top: 20px"
|
||||
@row-click="handleMethodRowClick"
|
||||
>
|
||||
<el-table-column prop="name" label="检查方法" />
|
||||
<el-table-column label="选择" width="80" align="center">
|
||||
<template #default="{ row }">
|
||||
<!-- 仅在用户手动点击时才勾选，避免自动勾选冲突 -->
|
||||
<el-checkbox
|
||||
class="exam-method-checkbox"
|
||||
:model-value="isSelected(row)"
|
||||
@change="toggleMethodSelection(row, $event)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 已选检查项目卡片 -->
|
||||
<div v-if="selectedMethod" class="selected-item-card">
|
||||
<div class="card-header" @click="toggleDetail">
|
||||
<span class="item-name">{{ selectedMethod.name }}</span>
|
||||
<el-icon :class="{ rotated: detailVisible }"><arrow-down /></el-icon>
|
||||
</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="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 class="card-detail" v-show="detailVisible">
|
||||
<!-- 只展示检查方法的层级信息，避免套餐明细干扰 -->
|
||||
<div class="hierarchy-tip">
|
||||
检查项目 > 检查方法
|
||||
</div>
|
||||
<!-- 这里可以放置方法的具体描述或注意事项 -->
|
||||
<p class="method-description">{{ selectedMethod.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
import { ref, computed } from 'vue';
|
||||
import { ArrowDown } from '@element-plus/icons-vue';
|
||||
import { getExamCategories, getMethodsByCategory } from '@/api/outpatient/examination';
|
||||
|
||||
const categoryTree = ref([])
|
||||
const defaultProps = { children: 'children', label: 'name' }
|
||||
const currentItems = ref([])
|
||||
const checkedIds = ref([])
|
||||
const selectedItems = ref([])
|
||||
// 分类树数据
|
||||
const categoryTree = ref([]);
|
||||
const defaultProps = {
|
||||
children: 'children',
|
||||
label: 'name',
|
||||
};
|
||||
|
||||
// 清理冗余“套餐”字样
|
||||
const cleanName = (name) => name ? name.replace(/套餐/g, '') : ''
|
||||
// 当前选中的检查方法（单选，解耦套餐与方法的勾选）
|
||||
const selectedMethod = ref(null);
|
||||
const detailVisible = ref(false);
|
||||
|
||||
const handleCategoryClick = (data) => {
|
||||
// 实际项目中此处应调用 API 获取项目列表
|
||||
currentItems.value = data.children || []
|
||||
checkedIds.value = []
|
||||
}
|
||||
// 方法列表
|
||||
const methodList = ref([]);
|
||||
|
||||
// 核心解耦逻辑：仅同步项目勾选状态，绝不自动联动检查方法
|
||||
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 // 默认不勾选，与父项目完全解耦
|
||||
})
|
||||
}
|
||||
// 加载检查项目分类
|
||||
(async () => {
|
||||
const res = await getExamCategories();
|
||||
categoryTree.value = res.data || [];
|
||||
})();
|
||||
|
||||
// 分类点击后加载对应的检查方法
|
||||
const handleCategoryClick = async (node) => {
|
||||
const res = await getMethodsByCategory(node.id);
|
||||
methodList.value = res.data || [];
|
||||
// 切换分类时自动清除已选方法，防止跨分类残留
|
||||
selectedMethod.value = null;
|
||||
detailVisible.value = false;
|
||||
};
|
||||
|
||||
// 判断方法是否已被选中（仅用于 UI 绑定）
|
||||
const isSelected = (method) => {
|
||||
return selectedMethod.value && selectedMethod.value.id === method.id;
|
||||
};
|
||||
|
||||
// 勾选框点击事件：完全由用户行为决定是否选中
|
||||
const toggleMethodSelection = (method, checked) => {
|
||||
if (checked) {
|
||||
// 只保留当前选中的方法，自动取消其他已选（单选）
|
||||
selectedMethod.value = method;
|
||||
detailVisible.value = false;
|
||||
} else {
|
||||
// 取消勾选时清空选中状态
|
||||
if (selectedMethod.value && selectedMethod.value.id === method.id) {
|
||||
selectedMethod.value = null;
|
||||
detailVisible.value = false;
|
||||
}
|
||||
}
|
||||
selectedItems.value = updated
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDetail = (item) => {
|
||||
item.detailCollapsed = !item.detailCollapsed
|
||||
}
|
||||
// 行点击同样触发勾选，提升交互体验
|
||||
const handleMethodRowClick = (row) => {
|
||||
const currentlyChecked = isSelected(row);
|
||||
toggleMethodSelection(row, !currentlyChecked);
|
||||
};
|
||||
|
||||
// 展开/收起详情卡片
|
||||
const toggleDetail = () => {
|
||||
detailVisible.value = !detailVisible.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.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; }
|
||||
.examination-page {
|
||||
padding: 20px;
|
||||
}
|
||||
.selected-item-card {
|
||||
margin-top: 20px;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-detail {
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
.hierarchy-tip {
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.rotated {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user