Fix Bug #550: AI修复
This commit is contained in:
@@ -1,60 +1,220 @@
|
||||
<template>
|
||||
<div class="order-container">
|
||||
<el-card shadow="never">
|
||||
<template #header>门诊医嘱</template>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="orders"
|
||||
style="width: 100%"
|
||||
data-cy="order-table"
|
||||
empty-text="暂无医嘱"
|
||||
>
|
||||
<el-table-column prop="itemName" label="项目名称" min-width="150" />
|
||||
<el-table-column label="总量" width="120" data-cy="total-quantity">
|
||||
<template #default="{ row }">
|
||||
{{ row.totalQuantity }} {{ row.totalUnit && row.totalUnit !== 'null' ? row.totalUnit : '' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100" />
|
||||
<el-table-column label="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link size="small" @click="handleView(row)">查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<div class="exam-apply-container">
|
||||
<el-row :gutter="12" style="height: 100%">
|
||||
<!-- 左侧：检查项目分类 -->
|
||||
<el-col :span="5" class="panel">
|
||||
<div class="panel-title">检查项目分类</div>
|
||||
<el-tree
|
||||
:data="categoryTree"
|
||||
:props="{ label: 'label', children: 'children' }"
|
||||
@node-click="handleCategorySelect"
|
||||
highlight-current
|
||||
default-expand-all
|
||||
/>
|
||||
</el-col>
|
||||
|
||||
<!-- 中间：检查项目列表 -->
|
||||
<el-col :span="7" class="panel">
|
||||
<div class="panel-title">检查项目</div>
|
||||
<el-checkbox-group v-model="selectedItemIds" @change="onItemSelectChange">
|
||||
<el-checkbox
|
||||
v-for="item in currentCategoryItems"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
:value="item.id"
|
||||
class="exam-item-checkbox"
|
||||
>
|
||||
{{ formatItemName(item.name) }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-col>
|
||||
|
||||
<!-- 右侧：已选择 & 检查方法 -->
|
||||
<el-col :span="12" class="panel">
|
||||
<div class="panel-title">已选择</div>
|
||||
<div class="selected-list">
|
||||
<div v-for="item in selectedItems" :key="item.id" class="selected-card">
|
||||
<!-- 卡片头部：独立勾选 + 名称自适应 + 展开收起 -->
|
||||
<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>
|
||||
<el-icon class="expand-icon">
|
||||
<ArrowDown v-if="item.expanded" />
|
||||
<ArrowRight v-else />
|
||||
</el-icon>
|
||||
</div>
|
||||
|
||||
<!-- 卡片明细：检查方法列表（默认收起，解耦独立勾选） -->
|
||||
<transition name="el-zoom-in-top">
|
||||
<div v-show="item.expanded" class="card-details">
|
||||
<div v-for="method in item.methods" :key="method.id" class="method-item">
|
||||
<el-checkbox
|
||||
v-model="method.checked"
|
||||
@change="onMethodCheck(item, method)"
|
||||
class="method-checkbox"
|
||||
/>
|
||||
<span class="method-name">{{ method.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
<el-empty v-if="selectedItems.length === 0" description="暂无已选项目" :image-size="60" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getOrderListApi } from '@/api/outpatient/order'
|
||||
import { ref, computed } from 'vue'
|
||||
import { ArrowDown, ArrowRight } from '@element-plus/icons-vue'
|
||||
|
||||
const loading = ref(false)
|
||||
const orders = ref([])
|
||||
// 模拟后端返回的分类与项目数据结构
|
||||
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 fetchOrders = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await getOrderListApi()
|
||||
orders.value = res.data || []
|
||||
} catch (error) {
|
||||
ElMessage.error('获取医嘱列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
const currentCategoryId = ref(null)
|
||||
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：清理冗余“套餐”字样
|
||||
*/
|
||||
const formatItemName = (name) => name.replace(/套餐/g, '')
|
||||
|
||||
const handleCategorySelect = (node) => {
|
||||
if (node.children) currentCategoryId.value = node.id
|
||||
}
|
||||
|
||||
/**
|
||||
* Bug #550 修复点 1：联动解耦
|
||||
* 仅同步项目选中状态，不自动触发下方检查方法的勾选
|
||||
*/
|
||||
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 })) }
|
||||
})
|
||||
|
||||
// 移除已取消勾选的项目
|
||||
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)
|
||||
})
|
||||
}
|
||||
|
||||
const onItemCheck = (item) => {
|
||||
// 独立控制项目勾选状态，不联动方法
|
||||
if (!item.checked) {
|
||||
selectedItemIds.value = selectedItemIds.value.filter(id => id !== item.id)
|
||||
}
|
||||
}
|
||||
|
||||
const handleView = (row) => {
|
||||
ElMessage.info(`查看医嘱: ${row.itemName}`)
|
||||
const onMethodCheck = (item, method) => {
|
||||
// 独立控制方法勾选状态，不反向影响项目
|
||||
}
|
||||
|
||||
onMounted(fetchOrders)
|
||||
/**
|
||||
* Bug #550 修复点 3：结构化展示与默认收起
|
||||
* 点击切换明细展开/收起，默认 collapsed
|
||||
*/
|
||||
const toggleDetail = (item) => {
|
||||
item.expanded = !item.expanded
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.order-container {
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user