Fix Bug #550: fallback修复
This commit is contained in:
@@ -1,200 +1,194 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="examination-container">
|
<div class="examination-page">
|
||||||
<el-row :gutter="20">
|
<!-- 检查项目分类树 -->
|
||||||
<!-- 左侧：检查项目分类 -->
|
<el-tree
|
||||||
<el-col :span="6">
|
:data="categoryTree"
|
||||||
<el-card header="检查项目分类" class="mb-4">
|
node-key="id"
|
||||||
<el-tree
|
:props="defaultProps"
|
||||||
:data="categoryTree"
|
@node-click="onCategoryClick"
|
||||||
node-key="id"
|
highlight-current
|
||||||
:props="defaultProps"
|
>
|
||||||
@node-click="onCategoryClick"
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
highlight-current
|
<span>{{ data.name }}</span>
|
||||||
/>
|
</span>
|
||||||
</el-card>
|
</el-tree>
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 中间：检查项目列表 -->
|
<!-- 检查项目列表 -->
|
||||||
<el-col :span="10">
|
<div class="exam-item-list" v-if="selectedCategory">
|
||||||
<el-card header="检查项目列表" class="mb-4">
|
<el-checkbox-group v-model="checkedItems">
|
||||||
<el-table
|
<el-checkbox
|
||||||
:data="projectList"
|
v-for="item in examItems"
|
||||||
@selection-change="onProjectSelectionChange"
|
:key="item.id"
|
||||||
border
|
:label="item.id"
|
||||||
style="width: 100%"
|
class="exam-item-checkbox"
|
||||||
>
|
>
|
||||||
<el-table-column type="selection" width="55" />
|
{{ item.name }}
|
||||||
<el-table-column prop="name" label="检查项目" show-overflow-tooltip />
|
</el-checkbox>
|
||||||
<el-table-column label="检查方法" width="120">
|
</el-checkbox-group>
|
||||||
<template #default="{ row }">
|
</div>
|
||||||
<!-- 独立复选框，不随项目勾选联动 -->
|
|
||||||
<el-checkbox
|
|
||||||
v-model="row.methodChecked"
|
|
||||||
@change="onMethodChange(row)"
|
|
||||||
class="exam-method-checkbox"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</el-card>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 右侧：已选择区域 -->
|
<!-- 已选检查项目卡片区 -->
|
||||||
<el-col :span="8">
|
<div class="selected-items">
|
||||||
<el-card header="已选择" class="mb-4">
|
<el-card
|
||||||
<div class="selected-items">
|
v-for="item in selectedItems"
|
||||||
<el-card
|
:key="item.id"
|
||||||
v-for="item in selectedProjects"
|
class="selected-item-card"
|
||||||
:key="item.id"
|
>
|
||||||
class="selected-item-card"
|
<div class="card-header" @click="toggleDetail(item)">
|
||||||
shadow="hover"
|
<span class="item-name">{{ item.name }}</span>
|
||||||
|
<el-icon :class="{ 'rotate': !item.detailCollapsed }">
|
||||||
|
<arrow-down />
|
||||||
|
</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"
|
||||||
>
|
>
|
||||||
<div class="card-header" @click="toggleCardDetail(item)">
|
检查方法
|
||||||
<span class="item-name" :title="formatItemName(item)">
|
</el-checkbox>
|
||||||
{{ formatItemName(item) }}
|
|
||||||
</span>
|
|
||||||
<el-icon :class="{ 'rotate': item.showDetail }">
|
|
||||||
<arrow-down />
|
|
||||||
</el-icon>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 详情区默认收起 -->
|
|
||||||
<div class="card-detail" v-show="item.showDetail">
|
|
||||||
<p class="hierarchy-tip">检查项目 > 检查方法</p>
|
|
||||||
|
|
||||||
<!-- 仅展示已勾选的检查方法 -->
|
|
||||||
<div v-if="item.methodChecked" class="method-item">
|
|
||||||
<el-checkbox v-model="item.methodChecked" disabled>已选检查方法</el-checkbox>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 结构化明细展示，移除冗余“项目套餐明细”标签 -->
|
|
||||||
<ul v-if="item.details && item.details.length" class="detail-list">
|
|
||||||
<li v-for="(detail, idx) in item.details" :key="idx">{{ detail }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
<el-empty v-if="selectedProjects.length === 0" description="暂无已选项目" />
|
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
|
||||||
</el-col>
|
<!-- 这里可以放置其他详情信息，确保不出现“项目套餐明细”等冗余标签 -->
|
||||||
</el-row>
|
<div class="detail-content">
|
||||||
|
<!-- 示例：显示项目编码或说明 -->
|
||||||
|
<p>编码：{{ item.code }}</p>
|
||||||
|
<p>说明：{{ item.description }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref, computed, watch } from 'vue';
|
||||||
import { ArrowDown } from '@element-plus/icons-vue';
|
import { ArrowDown } from '@element-plus/icons-vue';
|
||||||
|
import { getExamCategoryTree, getExamItemsByCategory } from '@/api/outpatient/examination';
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// 数据定义
|
||||||
|
// ---------------------------
|
||||||
const categoryTree = ref([]);
|
const categoryTree = ref([]);
|
||||||
const projectList = ref([]);
|
const defaultProps = {
|
||||||
const selectedProjects = ref([]);
|
children: 'children',
|
||||||
|
label: 'name',
|
||||||
const defaultProps = { children: 'children', label: 'name' };
|
|
||||||
|
|
||||||
// 分类点击加载项目
|
|
||||||
const onCategoryClick = (data) => {
|
|
||||||
projectList.value = data.projects || [];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// 项目勾选联动：仅更新已选列表，**不**自动勾选检查方法（解耦核心）
|
const selectedCategory = ref(null);
|
||||||
const onProjectSelectionChange = (selection) => {
|
const examItems = ref([]); // 当前分类下的检查项目
|
||||||
selectedProjects.value = selection.map(item => ({
|
const checkedItems = ref([]); // 选中的项目 ID（仅用于 UI 勾选展示）
|
||||||
...item,
|
|
||||||
showDetail: false, // 默认收起
|
|
||||||
methodChecked: item.methodChecked || false, // 保持方法独立状态
|
|
||||||
details: item.details || []
|
|
||||||
}));
|
|
||||||
};
|
|
||||||
|
|
||||||
// 检查方法独立切换
|
// 已选项目的完整信息，包含展开/收起状态、方法勾选状态等
|
||||||
const onMethodChange = (row) => {
|
const selectedItems = ref([]);
|
||||||
const target = selectedProjects.value.find(p => p.id === row.id);
|
|
||||||
if (target) {
|
|
||||||
target.methodChecked = row.methodChecked;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 展开/收起卡片详情
|
// ---------------------------
|
||||||
const toggleCardDetail = (item) => {
|
// 初始化分类树
|
||||||
item.showDetail = !item.showDetail;
|
// ---------------------------
|
||||||
};
|
getExamCategoryTree().then(res => {
|
||||||
|
categoryTree.value = res.data;
|
||||||
|
});
|
||||||
|
|
||||||
// 格式化名称：去除“套餐”前缀，支持完整显示
|
// ---------------------------
|
||||||
const formatItemName = (item) => {
|
// 分类点击处理
|
||||||
let name = item.name || '';
|
// ---------------------------
|
||||||
if (name.startsWith('套餐')) {
|
function onCategoryClick(nodeData) {
|
||||||
name = name.substring(2);
|
selectedCategory.value = nodeData;
|
||||||
}
|
// 加载该分类下的检查项目
|
||||||
return name;
|
getExamItemsByCategory(nodeData.id).then(res => {
|
||||||
};
|
examItems.value = res.data;
|
||||||
|
// 清空之前的勾选，防止跨分类残留
|
||||||
|
checkedItems.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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
// ---------------------------
|
||||||
|
// 卡片展开/收起切换
|
||||||
|
// ---------------------------
|
||||||
|
function toggleDetail(item) {
|
||||||
|
item.detailCollapsed = !item.detailCollapsed;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.examination-container {
|
.examination-page {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
background-color: #f5f7fa;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
}
|
||||||
.mb-4 { margin-bottom: 20px; }
|
.exam-item-list {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
.selected-items {
|
.selected-items {
|
||||||
display: flex;
|
margin-top: 30px;
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding-right: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.selected-item-card {
|
.selected-item-card {
|
||||||
width: 100%;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-header {
|
.card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 8px 0;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-name {
|
.item-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 14px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
max-width: 85%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotate {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-detail {
|
.card-detail {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
padding-top: 10px;
|
padding-left: 10px;
|
||||||
border-top: 1px dashed #e4e7ed;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hierarchy-tip {
|
.hierarchy-tip {
|
||||||
font-size: 12px;
|
|
||||||
color: #909399;
|
color: #909399;
|
||||||
margin: 0 0 8px 0;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.method-item {
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
padding-left: 4px;
|
|
||||||
}
|
}
|
||||||
|
.rotate {
|
||||||
.detail-list {
|
transform: rotate(180deg);
|
||||||
padding-left: 20px;
|
|
||||||
margin: 0;
|
|
||||||
color: #606266;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user