Fix Bug #550: AI修复

This commit is contained in:
2026-05-27 01:19:00 +08:00
parent a7dd162cd0
commit 890fea8cea
2 changed files with 92 additions and 181 deletions

View File

@@ -40,8 +40,8 @@
>
<div class="card-header">
<!-- 修复 Bug #550-2去掉套餐前缀支持宽度自适应与完整名称提示 -->
<el-tooltip :content="item.name" placement="top" :show-after="300">
<span class="item-name">{{ item.name }}</span>
<el-tooltip :content="cleanName(item.name)" placement="top" :show-after="300">
<span class="item-name">{{ cleanName(item.name) }}</span>
</el-tooltip>
<el-icon class="expand-icon" :class="{ 'is-expanded': item.expanded }">
<ArrowDown />
@@ -61,8 +61,7 @@
<el-checkbox
v-for="method in item.methods"
:key="method.id"
:label="method.id"
class="method-checkbox"
:value="method.id"
>
{{ method.name }}
</el-checkbox>
@@ -81,121 +80,90 @@
import { ref } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
// 模拟分类数据
const categories = ref([
{ id: 1, name: '彩超', children: [] },
{ id: 2, name: 'CT', children: [] }
])
// 模拟当前分类下的项目数据
const currentItems = ref([
{ id: 101, name: '128线排彩超检查', code: 'US128', methods: [
{ id: 'm1', name: '常规扫描' },
{ id: 'm2', name: '增强扫描' }
]},
{ id: 102, name: '腹部彩超', code: 'US001', methods: [
{ id: 'm3', name: '平扫' }
]}
])
// 已选项目状态池
const categories = ref([])
const currentItems = ref([])
const selectedItems = ref([])
/**
* 修复 Bug #550-1联动冲突解耦
* 中间表格勾选仅同步“项目”维度,绝不自动触发“检查方法”勾选。
* 方法勾选完全由右侧独立交互控制。
*/
const handleItemSelectionChange = (selection) => {
const newSelected = selection.map(item => {
const existing = selectedItems.value.find(s => s.id === item.id)
// 若已存在则保留其方法勾选状态,否则初始化空数组与收起状态
return existing || {
...item,
selectedMethods: [],
expanded: false
}
})
// 移除未勾选的项目(保持数据纯净)
selectedItems.value = newSelected
}
/**
* 修复 Bug #550-3默认收起点击切换展开/收起
*/
const toggleExpand = (itemId) => {
const item = selectedItems.value.find(i => i.id === itemId)
if (item) item.expanded = !item.expanded
}
/**
* 修复 Bug #550-1方法独立变更事件
* 仅更新当前 item 的 selectedMethods不向上冒泡或影响其他项目
*/
const handleMethodChange = (item) => {
// 实际业务中可在此处同步至后端或计算总价
console.log(`[解耦] 项目 ${item.name} 方法变更:`, item.selectedMethods)
// 清理名称冗余前缀
const cleanName = (name) => {
if (!name) return ''
return name.replace(/^套餐[:]/, '').replace(/^套餐/, '')
}
const handleCategoryClick = (data) => {
// 实际项目中此处会请求对应分类下的项目列表并更新 currentItems
// 实际项目中此处应调用 API 获取分类下的项目列表
// 此处保留结构以匹配现有业务流
console.log('切换分类:', data.name)
}
const handleItemSelectionChange = (selection) => {
const newIds = new Set(selection.map(i => i.id))
// 移除未勾选的项目
selectedItems.value = selectedItems.value.filter(item => newIds.has(item.id))
// 新增勾选的项目(严格解耦:默认收起,方法不自动勾选)
selection.forEach(item => {
if (!selectedItems.value.find(s => s.id === item.id)) {
selectedItems.value.push({
...item,
expanded: false, // 默认收起
selectedMethods: [], // 独立状态,不联动
methods: item.methods || [] // 从接口获取的检查方法/明细
})
}
})
}
const toggleExpand = (id) => {
const item = selectedItems.value.find(i => i.id === id)
if (item) item.expanded = !item.expanded
}
const handleMethodChange = (item) => {
// 仅记录当前项目的方法选择,不触发父级或全局联动
console.log(`项目 [${cleanName(item.name)}] 已选方法:`, item.selectedMethods)
}
</script>
<style scoped>
.examination-apply-container { padding: 16px; height: 100%; }
.main-layout { height: calc(100vh - 140px); }
.panel {
background: #fff;
padding: 12px;
border-radius: 8px;
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.panel h3 { margin: 0 0 12px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.main-layout { height: 100%; }
.panel { background: #fff; padding: 12px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); height: 100%; display: flex; flex-direction: column; }
.panel h3 { margin: 0 0 12px; font-size: 16px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.selected-list { flex: 1; overflow-y: auto; padding-right: 4px; }
/* 修复 Bug #550-2卡片宽度自适应悬停高亮 */
.selected-item-card {
border: 1px solid #e4e7ed;
border-radius: 6px;
padding: 10px;
border-radius: 4px;
margin-bottom: 8px;
cursor: pointer;
transition: all 0.2s;
background: #fafafa;
width: 100%;
box-sizing: border-box;
}
.selected-item-card:hover { border-color: #409eff; background: #f0f9ff; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
/* 修复 Bug #550-2文本溢出省略保留完整 title 提示 */
.selected-item-card:hover { border-color: #409eff; background: #fff; }
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 12px;
}
.item-name {
font-weight: 500;
max-width: 85%;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
font-weight: 500;
color: #303133;
}
.expand-icon { transition: transform 0.3s; color: #909399; }
.expand-icon {
transition: transform 0.3s;
margin-left: 8px;
color: #909399;
}
.expand-icon.is-expanded { transform: rotate(180deg); }
/* 修复 Bug #550-3明细区域层级样式 */
.method-detail-list { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #dcdfe6; }
.hierarchy-path { font-size: 12px; color: #909399; margin-bottom: 8px; font-weight: 500; }
.method-group { display: flex; flex-direction: column; gap: 4px; }
.method-checkbox { margin-left: 0; }
/* 展开收起动画 */
.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.25s ease; }
.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-6px); }
.method-detail-list { padding: 0 12px 12px; border-top: 1px dashed #ebeef5; }
.hierarchy-path { font-size: 12px; color: #909399; margin: 8px 0 6px; }
.method-group { display: flex; flex-direction: column; gap: 6px; }
.slide-fade-enter-active, .slide-fade-leave-active { transition: all 0.3s ease; }
.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(-8px); }
</style>