380 lines
14 KiB
Vue
380 lines
14 KiB
Vue
/**
|
||
* @file index.vue
|
||
* @description: 输血输注
|
||
* @author: w
|
||
* @since: 2026-06-15
|
||
*/
|
||
<template>
|
||
<div class="app-container">
|
||
<div class="form-card">
|
||
<el-button type="primary" plain>检索</el-button>
|
||
<el-button type="primary" plain>新增单据</el-button>
|
||
<el-button type="danger" plain>删除单据</el-button>
|
||
<el-button type="success" plain>保存</el-button>
|
||
<el-button type="warning" plain>打印护理记录</el-button>
|
||
</div>
|
||
|
||
<!-- 顶部搜索栏卡片 -->
|
||
<div class="search-card">
|
||
<el-form inline :model="searchForm">
|
||
<el-form-item label="发血单号:">
|
||
<el-input v-model="searchForm.fhNo" placeholder="" />
|
||
<el-button type="primary" @click="queryByFh" class="ml10">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item label="用住院号查找:">
|
||
<el-input v-model="searchForm.inNo" placeholder="" />
|
||
<el-button type="primary" @click="queryByIn" class="ml10">查找</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 上方表格卡片 -->
|
||
<div class="table-top-card">
|
||
<el-table :data="topTableData" border @selection-change="handleSelect" highlight-current-row height="150px">
|
||
<el-table-column type="index" width="50" label="序号" align="center" />
|
||
<el-table-column label="血液流水号" prop="bloodSn" align="center" />
|
||
<el-table-column label="产品码" prop="productCode" align="center" />
|
||
<el-table-column label="血液品种" prop="bloodName" align="center" />
|
||
<el-table-column label="ABO血型" prop="abo" align="center" />
|
||
<el-table-column label="RH血型" prop="rh" align="center" />
|
||
<el-table-column label="容量" prop="vol" align="center" />
|
||
<el-table-column label="单位" prop="unit" align="center" />
|
||
<el-table-column label="发血单号" prop="fhNo" align="center" />
|
||
<el-table-column label="特殊处理" prop="deal" align="center" />
|
||
</el-table>
|
||
</div>
|
||
<!-- 下方tab表单卡片 -->
|
||
<div class="form-card">
|
||
<el-tabs v-model="activeTab">
|
||
<el-tab-pane label="输血输注及护理登记" name="tab1">
|
||
<el-form :model="formData" label-width="auto" class="form-top-label">
|
||
<!-- 第一行 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="血液流水号：">
|
||
<el-input v-model="formData.bloodSn" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="发血日期：">
|
||
<el-date-picker v-model="formData.fhDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="科 室：">
|
||
<el-select v-model="formData.department" placeholder="">
|
||
<el-option label="科室1" value="科室1"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="血型：">
|
||
<el-input v-model="formData.aboBlood" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span='6'>
|
||
<el-form-item label="申请单号：">
|
||
<el-input v-model="formData.applyNo" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span='6'>
|
||
<el-form-item label="申请日期：">
|
||
<el-date-picker v-model="formData.applyDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span='6'>
|
||
<el-form-item label="发血品种：">
|
||
<el-input v-model="formData.bloodType" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span='6'>
|
||
<el-form-item label="Rh(D)：">
|
||
<el-input v-model="formData.rhD" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="20">
|
||
<el-col :span='6'>
|
||
<el-form-item label="患者姓名：">
|
||
<el-input v-model="formData.patientName" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span='6'>
|
||
<el-form-item label="住院号/ID号：">
|
||
<el-input v-model="formData.inId" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span='6'>
|
||
<el-form-item label="血量：">
|
||
<div class="two-input-wrap">
|
||
<el-input v-model="formData.vol1" style="width:65%" />
|
||
<el-input v-model="formData.vol2" style="width:35%" />
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
<div class="split-line">输血输注及护理信息</div>
|
||
<!-- 第四行 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<el-form-item label="登记日期：">
|
||
<el-date-picker v-model="formData.regDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="输血医师：">
|
||
<el-input v-model="formData.docName" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="责任护士：">
|
||
<el-select v-model="formData.nurse" placeholder="">
|
||
<el-option label="张三" value="张三"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="滴速：">
|
||
<el-input v-model="formData.speed">
|
||
<template #suffix> 滴/分 </template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 复选+右侧表单 -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<div class="form-row-check">
|
||
<el-checkbox v-model="formData.check1">患者信息是否核对</el-checkbox>
|
||
<el-checkbox v-model="formData.check2">交叉配血结果是否相符</el-checkbox>
|
||
<el-checkbox v-model="formData.check3">血液是否未过期</el-checkbox>
|
||
<el-checkbox v-model="formData.check4">血袋外观是否合格</el-checkbox>
|
||
<el-checkbox v-model="formData.check5">血液流水号是否相符</el-checkbox>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<el-form-item label="输血开始时间：">
|
||
<el-date-picker v-model="formData.startTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="输血结束时间：">
|
||
<el-date-picker v-model="formData.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8"></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="一刻钟观察时间：">
|
||
<el-date-picker v-model="formData.q1Time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="一刻钟观察护士：">
|
||
<el-select v-model="formData.q1Nurse" placeholder="">
|
||
<el-option label="张三" value="张三"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8"></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="一小时观察时间：">
|
||
<el-date-picker v-model="formData.qhTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="一小时观察护士：">
|
||
<el-select v-model="formData.qhNurse" placeholder="">
|
||
<el-option label="张三" value="张三"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8"></el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="输血后血袋处理：">
|
||
<el-input v-model="formData.bagDeal" style="width:100%" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="审阅者：" class="red-label">
|
||
<el-select v-model="formData.checkUser" placeholder="">
|
||
<el-option label="张三" value="张三"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8"></el-col>
|
||
<el-col :span="16">
|
||
<el-form-item label="输血情况记录：">
|
||
<el-input v-model="formData.record" />
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
</el-col>
|
||
|
||
</el-row>
|
||
</el-form>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="临床监护记录" name="tab2">
|
||
<div>临床监护录入区域</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
// 顶部搜索
|
||
const searchForm = ref({
|
||
fhNo: '',
|
||
inNo: ''
|
||
})
|
||
// 表格选中
|
||
const selectedRow = ref<any>(null)
|
||
const handleSelect = (row: any[]) => {
|
||
selectedRow.value = row[0] || null
|
||
}
|
||
// 上方表格数据
|
||
const topTableData = ref([
|
||
{ bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
|
||
{ bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
|
||
{ bloodSn: 'XS20260604001', productCode: 'P20260529001', bloodName: '悬浮红细胞', abo: 'A', rh: '阳性', vol: '2.0', unit: 'U', fhNo: 'FX2026060401', deal: '' },
|
||
])
|
||
// tab激活
|
||
const activeTab = ref('tab1')
|
||
// 表单数据
|
||
const formData = reactive({
|
||
bloodSn: '',
|
||
fhDate: '0000-00-00 00:00',
|
||
department: '',
|
||
aboBlood: '',
|
||
applyNo: '',
|
||
applyDate: '0000-00-00 00:00',
|
||
bloodType: '',
|
||
rhD: '',
|
||
patientName: '',
|
||
inId: '',
|
||
vol1: '',
|
||
vol2: '',
|
||
regDate: '2026-06-04 15:27',
|
||
docName: '',
|
||
nurse: '管理员',
|
||
speed: '',
|
||
check1: true,
|
||
check2: true,
|
||
check3: true,
|
||
check4: true,
|
||
check5: true,
|
||
startTime: '',
|
||
endTime: '',
|
||
q1Time: '',
|
||
q1Nurse: '管理员',
|
||
qhTime: '',
|
||
qhNurse: '管理员',
|
||
bagDeal: '置入双层黄色垃圾袋',
|
||
checkUser: '',
|
||
record: '无输血不良反应'
|
||
})
|
||
const queryByFh = () => { console.log('按发血单号查询', searchForm.value.fhNo) }
|
||
const queryByIn = () => { console.log('按住院号查找', searchForm.value.inNo) }
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.app-container {
|
||
padding: 14px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
overflow-y: auto;
|
||
|
||
// 搜索卡片
|
||
.search-card {
|
||
background: #fff;
|
||
padding: 12px;
|
||
border-radius: 4px;
|
||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
||
|
||
:deep(.el-form-item) {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
// 上部表格卡片
|
||
.table-top-card {
|
||
background: #fff;
|
||
padding: 16px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);
|
||
|
||
|
||
:deep(.el-table__header th) {
|
||
background: #f5f7fa;
|
||
}
|
||
}
|
||
|
||
:deep(.el-tabs__header) {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
// 下方表单卡片
|
||
.form-card {
|
||
background: #fff;
|
||
padding: 12px;
|
||
border-radius: 6px;
|
||
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);
|
||
|
||
|
||
.form-top-label {
|
||
:deep(.el-form-item) {
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
}
|
||
|
||
.split-line {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin: 8px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 14px;
|
||
background-color: #409eff;
|
||
margin-right: 8px;
|
||
border-radius: 0 4px 4px 0;
|
||
}
|
||
}
|
||
|
||
|
||
.form-row-check {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-left: 30px;
|
||
|
||
}
|
||
|
||
:deep(.red-label) {
|
||
.el-form-item__label {
|
||
color: #f53f3f;
|
||
font-weight: bold;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |