Fix Bug #550: AI修复
This commit is contained in:
@@ -34,16 +34,12 @@
|
||||
<div v-else class="selected-list">
|
||||
<div v-for="item in selectedItems" :key="item.id" class="selected-card" :data-cy="`selected-card-${item.id}`">
|
||||
<div class="card-header" @click="toggleExpand(item)">
|
||||
<!-- 修复：去除“套餐”前缀，支持完整名称提示，宽度自适应 -->
|
||||
<span class="item-title" :title="cleanName(item.name)">{{ cleanName(item.name) }}</span>
|
||||
<span class="toggle-icon" data-cy="expand-btn">{{ item.expanded ? '▲' : '▼' }}</span>
|
||||
</div>
|
||||
<!-- 修复：默认收起，点击展开/收起 -->
|
||||
<div v-show="item.expanded" class="details-content" data-cy="details-panel">
|
||||
<!-- 修复：已删除“项目套餐明细”冗余标签 -->
|
||||
<div v-if="item.methods && item.methods.length > 0" class="method-list" data-cy="method-list">
|
||||
<div v-for="method in item.methods" :key="method.id" class="method-item" data-cy="method-item">
|
||||
<!-- 修复：项目与检查方法解耦，独立控制勾选状态 -->
|
||||
<input type="checkbox" :checked="method.selected" @change="toggleMethod(item, method)" />
|
||||
<span>{{ method.name }}</span>
|
||||
</div>
|
||||
@@ -60,133 +56,122 @@
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
// 模拟分类数据（实际应从API获取）
|
||||
const categories = ref([
|
||||
{ id: 1, name: '彩超' },
|
||||
{ id: 2, name: 'CT' },
|
||||
{ id: 3, name: 'MRI' }
|
||||
])
|
||||
// 状态定义
|
||||
const categories = ref([])
|
||||
const selectedCategory = ref(null)
|
||||
|
||||
// 模拟项目数据
|
||||
const allItems = ref([
|
||||
{ id: 128, categoryId: 1, name: '套餐：128线排', methods: [{ id: 1281, name: '常规扫描', selected: false }, { id: 1282, name: '增强扫描', selected: false }] },
|
||||
{ id: 102, categoryId: 1, name: '普通彩超', methods: [] },
|
||||
{ id: 201, categoryId: 2, name: '胸部CT平扫', methods: [{ id: 2011, name: '薄层重建', selected: false }] }
|
||||
])
|
||||
|
||||
const allItems = ref([])
|
||||
const selectedItems = ref([])
|
||||
|
||||
// 计算属性：当前分类下的项目
|
||||
const currentItems = computed(() => {
|
||||
if (!selectedCategory.value) return []
|
||||
return allItems.value.filter(i => i.categoryId === selectedCategory.value.id)
|
||||
})
|
||||
|
||||
// 方法：选择分类
|
||||
const selectCategory = (cat) => {
|
||||
selectedCategory.value = cat
|
||||
}
|
||||
|
||||
const isSelected = (id) => {
|
||||
return selectedItems.value.some(i => i.id === id)
|
||||
// 方法：判断项目是否已选
|
||||
const isSelected = (itemId) => {
|
||||
return selectedItems.value.some(i => i.id === itemId)
|
||||
}
|
||||
|
||||
// 修复：项目勾选与检查方法解耦，新增时默认收起，方法状态独立初始化为未勾选
|
||||
// 核心修复1：解耦勾选逻辑。添加项目时不自动勾选关联方法，方法默认未选中
|
||||
const toggleItem = (item) => {
|
||||
const idx = selectedItems.value.findIndex(i => i.id === item.id)
|
||||
if (idx > -1) {
|
||||
selectedItems.value.splice(idx, 1)
|
||||
const index = selectedItems.value.findIndex(i => i.id === item.id)
|
||||
if (index > -1) {
|
||||
selectedItems.value.splice(index, 1)
|
||||
} else {
|
||||
selectedItems.value.push({
|
||||
// 初始化已选项目：默认收起(expanded: false)，方法独立状态(selected: false)
|
||||
const newItem = {
|
||||
...item,
|
||||
expanded: false,
|
||||
methods: item.methods ? item.methods.map(m => ({ ...m, selected: false })) : []
|
||||
})
|
||||
}
|
||||
selectedItems.value.push(newItem)
|
||||
}
|
||||
}
|
||||
|
||||
// 核心修复2：清理名称，去除冗余“套餐”字样，支持完整名称提示
|
||||
const cleanName = (name) => {
|
||||
return name ? name.replace(/套餐/g, '').trim() : ''
|
||||
}
|
||||
|
||||
// 核心修复3：独立控制检查方法勾选状态
|
||||
const toggleMethod = (item, method) => {
|
||||
method.selected = !method.selected
|
||||
}
|
||||
|
||||
// 方法：展开/收起明细（默认收起）
|
||||
const toggleExpand = (item) => {
|
||||
item.expanded = !item.expanded
|
||||
}
|
||||
|
||||
// 修复：清理名称前缀，避免“套餐”字样冗余
|
||||
const cleanName = (name) => {
|
||||
if (!name) return ''
|
||||
return name.replace(/^(项目)?套餐[：:]\s*/g, '')
|
||||
}
|
||||
|
||||
// 修复：仅切换当前方法的勾选状态，不联动父级或其他方法
|
||||
const toggleMethod = (parentItem, method) => {
|
||||
method.selected = !method.selected
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.examination-application {
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.layout-container {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
height: 100%;
|
||||
gap: 16px;
|
||||
height: calc(100% - 32px);
|
||||
}
|
||||
.panel {
|
||||
border: 1px solid #e0e0e0;
|
||||
flex: 1;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.panel h3 {
|
||||
margin: 0 0 10px 0;
|
||||
margin: 0 0 12px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #eee;
|
||||
color: #303133;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.category-panel { width: 20%; }
|
||||
.item-panel { width: 30%; }
|
||||
.selected-panel { width: 50%; }
|
||||
.category-list, .item-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.category-list li, .item-row {
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.category-list li:hover, .item-row:hover { background: #f0f7ff; }
|
||||
.category-list li.active { background: #e6f7ff; color: #1890ff; font-weight: 500; }
|
||||
.selected-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
.category-list li:hover, .item-row:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
.category-list li.active {
|
||||
background: #ecf5ff;
|
||||
color: #409eff;
|
||||
font-weight: 500;
|
||||
}
|
||||
.selected-card {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
background: #fafafa;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-header {
|
||||
padding: 10px 12px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 10px;
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.item-title {
|
||||
flex: 1;
|
||||
@@ -194,43 +179,40 @@ const toggleMethod = (parentItem, method) => {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
margin-right: 8px;
|
||||
font-size: 13px;
|
||||
color: #303133;
|
||||
}
|
||||
.toggle-icon {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
user-select: none;
|
||||
color: #909399;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.details-content {
|
||||
padding: 8px 10px;
|
||||
padding: 8px 12px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
}
|
||||
.method-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
}
|
||||
.method-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4px 0;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
.method-item input {
|
||||
margin-right: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.empty-tip {
|
||||
color: #999;
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.no-methods {
|
||||
color: #999;
|
||||
color: #909399;
|
||||
font-size: 12px;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.empty-tip {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user