995 lines
39 KiB
Vue
995 lines
39 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 @click="addMatch">新增单据</el-button>
|
||
<el-button type="danger" plain @click="cancelApply">作废整单</el-button>
|
||
<el-button type="primary" plain @click="kcOpen">血液库存</el-button>
|
||
<el-button type="primary" plain :disabled="!formData.bill_no" @click="openResultDialog">检验结果</el-button>
|
||
<el-button type="success" plain :disabled="bloodInfo.bill_status && bloodInfo.bill_status != 'A'"
|
||
@click="saveBloodApply" :loading="saveLoading">保存</el-button>
|
||
<el-button type="warning" plain>打印</el-button>
|
||
</div>
|
||
|
||
<!-- 主体左右分栏容器 -->
|
||
<div class="main-wrap">
|
||
<el-row :gutter="10" class="left-row">
|
||
<el-col :span="15" class="left-col">
|
||
<el-form :model="formData" label-width="auto" class="form_box"
|
||
:disabled="bloodInfo.bill_status && bloodInfo.bill_status != 'A'">
|
||
<div class="card-box">
|
||
<div class="section-title">
|
||
<div> 申请单信息 </div>
|
||
<div v-show="bloodInfo.bill_no">
|
||
配血单号：{{ bloodInfo.bill_no || '' }}
|
||
</div>
|
||
</div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="申请单号">
|
||
<DropdownTableSelect v-model="formData.bill_no" :column-list="applyColumns" tableWidth="800px"
|
||
:showSearch="false" labelField="bill_no" :table-data="applyTableData" @open="loadApplyData"
|
||
@search="searchApply" @change="searchApply" :disabled="!!(bloodInfo.bill_no)">
|
||
<template #dept_id="{ row }">
|
||
{{ formatDict(row.dept_id, 'ks') }}
|
||
</template>
|
||
<template #blood_breed="{ row }">
|
||
{{bloodBreed.find(v => v.value == row.blood_breed)?.label || row.blood_breed}}
|
||
</template>
|
||
</DropdownTableSelect>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="申请日期">
|
||
<el-input v-model="formData.apply_date" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="姓 名">
|
||
<el-input v-model="formData.patient_name" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div class="status" v-show="formData.bill_stasus"
|
||
:style="{ borderColor: getBillStatusInfo(formData.bill_stasus).color, color: getBillStatusInfo(formData.bill_stasus).color }">
|
||
{{ getBillStatusInfo(formData.bill_stasus).label }}
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="性 别">
|
||
<el-input v-model="formData.patient_sex" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="年 龄">
|
||
<el-input v-model="formData.age" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="住院号/ID号">
|
||
<el-input v-model="formData.beinhos_id" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="血型">
|
||
<div class="blood-type-group">
|
||
<div class="blood-type-tag ab"><span class="x_type">{{ formData.abo_type || '-' }}</span> 型</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="病 区">
|
||
<SelectTable v-model:data="formData.zone_id" :tableData="dictData.bq" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="科 室">
|
||
<SelectTable v-model:data="formData.dept_id" :tableData="dictData.ks" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="床位号">
|
||
<el-input v-model="formData.patient_bed" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="Rh(D)">
|
||
<!-- <el-input v-model="formData.rh_type" placeholder="" disabled /> -->
|
||
<div class="blood-type-group">
|
||
<div :class="['blood-type-tag', 'rh',]">
|
||
<span :class="[formData.rh_type == '+' ? '' : formData.rh_type == '-' ? 'red' : '']">
|
||
{{ formData.rh_type == '+' ? '阳性' : formData.rh_type == '-' ? '阴性' : '未知' }}</span> RH
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="临床诊断">
|
||
<el-input v-model="formData.diagnoses" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-form-item label="输血目的">
|
||
<SelectTable v-model:data="formData.intent" :tableData="dictData.sxmd" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row :gutter="10">
|
||
<el-col :span="6">
|
||
<el-form-item label="ABO复核">
|
||
<el-input v-model="formData.affirm_abo" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="亚型">
|
||
<SelectTable v-model:data="formData.Sub_Blood" :tableData="dictData.subgroup" placeholder=""
|
||
disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="Rh(D)复核">
|
||
<el-input v-model="formData.check_rh" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-form-item label="抗体筛选">
|
||
<SelectTable v-model:data="formData.affirm_antibody" :tableData="dictData.ktsx" placeholder=""
|
||
disabled />
|
||
</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 :model-value="formData.reaction_history == 'Y'">输血反应史</el-checkbox>
|
||
<el-checkbox :model-value="formData.transfuse_history == 'Y'">输血史</el-checkbox>
|
||
<el-checkbox :model-value="formData.parturition_history == 'Y'">分娩史</el-checkbox>
|
||
<el-checkbox :model-value="formData.gestation_history == 'Y'">妊娠史</el-checkbox>
|
||
<el-checkbox :model-value="formData.match_history == 'Y'">配型史</el-checkbox>
|
||
</div>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="9">
|
||
<el-form-item label="预定输血日期">
|
||
<el-date-picker v-model="formData.use1_date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="" disabled />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
|
||
<el-table :data="bloodApplyTable" border height="120" show-overflow-tooltip>
|
||
<el-table-column prop="blood_breed" label="血液品种" align="center" width="150">
|
||
<template #default="{ row }">
|
||
{{bloodBreed.find(v => v.value == row.blood_breed)?.label || row.blood_breed}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="blood_num" label="申请血量" align="center" />
|
||
<el-table-column prop="unit" label="单位" align="center" width="60" />
|
||
<el-table-column prop="apply_bloodtype" label="申请血型" align="center">
|
||
<template #default="{ row }">
|
||
{{ formatDict(row.apply_bloodtype, 'abotype') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="replace_bloodbreed" label="替代血液品种" align="center" width="120">
|
||
<template #default="{ row }">
|
||
{{bloodBreed.find(v => v.value == row.replace_bloodbreed)?.label || row.replace_bloodbreed}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="intent" label="输血目的" align="center" width="200">
|
||
<template #default="{ row }">
|
||
{{ formatDict(row.intent, 'sxmd') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="causalis" label="输血指征" align="center" width="200">
|
||
<template #default="{ row }">
|
||
{{ formatDict(row.causalis, 'sxzz') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="实际用血量" prop="ops_fact_use" align="center" />
|
||
</el-table>
|
||
</div>
|
||
|
||
<div class="card-box pxBox" 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="del" />
|
||
</el-select>
|
||
<el-input v-model="bloodNo" placeholder="" @keyup.enter="bloodEnter"
|
||
style="width: 250px;margin-left: 20px;" />
|
||
</div>
|
||
<div class="table-box">
|
||
<CustomTable :data="matchTable" :columns="matchColumns" :config="config">
|
||
<template #second_match_medic="{ row }">
|
||
<SelectTable v-model:data="row.second_match_medic" :tableData="userList" placeholder=""
|
||
:clearable="false" class="full-width-input"
|
||
:disabled="bloodInfo.bill_status && bloodInfo.bill_status != 'A'" />
|
||
</template>
|
||
<template #blood_breed="{ row }">
|
||
{{bloodBreed.find(v => v.value == row.blood_breed)?.label || row.blood_breed}}
|
||
</template>
|
||
<template #offer_affirm_abo="{ row }">
|
||
<el-select v-model="row.offer_affirm_abo" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.abotype" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #check_offer_rh="{ row }">
|
||
<el-select v-model="row.check_offer_rh" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.rhtype" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #match_method="{ row }">
|
||
<el-select v-model="row.match_method" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.pxff" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #check_method="{ row }">
|
||
<el-select v-model="row.check_method" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.pxff" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #first_side="{ row }">
|
||
<el-select v-model="row.first_side" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.zccc" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #second_side="{ row }">
|
||
<el-select v-model="row.second_side" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.zccc" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #result="{ row }">
|
||
<el-select v-model="row.result" placeholder="" class="full-width-input">
|
||
<el-option v-for="option in dictData.pxjg" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</template>
|
||
<template #match_date="{ row }">
|
||
<el-date-picker v-model="row.match_date" type="datetime" format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss" placeholder="" class="full-width-input" />
|
||
</template>
|
||
<template #match_medic="{ row }">
|
||
<SelectTable v-model:data="row.match_medic" :tableData="userList" placeholder=""
|
||
class="full-width-input" :clearable="false"
|
||
:disabled="bloodInfo.bill_status && bloodInfo.bill_status != 'A'" />
|
||
</template>
|
||
<template #position_blood="{ row }">
|
||
<el-input v-model="row.position_blood" placeholder="" class="full-width-input" />
|
||
</template>
|
||
<template #position_barcode="{ row }">
|
||
<el-input v-model="row.position_barcode" placeholder="" class="full-width-input" />
|
||
</template>
|
||
<template #action="{ row, $index }">
|
||
<el-button type="primary" text @click="removeRow($index)">删除</el-button>
|
||
</template>
|
||
</CustomTable>
|
||
</div>
|
||
</div>
|
||
</el-form>
|
||
</el-col>
|
||
|
||
<!-- 右侧筛选+结果表格区域 -->
|
||
<el-col :span="9" class="right-col">
|
||
<div class="card-box pxBox" style="margin-bottom: 0px;">
|
||
<el-form :model="filterForm">
|
||
<el-row :gutter="10">
|
||
<el-col :span="8">
|
||
<el-form-item label="姓名：">
|
||
<el-input v-model="filterForm.patientName" placeholder="" clearable />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<el-form-item label="状态：">
|
||
<el-select v-model="filterForm.status" placeholder="全部" clearable>
|
||
<el-option v-for="option in billStatus" :key="option.value" :label="option.label"
|
||
:value="option.value" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<el-form-item label="">
|
||
<el-button type="primary" plain @click="handleRefresh">刷新</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="16">
|
||
<el-form-item label="时间：">
|
||
<el-date-picker v-model="filterForm.stime" type="date" format="YYYY-MM-DD" style="width: 47%"
|
||
value-format="YYYY-MM-DD" />
|
||
<span class="timesplit">—</span>
|
||
<el-date-picker v-model="filterForm.etime" type="date" format="YYYY-MM-DD" style="width: 47%"
|
||
value-format="YYYY-MM-DD" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div class="table-box">
|
||
<el-table :data="resultTable" border height="100%" highlight-current-row show-overflow-tooltip
|
||
@row-click="handleRowClick">
|
||
<el-table-column label="配血日期" prop="test_date" align="center" width="150" />
|
||
<el-table-column label="患者姓名" prop="patient_name" align="center" />
|
||
<el-table-column label="单据状态" prop="bill_status" align="center">
|
||
<template #default="{ row }">
|
||
{{billStatus.find(v => v.value == row.bill_status)?.label || row.bill_status}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="配血单号" prop="bill_no" align="center" width="150" />
|
||
<el-table-column label="申请单号" prop="apply_no" align="center" width="150" />
|
||
<el-table-column label="科室" prop="dept_id" align="center">
|
||
<template #default="{ row }">
|
||
{{ formatDict(row.dept_id, 'ks') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="ABO复核" prop="affirm_abo" align="center" />
|
||
<el-table-column label="Rh(D)复核" prop="check_rh" 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="9">
|
||
<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.billNo" placeholder="" />
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item label="科室">
|
||
<SelectTable v-model:data="searchForm.dept" :tableData="dictData.ks" placeholder="" />
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="10">
|
||
<el-col :span="9">
|
||
<el-form-item label="申请单号">
|
||
<el-input v-model="searchForm.applyNo" 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="450" @row-click="jsRowclick" @row-dblclick="dblClickRow"
|
||
highlight-current-row show-overflow-tooltip>
|
||
<el-table-column prop="patient_name" label="患者姓名" align="center" />
|
||
<el-table-column prop="bill_status" label="单据状态" align="center">
|
||
<template #default="{ row }">
|
||
{{billStatus.find(v => v.value == row.bill_status)?.label || row.bill_status}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="bill_no" label="配血单号" align="center" width="150" />
|
||
<el-table-column prop="apply_no" label="申请单号" 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="test_date" label="配血日期" width="150" align="center" />
|
||
<el-table-column prop="affirm_abo" label="ABO复核" align="center" />
|
||
<el-table-column prop="check_rh" label="Rh(D)复核" align="center" />
|
||
</el-table>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="查看配血相关检验结果" v-model="resultVisible" width="700px" :close-on-click-modal="false">
|
||
<div class="table-box">
|
||
<el-table :data="resultList" border height="350" show-overflow-tooltip>
|
||
<el-table-column label="检验项目名称" prop="item_name" align="center" />
|
||
<el-table-column label="检验项目结果" prop="item_result" align="center">
|
||
<template #default="{ row }">
|
||
{{ formatDict(row.item_result, 'test_result') }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="检验时间" prop="test_date" align="center" />
|
||
</el-table>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<el-dialog title="血液库存预览" v-model="kcvisible" width="1200px" :close-on-click-modal="false" @closed="">
|
||
<div class="mb10 serch-box">
|
||
<el-input v-model="kcSearchForm.blood_no" placeholder="请输入血液流水号" @keyup.enter="searchBloodStock"
|
||
style="width: 250px" clearable />
|
||
<span style="color:#f00">红色：已过期</span>
|
||
<span style="color:#ff00ff">粉红色：已配血</span>
|
||
<span style="color:#0a9292">青色：配血超过预定天数未出库</span>
|
||
</div>
|
||
<el-table :data="kcTableData" border height="500px" highlight-current-row show-overflow-tooltip
|
||
:cell-style="cellStyle">
|
||
<el-table-column label="血液流水号" prop="blood_no" align="center" />
|
||
<el-table-column label="产品码" prop="product_no" align="center" />
|
||
<el-table-column label="血型" prop="blood_type" align="center" width="60" />
|
||
<el-table-column label="Rh血型" prop="rh_blood_type" align="center" width="80" />
|
||
<el-table-column label="有效日期" prop="valid_date" align="center" width="170" />
|
||
<el-table-column label="血液状态" prop="blood_status" align="center" width="100">
|
||
<template #default="{ row }">
|
||
{{ bloddStatus[row.blood_status] || row.blood_status }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="血液品种" prop="blood_breed" align="center" width="150">
|
||
<template #default="{ row }">
|
||
{{bloodBreed.find(v => v.value == row.blood_breed)?.label || row.blood_breed}}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="容量" prop="capacity" align="center" />
|
||
<el-table-column label="单位" prop="unit" align="center" width="60" />
|
||
</el-table>
|
||
<div class="f-title">
|
||
总计：{{ kcTableData.length }} 袋
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<BloodMask ref="maskRef" :bloodBreed="bloodBreed" @selectRow="selectBlood" />
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts" name="CrossMatching">
|
||
import DropdownTableSelect, { type TableColumnItem, type TableRowItem } from '@/components/DropdownTableSelect/index.vue'
|
||
import dayjs from 'dayjs'
|
||
import { getDictData, formatDict, dictData, useCommonDict } from '@/hooks'
|
||
import {
|
||
queryMatchBloodList, queryMatchOne, queryWaitInfo, getBloodInfoMatch, checkBloodMatched, saveBloodData, queryMatchApplyInfo, cancelBloodInfoMatch,
|
||
deleteBloodInfoMatch, queryBloodStockList, queryListResult
|
||
} from '@/api/blood'
|
||
import { queryBloodInfoByBloodNo } from '@/api/common'
|
||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||
import useUserStore from '@/store/modules/user'
|
||
import BloodMask from '../component/bloodMask.vue'
|
||
|
||
const userInfo = useUserStore()
|
||
const { userList, getUserData, getServerTime, bloodBreed, getBloodList, } = useCommonDict()
|
||
|
||
const maskRef = useTemplateRef('maskRef')
|
||
const visible = ref(false)
|
||
const kcvisible = ref(false)
|
||
const kcTableData = ref([])
|
||
const bloodInfo = ref({})
|
||
|
||
const saveLoading = ref(false)
|
||
const billStatus = ref([
|
||
{ label: '未发血', value: 'A' },
|
||
{ label: '已发血', value: 'B' },
|
||
{ label: '已作废', value: 'ZF' },
|
||
])
|
||
const searchForm = ref({
|
||
stime: dayjs().format('YYYY-MM-DD'),
|
||
etime: dayjs().format('YYYY-MM-DD'),
|
||
})
|
||
|
||
const tableData = ref([])
|
||
|
||
const applyColumns = ref<TableColumnItem[]>([
|
||
{ label: '申请单号', prop: 'bill_no' },
|
||
{ label: '患者姓名', prop: 'patient_name' },
|
||
{ label: '科室', prop: 'dept_id', slotName: 'dept_id' },
|
||
{ label: '申请时间', prop: 'apply_date' },
|
||
{ label: '申请品种', prop: 'blood_breed', slotName: 'blood_breed' }
|
||
])
|
||
const applyTableData = ref<TableRowItem[]>([])
|
||
|
||
|
||
const bloddStatus = {
|
||
'1': '在库',
|
||
'4': '出库',
|
||
'2': '报废',
|
||
}
|
||
// 主表单数据
|
||
const formData = ref({})
|
||
|
||
// 右侧筛选表单
|
||
const filterForm = ref({
|
||
name: '',
|
||
status: '',
|
||
stime: dayjs().format('YYYY-MM-DD'),
|
||
etime: dayjs().format('YYYY-MM-DD'),
|
||
})
|
||
const bloodNo = ref('')
|
||
// 配血操作单选
|
||
const matchSelect = ref('add')
|
||
|
||
// 血液申请表格
|
||
const bloodApplyTable = ref([])
|
||
// 配血记录表格
|
||
const matchTable = ref([])
|
||
const matchColumns = ref([
|
||
{ label: '序号', type: 'index', width: 40, visible: true, align: 'center' },
|
||
{ label: '复核者', prop: 'second_match_medic', align: 'center', visible: true, width: 100, slot: 'second_match_medic', showOverflowTooltip: false },
|
||
{ label: '血液流水号', prop: 'blood_no', align: 'center', width: 120, visible: true, },
|
||
{ label: '产品码', prop: 'product_no', align: 'center', visible: true, },
|
||
{ label: '血液品种', prop: 'blood_breed', align: 'center', visible: true, slot: 'blood_breed', },
|
||
{ label: '血型', prop: 'blood_type', align: 'center', visible: true, },
|
||
{ label: 'Rh(D)', prop: 'rh_blood_type', align: 'center', visible: true, },
|
||
{ label: '容量', prop: 'capacity', align: 'center', visible: true, },
|
||
{ label: '供者血型复核', prop: 'offer_affirm_abo', align: 'center', visible: true, width: 120, slot: 'offer_affirm_abo', showOverflowTooltip: false },
|
||
{ label: '供者Rh(D)复核', prop: 'check_offer_rh', align: 'center', visible: true, width: 120, slot: 'check_offer_rh', showOverflowTooltip: false },
|
||
{ label: '配血方法', prop: 'match_method', align: 'center', visible: true, width: 150, slot: 'match_method', showOverflowTooltip: false },
|
||
{ label: '复核配血方法', prop: 'check_method', align: 'center', visible: true, width: 150, slot: 'check_method', showOverflowTooltip: false },
|
||
{ label: '主侧', prop: 'first_side', align: 'center', visible: true, width: 150, slot: 'first_side', showOverflowTooltip: false },
|
||
{ label: '次侧', prop: 'second_side', align: 'center', visible: true, width: 150, slot: 'second_side', showOverflowTooltip: false },
|
||
{ label: '结果', prop: 'result', align: 'center', visible: true, width: 150, slot: 'result', showOverflowTooltip: false },
|
||
{ label: '配血日期', prop: 'match_date', align: 'center', visible: true, width: 150, slot: 'match_date', showOverflowTooltip: false },
|
||
{ label: '配血者', prop: 'match_medic', align: 'center', visible: true, width: 100, slot: 'match_medic', showOverflowTooltip: false },
|
||
{ label: '血液存放位子', prop: 'position_blood', align: 'center', visible: true, width: 150, slot: 'position_blood', showOverflowTooltip: false },
|
||
{ label: '标本存放位子', prop: 'position_barcode', align: 'center', visible: true, width: 150, slot: 'position_barcode', showOverflowTooltip: false },
|
||
])
|
||
|
||
const config = {
|
||
height: '100%',
|
||
border: true,
|
||
highlightCurrentRow: true,
|
||
actionFixed: 'right',
|
||
}
|
||
// 右侧结果列表
|
||
const resultTable = ref([])
|
||
|
||
// 检验结果弹窗数据
|
||
const resultVisible = ref(false)
|
||
const resultList = ref([])
|
||
|
||
const openResultDialog = () => {
|
||
const params = { billNo: formData.value.bill_no }
|
||
queryListResult(params).then(res => {
|
||
resultList.value = res.data || []
|
||
resultVisible.value = true
|
||
})
|
||
}
|
||
|
||
const getBillStatusInfo = (code: string) => {
|
||
const statusList = dictData.value?.billApplyStatus ?? []
|
||
const target = statusList.find(item => item.value == code)
|
||
if (target) {
|
||
return { label: target.label, color: target.remark }
|
||
}
|
||
|
||
return { label: '未审核', color: '#909399' }
|
||
}
|
||
// 血液流水号获取血液信息
|
||
const bloodEnter = () => {
|
||
if (!formData.value.bill_no) return ElMessage.warning('请选择输血申请单！')
|
||
const index = matchTable.value.findIndex(item => item.blood_no == bloodNo.value)
|
||
if (matchSelect.value == 'del') {
|
||
if (index > -1) {
|
||
ElMessageBox.confirm(`确定取消血液${matchTable.value[index].blood_no}数据吗？`, '提示', { type: 'warning' }).then(() => {
|
||
cancelBloodInfoMatch({ bloodNo: matchTable.value[index].blood_no, productNo: matchTable.value[index].product_no }).then(res => {
|
||
matchTable.value.splice(index, 1)
|
||
})
|
||
})
|
||
} else {
|
||
ElMessage.warning('该血液流水号不存在，请检查！')
|
||
}
|
||
} else {
|
||
if (index > -1) return ElMessage.warning('该血液流水号已存在，请检查！')
|
||
queryBloodInfoByBloodNo({ bloodNo: bloodNo.value }).then(res => {
|
||
if (res.data.length == 1) {
|
||
const row = res.data[0]
|
||
checkBlood(row)
|
||
} else if (res.data.length > 1) {
|
||
maskRef.value.open(res.data)
|
||
}
|
||
}).finally(() => {
|
||
bloodNo.value = ''
|
||
})
|
||
}
|
||
}
|
||
|
||
const selectBlood = (row) => {
|
||
checkBlood(row)
|
||
}
|
||
// 血液校验
|
||
const checkBlood = (row) => {
|
||
checkBloodMatched({ bloodNo: row.blood_no, productNo: row.product_no, billNo: formData.value.bill_no }).then(res => {
|
||
if (res.code == 0) {
|
||
getBloodInfo(row)
|
||
}
|
||
if (res.code == 2) {
|
||
ElMessageBox.alert(`${res.msg}`, '提示', { type: 'warning' }).then(() => {
|
||
getBloodInfo(row)
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
const removeRow = (index) => {
|
||
ElMessageBox.confirm(`确定删除血液${matchTable.value[index].blood_no}数据吗？`, '提示', { type: 'warning' }).then(() => {
|
||
cancelBloodInfoMatch({ bloodNo: matchTable.value[index].blood_no, productNo: matchTable.value[index].product_no }).then(res => {
|
||
matchTable.value.splice(index, 1)
|
||
})
|
||
})
|
||
}
|
||
|
||
// 获取血液信息
|
||
const getBloodInfo = (row) => {
|
||
getBloodInfoMatch({ bloodNo: row.blood_no, productNo: row.product_no }).then(res => {
|
||
const row = res.data || {}
|
||
const msgArr: string[] = []
|
||
|
||
// ABO不匹配提示
|
||
if (row.blood_type != formData.value.abo_type) {
|
||
msgArr.push(`该血液流水号的血型与患者复核的血型结果不一致，请注意!`)
|
||
}
|
||
// Rh不匹配提示
|
||
if (row.rh_blood_type != formData.value.rh_type) {
|
||
msgArr.push(`患者Rh血型:Rh(D)阴性该血液的Rh血型与患者的Rh血型不符，请注意!`)
|
||
}
|
||
//血液品种不同
|
||
if (row.blood_breed != formData.value.blood_breed) {
|
||
msgArr.push(`该血液的血液品种与患者申请的血液品种不符，请注意!`)
|
||
}
|
||
|
||
// 存在任意不匹配统一弹窗
|
||
if (msgArr.length) {
|
||
ElMessageBox.alert(msgArr.join('<br/>'), '提示', { type: 'warning', dangerouslyUseHTMLString: true }).then(() => {
|
||
// 弹窗关闭后逻辑
|
||
setMatchTable(row)
|
||
})
|
||
} else {
|
||
setMatchTable(row)
|
||
}
|
||
})
|
||
}
|
||
|
||
const setMatchTable = (row) => {
|
||
matchTable.value.push({
|
||
...row,
|
||
second_match_medic: '',
|
||
offer_affirm_abo: row.blood_type,
|
||
check_offer_rh: row.rh_blood_type,
|
||
match_method: '006',
|
||
check_method: '002',
|
||
first_side: 'N',
|
||
second_side: 'N',
|
||
result: '001',
|
||
match_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||
match_medic: userInfo.name,
|
||
position_blood: '',
|
||
position_barcode: '',
|
||
})
|
||
matchTable.value.forEach((item, index) => {
|
||
item.sid = index + 1
|
||
})
|
||
bloodNo.value = ''
|
||
}
|
||
|
||
|
||
|
||
const selectRow = ref({})
|
||
|
||
const openJsHandle = () => {
|
||
visible.value = true
|
||
handleSearch()
|
||
}
|
||
|
||
const handleClose = () => {
|
||
visible.value = false
|
||
searchForm.value = {
|
||
stime: dayjs().format('YYYY-MM-DD'),
|
||
etime: dayjs().format('YYYY-MM-DD'),
|
||
}
|
||
selectRow.value = {}
|
||
}
|
||
const handleConfirm = () => {
|
||
if (!selectRow.value.bill_no) return ElMessage.warning('请选择配血单！')
|
||
getBloodMatchInfo()
|
||
visible.value = false
|
||
}
|
||
|
||
const jsRowclick = (row) => {
|
||
selectRow.value = row
|
||
}
|
||
|
||
const dblClickRow = (row) => {
|
||
selectRow.value = row
|
||
handleConfirm()
|
||
}
|
||
|
||
const handleRowClick = (row: any) => {
|
||
selectRow.value = row
|
||
getBloodMatchInfo()
|
||
}
|
||
|
||
const getBloodMatchInfo = () => {
|
||
queryMatchApplyInfo({ billNo: selectRow.value.bill_no, applyNo: selectRow.value.apply_no }).then(res => {
|
||
formData.value = res.data.matchMainInfoList[0] || {}
|
||
bloodApplyTable.value = res.data.xkTransfuseApplyBloodbreedList || []
|
||
matchTable.value = res.data.matchDetailInfoList || []
|
||
bloodInfo.value = res.data.matchDetailInfoList[0] || {}
|
||
})
|
||
}
|
||
|
||
const handleSearch = () => {
|
||
searchForm.value.stime = dayjs(searchForm.value.stime).format('YYYY-MM-DD') + ' 00:00:00'
|
||
searchForm.value.etime = dayjs(searchForm.value.etime).format('YYYY-MM-DD') + ' 23:59:59'
|
||
queryMatchBloodList(searchForm.value).then(res => {
|
||
tableData.value = res.data || []
|
||
})
|
||
}
|
||
|
||
const saveBloodApply = () => {
|
||
if (!formData.value.bill_no) return ElMessage.warning('请选择输血申请单！')
|
||
if (matchTable.value.length == 0) return ElMessage.warning('请添加配血血液！')
|
||
const allValid = matchTable.value.every(item => item.second_match_medic?.trim())
|
||
if (!allValid) return ElMessage.warning('请填写复核者！')
|
||
saveLoading.value = true
|
||
const params = {
|
||
xkMatchMain: {
|
||
apply_no: formData.value.bill_no,
|
||
input_person: userInfo.name,
|
||
bill_status: 'A',
|
||
dept_id: formData.value.dept_id,
|
||
patient_name: formData.value.patient_name,
|
||
beinhos_id: formData.value.beinhos_id,
|
||
test_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||
input_date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
|
||
bill_no: bloodInfo.value.bill_no || '',
|
||
},
|
||
xkMatchDetailList: matchTable.value.map(item => ({
|
||
...item,
|
||
bill_no: bloodInfo.value.bill_no || '',
|
||
}))
|
||
}
|
||
saveLoading.value = true
|
||
saveBloodData(params).then(res => {
|
||
saveLoading.value = false
|
||
if (res.code == 0) {
|
||
handleRefresh()
|
||
ElMessage.success(res.msg)
|
||
}
|
||
}).catch(() => {
|
||
saveLoading.value = false
|
||
})
|
||
}
|
||
|
||
const addMatch = () => {
|
||
formData.value = {}
|
||
bloodApplyTable.value = []
|
||
matchTable.value = []
|
||
selectRow.value = {}
|
||
bloodInfo.value = {}
|
||
}
|
||
|
||
const cancelApply = () => {
|
||
if (!bloodInfo.value.bill_no) return ElMessage.warning('请选择交叉配血单！')
|
||
deleteBloodInfoMatch({ billNo: bloodInfo.value.bill_no }).then(res => {
|
||
handleRefresh()
|
||
ElMessage.success(res.msg)
|
||
})
|
||
}
|
||
|
||
const kcSearchForm = ref({
|
||
blood_no: '',
|
||
})
|
||
|
||
const kcOpen = () => {
|
||
searchBloodStock()
|
||
kcvisible.value = true
|
||
}
|
||
|
||
const searchBloodStock = () => {
|
||
queryBloodStockList({ affirmAbo: formData.value.affirm_abo, bloodNo: kcSearchForm.value.blood_no }).then(res => {
|
||
kcTableData.value = res.data || []
|
||
})
|
||
}
|
||
|
||
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
|
||
if (row.matched.trim() == 'Y') {
|
||
return {
|
||
color: '#ff00ff',
|
||
}
|
||
}
|
||
|
||
if (row.valid_date < dayjs().format('YYYY-MM-DD HH:mm:ss')) {
|
||
return {
|
||
color: '#f00',
|
||
}
|
||
}
|
||
if (row.match_delay.trim() == 'Y') {
|
||
return {
|
||
color: '#0a9292',
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
// 刷新右侧列表
|
||
const handleRefresh = () => {
|
||
filterForm.value.stime = dayjs(filterForm.value.stime).format('YYYY-MM-DD') + ' 00:00:00'
|
||
filterForm.value.etime = dayjs(filterForm.value.etime).format('YYYY-MM-DD') + ' 23:59:59'
|
||
queryMatchBloodList(filterForm.value).then(res => {
|
||
resultTable.value = res.data || []
|
||
})
|
||
}
|
||
|
||
const loadApplyData = () => {
|
||
queryWaitInfo().then(res => {
|
||
applyTableData.value = res.data || []
|
||
})
|
||
}
|
||
const searchApply = () => {
|
||
queryMatchOne({ billNo: formData.value.bill_no }).then(res => {
|
||
formData.value = res.data.matchMainInfoList[0] || {}
|
||
bloodApplyTable.value = res.data.xkTransfuseApplyBloodbreedList
|
||
|
||
if (formData.value.rh_type == '-') {
|
||
// 阴性弹出框提示
|
||
ElMessageBox.alert(`患者为Rh(D)阴性血型，请注意！`, '提示', { type: 'warning' })
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
getDictData('ks', 'bq', 'sxmd', 'billApplyStatus', 'ktsx', 'abotype', 'subgroup', 'sxzz', 'rhtype', 'pxff', 'pxjg', 'zccc', 'test_result')
|
||
getBloodList()
|
||
getUserData()
|
||
handleRefresh()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.box-container {
|
||
overflow-y: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
// 主体左右容器
|
||
.main-wrap {
|
||
flex: 1;
|
||
min-height: 0;
|
||
|
||
.timesplit {
|
||
width: 6%;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
|
||
.left-row {
|
||
height: 100%;
|
||
|
||
.left-col {
|
||
height: 100%;
|
||
}
|
||
|
||
.form_box {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.right-col {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.pxBox {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.table-box {
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 通用卡片样式（对齐规范）
|
||
.card-box {
|
||
:deep(.el-form-item) {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.space-item {
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.status {
|
||
color: #409eff;
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
}
|
||
|
||
.f-title {
|
||
text-align: center;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.serch-box {
|
||
span {
|
||
margin-left: 20px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.blood-type-group {
|
||
display: flex;
|
||
// width: 100%;
|
||
|
||
.blood-type-tag {
|
||
width: 9.375rem;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
font-size: 30px;
|
||
font-weight: 600;
|
||
padding-left: 20px;
|
||
|
||
&.ab {
|
||
background: url('@/assets/images/blood_zero.png');
|
||
background-size: 100% 100%;
|
||
color: #3594c7;
|
||
|
||
.x_type {
|
||
color: #ff3b62;
|
||
}
|
||
}
|
||
|
||
&.rh {
|
||
background-color: #e8f7ff;
|
||
color: #3594c7;
|
||
}
|
||
|
||
.red {
|
||
color: #f00 !important;
|
||
}
|
||
|
||
}
|
||
}
|
||
</style> |