Files
his/openhis-ui-vue3/src/views/inpatient/lab-request/index.vue
2026-05-26 23:09:45 +08:00

150 lines
5.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="lab-request-container">
<el-card>
<template #header>
<div class="card-header">
<span>检验申请列表</span>
</div>
</template>
<el-table :data="tableData" border style="width: 100%" v-loading="loading">
<!-- Bug #467 Fix: 修正列标题术语处方号改为申请单号 -->
<el-table-column prop="requestNo" label="申请单号" width="180" />
<el-table-column prop="patientName" label="患者姓名" width="120" />
<!-- Bug #467 Fix: 优化单据名称展示支持具体项目拼接超长截断与悬停提示 -->
<el-table-column prop="requestName" label="申请单名称" min-width="220">
<template #default="{ row }">
<el-tooltip
:content="row.fullRequestName"
placement="top"
:disabled="row.requestName === row.fullRequestName"
:show-after="300"
>
<span class="request-name-text">{{ row.requestName }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="createTime" label="申请时间" width="180" />
<el-table-column prop="status" label="状态" width="100" />
<el-table-column label="操作" width="100" fixed="right">
<template #default="{ row }">
<el-button type="primary" link @click="handleEdit(row)" :disabled="row.status !== '待签发'">修改</el-button>
</template>
</el-table-column>
</el-table>
</el-card>
<!-- Bug #576 Fix: 编辑检验申请单弹窗右侧已选择列表绑定 items 数据 -->
<el-dialog v-model="editDialogVisible" title="编辑检验申请单" width="800px" destroy-on-close>
<el-form :model="editForm" label-width="100px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="症状">
<el-input v-model="editForm.symptoms" type="textarea" :rows="3" name="symptoms" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="体征">
<el-input v-model="editForm.signs" type="textarea" :rows="3" name="signs" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="相关结果">
<el-input v-model="editForm.relatedResults" type="textarea" :rows="2" />
</el-form-item>
</el-form>
<div class="dialog-footer-layout">
<div class="selected-panel">
<h4>已选择</h4>
<el-table :data="editForm.items" border style="width: 100%" max-height="200" empty-text="无数据">
<el-table-column prop="itemName" label="检验项目" />
<el-table-column prop="price" label="单价" width="100">
<template #default="{ row }">{{ row.price }}</template>
</el-table-column>
<el-table-column prop="unit" label="单位" width="80" />
</el-table>
</div>
</div>
<template #footer>
<el-button @click="editDialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleSaveEdit">保存</el-button>
</template>
</el-dialog>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getLabRequestListApi, getLabRequestDetailApi, updateLabRequestApi } from '@/api/inpatient/labRequest'
import { ElMessage } from 'element-plus'
const loading = ref(false)
const tableData = ref([])
const editDialogVisible = ref(false)
const editForm = ref({
id: null,
symptoms: '',
signs: '',
relatedResults: '',
items: []
})
const fetchData = async () => {
loading.value = true
try {
const res = await getLabRequestListApi()
tableData.value = res.data || []
} catch (error) {
console.error('获取检验申请列表失败:', error)
} finally {
loading.value = false
}
}
// Bug #576 Fix: 调用详情接口获取完整数据(含 items确保右侧列表正确回显
const handleEdit = async (row) => {
try {
const res = await getLabRequestDetailApi(row.id)
if (res.data) {
editForm.value = {
id: res.data.id,
symptoms: res.data.symptoms || '',
signs: res.data.signs || '',
relatedResults: res.data.relatedResults || '',
items: res.data.items || []
}
editDialogVisible.value = true
}
} catch (error) {
ElMessage.error('获取申请单详情失败')
}
}
const handleSaveEdit = async () => {
try {
await updateLabRequestApi(editForm.value)
ElMessage.success('保存成功')
editDialogVisible.value = false
fetchData()
} catch (error) {
ElMessage.error('保存失败')
}
}
onMounted(() => {
fetchData()
})
</script>
<style scoped>
.lab-request-container { padding: 20px; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
.request-name-text { cursor: pointer; }
.dialog-footer-layout { margin-top: 20px; }
.selected-panel h4 { margin-bottom: 10px; font-size: 14px; color: #606266; }
</style>