358 lines
12 KiB
Vue
358 lines
12 KiB
Vue
|
/**
|
|||
|
|
* @file index.vue
|
|||
|
|
* @description: 输血输注
|
|||
|
|
* @author: w
|
|||
|
|
* @since: 2026-06-04
|
|||
|
|
*/
|
|||
|
|
<template>
|
|||
|
|
<div class="app-container">
|
|||
|
|
<!-- 顶部搜索栏卡片 -->
|
|||
|
|
<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="130px">
|
|||
|
|
<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" label-position="top">
|
|||
|
|
<!-- 第一行 -->
|
|||
|
|
<div class="form-row four-col">
|
|||
|
|
<el-form-item label="血液流水号：">
|
|||
|
|
<el-input v-model="formData.bloodSn" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<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-form-item label="科 室：">
|
|||
|
|
<el-select v-model="formData.department" placeholder="">
|
|||
|
|
<el-option label="科室1" value="科室1"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="血型：">
|
|||
|
|
<el-input v-model="formData.aboBlood" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="申请单号：">
|
|||
|
|
<el-input v-model="formData.applyNo" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
<!-- 第二行 -->
|
|||
|
|
<div class="form-row four-col">
|
|||
|
|
<el-form-item label="发血品种：">
|
|||
|
|
<el-input v-model="formData.bloodType" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="患者姓名：">
|
|||
|
|
<el-input v-model="formData.patientName" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="住院号/ID号：">
|
|||
|
|
<el-input v-model="formData.inId" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="Rh(D)：">
|
|||
|
|
<el-input v-model="formData.rhD" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="血量：">
|
|||
|
|
<div class="two-input-wrap">
|
|||
|
|
<el-input v-model="formData.vol1" style="flex:1" />
|
|||
|
|
<el-input v-model="formData.vol2" style="flex:1" />
|
|||
|
|
</div>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="split-line">输血输注及护理信息</div>
|
|||
|
|
<!-- 第四行 -->
|
|||
|
|
<div class="form-row four-col">
|
|||
|
|
<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-form-item label="输血医师：">
|
|||
|
|
<el-input v-model="formData.docName" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="责任护士：">
|
|||
|
|
<el-select v-model="formData.nurse" placeholder="">
|
|||
|
|
<el-option label="张三" value="张三"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="滴速：">
|
|||
|
|
<el-input v-model="formData.speed">
|
|||
|
|
<template #suffix> 滴/分 </template>
|
|||
|
|
</el-input>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
<!-- 复选+右侧表单 -->
|
|||
|
|
<div class="form-row-check">
|
|||
|
|
<div class="check-col">
|
|||
|
|
<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>
|
|||
|
|
<div class="field-col">
|
|||
|
|
<div class="form-row four-col">
|
|||
|
|
<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-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-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-form-item label="一刻钟观察护士：">
|
|||
|
|
<el-select v-model="formData.q1Nurse" placeholder="">
|
|||
|
|
<el-option label="张三" value="张三"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-row four-col">
|
|||
|
|
<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-form-item label="一小时观察护士：">
|
|||
|
|
<el-select v-model="formData.qhNurse" placeholder="">
|
|||
|
|
<el-option label="张三" value="张三"></el-option>
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="输血后血袋处理：">
|
|||
|
|
<el-input v-model="formData.bagDeal" style="width:100%" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="form-row">
|
|||
|
|
<el-form-item label="输血情况记录：">
|
|||
|
|
<el-input v-model="formData.record" style="width:500px" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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: 16px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
// 搜索卡片
|
|||
|
|
.search-card {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 16px 20px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);
|
|||
|
|
|
|||
|
|
: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);
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-table__header th) {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-tabs__header) {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 下方表单卡片
|
|||
|
|
.form-card {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 12px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 1px 12px rgba(0, 0, 0, 0.065);
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-top-label {
|
|||
|
|
|
|||
|
|
:deep(.el-form-item__label) {
|
|||
|
|
padding: 0 0 5px 0;
|
|||
|
|
margin: 8px 0 0 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.el-form-item) {
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.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 {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
|
|||
|
|
&.four-col {
|
|||
|
|
>.el-form-item {
|
|||
|
|
width: 250px;
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.two-input-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row-check {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
|
|||
|
|
.check-col {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
width: 238px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.field-col {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.red-label) {
|
|||
|
|
.el-form-item__label {
|
|||
|
|
color: #f53f3f;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|