2026-07-03 18:04:09 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* @file index.vue
|
|
|
|
|
|
* @description: 输血申请
|
|
|
|
|
|
* @author: w
|
|
|
|
|
|
* @since: 2026-06-30
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<template>
|
2026-06-17 17:49:37 +08:00
|
|
|
|
<div class="box-container">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 顶部工具栏 -->
|
|
|
|
|
|
<div class="toolbar">
|
|
|
|
|
|
<el-button type="primary" plain>新增</el-button>
|
|
|
|
|
|
<el-button type="danger" plain>删除</el-button>
|
|
|
|
|
|
<el-button type="success" plain>保存</el-button>
|
|
|
|
|
|
<el-button>电子病历</el-button>
|
|
|
|
|
|
<el-button>审核</el-button>
|
|
|
|
|
|
<el-button>取消审核</el-button>
|
|
|
|
|
|
<el-button>作废</el-button>
|
|
|
|
|
|
<el-button type="warning" plain>打印输血申请单</el-button>
|
|
|
|
|
|
<el-button>患者输血历史</el-button>
|
|
|
|
|
|
<el-button type="warning" plain>打印大量输血审批单</el-button>
|
|
|
|
|
|
<el-button type="warning" plain>打印输血知情同意书</el-button>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 主体区域 左2 : 右1 -->
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<div class="main-content">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 左侧区域 占2份 -->
|
|
|
|
|
|
<div class="left-wrap">
|
|
|
|
|
|
<!-- 包裹整个表单内容 -->
|
|
|
|
|
|
<el-form ref="formRef" :model="formData" label-width="auto" size="small" class="blood-transfusion-form">
|
|
|
|
|
|
<!-- 申请信息 -->
|
|
|
|
|
|
<div class="box-item">
|
|
|
|
|
|
<div class="box-title">申请信息</div>
|
|
|
|
|
|
<el-row>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="申请单号" prop="applyNo">
|
|
|
|
|
|
<el-input v-model="formData.applyNo" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="申请日期" prop="applyDate">
|
|
|
|
|
|
<el-date-picker v-model="formData.applyDate" type="datetime" style="width:100%" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
|
<el-form-item label="申请医师" prop="applyDoctor">
|
|
|
|
|
|
<el-input v-model="formData.applyDoctor" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
|
<el-form-item label="主治医师" prop="attendingDoctor">
|
|
|
|
|
|
<el-input v-model="formData.attendingDoctor" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="4">
|
|
|
|
|
|
<el-form-item label="上级医师" prop="superiorDoctor">
|
|
|
|
|
|
<el-input v-model="formData.superiorDoctor" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 患者信息 -->
|
|
|
|
|
|
<div class="box-item">
|
|
|
|
|
|
<div class="box-title">患者信息</div>
|
|
|
|
|
|
<el-row :gutter="10">
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="住院号/ID号" prop="hospitalNo">
|
|
|
|
|
|
<el-input v-model="formData.hospitalNo" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="姓名" prop="name">
|
|
|
|
|
|
<el-input v-model="formData.name" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
<el-col :span="6">
|
2026-07-03 18:04:09 +08:00
|
|
|
|
<el-form-item label="性别" prop="patient_sex">
|
|
|
|
|
|
<el-select v-model="formData.patient_sex" style="width:100%">
|
|
|
|
|
|
<el-option label="男" value="男" />
|
|
|
|
|
|
<el-option label="女" value="女" />
|
|
|
|
|
|
<el-option label="未知" value="未知" />
|
|
|
|
|
|
</el-select>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="血型" prop="bloodType">
|
|
|
|
|
|
<el-input v-model="formData.bloodType" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="年龄" prop="age">
|
|
|
|
|
|
<el-input v-model="formData.age" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="科室" prop="dept">
|
|
|
|
|
|
<el-input v-model="formData.dept" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="病区" prop="ward">
|
|
|
|
|
|
<el-input v-model="formData.ward" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="Rh(D)" prop="rhd">
|
|
|
|
|
|
<el-input v-model="formData.rhd" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="床位号" prop="bedNo">
|
|
|
|
|
|
<el-input v-model="formData.bedNo" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="科室类型" prop="deptType">
|
|
|
|
|
|
<el-input v-model="formData.deptType" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="单病种" prop="singleDisease">
|
|
|
|
|
|
<el-input v-model="formData.singleDisease" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="临床诊断" prop="diagnosis">
|
|
|
|
|
|
<el-input v-model="formData.diagnosis" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="输血目的" prop="transPurpose">
|
|
|
|
|
|
<el-select v-model="formData.transPurpose" style="width:100%">
|
|
|
|
|
|
<el-option label="选项1" value="1" />
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="输血指征" prop="transIndication">
|
|
|
|
|
|
<el-select v-model="formData.transIndication" style="width:100%">
|
|
|
|
|
|
<el-option label="选项1" value="1" />
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="手术名称" prop="operationName">
|
|
|
|
|
|
<el-input v-model="formData.operationName" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="手术级别" prop="operationLevel">
|
|
|
|
|
|
<el-input v-model="formData.operationLevel" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="" prop="signedConsent">
|
|
|
|
|
|
<el-checkbox v-model="formData.signedConsent">病人/病人家属是否签署输血同意书</el-checkbox>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="输血史" prop="hasTransfusionHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.hasTransfusionHistory">
|
|
|
|
|
|
<el-radio :value="1">有</el-radio>
|
|
|
|
|
|
<el-radio :value="0">无</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="反应史" prop="hasReactionHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.hasReactionHistory">
|
|
|
|
|
|
<el-radio :value="1">有</el-radio>
|
|
|
|
|
|
<el-radio :value="0">无</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="移植配型史" prop="hasTransplantHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.hasTransplantHistory">
|
|
|
|
|
|
<el-radio :value="1">有</el-radio>
|
|
|
|
|
|
<el-radio :value="0">无</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="妊娠史" prop="hasPregnancyHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.hasPregnancyHistory">
|
|
|
|
|
|
<el-radio :value="1">有</el-radio>
|
|
|
|
|
|
<el-radio :value="0">无</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="8">
|
|
|
|
|
|
<el-form-item label="分娩史" prop="hasDeliveryHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.hasDeliveryHistory">
|
|
|
|
|
|
<el-radio :value="1">有</el-radio>
|
|
|
|
|
|
<el-radio :value="0">无</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
|
<el-form-item label="申请类型" prop="hasDeliveryHistory">
|
|
|
|
|
|
<el-radio-group v-model="formData.applyType">
|
|
|
|
|
|
<el-radio :value="1">常规用血</el-radio>
|
|
|
|
|
|
<el-radio :value="2">手术备血</el-radio>
|
|
|
|
|
|
<el-radio :value="3">紧急</el-radio>
|
|
|
|
|
|
<el-radio :value="4">大量</el-radio>
|
|
|
|
|
|
<el-radio :value="5">紧急非同型</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="单据类型" prop="type">
|
|
|
|
|
|
<el-select v-model="formData.type">
|
|
|
|
|
|
<el-option label="选项1" value="1" />
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="预定输血日期" prop="preTransfusionDate">
|
|
|
|
|
|
<el-date-picker v-model="formData.preTransfusionDate" type="date" placeholder="选择日期" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 检查结果（添加单位后缀） -->
|
|
|
|
|
|
<div class="box-item">
|
|
|
|
|
|
<div class="box-title">患者最近检查结果</div>
|
|
|
|
|
|
<el-row :gutter="10">
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="HGB" prop="hgb">
|
|
|
|
|
|
<el-input v-model="formData.hgb">
|
|
|
|
|
|
<template #suffix>g/L</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="HCT" prop="hct">
|
|
|
|
|
|
<el-input v-model="formData.hct">
|
|
|
|
|
|
<template #suffix>%</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="PLT" prop="plt">
|
|
|
|
|
|
<el-input v-model="formData.plt">
|
|
|
|
|
|
<template #suffix>×10^9/L</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="ALT" prop="alt">
|
|
|
|
|
|
<el-input v-model="formData.alt">
|
|
|
|
|
|
<template #suffix>U/L</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="HBsAg" prop="hbsag">
|
|
|
|
|
|
<el-input v-model="formData.hbsag">
|
|
|
|
|
|
<template #suffix>ng/ml</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="TP" prop="tp">
|
|
|
|
|
|
<el-input v-model="formData.tp">
|
|
|
|
|
|
<template #suffix>g/L</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="Anti-HCV" prop="antiHcv">
|
|
|
|
|
|
<el-input v-model="formData.antiHcv">
|
|
|
|
|
|
<template #suffix>S/CO</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="Anti-HIV" prop="antiHiv">
|
|
|
|
|
|
<el-input v-model="formData.antiHiv">
|
|
|
|
|
|
<template #suffix>S/CO</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="PT" prop="pt">
|
|
|
|
|
|
<el-input v-model="formData.pt">
|
|
|
|
|
|
<template #suffix>秒</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="APTT" prop="aptt">
|
|
|
|
|
|
<el-input v-model="formData.aptt">
|
|
|
|
|
|
<template #suffix>秒</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="FIB" prop="fib">
|
|
|
|
|
|
<el-input v-model="formData.fib">
|
|
|
|
|
|
<template #suffix>g/L</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="6">
|
|
|
|
|
|
<el-form-item label="INR" prop="inr">
|
|
|
|
|
|
<el-input v-model="formData.inr">
|
|
|
|
|
|
<template #suffix>（无单位）</template>
|
|
|
|
|
|
</el-input>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 血液品种 -->
|
|
|
|
|
|
<div class="box-item">
|
|
|
|
|
|
<div class="box-title">
|
|
|
|
|
|
<span>血液品种</span>
|
|
|
|
|
|
<div class="title-btn">
|
|
|
|
|
|
<el-button type="primary" @click="openBloodDialog">增加</el-button>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-table :data="bloodList" border height="120">
|
|
|
|
|
|
<el-table-column prop="bloodType" label="血液品种" align="center" />
|
|
|
|
|
|
<el-table-column prop="volume" label="申请血量" align="center" />
|
|
|
|
|
|
<el-table-column prop="unit" label="单位" align="center" />
|
|
|
|
|
|
<el-table-column prop="perVolume" label="每次血量" align="center" />
|
|
|
|
|
|
<el-table-column prop="applyBloodType" label="申请血型" align="center" />
|
|
|
|
|
|
<el-table-column prop="transPurpose" label="输血目的" align="center" />
|
|
|
|
|
|
<el-table-column prop="transIndication" label="输血指征" align="center" />
|
|
|
|
|
|
<el-table-column label="操作" align="center" width="120">
|
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
|
<el-button link type="primary" @click="editBlood(scope.row, scope.$index)">编辑</el-button>
|
|
|
|
|
|
<el-button link type="primary" @click="deleteSingleBlood(scope.$index)">删除</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-table-column>
|
|
|
|
|
|
</el-table>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
</el-form>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<!-- 右侧列表 占1份 -->
|
|
|
|
|
|
<div class="right-wrap">
|
|
|
|
|
|
<div class="box-title">申请单列表</div>
|
|
|
|
|
|
<div class="filter-bar">
|
|
|
|
|
|
<el-radio-group v-model="listScope" size="small">
|
|
|
|
|
|
<el-radio :value="0">当前病人</el-radio>
|
|
|
|
|
|
<el-radio :value="1">病人列表</el-radio>
|
|
|
|
|
|
<el-radio :value="2">当前医生</el-radio>
|
|
|
|
|
|
</el-radio-group>
|
|
|
|
|
|
<div class="date-filter">
|
|
|
|
|
|
<span>单据状态：</span>
|
|
|
|
|
|
<el-select v-model="filterStatus" style="width:110px" size="small">
|
|
|
|
|
|
<el-option label="全部" value="" />
|
|
|
|
|
|
</el-select>
|
|
|
|
|
|
<el-input-number v-model="filterDays" :min="1" :max="30" style="width:80px" class="ml10" size="small" />天内
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-table :data="orderList" border style="width:100%" height="calc(100vh - 260px)">
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<el-table-column prop="name" label="血液品种" align="center" width="150" />
|
|
|
|
|
|
<el-table-column prop="applyBloodVolume" label="申请血量" align="center" />
|
|
|
|
|
|
<el-table-column prop="unit" label="单位" align="center" />
|
|
|
|
|
|
<el-table-column prop="perBloodVolume" label="每次血量" align="center" />
|
|
|
|
|
|
<el-table-column prop="applyBloodType" label="申请血型" align="center" />
|
|
|
|
|
|
<el-table-column prop="transPurpose" label="输血目的" align="center" width="150" />
|
|
|
|
|
|
<el-table-column prop="indication" label="输血指征" align="center" width="150" />
|
|
|
|
|
|
<el-table-column prop="specialTreatment" label="特殊处理" align="center" width="150" />
|
|
|
|
|
|
<el-table-column prop="alternativeBloodType" label="替代血液品种" align="center" width="150" />
|
|
|
|
|
|
<el-table-column prop="remark" label="备注" align="center" />
|
|
|
|
|
|
</el-table>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
|
|
|
|
|
|
<!-- 血液品种编辑弹窗 -->
|
|
|
|
|
|
<el-dialog v-model="bloodDialogVisible" title="血液品种信息" width="600px" @close="resetBloodForm">
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<el-form ref="bloodFormRef" :model="bloodForm" label-width="100px" :rules="bloodFormRules">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-row :gutter="10">
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<el-col :span="12">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-form-item label="血液品种" prop="bloodType">
|
|
|
|
|
|
<el-input v-model="bloodForm.bloodType" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-form-item label="申请血量" prop="volume">
|
|
|
|
|
|
<el-input v-model="bloodForm.volume" type="number" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="单位" prop="unit">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-input v-model="bloodForm.unit" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-form-item label="每次血量" prop="perVolume">
|
|
|
|
|
|
<el-input v-model="bloodForm.perVolume" type="number" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="申请血型" prop="applyBloodType">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-input v-model="bloodForm.applyBloodType" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="输血目的" prop="transPurpose">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-input v-model="bloodForm.transPurpose" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-form-item label="输血指征" prop="transIndication">
|
|
|
|
|
|
<el-input v-model="bloodForm.transIndication" />
|
2026-06-09 18:00:10 +08:00
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="特殊处理" prop="specialTreatment">
|
|
|
|
|
|
<el-input v-model="bloodForm.specialTreatment" placeholder="请输入特殊处理" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
<el-col :span="12">
|
|
|
|
|
|
<el-form-item label="替代血液品种" prop="alternativeBloodType">
|
|
|
|
|
|
<el-input v-model="bloodForm.alternativeBloodType" placeholder="请输入替代血液品种" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-col :span="24">
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<el-form-item label="备注" prop="remark">
|
|
|
|
|
|
<el-input v-model="bloodForm.remark" placeholder="请输入备注" type="textarea" />
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-col>
|
|
|
|
|
|
</el-row>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
<template #footer>
|
2026-06-12 18:01:21 +08:00
|
|
|
|
<el-button type="primary" @click="saveBloodForm">确定</el-button>
|
2026-06-09 18:00:10 +08:00
|
|
|
|
<el-button @click="bloodDialogVisible = false">取消</el-button>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
2026-06-12 18:01:21 +08:00
|
|
|
|
import type { ElForm, ElTable } from 'element-plus'
|
|
|
|
|
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 定义表单Ref
|
|
|
|
|
|
const formRef = ref<InstanceType<typeof ElForm>>()
|
2026-06-09 18:00:10 +08:00
|
|
|
|
const bloodFormRef = ref<InstanceType<typeof ElForm>>()
|
|
|
|
|
|
|
|
|
|
|
|
const formData = reactive({
|
2026-06-12 18:01:21 +08:00
|
|
|
|
applyNo: '',
|
|
|
|
|
|
applyDate: new Date(),
|
|
|
|
|
|
applyDoctor: '管理员',
|
|
|
|
|
|
attendingDoctor: '',
|
|
|
|
|
|
superiorDoctor: '',
|
|
|
|
|
|
hospitalNo: '',
|
|
|
|
|
|
name: '',
|
|
|
|
|
|
bloodType: '',
|
2026-07-03 18:04:09 +08:00
|
|
|
|
patient_sex: '',
|
2026-06-12 18:01:21 +08:00
|
|
|
|
age: '',
|
|
|
|
|
|
rhd: '',
|
|
|
|
|
|
dept: '',
|
|
|
|
|
|
ward: '',
|
|
|
|
|
|
bedNo: '',
|
2026-06-09 18:00:10 +08:00
|
|
|
|
deptType: '',
|
2026-06-12 18:01:21 +08:00
|
|
|
|
singleDisease: '',
|
2026-06-09 18:00:10 +08:00
|
|
|
|
diagnosis: '',
|
|
|
|
|
|
transPurpose: '',
|
2026-06-12 18:01:21 +08:00
|
|
|
|
transIndication: '',
|
|
|
|
|
|
hasTransfusionHistory: '0',
|
|
|
|
|
|
hasReactionHistory: '0',
|
|
|
|
|
|
hasTransplantHistory: '0',
|
|
|
|
|
|
hasPregnancyHistory: '0',
|
|
|
|
|
|
hasDeliveryHistory: '0',
|
|
|
|
|
|
operationName: '',
|
|
|
|
|
|
operationLevel: '',
|
|
|
|
|
|
signedConsent: true,
|
|
|
|
|
|
hgb: '',
|
|
|
|
|
|
hct: '',
|
|
|
|
|
|
plt: '',
|
|
|
|
|
|
alt: '',
|
|
|
|
|
|
hbsag: '',
|
|
|
|
|
|
tp: '',
|
|
|
|
|
|
antiHcv: '',
|
|
|
|
|
|
antiHiv: '',
|
|
|
|
|
|
pt: '',
|
|
|
|
|
|
aptt: '',
|
|
|
|
|
|
fib: '',
|
|
|
|
|
|
inr: ''
|
2026-06-09 18:00:10 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 血液品种列表
|
|
|
|
|
|
const bloodList = ref([
|
|
|
|
|
|
{ bloodType: '', volume: 'test1', unit: '', perVolume: '', applyBloodType: '', transPurpose: '', transIndication: '' }
|
|
|
|
|
|
])
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
const orderList = ref([
|
|
|
|
|
|
{ status: '', name: 'test1', hospitalNo: '', applyNo: '', dept: '', bloodType: '', rhd: '', bloodTypeDetail: '', quantity: '', unit: '', applyDate: '', applyDoctor: '' }
|
2026-06-09 18:00:10 +08:00
|
|
|
|
])
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
const useBarcode = ref(false)
|
|
|
|
|
|
const listScope = ref(0)
|
|
|
|
|
|
const filterStatus = ref('')
|
|
|
|
|
|
const filterDays = ref(3)
|
|
|
|
|
|
|
|
|
|
|
|
// 血液品种弹窗相关
|
|
|
|
|
|
const bloodDialogVisible = ref(false)
|
|
|
|
|
|
const editIndex = ref(-1)
|
2026-06-09 18:00:10 +08:00
|
|
|
|
const bloodForm = reactive({
|
2026-06-12 18:01:21 +08:00
|
|
|
|
bloodType: '',
|
|
|
|
|
|
volume: '',
|
2026-06-09 18:00:10 +08:00
|
|
|
|
unit: '',
|
2026-06-12 18:01:21 +08:00
|
|
|
|
perVolume: '',
|
2026-06-09 18:00:10 +08:00
|
|
|
|
applyBloodType: '',
|
|
|
|
|
|
transPurpose: '',
|
2026-06-12 18:01:21 +08:00
|
|
|
|
transIndication: ''
|
2026-06-09 18:00:10 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 血液品种表单验证规则
|
|
|
|
|
|
const bloodFormRules = reactive({
|
|
|
|
|
|
bloodType: [{ required: true, message: '请输入血液品种', trigger: 'blur' }],
|
|
|
|
|
|
volume: [{ required: true, message: '请输入申请血量', trigger: 'blur', type: 'number' }],
|
|
|
|
|
|
unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
|
|
|
|
|
|
applyBloodType: [{ required: true, message: '请输入申请血型', trigger: 'blur' }]
|
2026-06-09 18:00:10 +08:00
|
|
|
|
})
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 打开新增弹窗
|
|
|
|
|
|
const openBloodDialog = () => {
|
|
|
|
|
|
editIndex.value = -1
|
2026-06-09 18:00:10 +08:00
|
|
|
|
resetBloodForm()
|
|
|
|
|
|
bloodDialogVisible.value = true
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 重置弹窗表单
|
|
|
|
|
|
const resetBloodForm = () => {
|
|
|
|
|
|
if (bloodFormRef.value) {
|
|
|
|
|
|
bloodFormRef.value.clearValidate()
|
|
|
|
|
|
}
|
|
|
|
|
|
Object.assign(bloodForm, {
|
|
|
|
|
|
bloodType: '',
|
|
|
|
|
|
volume: '',
|
|
|
|
|
|
unit: '',
|
|
|
|
|
|
perVolume: '',
|
|
|
|
|
|
applyBloodType: '',
|
|
|
|
|
|
transPurpose: '',
|
|
|
|
|
|
transIndication: ''
|
|
|
|
|
|
})
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 编辑血液品种
|
|
|
|
|
|
const editBlood = (row: any, index: number) => {
|
|
|
|
|
|
editIndex.value = index
|
|
|
|
|
|
// 深拷贝行数据到表单
|
|
|
|
|
|
Object.assign(bloodForm, row)
|
|
|
|
|
|
bloodDialogVisible.value = true
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 保存血液品种表单
|
|
|
|
|
|
const saveBloodForm = async () => {
|
2026-06-09 18:00:10 +08:00
|
|
|
|
if (!bloodFormRef.value) return
|
2026-06-12 18:01:21 +08:00
|
|
|
|
try {
|
|
|
|
|
|
// 表单验证
|
|
|
|
|
|
await bloodFormRef.value.validate()
|
|
|
|
|
|
if (editIndex.value === -1) {
|
|
|
|
|
|
// 新增
|
|
|
|
|
|
} else {
|
|
|
|
|
|
// 编辑
|
|
|
|
|
|
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
2026-06-12 18:01:21 +08:00
|
|
|
|
bloodDialogVisible.value = false
|
|
|
|
|
|
ElMessage.success(editIndex.value === -1 ? '新增成功' : '编辑成功')
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
|
console.error('表单验证失败:', error)
|
|
|
|
|
|
ElMessage.error('请完善必填信息')
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 删除单条血液品种
|
|
|
|
|
|
const deleteSingleBlood = (index: number) => {
|
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
|
'确定要删除这条血液品种信息吗？',
|
|
|
|
|
|
'提示',
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'warning',
|
|
|
|
|
|
size: 'small'
|
|
|
|
|
|
}
|
|
|
|
|
|
).then(() => {
|
|
|
|
|
|
bloodList.value.splice(index, 1)
|
|
|
|
|
|
ElMessage.success('删除成功')
|
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
ElMessage.info('已取消删除')
|
2026-06-09 18:00:10 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 批量删除（原删除按钮，保留）
|
|
|
|
|
|
const deleteBlood = () => {
|
|
|
|
|
|
if (bloodList.value.length === 0) {
|
|
|
|
|
|
ElMessage.warning('暂无可删除的血液品种信息')
|
|
|
|
|
|
return
|
|
|
|
|
|
}
|
|
|
|
|
|
ElMessageBox.confirm(
|
|
|
|
|
|
'确定要删除最后一条血液品种信息吗？',
|
|
|
|
|
|
'提示',
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'warning',
|
|
|
|
|
|
size: 'small'
|
|
|
|
|
|
}
|
|
|
|
|
|
).then(() => {
|
|
|
|
|
|
bloodList.value.pop()
|
|
|
|
|
|
ElMessage.success('删除成功')
|
|
|
|
|
|
}).catch(() => {
|
|
|
|
|
|
ElMessage.info('已取消删除')
|
2026-06-09 18:00:10 +08:00
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
// 可选：添加表单验证和提交方法
|
|
|
|
|
|
const validateForm = async () => {
|
|
|
|
|
|
if (!formRef.value) return false
|
|
|
|
|
|
try {
|
|
|
|
|
|
const valid = await formRef.value.validate()
|
|
|
|
|
|
return valid
|
|
|
|
|
|
} catch (err) {
|
|
|
|
|
|
console.error('表单验证失败:', err)
|
|
|
|
|
|
return false
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const submitForm = async () => {
|
|
|
|
|
|
const isValid = await validateForm()
|
|
|
|
|
|
if (isValid) {
|
|
|
|
|
|
// 表单验证通过，执行提交逻辑
|
|
|
|
|
|
console.log('表单提交数据:', formData)
|
|
|
|
|
|
// 这里可以添加接口请求等逻辑
|
|
|
|
|
|
}
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
2026-06-17 17:49:37 +08:00
|
|
|
|
.box-container {
|
2026-06-09 18:00:10 +08:00
|
|
|
|
display: flex;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
flex-direction: column;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
box-sizing: border-box;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
overflow-y: auto;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
.toolbar {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
gap: 6px;
|
|
|
|
|
|
padding: 8px;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
background: #fff;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
2026-06-09 18:00:10 +08:00
|
|
|
|
border-radius: 4px;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
margin-bottom: 8px;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
.main-content {
|
|
|
|
|
|
flex: 1;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
display: flex;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
gap: 10px;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
padding-left: 12px;
|
|
|
|
|
|
padding-bottom: 6px;
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
/* 左侧蓝色小竖线 */
|
2026-06-09 18:00:10 +08:00
|
|
|
|
&::before {
|
|
|
|
|
|
content: '';
|
2026-06-12 18:01:21 +08:00
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
top: 2px;
|
|
|
|
|
|
bottom: 2px;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
width: 4px;
|
|
|
|
|
|
height: 14px;
|
|
|
|
|
|
background-color: #409eff;
|
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
|
border-radius: 0 4px 4px 0;
|
|
|
|
|
|
}
|
2026-06-12 18:01:21 +08:00
|
|
|
|
|
|
|
|
|
|
.title-btn {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
gap: 6px;
|
|
|
|
|
|
}
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
/* 左侧 2份 */
|
|
|
|
|
|
.left-wrap {
|
2026-06-09 18:00:10 +08:00
|
|
|
|
flex: 1;
|
2026-06-12 18:01:21 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
gap: 6px;
|
|
|
|
|
|
overflow-y: auto;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
.blood-transfusion-form {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
}
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
.box-item {
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
margin-bottom: 10px;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
:deep(.el-form-item) {
|
|
|
|
|
|
margin-bottom: 6px !important;
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
/* 右侧 1份 */
|
|
|
|
|
|
.right-wrap {
|
|
|
|
|
|
width: 35%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
.filter-bar {
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
// display: flex;
|
|
|
|
|
|
// align-items: center;
|
|
|
|
|
|
gap: 10px;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
}
|
2026-06-09 18:00:10 +08:00
|
|
|
|
|
2026-06-12 18:01:21 +08:00
|
|
|
|
.date-filter {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
color: #333;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
2026-06-09 18:00:10 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
