308 lines
8.3 KiB
Vue
308 lines
8.3 KiB
Vue
/**
|
||
* @file index.vue
|
||
* @description: 反应登记
|
||
* @author: w
|
||
* @since: 2026-06-03
|
||
*/
|
||
|
||
|
||
<template>
|
||
<div class="app-container">
|
||
<!-- 1.申请单信息卡片 -->
|
||
<div class="card-wrap">
|
||
<div class="card-title">申请单信息</div>
|
||
<div class="info-row three-col">
|
||
<div class="info-item">
|
||
<label>申请单号</label>
|
||
<span>1815026</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>姓 名</label>
|
||
<span>段立方</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>血 型</label>
|
||
<span>AB</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row three-col">
|
||
<div class="info-item">
|
||
<label>申请日期</label>
|
||
<span>2023-07-19</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>年 龄</label>
|
||
<span>36</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>Rh(D)</label>
|
||
<span>待查</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row three-col">
|
||
<div class="info-item">
|
||
<label>住院号/ID号</label>
|
||
<span>998076255</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>床位号</label>
|
||
<span>07</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>临床诊断</label>
|
||
<span>右肱骨粉碎...</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row three-col">
|
||
<div class="info-item">
|
||
<label>科 室</label>
|
||
<span>骨科</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<label>性 别</label>
|
||
<span>男</span>
|
||
</div>
|
||
<div class="info-item"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2.血液信息卡片 -->
|
||
<div class="card-wrap">
|
||
<div class="card-title">血液信息</div>
|
||
<div class="oper-bar">
|
||
<el-select v-model="addBloodVal" placeholder="增加血液" style="width:160px">
|
||
<el-option label="新增血袋" value="1" />
|
||
</el-select>
|
||
<el-input v-model="inputVal" placeholder="请输入" style="width:240px;margin:0 12px" />
|
||
<el-button type="primary" @click="searchBlood">确定</el-button>
|
||
</div>
|
||
<el-table :data="bloodTableData" border style="width:100%;margin-top:12px" height="120px">
|
||
<el-table-column label="血液流水号" prop="bloodNo" align="center" />
|
||
<el-table-column label="产品码" prop="productCode" align="center" />
|
||
<el-table-column label="血液品种" prop="bloodType" align="center" />
|
||
<el-table-column label="血型" prop="abo" align="center" />
|
||
<el-table-column label="Rh(D)" prop="rhd" align="center" />
|
||
<el-table-column label="容量" prop="volume" align="center" />
|
||
<el-table-column label="单位" prop="unit" align="center" />
|
||
<el-table-column label="有效日期" prop="validDate" align="center" />
|
||
</el-table>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<!--3.输血反应信息卡片-->
|
||
<div class="card-wrap">
|
||
<div class="card-title">输血反应信息</div>
|
||
<div class="form-row four-col">
|
||
<div class="form-item">
|
||
<div class="label">血液流水号：</div>
|
||
<el-input v-model="formData.bloodNo" placeholder="请输入" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">医师：</div>
|
||
<el-input v-model="formData.doctor" placeholder="请输入" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">产品码：</div>
|
||
<el-input v-model="formData.proCode" placeholder="请输入" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">实际输入量：</div>
|
||
<el-input v-model="formData.realNum" placeholder="请输入" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">受血方式：</div>
|
||
<el-input v-model="formData.receiveType" placeholder="请输入" />
|
||
</div>
|
||
</div>
|
||
<div class="form-row four-col">
|
||
<div class="form-item">
|
||
<div class="label">输血日期：</div>
|
||
<el-date-picker v-model="formData.transDate" type="datetime" placeholder="选择日期时间" style="width:100%" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">发生日期：</div>
|
||
<el-date-picker v-model="formData.occurDate" type="datetime" placeholder="选择日期时间" style="width:100%" />
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">输血反应：</div>
|
||
<el-select v-model="formData.react" placeholder="请选择" style="width:100%">
|
||
</el-select>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">临床处理：</div>
|
||
<el-select v-model="formData.clinicDeal" placeholder="请选择" style="width:100%">
|
||
</el-select>
|
||
</div>
|
||
<div class="form-item">
|
||
<div class="label">输血科处理：</div>
|
||
<el-select v-model="formData.bloodDeptDeal" placeholder="请选择" style="width:100%">
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-item full-item">
|
||
<div class="label">备注：</div>
|
||
<el-input v-model="formData.remark" type="textarea" :rows="3" placeholder="请输入" style="width: 50%" />
|
||
</div>
|
||
<div class="btn-bottom">
|
||
<el-button type="primary">确定</el-button>
|
||
<el-button>取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
//下拉框
|
||
const addBloodVal = ref('')
|
||
const inputVal = ref('')
|
||
//表格数据
|
||
const bloodTableData = ref([
|
||
{ bloodNo: '999922220001', productCode: '999922220001', bloodType: '洗涤红细胞', abo: 'O', rhd: '待查', volume: '2.00', unit: 'u', validDate: '2021-09-10 10：00' }
|
||
])
|
||
//表单数据
|
||
const formData = reactive({
|
||
bloodNo: '', doctor: '', proCode: '', realNum: '',
|
||
receiveType: '', transDate: '', occurDate: '', react: '',
|
||
clinicDeal: '', bloodDeptDeal: '', remark: ''
|
||
})
|
||
//查询血液信息
|
||
const searchBlood = () => {
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-container {
|
||
padding: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
overflow-y: auto;
|
||
|
||
.card-wrap {
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); //还原卡片阴影
|
||
padding: 12px;
|
||
|
||
&:hover {
|
||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12); // 悬停加深阴影
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 15px;
|
||
font-weight: 600;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
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;
|
||
}
|
||
}
|
||
|
||
//三列基础信息
|
||
.three-col {
|
||
display: flex;
|
||
gap: 24px;
|
||
margin-bottom: 10px;
|
||
|
||
.info-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
|
||
label {
|
||
width: 80px;
|
||
text-align: right;
|
||
color: #686f77;
|
||
white-space: nowrap;
|
||
font-weight: 500;
|
||
}
|
||
|
||
span {
|
||
font-weight: 700;
|
||
color: #284160;
|
||
padding-left: 30px;
|
||
}
|
||
}
|
||
}
|
||
|
||
//血液操作栏
|
||
.oper-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
//表单四列布局
|
||
.four-col {
|
||
display: flex;
|
||
gap: 18px;
|
||
|
||
.form-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
font-size: 14px;
|
||
|
||
.label {
|
||
color: #80868d;
|
||
font-weight: 700;
|
||
margin: 8px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
//两列布局
|
||
.two-col {
|
||
display: flex;
|
||
gap: 18px;
|
||
font-size: 14px;
|
||
|
||
.form-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.label {
|
||
color: #80868d;
|
||
font-weight: 700;
|
||
margin: 8px 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
//整行备注
|
||
.full-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-bottom: 22px;
|
||
font-size: 14px;
|
||
|
||
.label {
|
||
color: #80868d;
|
||
font-weight: 700;
|
||
margin: 8px 0;
|
||
}
|
||
}
|
||
|
||
//底部按钮居中
|
||
.btn-bottom {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 12px;
|
||
}
|
||
}
|
||
}
|
||
</style> |