Fix Bug #550: AI修复
This commit is contained in:
@@ -37,8 +37,8 @@
|
||||
<!-- 卡片头部：独立勾选 + 名称自适应 + 展开收起 -->
|
||||
<div class="card-header" @click="toggleDetail(item)">
|
||||
<el-checkbox v-model="item.checked" @change="onItemCheck(item)" @click.stop />
|
||||
<el-tooltip :content="formatItemName(item.name)" placement="top" :show-after="300">
|
||||
<span class="item-name">{{ formatItemName(item.name) }}</span>
|
||||
<el-tooltip :content="item.originalName" placement="top" :show-after="300">
|
||||
<span class="item-name">{{ formatItemName(item.originalName) }}</span>
|
||||
</el-tooltip>
|
||||
<el-icon class="expand-icon">
|
||||
<ArrowDown v-if="item.expanded" />
|
||||
@@ -60,7 +60,7 @@
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" :image-size="60" />
|
||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@@ -68,153 +68,89 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
|
||||
|
||||
// 模拟后端返回的分类与项目数据结构
|
||||
const categoryTree = ref([
|
||||
{
|
||||
id: 'c1', label: '彩超', children: [
|
||||
{ id: 'i1', name: '128线排彩超套餐', methods: [{ id: 'm1', name: '常规检查', checked: false }, { id: 'm2', name: '血管多普勒', checked: false }] },
|
||||
{ id: 'i2', name: '腹部彩超', methods: [{ id: 'm3', name: '标准切面', checked: false }] }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'c2', label: 'CT', children: [
|
||||
{ id: 'i3', name: '胸部平扫套餐', methods: [{ id: 'm4', name: '薄层重建', checked: false }] }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const currentCategoryId = ref(null)
|
||||
// 数据源（实际应由API动态获取）
|
||||
const categoryTree = ref([])
|
||||
const currentCategoryItems = ref([])
|
||||
const selectedItemIds = ref([])
|
||||
const selectedItems = ref([])
|
||||
|
||||
const currentCategoryItems = computed(() => {
|
||||
const cat = categoryTree.value.find(c => c.id === currentCategoryId.value)
|
||||
return cat ? cat.children : []
|
||||
})
|
||||
|
||||
/**
|
||||
* Bug #550 修复点 2：清理冗余“套餐”字样
|
||||
* 格式化名称：
|
||||
* 1. 去除冗余的“套餐”前缀/后缀
|
||||
* 2. 超出长度自动截断并添加省略号（配合Tooltip显示全称）
|
||||
*/
|
||||
const formatItemName = (name) => name.replace(/套餐/g, '')
|
||||
const formatItemName = (name) => {
|
||||
if (!name) return ''
|
||||
const clean = name.replace(/^套餐[：:]/, '').replace(/套餐$/, '')
|
||||
return clean.length > 12 ? clean.slice(0, 12) + '...' : clean
|
||||
}
|
||||
|
||||
/** 切换分类时加载对应项目 */
|
||||
const handleCategorySelect = (node) => {
|
||||
if (node.children) currentCategoryId.value = node.id
|
||||
// 模拟接口返回数据，实际替换为 API 调用
|
||||
currentCategoryItems.value = [
|
||||
{ id: 1, name: '128线排彩超', methods: [{ id: 10, name: '常规检查' }, { id: 11, name: '血管成像' }] },
|
||||
{ id: 2, name: '套餐：心脏彩超', methods: [{ id: 12, name: '二维超声' }] }
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* Bug #550 修复点 1：联动解耦
|
||||
* 仅同步项目选中状态，不自动触发下方检查方法的勾选
|
||||
* 核心修复：项目勾选与检查方法解耦
|
||||
* - 仅同步项目维度的选中状态
|
||||
* - 新增项目时，其下属方法默认 checked: false，expanded: false
|
||||
*/
|
||||
const onItemSelectChange = (ids) => {
|
||||
const newItems = ids.map(id => {
|
||||
const existing = selectedItems.value.find(i => i.id === id)
|
||||
if (existing) return existing
|
||||
const source = currentCategoryItems.value.find(i => i.id === id)
|
||||
// 初始化时方法默认未勾选，保持独立
|
||||
return { ...source, checked: true, expanded: false, methods: source.methods.map(m => ({ ...m, checked: false })) }
|
||||
})
|
||||
|
||||
// 移除已取消勾选的项目
|
||||
const existingIds = new Set(selectedItems.value.map(i => i.id))
|
||||
// 移除已取消勾选的项
|
||||
selectedItems.value = selectedItems.value.filter(i => ids.includes(i.id))
|
||||
// 追加新选中的项目
|
||||
newItems.forEach(n => {
|
||||
if (!selectedItems.value.find(i => i.id === n.id)) selectedItems.value.push(n)
|
||||
// 追加新勾选的项
|
||||
ids.forEach(id => {
|
||||
if (!existingIds.has(id)) {
|
||||
const src = currentCategoryItems.value.find(i => i.id === id)
|
||||
selectedItems.value.push({
|
||||
id,
|
||||
originalName: src?.name || '',
|
||||
checked: true,
|
||||
expanded: false, // 默认收起明细
|
||||
methods: src?.methods?.map(m => ({ ...m, checked: false })) || [] // 方法独立状态，不联动
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/** 独立控制项目勾选状态（取消时同步移除） */
|
||||
const onItemCheck = (item) => {
|
||||
// 独立控制项目勾选状态，不联动方法
|
||||
if (!item.checked) {
|
||||
selectedItemIds.value = selectedItemIds.value.filter(id => id !== item.id)
|
||||
}
|
||||
}
|
||||
|
||||
/** 独立控制检查方法勾选状态（仅更新自身，不影响父级） */
|
||||
const onMethodCheck = (item, method) => {
|
||||
// 独立控制方法勾选状态，不反向影响项目
|
||||
// 状态已由 v-model 自动同步，此处可预留业务逻辑（如价格计算）
|
||||
}
|
||||
|
||||
/**
|
||||
* Bug #550 修复点 3：结构化展示与默认收起
|
||||
* 点击切换明细展开/收起，默认 collapsed
|
||||
*/
|
||||
/** 展开/收起明细面板 */
|
||||
const toggleDetail = (item) => {
|
||||
item.expanded = !item.expanded
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.exam-apply-container {
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.panel {
|
||||
background: #fff;
|
||||
border: 1px solid #ebeef5;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
}
|
||||
.panel-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.selected-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.selected-card {
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.card-header:hover {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
.item-name {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
color: #303133;
|
||||
}
|
||||
.expand-icon {
|
||||
margin-left: auto;
|
||||
color: #909399;
|
||||
}
|
||||
.card-details {
|
||||
padding: 8px 12px 12px 36px;
|
||||
border-top: 1px dashed #ebeef5;
|
||||
background: #fff;
|
||||
}
|
||||
.method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.method-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.exam-apply-container { padding: 12px; height: 100%; background: #f5f7fa; }
|
||||
.panel { background: #fff; padding: 12px; border-radius: 6px; height: 100%; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
|
||||
.panel-title { font-weight: 600; margin-bottom: 12px; font-size: 14px; color: #303133; border-bottom: 1px solid #ebeef5; padding-bottom: 8px; }
|
||||
.selected-list { flex: 1; overflow-y: auto; padding-right: 6px; }
|
||||
.selected-card { border: 1px solid #ebeef5; border-radius: 6px; margin-bottom: 10px; background: #fafafa; transition: all 0.2s; }
|
||||
.selected-card:hover { border-color: #c0c4cc; }
|
||||
.card-header { display: flex; align-items: center; padding: 10px 12px; cursor: pointer; user-select: none; }
|
||||
.item-name { flex: 1; margin: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #303133; }
|
||||
.expand-icon { font-size: 12px; color: #909399; transition: transform 0.2s; }
|
||||
.card-details { padding: 6px 12px 10px 36px; background: #f5f7fa; border-top: 1px dashed #dcdfe6; }
|
||||
.method-item { display: flex; align-items: center; padding: 5px 0; font-size: 12px; color: #606266; }
|
||||
.method-checkbox { margin-right: 8px; }
|
||||
.method-name { flex: 1; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user