Fix Bug #550: AI修复
This commit is contained in:
@@ -1,149 +1,233 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="exam-apply-container">
|
<div class="exam-apply-container">
|
||||||
<!-- 左侧：检查项目分类 -->
|
<!-- 左侧：分类树 -->
|
||||||
<el-card class="category-panel" shadow="never">
|
<div class="left-panel">
|
||||||
<template #header>检查项目分类</template>
|
|
||||||
<el-tree
|
<el-tree
|
||||||
:data="categories"
|
:data="categoryTree"
|
||||||
node-key="id"
|
:props="{ label: 'name', children: 'children' }"
|
||||||
|
@node-click="handleCategoryClick"
|
||||||
highlight-current
|
highlight-current
|
||||||
@node-click="handleCategorySelect"
|
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</div>
|
||||||
|
|
||||||
<!-- 中间：检查项目列表 -->
|
<!-- 中间：项目列表 -->
|
||||||
<el-card class="item-panel" shadow="never">
|
<div class="middle-panel">
|
||||||
<template #header>检查项目</template>
|
|
||||||
<div class="item-list">
|
<div class="item-list">
|
||||||
<div v-for="item in currentItems" :key="item.id" class="item-row">
|
<div
|
||||||
<el-checkbox
|
v-for="item in currentItems"
|
||||||
v-model="item.checked"
|
:key="item.id"
|
||||||
@change="handleItemCheck(item)"
|
class="item-card"
|
||||||
/>
|
:class="{ active: item.checked }"
|
||||||
<el-tooltip :content="item.name" placement="top" :show-after="300">
|
@click="toggleItem(item)"
|
||||||
<span class="item-name">{{ cleanName(item.name) }}</span>
|
>
|
||||||
</el-tooltip>
|
<el-checkbox v-model="item.checked" @click.stop />
|
||||||
|
<span class="item-name" :title="item.name">{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</div>
|
||||||
|
|
||||||
<!-- 下方：已选择区域 -->
|
<!-- 右侧：检查方法/明细 -->
|
||||||
<el-card class="selected-panel" shadow="never">
|
<div class="right-panel">
|
||||||
<template #header>已选择</template>
|
<div class="method-list">
|
||||||
<div v-if="selectedItems.length === 0" class="empty-tip">暂无已选项目</div>
|
<div
|
||||||
<el-collapse v-else v-model="activeCollapseNames">
|
v-for="method in currentMethods"
|
||||||
<el-collapse-item
|
:key="method.id"
|
||||||
v-for="sel in selectedItems"
|
class="method-card"
|
||||||
:key="sel.id"
|
:class="{ active: method.checked }"
|
||||||
:name="sel.id"
|
@click="toggleMethod(method)"
|
||||||
>
|
>
|
||||||
<template #title>
|
<el-checkbox v-model="method.checked" @click.stop />
|
||||||
<el-tooltip :content="sel.name" placement="top" :show-after="300">
|
<span class="method-name" :title="method.name">{{ method.name }}</span>
|
||||||
<span class="collapse-title">{{ cleanName(sel.name) }}</span>
|
</div>
|
||||||
</el-tooltip>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<div class="method-container">
|
|
||||||
<div v-for="method in sel.methods" :key="method.id" class="method-row">
|
<!-- 底部：已选择区域 -->
|
||||||
<el-checkbox
|
<div class="selected-area">
|
||||||
v-model="method.checked"
|
<div class="selected-header">已选择项目</div>
|
||||||
@change="handleMethodCheck(sel, method)"
|
<div class="selected-list">
|
||||||
/>
|
<!-- 修复 #550-3：严格遵循 项目 > 检查方法 层级，移除“项目套餐明细”冗余标签 -->
|
||||||
<el-tooltip :content="method.name" placement="top" :show-after="300">
|
<div v-for="group in selectedGroups" :key="group.id" class="selected-group">
|
||||||
<span class="method-name">{{ cleanName(method.name) }}</span>
|
<div class="selected-group-header" @click="group.collapsed = !group.collapsed">
|
||||||
</el-tooltip>
|
<!-- 修复 #550-2：自适应宽度 + 完整名称提示，去除“套餐”前缀 -->
|
||||||
|
<span class="item-name" :title="group.name">{{ group.name }}</span>
|
||||||
|
<el-icon class="collapse-icon">
|
||||||
|
<ArrowDown v-if="!group.collapsed" />
|
||||||
|
<ArrowRight v-else />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<!-- 修复 #550-2：默认收起状态 -->
|
||||||
|
<div v-show="!group.collapsed" class="selected-methods">
|
||||||
|
<div v-for="method in group.methods" :key="method.id" class="method-row">
|
||||||
|
<el-checkbox v-model="method.checked" @change="handleMethodCheck(method)" />
|
||||||
|
<span class="method-name" :title="method.name">{{ method.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</div>
|
||||||
</el-collapse>
|
<div v-if="selectedGroups.length === 0" class="empty-tip">暂无已选项目</div>
|
||||||
</el-card>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref, computed } from 'vue';
|
||||||
|
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue';
|
||||||
|
|
||||||
// 状态定义
|
// 模拟数据源（实际应从 API 获取）
|
||||||
const categories = ref<any[]>([])
|
const categoryTree = ref([]);
|
||||||
const currentItems = ref<any[]>([])
|
const currentItems = ref([]);
|
||||||
const selectedItems = ref<any[]>([])
|
const currentMethods = ref([]);
|
||||||
// 修复点3：默认收起明细面板
|
|
||||||
const activeCollapseNames = ref<any[]>([])
|
|
||||||
|
|
||||||
// 分类切换
|
// 已选数据池
|
||||||
const handleCategorySelect = (node: any) => {
|
const selectedPool = ref([]);
|
||||||
// 实际项目中此处应调用 API 获取对应分类下的项目列表
|
|
||||||
// 此处仅做结构演示，确保 methods 字段存在且默认未勾选
|
|
||||||
currentItems.value = node.children?.map((c: any) => ({
|
|
||||||
id: c.id,
|
|
||||||
name: c.name,
|
|
||||||
checked: false,
|
|
||||||
methods: (c.methods || []).map((m: any) => ({ id: m.id, name: m.name, checked: false }))
|
|
||||||
})) || []
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修复点2：清理冗余“套餐”字样
|
// 当前选中分类
|
||||||
const cleanName = (name: string) => {
|
const activeCategoryId = ref(null);
|
||||||
return name.replace(/套餐/g, '').trim()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修复点1：项目勾选与检查方法解耦
|
const handleCategoryClick = (node) => {
|
||||||
const handleItemCheck = (item: any) => {
|
activeCategoryId.value = node.id;
|
||||||
if (item.checked) {
|
// 加载对应项目与方法（实际调用 API）
|
||||||
// 仅将项目加入已选列表，关联方法保持未勾选状态
|
currentItems.value = node.items || [];
|
||||||
if (!selectedItems.value.find(s => s.id === item.id)) {
|
currentMethods.value = node.methods || [];
|
||||||
selectedItems.value.push({
|
};
|
||||||
id: item.id,
|
|
||||||
name: item.name,
|
// 修复 #550-1：项目勾选与检查方法完全解耦，移除任何自动联动逻辑
|
||||||
methods: item.methods.map((m: any) => ({ ...m, checked: false }))
|
const toggleItem = (item) => {
|
||||||
})
|
item.checked = !item.checked;
|
||||||
|
syncSelectedPool();
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMethod = (method) => {
|
||||||
|
method.checked = !method.checked;
|
||||||
|
syncSelectedPool();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMethodCheck = (method) => {
|
||||||
|
// 仅更新池状态，不触发父级联动
|
||||||
|
syncSelectedPool();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 同步已选池并构建层级结构
|
||||||
|
const syncSelectedPool = () => {
|
||||||
|
const allChecked = [
|
||||||
|
...currentItems.value.filter(i => i.checked),
|
||||||
|
...currentMethods.value.filter(m => m.checked)
|
||||||
|
];
|
||||||
|
selectedPool.value = allChecked;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 修复 #550-3：按 项目 > 方法 分组，默认 collapsed: true
|
||||||
|
const selectedGroups = computed(() => {
|
||||||
|
const groups = [];
|
||||||
|
const itemMap = new Map();
|
||||||
|
|
||||||
|
selectedPool.value.forEach(node => {
|
||||||
|
if (node.type === 'item') {
|
||||||
|
itemMap.set(node.id, { ...node, methods: [], collapsed: true });
|
||||||
}
|
}
|
||||||
} else {
|
});
|
||||||
// 取消勾选时移除项目，并同步清理折叠面板状态
|
|
||||||
selectedItems.value = selectedItems.value.filter(s => s.id !== item.id)
|
|
||||||
activeCollapseNames.value = activeCollapseNames.value.filter(n => n !== item.id)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修复点1：检查方法独立勾选，不反向影响父级项目状态
|
selectedPool.value.forEach(node => {
|
||||||
const handleMethodCheck = (sel: any, method: any) => {
|
if (node.type === 'method' && node.parentId) {
|
||||||
// 此处可添加业务逻辑：如统计已选方法数量、联动费用计算等
|
const parent = itemMap.get(node.parentId);
|
||||||
// 保持与父级项目勾选状态完全独立
|
if (parent) {
|
||||||
}
|
parent.methods.push(node);
|
||||||
|
} else {
|
||||||
|
// 独立方法或无父级项目，单独成组
|
||||||
|
groups.push({ ...node, methods: [], collapsed: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
groups.push(...itemMap.values());
|
||||||
|
return groups;
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.exam-apply-container {
|
.exam-apply-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
|
||||||
padding: 16px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
gap: 12px;
|
||||||
}
|
}
|
||||||
.category-panel, .item-panel, .selected-panel {
|
|
||||||
width: 100%;
|
.left-panel, .middle-panel, .right-panel {
|
||||||
}
|
flex: 1;
|
||||||
.item-list, .method-container {
|
border: 1px solid #e4e7ed;
|
||||||
max-height: 300px;
|
border-radius: 4px;
|
||||||
|
padding: 12px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
.item-row, .method-row {
|
|
||||||
|
.item-card, .method-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px 0;
|
padding: 8px;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #f2f6fc;
|
||||||
}
|
}
|
||||||
/* 修复点2：宽度自适应 + 溢出省略 + 悬浮提示 */
|
|
||||||
.item-name, .method-name, .collapse-title {
|
.item-card.active, .method-card.active {
|
||||||
|
background-color: #ecf5ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-area {
|
||||||
|
border-top: 1px solid #e4e7ed;
|
||||||
|
padding: 12px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-header {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-group {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-group-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: #f5f7fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 修复 #550-2：宽度自适应，超长省略，悬停提示 */
|
||||||
|
.item-name, .method-name {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: pointer;
|
padding: 0 8px;
|
||||||
padding-left: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.selected-methods {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-top: 1px dashed #e4e7ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.method-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 6px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-icon {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #909399;
|
||||||
|
}
|
||||||
|
|
||||||
.empty-tip {
|
.empty-tip {
|
||||||
color: #999;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
color: #909399;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user