Fix Bug #550: fallback修复
This commit is contained in:
@@ -1,118 +1,147 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="examination-page">
|
<div class="examination-page">
|
||||||
<div class="exam-layout">
|
<!-- 检查项目分类树 -->
|
||||||
<!-- 左侧：检查项目分类 -->
|
<el-tree
|
||||||
<div class="panel category-panel">
|
:data="categoryTree"
|
||||||
<el-tree
|
node-key="id"
|
||||||
:data="categoryTree"
|
:props="defaultProps"
|
||||||
node-key="id"
|
@node-click="handleCategoryClick"
|
||||||
:props="defaultProps"
|
highlight-current
|
||||||
@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>
|
||||||
|
<div class="card-detail" v-show="detailVisible">
|
||||||
<!-- 中间：检查项目列表 -->
|
<!-- 只展示检查方法的层级信息，避免套餐明细干扰 -->
|
||||||
<div class="panel item-panel">
|
<div class="hierarchy-tip">
|
||||||
<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>
|
</div>
|
||||||
|
<!-- 这里可以放置方法的具体描述或注意事项 -->
|
||||||
|
<p class="method-description">{{ selectedMethod.description }}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, computed } from 'vue';
|
||||||
import { ArrowDown } from '@element-plus/icons-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 categoryTree = ref([]);
|
||||||
const currentItems = ref([])
|
const defaultProps = {
|
||||||
const checkedIds = ref([])
|
children: 'children',
|
||||||
const selectedItems = ref([])
|
label: 'name',
|
||||||
|
};
|
||||||
|
|
||||||
// 清理冗余“套餐”字样
|
// 当前选中的检查方法（单选，解耦套餐与方法的勾选）
|
||||||
const cleanName = (name) => name ? name.replace(/套餐/g, '') : ''
|
const selectedMethod = ref(null);
|
||||||
|
const detailVisible = ref(false);
|
||||||
|
|
||||||
const handleCategoryClick = (data) => {
|
// 方法列表
|
||||||
// 实际项目中此处应调用 API 获取项目列表
|
const methodList = ref([]);
|
||||||
currentItems.value = data.children || []
|
|
||||||
checkedIds.value = []
|
|
||||||
}
|
|
||||||
|
|
||||||
// 核心解耦逻辑：仅同步项目勾选状态，绝不自动联动检查方法
|
// 加载检查项目分类
|
||||||
const syncSelectedItems = (newCheckedIds) => {
|
(async () => {
|
||||||
const updated = []
|
const res = await getExamCategories();
|
||||||
for (const id of newCheckedIds) {
|
categoryTree.value = res.data || [];
|
||||||
const existing = selectedItems.value.find(i => i.id === id)
|
})();
|
||||||
if (existing) {
|
|
||||||
updated.push(existing)
|
// 分类点击后加载对应的检查方法
|
||||||
} else {
|
const handleCategoryClick = async (node) => {
|
||||||
const raw = currentItems.value.find(i => i.id === id)
|
const res = await getMethodsByCategory(node.id);
|
||||||
if (raw) {
|
methodList.value = res.data || [];
|
||||||
updated.push({
|
// 切换分类时自动清除已选方法，防止跨分类残留
|
||||||
id: raw.id,
|
selectedMethod.value = null;
|
||||||
name: raw.name,
|
detailVisible.value = false;
|
||||||
displayName: cleanName(raw.name),
|
};
|
||||||
detailCollapsed: true, // 默认收起明细
|
|
||||||
methodChecked: 0 // 默认不勾选，与父项目完全解耦
|
// 判断方法是否已被选中（仅用于 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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.examination-page { height: 100%; padding: 12px; box-sizing: border-box; }
|
.examination-page {
|
||||||
.exam-layout { display: flex; gap: 12px; height: 100%; }
|
padding: 20px;
|
||||||
.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 {
|
||||||
.selected-item-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
|
margin-top: 20px;
|
||||||
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
|
border: 1px solid #ebeef5;
|
||||||
.item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; margin-right: 8px; }
|
border-radius: 4px;
|
||||||
.is-rotate { transform: rotate(180deg); transition: transform 0.2s ease; }
|
}
|
||||||
.card-detail { padding-top: 8px; border-top: 1px dashed #e4e7ed; margin-top: 8px; }
|
.card-header {
|
||||||
.hierarchy-tip { font-size: 12px; color: #909399; margin-bottom: 6px; }
|
display: flex;
|
||||||
.exam-method-checkbox { margin-left: 4px; }
|
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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user