430 lines
18 KiB
Vue
430 lines
18 KiB
Vue
|
/**
|
||
|
|
* @file index.vue
|
||
|
|
* @description: 交叉配血
|
||
|
|
* @author: w
|
||
|
|
* @since: 2026-06-18
|
||
|
|
*/
|
||
|
|
<template>
|
||
|
|
<div class="box-container">
|
||
|
|
<!-- 顶部操作按钮栏 -->
|
||
|
|
<div class="card-box">
|
||
|
|
<el-button type="primary" plain @click="openJsHandle">检索</el-button>
|
||
|
|
<el-button type="primary" plain>新增单据</el-button>
|
||
|
|
<el-button type="danger" plain>删除单据</el-button>
|
||
|
|
<el-button type="danger" plain>作废整单</el-button>
|
||
|
|
<el-button type="primary" plain>血液库存</el-button>
|
||
|
|
<el-button type="primary" plain>检验结果</el-button>
|
||
|
|
<el-button type="success" plain>保存</el-button>
|
||
|
|
<el-button type="warning" plain>打印</el-button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 主体左右分栏容器 -->
|
||
|
|
<div class="main-wrap">
|
||
|
|
<!-- 左侧主表单区域 -->
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="15">
|
||
|
|
<!-- 申请单信息卡片 -->
|
||
|
|
<div class="card-box">
|
||
|
|
<div class="section-title">申请单信息</div>
|
||
|
|
<el-form :model="formData" label-width="auto">
|
||
|
|
<!-- 使用el-row实现一行四个表单项 -->
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="申请单号">
|
||
|
|
<DropdownTableSelect v-model="formData.applyBillNo" :column-list="applyColumns"
|
||
|
|
labelField="applyBillNo" :table-data="applyTableData" @open="loadApplyData"
|
||
|
|
@search="handleSearch" />
|
||
|
|
</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" placeholder="0000-00-00 00:00" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="姓 名">
|
||
|
|
<el-input v-model="formData.patientName" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="血型">
|
||
|
|
<el-input v-model="formData.bloodType" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="性 别">
|
||
|
|
<el-select v-model="formData.gender" placeholder="请选择">
|
||
|
|
<el-option label="男" value="男"></el-option>
|
||
|
|
<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.age" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="住院号/ID号">
|
||
|
|
<el-input v-model="formData.hospitalId" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="Rh(D)">
|
||
|
|
<el-input v-model="formData.rhD" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="病 区">
|
||
|
|
<el-input v-model="formData.ward" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="科 室">
|
||
|
|
<el-input v-model="formData.department" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="6">
|
||
|
|
<el-form-item label="床位号">
|
||
|
|
<el-input v-model="formData.bedNo" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="临床诊断">
|
||
|
|
<el-input v-model="formData.diagnosis" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="12">
|
||
|
|
<el-form-item label="输血目的">
|
||
|
|
<el-input v-model="formData.transPurpose" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="5">
|
||
|
|
<el-form-item label="申请血型">
|
||
|
|
<el-input v-model="formData.applyBloodType" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="5">
|
||
|
|
<el-form-item label="ABO复核">
|
||
|
|
<el-input v-model="formData.aboCheck" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="4">
|
||
|
|
<el-form-item label="亚型">
|
||
|
|
<el-input v-model="formData.subType" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="5">
|
||
|
|
<el-form-item label="Rh(D)复核">
|
||
|
|
<el-input v-model="formData.rhDCheck" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="5">
|
||
|
|
<el-form-item label="抗体筛选">
|
||
|
|
<el-input v-model="formData.antibodyScreen" placeholder="" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="15">
|
||
|
|
<el-form-item label=" ">
|
||
|
|
<div class="checkbox-group">
|
||
|
|
<el-checkbox v-model="formData.transReactionHis">输血反应史</el-checkbox>
|
||
|
|
<el-checkbox v-model="formData.transHistory">输血史</el-checkbox>
|
||
|
|
<el-checkbox v-model="formData.deliverHistory">分娩史</el-checkbox>
|
||
|
|
<el-checkbox v-model="formData.pregnancyHistory">妊娠史</el-checkbox>
|
||
|
|
<el-checkbox v-model="formData.matchHistory">配型史</el-checkbox>
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-form-item label="预定输血日期">
|
||
|
|
<el-date-picker v-model="formData.preTransDate" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="0000-00-00 00:00" style="width: 100%;" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<!-- 血液申请表格 - 固定高度确保一屏展示 -->
|
||
|
|
<el-table :data="bloodApplyTable" border height="160">
|
||
|
|
<el-table-column label="血液品种" prop="bloodKind" align="center" />
|
||
|
|
<el-table-column label="申请血量" prop="applyNum" align="center" />
|
||
|
|
<el-table-column label="单位" prop="unit" align="center" />
|
||
|
|
<el-table-column label="申请血型" prop="applyBlood" align="center" />
|
||
|
|
<el-table-column label="替代血液品种" prop="replaceBlood" align="center" />
|
||
|
|
<el-table-column label="输血目的" prop="transGoal" align="center" />
|
||
|
|
<el-table-column label="输血指征" prop="transIndex" align="center" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 配血记录卡片 - 固定高度确保一屏展示 -->
|
||
|
|
<div class="card-box" style="margin-bottom: 0px;">
|
||
|
|
<div class="section-title">配血记录</div>
|
||
|
|
<div class="mb10">
|
||
|
|
<el-select v-model="matchSelect" placeholder="请选择" style="width: 150px">
|
||
|
|
<el-option label="增加配血血液" value="add" />
|
||
|
|
<el-option label="取消配血血液" value="cancel" />
|
||
|
|
</el-select>
|
||
|
|
<el-input v-model="searchText" placeholder="" style="width: 250px;margin-left: 20px;" />
|
||
|
|
</div>
|
||
|
|
<el-table :data="matchTable" border height="200" stripe>
|
||
|
|
<el-table-column label="序号" prop="index" align="center" width="60" />
|
||
|
|
<el-table-column label="复核者" prop="checkUser" align="center" />
|
||
|
|
<el-table-column label="血液流水号" prop="bloodSerial" align="center" width="120" />
|
||
|
|
<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="rh" align="center" />
|
||
|
|
<el-table-column label="容量" prop="capacity" align="center" />
|
||
|
|
<el-table-column label="供者血型复核" prop="donorAbo" align="center" width="120" />
|
||
|
|
<el-table-column label="供者Rh(D)复核" prop="donorRh" align="center" width="120" />
|
||
|
|
<el-table-column label="配血方法" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="复核配血方法" prop="donorRh" align="center" width="120" />
|
||
|
|
<el-table-column label="主侧" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="次侧" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="结果" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="配血日期" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="配血者" prop="donorRh" align="center" />
|
||
|
|
<el-table-column label="血液存放位子" prop="donorRh" align="center" width="120" />
|
||
|
|
<el-table-column label="标本存放位子" prop="donorRh" align="center" width="120" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
|
||
|
|
<!-- 右侧筛选+结果表格区域 -->
|
||
|
|
<el-col :span="9">
|
||
|
|
<div class="card-box" style="margin-bottom: 0px;">
|
||
|
|
<el-form :model="filterForm" inline>
|
||
|
|
<div>
|
||
|
|
<el-form-item label="姓名：">
|
||
|
|
<el-input v-model="filterForm.name" placeholder="" style="width: 120px" />
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="状态：">
|
||
|
|
<el-select v-model="filterForm.status" placeholder="全部" style="width: 150px">
|
||
|
|
<el-option label="全部" value="" />
|
||
|
|
</el-select>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="">
|
||
|
|
<el-button type="primary" plain @click="handleRefresh">刷新</el-button>
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<el-form-item label="时间：">
|
||
|
|
<el-date-picker v-model="filterForm.startTime" type="date" format="YYYY-MM-DD"
|
||
|
|
value-format="YYYY-MM-DD" />
|
||
|
|
<span class="timesplit">-</span>
|
||
|
|
<el-date-picker v-model="filterForm.endTime" type="date" format="YYYY-MM-DD"
|
||
|
|
value-format="YYYY-MM-DD" />
|
||
|
|
</el-form-item>
|
||
|
|
</div>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<div class="result-table-card">
|
||
|
|
<el-table :data="resultTable" border height="645px">
|
||
|
|
<el-table-column label="配血日期" prop="matchDate" align="center" />
|
||
|
|
<el-table-column label="患者姓名" prop="patName" align="center" />
|
||
|
|
<el-table-column label="单据状态" prop="billStatus" align="center" />
|
||
|
|
<el-table-column label="配血单号" prop="matchNo" align="center" />
|
||
|
|
<el-table-column label="申请单号" prop="applyBillNo" align="center" />
|
||
|
|
<el-table-column label="科室" prop="dept" align="center" />
|
||
|
|
<el-table-column label="ABO复核" prop="aboResult" align="center" />
|
||
|
|
<el-table-column label="Rh(D)复核" prop="rhResult" align="center" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<el-dialog title="常规配血单检索" v-model="visible" width="1200px" :close-on-click-modal="false" @closed="handleClose">
|
||
|
|
<div class="mb10">
|
||
|
|
<el-button type="primary" @click="handleSearch">检索</el-button>
|
||
|
|
<el-button type="success" @click="handleConfirm">确认</el-button>
|
||
|
|
</div>
|
||
|
|
<!-- 检索条件区 -->
|
||
|
|
<el-form :model="searchForm" label-width="auto" class="search-form">
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="10">
|
||
|
|
<el-form-item label="检索时间">
|
||
|
|
<div class="date-range">
|
||
|
|
<el-date-picker v-model="searchForm.stime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||
|
|
style="width: 47%" />
|
||
|
|
<span class="separator">-</span>
|
||
|
|
<el-date-picker v-model="searchForm.etime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
|
||
|
|
style="width: 47%" />
|
||
|
|
</div>
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-form-item label="配血单号">
|
||
|
|
<el-input v-model="searchForm.bill_no" placeholder="" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-form-item label="科室">
|
||
|
|
<!-- <el-input v-model="searchForm.ks" placeholder="" /> -->
|
||
|
|
<SelectTable v-model:data="searchForm.ks" :tableData="dictData.ks" placeholder="" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
<el-row :gutter="10">
|
||
|
|
<el-col :span="10">
|
||
|
|
<el-form-item label="申请单号">
|
||
|
|
<el-input v-model="searchForm.bill_no" placeholder="" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="7">
|
||
|
|
<el-form-item label="住院号/ID号">
|
||
|
|
<el-input v-model="searchForm.beinhos_id" placeholder="" />
|
||
|
|
</el-form-item>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-form>
|
||
|
|
|
||
|
|
<!-- 结果表格区 -->
|
||
|
|
<el-table :data="tableData" border height="350" @row-click="handleRowClick" highlight-current-row>
|
||
|
|
<el-table-column prop="patient_name" label="患者姓名" align="center" />
|
||
|
|
<el-table-column prop="patient_name" label="单据状态" align="center" />
|
||
|
|
<el-table-column prop="bill_no" label="配血单号" align="center" width="150" />
|
||
|
|
<el-table-column prop="bill_no" label="申请单号" align="center" width="150" />
|
||
|
|
<el-table-column prop="bill_no" label="住院号/ID号" align="center" width="150" />
|
||
|
|
<el-table-column prop="dept_id" label="科室" align="center">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatDict(scope.row.dept_id, 'ks') }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="assess_data" label="配血日期" width="150" align="center" />
|
||
|
|
<el-table-column prop="beinhos_id" label="ABO复核" align="center" />
|
||
|
|
<el-table-column prop="assess_person" label="Rh(D)复核" align="center" />
|
||
|
|
</el-table>
|
||
|
|
</el-dialog>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import DropdownTableSelect, { type TableColumnItem, type TableRowItem } from '@/components/DropdownTableSelect/index.vue'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
import { getDictData, formatDict, dictData } from '@/hooks'
|
||
|
|
|
||
|
|
const visible = ref(false)
|
||
|
|
|
||
|
|
const searchForm = ref({
|
||
|
|
stime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
etime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
patient_name: '',
|
||
|
|
bill_no: '',
|
||
|
|
beinhos_id: ''
|
||
|
|
})
|
||
|
|
|
||
|
|
const tableData = ref([])
|
||
|
|
|
||
|
|
const applyColumns = ref<TableColumnItem[]>([
|
||
|
|
{ label: '申请单号', prop: 'applyBillNo' },
|
||
|
|
{ label: '患者姓名', prop: 'patientName' },
|
||
|
|
{ label: '科室', prop: 'dept' },
|
||
|
|
{ label: '申请品种', prop: 'bloodKind' }
|
||
|
|
])
|
||
|
|
const applyTableData = ref<TableRowItem[]>([])
|
||
|
|
const searchText = ref('')
|
||
|
|
const matchSelect = ref('add')
|
||
|
|
|
||
|
|
// 主表单数据
|
||
|
|
const formData = ref({})
|
||
|
|
|
||
|
|
// 右侧筛选表单
|
||
|
|
const filterForm = reactive({
|
||
|
|
name: '',
|
||
|
|
status: '',
|
||
|
|
startTime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
endTime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
})
|
||
|
|
|
||
|
|
// 配血操作单选
|
||
|
|
const matchRadio = ref('add')
|
||
|
|
|
||
|
|
// 血液申请表格
|
||
|
|
const bloodApplyTable = ref([])
|
||
|
|
// 配血记录表格
|
||
|
|
const matchTable = ref([])
|
||
|
|
// 右侧结果列表
|
||
|
|
const resultTable = ref([])
|
||
|
|
|
||
|
|
const openJsHandle = () => {
|
||
|
|
visible.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleClose = () => {
|
||
|
|
visible.value = false
|
||
|
|
searchForm.value = {
|
||
|
|
stime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
etime: dayjs().format('YYYY-MM-DD'),
|
||
|
|
patient_name: '',
|
||
|
|
bill_no: '',
|
||
|
|
beinhos_id: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const handleConfirm = () => {
|
||
|
|
}
|
||
|
|
const handleRowClick = (row: any) => {
|
||
|
|
console.log('点击行', row)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 刷新右侧列表
|
||
|
|
const handleRefresh = () => {
|
||
|
|
console.log('刷新右侧配血列表', filterForm)
|
||
|
|
}
|
||
|
|
|
||
|
|
const loadApplyData = () => {
|
||
|
|
}
|
||
|
|
const handleSearch = () => {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
getDictData('ks')
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.box-container {
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
|
||
|
|
// 主体左右容器
|
||
|
|
.main-wrap {
|
||
|
|
height: calc(100% - 70px);
|
||
|
|
|
||
|
|
.timesplit {
|
||
|
|
margin: 0 5px;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 通用卡片样式（对齐规范）
|
||
|
|
.card-box {
|
||
|
|
:deep(.el-form-item) {
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.space-item {
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|