140 lines
5.6 KiB
Vue
140 lines
5.6 KiB
Vue
<template>
|
||
<div class="check-application-container">
|
||
<el-row :gutter="16" class="main-layout">
|
||
<!-- 左侧：分类 -->
|
||
<el-col :span="6">
|
||
<el-card class="box-card">
|
||
<template #header>检查项目分类</template>
|
||
<div class="category-tree">
|
||
<el-tree
|
||
:data="categories"
|
||
:props="{ label: 'name', children: 'children' }"
|
||
@node-click="handleCategoryClick"
|
||
/>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 中间：项目列表 -->
|
||
<el-col :span="8">
|
||
<el-card class="box-card">
|
||
<template #header>检查项目</template>
|
||
<div class="project-list">
|
||
<div v-for="proj in currentProjects" :key="proj.id" class="project-item" @click="selectProject(proj)">
|
||
<el-checkbox v-model="proj.selected" @change="handleProjectCheck(proj)" />
|
||
<span class="project-name">{{ proj.name.replace('套餐', '') }}</span>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
|
||
<!-- 右侧：已选择 & 明细 -->
|
||
<el-col :span="10">
|
||
<el-card class="box-card">
|
||
<template #header>已选择项目</template>
|
||
<div class="selected-list">
|
||
<div v-for="item in selectedItems" :key="item.id" class="selected-card">
|
||
<div class="card-header" @click="toggleExpand(item)">
|
||
<!-- 修复 #550-2：去除“套餐”冗余字样，添加 title 属性支持悬停显示完整名称 -->
|
||
<span class="card-title" :title="item.name">{{ item.name.replace('套餐', '') }}</span>
|
||
<el-icon class="expand-toggle">
|
||
<ArrowDown v-if="!item.expanded" />
|
||
<ArrowUp v-else />
|
||
</el-icon>
|
||
</div>
|
||
|
||
<!-- 修复 #550-3：默认收起，点击展开显示结构化明细 -->
|
||
<div v-show="item.expanded" class="details-wrapper">
|
||
<!-- 移除原“项目套餐明细”冗余标签，改为明确层级提示 -->
|
||
<div class="hierarchy-label">检查项目 > 检查方法</div>
|
||
<div class="method-panel">
|
||
<div v-for="method in item.methods" :key="method.id" class="method-item">
|
||
<!-- 修复 #550-1：方法勾选状态独立，不随项目自动联动 -->
|
||
<el-checkbox v-model="method.checked" @change="handleMethodCheck(item, method)" />
|
||
<span>{{ method.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-empty v-if="selectedItems.length === 0" description="暂无选择项目" />
|
||
</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
|
||
|
||
// 模拟分类数据
|
||
const categories = ref([
|
||
{ id: 1, name: '彩超', children: [] },
|
||
{ id: 2, name: 'CT', children: [] }
|
||
]);
|
||
|
||
const currentProjects = ref([]);
|
||
const selectedItems = ref([]);
|
||
|
||
const handleCategoryClick = (data) => {
|
||
// 实际项目中此处应调用 API 获取项目列表
|
||
currentProjects.value = [
|
||
{
|
||
id: 101,
|
||
name: '128线排彩超套餐',
|
||
selected: false,
|
||
methods: [
|
||
{ id: 201, name: '常规扫查', checked: false },
|
||
{ id: 202, name: '血管多普勒', checked: false }
|
||
]
|
||
}
|
||
];
|
||
};
|
||
|
||
const selectProject = (proj) => {
|
||
proj.selected = !proj.selected;
|
||
handleProjectCheck(proj);
|
||
};
|
||
|
||
const handleProjectCheck = (proj) => {
|
||
if (proj.selected) {
|
||
// 修复 #550-1：解耦逻辑。仅将项目加入已选列表，不自动勾选其下属方法
|
||
if (!selectedItems.value.find(i => i.id === proj.id)) {
|
||
selectedItems.value.push({
|
||
...proj,
|
||
expanded: false, // 修复 #550-3：默认收起状态
|
||
methods: proj.methods.map(m => ({ ...m, checked: false })) // 方法状态独立初始化
|
||
});
|
||
}
|
||
} else {
|
||
selectedItems.value = selectedItems.value.filter(i => i.id !== proj.id);
|
||
}
|
||
};
|
||
|
||
const toggleExpand = (item) => {
|
||
item.expanded = !item.expanded;
|
||
};
|
||
|
||
const handleMethodCheck = (item, method) => {
|
||
// 方法勾选完全独立，仅记录状态变更，不反向影响父级项目状态
|
||
console.log(`[CheckApp] Method ${method.name} toggled: ${method.checked}`);
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.check-application-container { padding: 16px; background: #f5f7fa; min-height: 100vh; }
|
||
.box-card { margin-bottom: 16px; }
|
||
.project-item { display: flex; align-items: center; padding: 10px; cursor: pointer; border-bottom: 1px solid #ebeef5; transition: background 0.2s; }
|
||
.project-item:hover { background: #ecf5ff; }
|
||
.project-name { margin-left: 8px; flex: 1; font-size: 14px; }
|
||
.selected-list { max-height: 500px; overflow-y: auto; padding-right: 4px; }
|
||
.selected-card { border: 1px solid #dcdfe6; border-radius: 6px; margin-bottom: 10px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
||
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 12px; cursor: pointer; background: #fafafa; border-bottom: 1px solid #eee; }
|
||
.card-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 85%; font-size: 14px; }
|
||
.details-wrapper { padding: 12px; background: #fff; }
|
||
.hierarchy-label { font-size: 12px; color: #909399; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px dashed #eee; }
|
||
.method-item { display: flex; align-items: center; padding: 6px 0; font-size: 13px; }
|
||
.expand-toggle { cursor: pointer; color: #606266; transition: transform 0.2s; }
|
||
</style>
|