Fix Bug #550: fallback修复
This commit is contained in:
@@ -1,162 +1,228 @@
|
||||
<template>
|
||||
<div class="exam-apply-container">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<el-card class="category-panel" shadow="never">
|
||||
<template #header>检查项目分类</template>
|
||||
<el-tree
|
||||
:data="categories"
|
||||
node-key="id"
|
||||
highlight-current
|
||||
@node-click="handleCategorySelect"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<!-- 中间：检查项目列表 -->
|
||||
<el-card class="item-panel" shadow="never">
|
||||
<template #header>检查项目</template>
|
||||
<div class="item-list">
|
||||
<div v-for="item in currentItems" :key="item.id" class="item-row">
|
||||
<el-checkbox
|
||||
v-model="item.checked"
|
||||
@change="handleItemCheck(item)"
|
||||
/>
|
||||
<el-tooltip :content="item.name" placement="top" :show-after="300">
|
||||
<span class="item-name">{{ cleanName(item.name) }}</span>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="exam-apply">
|
||||
<div class="exam-layout">
|
||||
<!-- 左侧：检查项目分类与项目树 -->
|
||||
<div class="tree-section">
|
||||
<el-tree
|
||||
ref="itemTreeRef"
|
||||
:data="itemTreeData"
|
||||
node-key="id"
|
||||
show-checkbox
|
||||
:check-strictly="true"
|
||||
:default-expand-all="false"
|
||||
:props="itemTreeProps"
|
||||
@check="handleTreeCheck"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 下方：已选择区域 -->
|
||||
<el-card class="selected-panel" shadow="never">
|
||||
<template #header>已选择</template>
|
||||
<div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
|
||||
<el-collapse v-else v-model="activeCollapseNames" accordion>
|
||||
<el-collapse-item
|
||||
v-for="sel in selectedItems"
|
||||
:key="sel.id"
|
||||
:name="sel.id"
|
||||
>
|
||||
<template #title>
|
||||
<el-tooltip :content="sel.name" placement="top" :show-after="300">
|
||||
<span class="collapse-title">{{ cleanName(sel.name) }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<div class="method-container">
|
||||
<div v-for="method in sel.methods" :key="method.id" class="method-row">
|
||||
<el-checkbox
|
||||
v-model="method.checked"
|
||||
@change="handleMethodCheck(sel, method)"
|
||||
/>
|
||||
<span class="method-name">{{ method.name }}</span>
|
||||
<!-- 右侧：已选项目与明细 -->
|
||||
<div class="selected-section">
|
||||
<div class="section-title">已选择</div>
|
||||
<div class="selected-tags">
|
||||
<el-tag
|
||||
v-for="group in selectedGroups"
|
||||
:key="group.id"
|
||||
closable
|
||||
size="default"
|
||||
show-overflow-tooltip
|
||||
:title="group.fullName"
|
||||
@close="removeGroup(group.id)"
|
||||
>
|
||||
{{ group.displayName }}
|
||||
</el-tag>
|
||||
</div>
|
||||
|
||||
<el-collapse v-model="activePanels" class="details-collapse">
|
||||
<el-collapse-item
|
||||
v-for="group in selectedGroups"
|
||||
:key="group.id"
|
||||
:name="group.id"
|
||||
>
|
||||
<template #title>
|
||||
<span class="collapse-title">{{ group.displayName }}</span>
|
||||
</template>
|
||||
<div class="method-container">
|
||||
<el-checkbox-group v-model="group.checkedMethods">
|
||||
<el-checkbox
|
||||
v-for="method in group.methods"
|
||||
:key="method.id"
|
||||
:label="method.id"
|
||||
@change="onMethodChange(group, method)"
|
||||
>
|
||||
{{ method.name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { TreeNode } from 'element-plus/lib/components/tree/src/tree.type';
|
||||
|
||||
// 模拟分类数据
|
||||
const categories = ref([
|
||||
{ id: 1, label: '彩超', children: [] },
|
||||
{ id: 2, label: 'CT', children: [] }
|
||||
]);
|
||||
// --------------------
|
||||
// 数据结构定义（简化示例）
|
||||
// --------------------
|
||||
interface Method {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
interface Group {
|
||||
id: number;
|
||||
name: string; // 原始名称，可能带 “套餐” 前缀
|
||||
methods: Method[];
|
||||
}
|
||||
|
||||
// 当前分类下的项目列表
|
||||
const currentItems = ref<any[]>([]);
|
||||
/**
|
||||
* 1️⃣ 读取树形数据（这里假设已经通过接口获取并赋值）
|
||||
* itemTreeData 的每个节点对应一个检查项目（Group），
|
||||
* 其 children 为检查方法（Method）。
|
||||
*/
|
||||
const itemTreeData = ref<TreeNode[]>([]);
|
||||
|
||||
// 已选择项目列表（严格遵循 项目 > 检查方法 层级）
|
||||
const selectedItems = reactive<any[]>([]);
|
||||
/**
|
||||
* Tree 组件的属性映射
|
||||
*/
|
||||
const itemTreeProps = {
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
};
|
||||
|
||||
// 折叠面板激活状态，默认空数组表示全部收起
|
||||
const activeCollapseNames = ref<string[]>([]);
|
||||
/**
|
||||
* 已选中的项目（Group）集合
|
||||
* 结构：
|
||||
* id, displayName（去掉 “套餐” 前缀的名称），fullName（原始完整名称，用于 tooltip），
|
||||
* methods（所有可选方法），checkedMethods（已勾选的方法 id 列表）
|
||||
*/
|
||||
const selectedGroups = ref<Array<{
|
||||
id: number;
|
||||
displayName: string;
|
||||
fullName: string;
|
||||
methods: Method[];
|
||||
checkedMethods: number[];
|
||||
}>>([]);
|
||||
|
||||
// 清理名称中的冗余“套餐”字样
|
||||
const cleanName = (name: string) => name.replace(/套餐/g, '');
|
||||
/**
|
||||
* 当前展开的 Collapse 面板（使用 group.id）
|
||||
*/
|
||||
const activePanels = ref<number[]>([]);
|
||||
|
||||
// 选择分类
|
||||
const handleCategorySelect = (node: any) => {
|
||||
// 实际项目中此处应请求后端获取对应分类下的项目
|
||||
currentItems.value = [
|
||||
{ id: 'item_1', name: '128线排彩超套餐', checked: false, methods: [
|
||||
{ id: 'm1', name: '常规检查', checked: false },
|
||||
{ id: 'm2', name: '血管多普勒', checked: false }
|
||||
]}
|
||||
/**
|
||||
* 处理树节点勾选
|
||||
*
|
||||
* 需求：
|
||||
* - 勾选项目节点时，只把项目本身加入 selectedGroups，**不**自动勾选其下的检查方法。
|
||||
* - 取消勾选时，移除对应的项目及其所有方法的选中状态。
|
||||
*
|
||||
* 通过 `check-strictly` 已经阻止了父子自动关联，但在业务层仍需要把
|
||||
* 勾选的节点（只保留叶子为方法的情况）过滤掉，只保留项目节点。
|
||||
*/
|
||||
function handleTreeCheck(
|
||||
data: any,
|
||||
checkedNodes: any[],
|
||||
indeterminateNodes: any[]
|
||||
) {
|
||||
// 1. 过滤出真正的项目节点（即没有 children，或 children 为方法列表的父节点）
|
||||
const projectNodes = checkedNodes.filter((node: any) => {
|
||||
// 项目节点的 children 为方法数组，且 node.type === 'group'（业务自行约定）
|
||||
// 为了兼容后端未返回 type 字段，这里判断是否存在 children 即可。
|
||||
return node.children && node.children.length > 0;
|
||||
});
|
||||
|
||||
// 2. 重新构建 selectedGroups，仅保留项目层级信息
|
||||
const newGroups = projectNodes.map((node: any) => {
|
||||
const originalName: string = node.name || '';
|
||||
// 去掉 “套餐” 前缀（如果有），并去除首尾空格
|
||||
const displayName = originalName.replace(/^套餐\s*/, '').trim();
|
||||
|
||||
// 已经存在的 group（用于保留已勾选的方法）
|
||||
const existed = selectedGroups.value.find(g => g.id === node.id);
|
||||
|
||||
return {
|
||||
id: node.id,
|
||||
displayName,
|
||||
fullName: originalName, // 用于 tooltip
|
||||
methods: (node.children || []).map((m: any) => ({
|
||||
id: m.id,
|
||||
name: m.name,
|
||||
})),
|
||||
// 保留之前已勾选的方法（若之前已存在），否则空数组
|
||||
checkedMethods: existed ? existed.checkedMethods : [],
|
||||
};
|
||||
});
|
||||
|
||||
selectedGroups.value = newGroups;
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除已选项目
|
||||
*/
|
||||
function removeGroup(groupId: number) {
|
||||
selectedGroups.value = selectedGroups.value.filter(g => g.id !== groupId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查方法勾选变化
|
||||
* - 只更新对应 group 的 checkedMethods。
|
||||
* - 不会影响其他 group，也不会触发项目自动勾选。
|
||||
*/
|
||||
function onMethodChange(group: any, method: any) {
|
||||
// 方法的勾选状态已经由 v-model 自动同步到 group.checkedMethods，
|
||||
// 这里仅做业务校验（如需要限制同一项目只能选择一种方法等），
|
||||
// 目前保持空实现以避免副作用。
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化（示例：从后端获取树形数据）
|
||||
*/
|
||||
async function loadTreeData() {
|
||||
// 这里使用 mock 数据，实际请调用接口
|
||||
const mockData = [
|
||||
{
|
||||
id: 1,
|
||||
name: '套餐 彩超',
|
||||
children: [
|
||||
{ id: 101, name: '128线排' },
|
||||
{ id: 102, name: '多普勒' },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '普通 X 光',
|
||||
children: [{ id: 201, name: '胸片' }],
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
// 处理项目勾选（解耦：仅更新项目状态，不联动方法）
|
||||
const handleItemCheck = (item: any) => {
|
||||
if (item.checked) {
|
||||
// 若未存在于已选列表，则添加并默认收起
|
||||
if (!selectedItems.find(s => s.id === item.id)) {
|
||||
selectedItems.push({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
methods: item.methods.map((m: any) => ({ ...m, checked: false }))
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 取消勾选则从已选列表移除
|
||||
const idx = selectedItems.findIndex(s => s.id === item.id);
|
||||
if (idx > -1) selectedItems.splice(idx, 1);
|
||||
}
|
||||
};
|
||||
|
||||
// 处理检查方法勾选（独立解耦）
|
||||
const handleMethodCheck = (parentItem: any, method: any) => {
|
||||
// 仅更新当前方法状态，不影响父项目或其他方法
|
||||
// 实际业务中可在此处触发费用计算或明细同步
|
||||
};
|
||||
itemTreeData.value = mockData;
|
||||
}
|
||||
loadTreeData();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.exam-apply-container {
|
||||
.exam-apply {
|
||||
padding: 20px;
|
||||
}
|
||||
.exam-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-panel, .item-panel, .selected-panel {
|
||||
.tree-section {
|
||||
width: 30%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.selected-section {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.item-list, .method-container {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
.selected-tags {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-row, .method-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px dashed #eee;
|
||||
.method-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.item-name, .method-name {
|
||||
margin-left: 8px;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse-title {
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
color: #909399;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user