<template>
|
<div class="organ-utilization-detail">
|
<!-- 基本信息 -->
|
<el-card class="detail-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官利用基本信息</span>
|
<div style="float: right;">
|
<el-button type="primary" @click="handleSave" :loading="saveLoading">
|
保存
|
</el-button>
|
<el-button
|
type="success"
|
@click="handleComplete"
|
:disabled="form.utilizationStatus === 'completed'"
|
>
|
完成利用
|
</el-button>
|
</div>
|
</div>
|
|
<el-form :model="form" ref="form" :rules="rules" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="住院号" prop="hospitalNo">
|
<el-input v-model="form.hospitalNo" readonly />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="案例编号" prop="caseNo">
|
<el-input v-model="form.caseNo" readonly />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="捐献者姓名" prop="donorName">
|
<el-input v-model="form.donorName" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="性别" prop="gender">
|
<el-select v-model="form.gender" style="width: 100%">
|
<el-option label="男" value="0" />
|
<el-option label="女" value="1" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="年龄" prop="age">
|
<el-input v-model="form.age" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="出生日期" prop="birthDate">
|
<el-date-picker
|
v-model="form.birthDate"
|
type="date"
|
value-format="yyyy-MM-dd"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="疾病诊断" prop="diagnosis">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="form.diagnosis"
|
placeholder="请输入疾病诊断信息"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="分配时间" prop="allocationTime">
|
<el-date-picker
|
v-model="form.allocationTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item align="left" label="遗体捐献" prop="isBodyDonation">
|
<el-radio-group v-model="form.isBodyDonation">
|
<el-radio
|
v-for="dict in dict.type.sys_0_1 || []"
|
:key="dict.value"
|
:label="dict.value"
|
>{{ dict.label }}</el-radio
|
>
|
</el-radio-group>
|
</el-form-item>
|
</el-col>
|
<el-col :span="18">
|
<el-form-item align="left" label="接收单位" prop="receivingUnit">
|
<el-input
|
v-model="form.receivingUnit"
|
placeholder="请输入接收单位"
|
:disabled="form.isBodyDonation !== '1'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<el-form-item label="负责人" prop="responsibleUserId">
|
<el-select
|
v-model="form.responsibleUserId"
|
placeholder="请选择负责人"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in leaderList"
|
:key="item.reportNo"
|
:label="item.reportName"
|
:value="item.reportNo"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="协调员一" prop="coordinatedUserId1">
|
<el-select
|
v-model="form.coordinatedUserId1"
|
placeholder="请选择协调员"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in coordinatorList"
|
:key="item.reportNo"
|
:label="item.reportName"
|
:value="item.reportNo"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="协调员二" prop="coordinatedUserId2">
|
<el-select
|
v-model="form.coordinatedUserId2"
|
placeholder="请选择协调员"
|
style="width: 100%"
|
>
|
<el-option
|
v-for="item in coordinatorList"
|
:key="item.reportNo"
|
:label="item.reportName"
|
:value="item.reportNo"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="完成时间" prop="completionTime">
|
<el-date-picker
|
v-model="form.completionTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
:disabled="form.utilizationStatus !== 'completed'"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="登记人" prop="registrant">
|
<el-input v-model="form.registrant" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="登记时间" prop="registrationTime">
|
<el-date-picker
|
v-model="form.registrationTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
readonly
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-card>
|
|
<!-- 器官利用记录部分 -->
|
<el-card class="utilization-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">器官利用记录</span>
|
<div style="float: right;">
|
<el-tag :type="getStatusTagType(form.utilizationStatus)">
|
{{ getStatusText(form.utilizationStatus) }}
|
</el-tag>
|
</div>
|
</div>
|
|
<el-form
|
ref="utilizationForm"
|
:rules="utilizationRules"
|
:model="utilizationData"
|
label-position="right"
|
>
|
<el-row>
|
<el-col>
|
<el-form-item label-width="100px" label="移植器官">
|
<el-checkbox-group v-model="selectedOrgans" @change="handleOrganSelectionChange">
|
<el-checkbox
|
v-for="dict in dict.type.sys_Organ || []"
|
:key="dict.value"
|
:label="dict.value"
|
:disabled="form.utilizationStatus === 'completed'"
|
>
|
{{ dict.label }}
|
</el-checkbox>
|
</el-checkbox-group>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col>
|
<el-form-item>
|
<el-table
|
:data="utilizationData.records"
|
v-loading="loading"
|
border
|
style="width: 100%"
|
:row-class-name="getOrganRowClassName"
|
>
|
<el-table-column
|
label="器官名称"
|
align="center"
|
width="120"
|
prop="organName"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.organName"
|
placeholder="器官名称"
|
:disabled="true"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="系统编号"
|
align="center"
|
width="120"
|
prop="caseNo"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.caseNo"
|
placeholder="系统编号"
|
:disabled="form.utilizationStatus === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植医院"
|
align="center"
|
width="200"
|
prop="hospitalNo"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.hospitalNo"
|
placeholder="请选择移植医院"
|
style="width: 100%"
|
:disabled="form.utilizationStatus === 'completed'"
|
@change="handleHospitalChange(scope.row, $event)"
|
>
|
<el-option
|
v-for="hospital in hospitalList"
|
:key="hospital.hospitalNo"
|
:label="hospital.hospitalName"
|
:value="hospital.hospitalNo"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="受体姓氏"
|
align="center"
|
width="120"
|
prop="recipientName"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.recipientName"
|
placeholder="受体姓氏"
|
:disabled="form.utilizationStatus === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植负责人"
|
align="center"
|
width="120"
|
prop="transplantDoctor"
|
>
|
<template slot-scope="scope">
|
<el-input
|
v-model="scope.row.transplantDoctor"
|
placeholder="医师姓名"
|
:disabled="form.utilizationStatus === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植时间"
|
align="center"
|
width="150"
|
prop="transplantTime"
|
>
|
<template slot-scope="scope">
|
<el-date-picker
|
clearable
|
size="small"
|
style="width: 100%"
|
v-model="scope.row.transplantTime"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择移植时间"
|
:disabled="form.utilizationStatus === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="移植状态"
|
align="center"
|
width="120"
|
prop="transplantStatus"
|
>
|
<template slot-scope="scope">
|
<el-select
|
v-model="scope.row.transplantStatus"
|
placeholder="请选择移植状态"
|
style="width: 100%"
|
:disabled="form.utilizationStatus === 'completed'"
|
>
|
<el-option
|
v-for="dict in transplantStatusList"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="说明"
|
align="center"
|
prop="abandonReason"
|
min-width="200"
|
>
|
<template slot-scope="scope">
|
<el-input
|
type="textarea"
|
clearable
|
v-model="scope.row.abandonReason"
|
placeholder="请输入弃用说明"
|
:disabled="form.utilizationStatus === 'completed'"
|
/>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
align="center"
|
width="120"
|
class-name="small-padding fixed-width"
|
v-if="form.utilizationStatus !== 'completed'"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleEditUtilization(scope.row)"
|
>
|
编辑
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<!-- 利用统计信息 -->
|
<div class="utilization-stats" v-if="utilizationData.records.length > 0">
|
<el-row :gutter="20">
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">已利用器官:</span>
|
<span class="stat-value">{{ utilizationData.records.length }} 个</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">待完善信息:</span>
|
<span class="stat-value">{{ incompleteRecords }} 个</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">涉及医院:</span>
|
<span class="stat-value">{{ uniqueHospitals }} 家</span>
|
</div>
|
</el-col>
|
<el-col :span="6">
|
<div class="stat-item">
|
<span class="stat-label">利用状态:</span>
|
<span class="stat-value">
|
<el-tag :type="getStatusTagType(form.utilizationStatus)">
|
{{ getStatusText(form.utilizationStatus) }}
|
</el-tag>
|
</span>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
<div v-else class="empty-utilization">
|
<el-empty description="暂无利用记录" :image-size="80">
|
<span>请先选择要利用的器官</span>
|
</el-empty>
|
</div>
|
</el-form>
|
|
<div class="dialog-footer" v-if="form.utilizationStatus !== 'completed'">
|
<el-button
|
type="primary"
|
@click="handleSaveUtilization"
|
:loading="saveLoading"
|
:disabled="utilizationData.records.length === 0"
|
>
|
保存利用记录
|
</el-button>
|
<el-button
|
type="success"
|
@click="handleConfirmUtilization"
|
:loading="confirmLoading"
|
:disabled="incompleteRecords > 0"
|
>
|
确认完成利用
|
</el-button>
|
</div>
|
</el-card>
|
|
<!-- 受者详细信息部分 -->
|
<el-card class="recipient-card" v-if="utilizationData.records.length > 0">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">受者详细信息</span>
|
</div>
|
|
<el-tabs v-model="activeRecipientTab" type="card">
|
<el-tab-pane
|
v-for="record in utilizationData.records"
|
:key="record.organNo"
|
:label="record.organName"
|
:name="record.organNo"
|
>
|
<el-form :model="record" label-width="140px">
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="受者姓名">
|
<el-input v-model="record.recipientName" placeholder="请输入受者姓名" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="出生年月">
|
<el-date-picker
|
v-model="record.recipientBirthDate"
|
type="month"
|
value-format="yyyy-MM"
|
placeholder="选择出生年月"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="性别">
|
<el-select v-model="record.recipientGender" placeholder="请选择性别" style="width: 100%">
|
<el-option label="男" value="0" />
|
<el-option label="女" value="1" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="移植中心名称">
|
<el-input v-model="record.transplantCenter" placeholder="请输入移植中心名称" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="所在地">
|
<el-input v-model="record.location" placeholder="请输入所在地" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="移植日期">
|
<el-date-picker
|
v-model="record.transplantTime"
|
type="date"
|
value-format="yyyy-MM-dd"
|
placeholder="选择移植日期"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="原发病">
|
<el-input v-model="record.originalDisease" placeholder="请输入原发病" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="24">
|
<el-form-item label="检测指标">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="record.testIndicators"
|
placeholder="请输入各类必要的检测指标"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
<!-- 随访记录部分 -->
|
<el-card class="followup-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">随访记录</span>
|
<el-button
|
type="primary"
|
size="mini"
|
icon="el-icon-plus"
|
@click="handleAddFollowup"
|
style="float: right;"
|
>
|
新增随访
|
</el-button>
|
</div>
|
|
<el-table :data="followupData.records" v-loading="loading" border>
|
<el-table-column label="器官名称" align="center" width="120" prop="organName" />
|
<el-table-column label="随访时间" align="center" width="160" prop="followupTime">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.followupTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="随访类型" align="center" width="100" prop="followupType">
|
<template slot-scope="scope">
|
<el-tag :type="getFollowupTypeTag(scope.row.followupType)">
|
{{ getFollowupTypeText(scope.row.followupType) }}
|
</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="受者情况" align="center" prop="recipientCondition" min-width="200" show-overflow-tooltip />
|
<el-table-column label="随访医生" align="center" width="120" prop="followupDoctor" />
|
<el-table-column label="下次随访时间" align="center" width="160" prop="nextFollowupTime">
|
<template slot-scope="scope">
|
<span>{{ scope.row.nextFollowupTime || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" width="150">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handleViewFollowup(scope.row)"
|
>查看</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-edit"
|
@click="handleEditFollowup(scope.row)"
|
>编辑</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
style="color: #F56C6C;"
|
@click="handleDeleteFollowup(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
|
<!-- 附件管理部分 -->
|
<el-card class="attachment-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">相关附件</span>
|
<el-button
|
type="primary"
|
size="mini"
|
icon="el-icon-upload"
|
@click="handleUploadAttachment"
|
>
|
上传附件
|
</el-button>
|
</div>
|
|
<div class="attachment-list">
|
<el-table :data="attachments" style="width: 100%">
|
<el-table-column label="文件名称" min-width="200">
|
<template slot-scope="scope">
|
<div class="file-info">
|
<i :class="getFileIcon(scope.row.fileName)" style="margin-right: 8px; color: #409EFF;"></i>
|
<span>{{ scope.row.fileName }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="文件类型" width="100" align="center">
|
<template slot-scope="scope">
|
<el-tag size="small">{{ getFileType(scope.row.fileName) }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="文件大小" width="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ formatFileSize(scope.row.fileSize) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="上传时间" width="160" align="center">
|
<template slot-scope="scope">
|
<span>{{ parseTime(scope.row.uploadTime) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="150" align="center">
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handlePreviewAttachment(scope.row)"
|
>预览</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-download"
|
@click="handleDownloadAttachment(scope.row)"
|
>下载</el-button>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
style="color: #F56C6C;"
|
@click="handleRemoveAttachment(scope.row)"
|
>删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
</el-card>
|
|
<!-- 编辑利用记录对话框 -->
|
<el-dialog
|
title="编辑器官利用记录"
|
:visible.sync="editDialogVisible"
|
width="600px"
|
>
|
<el-form :model="currentRecord" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="器官名称">
|
<el-input v-model="currentRecord.organName" readonly />
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="移植状态">
|
<el-select v-model="currentRecord.transplantStatus" style="width: 100%">
|
<el-option
|
v-for="dict in transplantStatusList"
|
:key="dict.value"
|
:label="dict.label"
|
:value="dict.value"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="弃用说明" v-if="currentRecord.transplantStatus === '0'">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="currentRecord.abandonReason"
|
placeholder="请输入弃用的原因说明"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="editDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleEditConfirm">确认</el-button>
|
</div>
|
</el-dialog>
|
|
<!-- 随访记录对话框 -->
|
<el-dialog
|
:title="followupDialogTitle"
|
:visible.sync="followupDialogVisible"
|
width="700px"
|
>
|
<el-form :model="currentFollowup" label-width="120px">
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="器官名称">
|
<el-select v-model="currentFollowup.organNo" style="width: 100%">
|
<el-option
|
v-for="organ in utilizationData.records"
|
:key="organ.organNo"
|
:label="organ.organName"
|
:value="organ.organNo"
|
/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="随访类型">
|
<el-select v-model="currentFollowup.followupType" style="width: 100%">
|
<el-option label="常规随访" value="routine" />
|
<el-option label="紧急随访" value="emergency" />
|
<el-option label="特殊随访" value="special" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="20">
|
<el-col :span="12">
|
<el-form-item label="随访时间">
|
<el-date-picker
|
v-model="currentFollowup.followupTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="随访医生">
|
<el-input v-model="currentFollowup.followupDoctor" placeholder="请输入随访医生" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="受者情况">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="currentFollowup.recipientCondition"
|
placeholder="请输入受者当前情况"
|
/>
|
</el-form-item>
|
<el-form-item label="用药情况">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="currentFollowup.medicationSituation"
|
placeholder="请输入用药情况"
|
/>
|
</el-form-item>
|
<el-form-item label="检查结果">
|
<el-input
|
type="textarea"
|
:rows="2"
|
v-model="currentFollowup.testResults"
|
placeholder="请输入检查结果"
|
/>
|
</el-form-item>
|
<el-form-item label="下次随访时间">
|
<el-date-picker
|
v-model="currentFollowup.nextFollowupTime"
|
type="date"
|
value-format="yyyy-MM-dd"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-form>
|
<div slot="footer">
|
<el-button @click="followupDialogVisible = false">取消</el-button>
|
<el-button type="primary" @click="handleSaveFollowup">保存</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getOrganUtilizationDetail,
|
updateOrganUtilization,
|
addOrganUtilization,
|
saveUtilizationRecords,
|
saveFollowupRecord,
|
getHospitalList,
|
getLeaderList,
|
getCoordinatorList
|
} from "./organUtilization";
|
|
export default {
|
name: "OrganUtilizationDetail",
|
dicts: ["sys_user_sex", "sys_Organ", "sys_0_1"],
|
data() {
|
return {
|
// 表单数据
|
form: {
|
id: undefined,
|
hospitalNo: "",
|
caseNo: "",
|
donorName: "",
|
gender: "",
|
age: "",
|
birthDate: "",
|
diagnosis: "",
|
utilizationStatus: "pending",
|
allocationTime: "",
|
registrant: "",
|
registrationTime: "",
|
isBodyDonation: "0",
|
receivingUnit: "",
|
responsibleUserId: "",
|
coordinatedUserId1: "",
|
coordinatedUserId2: "",
|
completionTime: ""
|
},
|
// 表单验证规则
|
rules: {
|
donorName: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
diagnosis: [
|
{ required: true, message: "疾病诊断不能为空", trigger: "blur" }
|
]
|
},
|
// 利用记录验证规则
|
utilizationRules: {},
|
// 保存加载状态
|
saveLoading: false,
|
confirmLoading: false,
|
// 加载状态
|
loading: false,
|
// 选中的器官
|
selectedOrgans: [],
|
// 医院列表
|
hospitalList: [],
|
// 负责人列表
|
leaderList: [],
|
// 协调员列表
|
coordinatorList: [],
|
// 移植状态列表
|
transplantStatusList: [
|
{ value: "1", label: "已移植" },
|
{ value: "0", label: "未移植" },
|
{ value: "2", label: "移植中" }
|
],
|
// 利用记录数据
|
utilizationData: {
|
records: []
|
},
|
// 随访记录数据
|
followupData: {
|
records: []
|
},
|
// 附件数据
|
attachments: [],
|
// 当前激活的受者标签
|
activeRecipientTab: "",
|
// 编辑对话框
|
editDialogVisible: false,
|
currentRecord: {},
|
currentEditIndex: -1,
|
// 随访对话框
|
followupDialogVisible: false,
|
followupDialogTitle: "新增随访记录",
|
currentFollowup: {},
|
isEditingFollowup: false
|
};
|
},
|
computed: {
|
// 当前用户信息
|
currentUser() {
|
return JSON.parse(sessionStorage.getItem("user") || "{}");
|
},
|
// 不完整的记录数量
|
incompleteRecords() {
|
return this.utilizationData.records.filter(
|
record =>
|
!record.caseNo ||
|
!record.hospitalNo ||
|
!record.recipientName ||
|
!record.transplantTime
|
).length;
|
},
|
// 唯一医院数量
|
uniqueHospitals() {
|
const hospitals = this.utilizationData.records
|
.map(record => record.hospitalNo)
|
.filter(Boolean);
|
return new Set(hospitals).size;
|
}
|
},
|
created() {
|
const id = this.$route.query.id;
|
if (id) {
|
this.getDetail(id);
|
} else {
|
this.generateCaseNo();
|
this.form.registrant = this.currentUser.username || "当前用户";
|
this.form.registrationTime = new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
}
|
this.getHospitalData();
|
this.getLeaderData();
|
this.getCoordinatorData();
|
},
|
methods: {
|
// 生成案例编号
|
generateCaseNo() {
|
const timestamp = Date.now().toString();
|
this.form.hospitalNo = "D" + timestamp.slice(-6);
|
this.form.caseNo = "C" + timestamp.slice(-6);
|
},
|
// 获取详情
|
getDetail(id) {
|
this.loading = true;
|
getOrganUtilizationDetail(id)
|
.then(response => {
|
if (response.code === 200) {
|
this.form = response.data;
|
if (response.data.utilizationRecords) {
|
this.utilizationData.records = response.data.utilizationRecords;
|
this.selectedOrgans = response.data.utilizationRecords.map(
|
item => item.organNo
|
);
|
if (this.utilizationData.records.length > 0) {
|
this.activeRecipientTab = this.utilizationData.records[0].organNo;
|
}
|
}
|
if (response.data.followupRecords) {
|
this.followupData.records = response.data.followupRecords;
|
}
|
}
|
this.loading = false;
|
})
|
.catch(error => {
|
console.error("获取器官利用详情失败:", error);
|
this.loading = false;
|
this.$message.error("获取详情失败");
|
});
|
},
|
// 获取医院数据
|
getHospitalData() {
|
getHospitalList().then(response => {
|
if (response.code === 200) {
|
this.hospitalList = response.data;
|
}
|
});
|
},
|
// 获取负责人数据
|
getLeaderData() {
|
getLeaderList().then(response => {
|
if (response.code === 200) {
|
this.leaderList = response.data;
|
}
|
});
|
},
|
// 获取协调员数据
|
getCoordinatorData() {
|
getCoordinatorList().then(response => {
|
if (response.code === 200) {
|
this.coordinatorList = response.data;
|
}
|
});
|
},
|
// 器官选择状态变化
|
handleOrganSelectionChange(selectedValues) {
|
const currentOrganNos = this.utilizationData.records.map(
|
item => item.organNo
|
);
|
|
// 新增选择的器官
|
selectedValues.forEach(organValue => {
|
if (!currentOrganNos.includes(organValue)) {
|
const organInfo = this.dict.type.sys_Organ.find(
|
item => item.value === organValue
|
);
|
if (organInfo) {
|
this.utilizationData.records.push({
|
organName: organInfo.label,
|
organNo: organValue,
|
id: null,
|
utilizationId: this.form.id,
|
caseNo: "",
|
hospitalNo: "",
|
hospitalName: "",
|
recipientName: "",
|
transplantDoctor: "",
|
transplantTime: "",
|
transplantStatus: "1",
|
abandonReason: "",
|
recipientBirthDate: "",
|
recipientGender: "",
|
transplantCenter: "",
|
location: "",
|
originalDisease: "",
|
testIndicators: ""
|
});
|
}
|
}
|
});
|
|
// 移除取消选择的器官
|
this.utilizationData.records = this.utilizationData.records.filter(
|
record => {
|
if (selectedValues.includes(record.organNo)) {
|
return true;
|
} else {
|
if (record.id) {
|
this.$confirm(
|
"删除器官利用数据后将无法恢复，您确认删除该条记录吗？",
|
"提示",
|
{
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
}
|
)
|
.then(() => {
|
this.utilizationData.records = this.utilizationData.records.filter(
|
r => r.organNo !== record.organNo
|
);
|
this.$message.success("删除成功");
|
})
|
.catch(() => {
|
this.selectedOrgans.push(record.organNo);
|
});
|
return true;
|
} else {
|
return false;
|
}
|
}
|
}
|
);
|
},
|
// 医院选择变化
|
handleHospitalChange(row, hospitalNo) {
|
const hospital = this.hospitalList.find(
|
item => item.hospitalNo === hospitalNo
|
);
|
if (hospital) {
|
row.hospitalName = hospital.hospitalName;
|
}
|
},
|
// 编辑利用记录
|
handleEditUtilization(row) {
|
const index = this.utilizationData.records.findIndex(
|
item => item.organNo === row.organNo
|
);
|
if (index !== -1) {
|
this.currentRecord = { ...row };
|
this.currentEditIndex = index;
|
this.editDialogVisible = true;
|
}
|
},
|
// 确认编辑
|
handleEditConfirm() {
|
if (this.currentEditIndex !== -1) {
|
this.utilizationData.records[this.currentEditIndex] = {
|
...this.currentRecord
|
};
|
this.$message.success("利用记录更新成功");
|
this.editDialogVisible = false;
|
}
|
},
|
// 器官行样式
|
getOrganRowClassName({ row }) {
|
if (
|
!row.caseNo ||
|
!row.hospitalNo ||
|
!row.recipientName ||
|
!row.transplantTime
|
) {
|
return "warning-row";
|
}
|
return "";
|
},
|
// 获取状态标签类型
|
getStatusTagType(status) {
|
const typeMap = {
|
completed: "success",
|
in_progress: "warning",
|
pending: "info"
|
};
|
return typeMap[status] || "info";
|
},
|
// 获取状态文本
|
getStatusText(status) {
|
const textMap = {
|
completed: "已完成",
|
in_progress: "进行中",
|
pending: "待处理"
|
};
|
return textMap[status] || "未知";
|
},
|
// 获取随访类型标签
|
getFollowupTypeTag(type) {
|
const typeMap = {
|
routine: "success",
|
emergency: "danger",
|
special: "warning"
|
};
|
return typeMap[type] || "info";
|
},
|
// 获取随访类型文本
|
getFollowupTypeText(type) {
|
const textMap = {
|
routine: "常规随访",
|
emergency: "紧急随访",
|
special: "特殊随访"
|
};
|
return textMap[type] || "未知";
|
},
|
// 保存基本信息
|
handleSave() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.saveLoading = true;
|
const apiMethod = this.form.id
|
? updateOrganUtilization
|
: addOrganUtilization;
|
|
apiMethod(this.form)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success("保存成功");
|
if (!this.form.id) {
|
this.form.id = response.data.id;
|
this.$router.replace({
|
query: { ...this.$route.query, id: this.form.id }
|
});
|
}
|
}
|
})
|
.catch(error => {
|
console.error("保存失败:", error);
|
this.$message.error("保存失败");
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
}
|
});
|
},
|
// 保存利用记录
|
handleSaveUtilization() {
|
if (!this.form.id) {
|
this.$message.warning("请先保存基本信息");
|
return;
|
}
|
|
this.saveLoading = true;
|
saveUtilizationRecords(this.form.id, this.utilizationData.records)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success("利用记录保存成功");
|
}
|
})
|
.catch(error => {
|
console.error("保存利用记录失败:", error);
|
this.$message.error("保存利用记录失败");
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
},
|
// 确认完成利用
|
handleConfirmUtilization() {
|
if (this.incompleteRecords > 0) {
|
this.$message.warning("请先完善所有利用记录的信息");
|
return;
|
}
|
|
this.$confirm("确认完成器官利用吗？完成后将无法修改利用信息。", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.confirmLoading = true;
|
this.form.utilizationStatus = "completed";
|
this.form.completionTime = new Date()
|
.toISOString()
|
.replace("T", " ")
|
.substring(0, 19);
|
|
updateOrganUtilization(this.form)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success("器官利用已完成");
|
}
|
})
|
.catch(error => {
|
console.error("确认利用失败:", error);
|
this.$message.error("确认利用失败");
|
})
|
.finally(() => {
|
this.confirmLoading = false;
|
});
|
})
|
.catch(() => {});
|
},
|
// 完成利用
|
handleComplete() {
|
this.handleConfirmUtilization();
|
},
|
// 新增随访记录
|
handleAddFollowup() {
|
this.followupDialogTitle = "新增随访记录";
|
this.isEditingFollowup = false;
|
this.currentFollowup = {
|
organNo: this.utilizationData.records.length > 0 ? this.utilizationData.records[0].organNo : "",
|
followupTime: new Date().toISOString().replace("T", " ").substring(0, 19),
|
followupType: "routine",
|
recipientCondition: "",
|
medicationSituation: "",
|
testResults: "",
|
nextFollowupTime: "",
|
followupDoctor: ""
|
};
|
this.followupDialogVisible = true;
|
},
|
// 查看随访记录
|
handleViewFollowup(record) {
|
this.currentFollowup = { ...record };
|
this.followupDialogTitle = "查看随访记录";
|
this.followupDialogVisible = true;
|
},
|
// 编辑随访记录
|
handleEditFollowup(record) {
|
this.followupDialogTitle = "编辑随访记录";
|
this.isEditingFollowup = true;
|
this.currentFollowup = { ...record };
|
this.followupDialogVisible = true;
|
},
|
// 删除随访记录
|
handleDeleteFollowup(record) {
|
this.$confirm("确定要删除这条随访记录吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
const index = this.followupData.records.findIndex(
|
item => item.id === record.id
|
);
|
if (index !== -1) {
|
this.followupData.records.splice(index, 1);
|
this.$message.success("随访记录删除成功");
|
}
|
})
|
.catch(() => {});
|
},
|
// 保存随访记录
|
handleSaveFollowup() {
|
if (!this.currentFollowup.organNo) {
|
this.$message.warning("请选择器官");
|
return;
|
}
|
|
if (!this.currentFollowup.followupTime) {
|
this.$message.warning("请选择随访时间");
|
return;
|
}
|
|
this.saveLoading = true;
|
|
// 获取器官名称
|
const organRecord = this.utilizationData.records.find(
|
item => item.organNo === this.currentFollowup.organNo
|
);
|
const organName = organRecord ? organRecord.organName : "";
|
|
const followupData = {
|
...this.currentFollowup,
|
organName: organName,
|
utilizationId: this.form.id
|
};
|
|
saveFollowupRecord(followupData)
|
.then(response => {
|
if (response.code === 200) {
|
if (this.isEditingFollowup) {
|
// 更新现有记录
|
const index = this.followupData.records.findIndex(
|
item => item.id === this.currentFollowup.id
|
);
|
if (index !== -1) {
|
this.followupData.records[index] = response.data;
|
}
|
} else {
|
// 添加新记录
|
this.followupData.records.push(response.data);
|
}
|
this.$message.success("随访记录保存成功");
|
this.followupDialogVisible = false;
|
}
|
})
|
.catch(error => {
|
console.error("保存随访记录失败:", error);
|
this.$message.error("保存随访记录失败");
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
},
|
// 上传附件
|
handleUploadAttachment() {
|
this.$message.info("附件上传功能");
|
},
|
// 预览附件
|
handlePreviewAttachment(attachment) {
|
this.$message.info("附件预览功能");
|
},
|
// 下载附件
|
handleDownloadAttachment(attachment) {
|
this.$message.info("附件下载功能");
|
},
|
// 删除附件
|
handleRemoveAttachment(attachment) {
|
this.$confirm("确定要删除这个附件吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$message.success("附件删除成功");
|
})
|
.catch(() => {});
|
},
|
// 获取文件图标
|
getFileIcon(fileName) {
|
const ext = fileName
|
.split(".")
|
.pop()
|
.toLowerCase();
|
const iconMap = {
|
pdf: "el-icon-document",
|
doc: "el-icon-document",
|
docx: "el-icon-document",
|
xls: "el-icon-document",
|
xlsx: "el-icon-document",
|
jpg: "el-icon-picture",
|
jpeg: "el-icon-picture",
|
png: "el-icon-picture"
|
};
|
return iconMap[ext] || "el-icon-document";
|
},
|
// 获取文件类型
|
getFileType(fileName) {
|
const ext = fileName
|
.split(".")
|
.pop()
|
.toLowerCase();
|
const typeMap = {
|
pdf: "PDF",
|
doc: "DOC",
|
docx: "DOCX",
|
xls: "XLS",
|
xlsx: "XLSX",
|
jpg: "JPG",
|
jpeg: "JPEG",
|
png: "PNG"
|
};
|
return typeMap[ext] || ext.toUpperCase();
|
},
|
// 文件大小格式化
|
formatFileSize(size) {
|
if (size === 0) return "0 B";
|
const k = 1024;
|
const sizes = ["B", "KB", "MB", "GB"];
|
const i = Math.floor(Math.log(size) / Math.log(k));
|
return parseFloat((size / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
},
|
// 时间格式化
|
parseTime(time) {
|
if (!time) return "";
|
const date = new Date(time);
|
return `${date.getFullYear()}-${(date.getMonth() + 1)
|
.toString()
|
.padStart(2, "0")}-${date
|
.getDate()
|
.toString()
|
.padStart(2, "0")} ${date
|
.getHours()
|
.toString()
|
.padStart(2, "0")}:${date
|
.getMinutes()
|
.toString()
|
.padStart(2, "0")}`;
|
},
|
// 提交归档
|
handleSubmitArchive() {
|
this.$confirm("确认提交归档吗？归档后将无法修改数据。", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$message.success("提交归档成功");
|
})
|
.catch(() => {});
|
},
|
// 撤销归档
|
handleRevokeArchive() {
|
this.$confirm("确认撤销归档吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$message.success("撤销归档成功");
|
})
|
.catch(() => {});
|
},
|
// 终止案例
|
handleTerminateCase() {
|
this.$confirm("确认终止案例吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$message.success("案例已终止");
|
})
|
.catch(() => {});
|
},
|
// 恢复案例
|
handleRestoreCase() {
|
this.$confirm("确认恢复案例吗？", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning"
|
})
|
.then(() => {
|
this.$message.success("案例已恢复");
|
})
|
.catch(() => {});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.organ-utilization-detail {
|
padding: 20px;
|
background-color: #f5f7fa;
|
min-height: 100vh;
|
}
|
|
.detail-card, .utilization-card, .recipient-card, .followup-card, .attachment-card {
|
margin-bottom: 20px;
|
border-radius: 8px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
border: 1px solid #e4e7ed;
|
}
|
|
.detail-title {
|
font-size: 18px;
|
font-weight: 600;
|
color: #303133;
|
line-height: 1.4;
|
}
|
/* 表格整体样式 */
|
:deep(.el-table) {
|
border-radius: 8px;
|
overflow: hidden;
|
}
|
:deep(.el-table th) {
|
background-color: #f5f7fa;
|
color: #606266;
|
font-weight: 600;
|
}
|
:deep(.el-table .cell) {
|
padding: 12px 8px;
|
line-height: 1.5;
|
}
|
|
/* 斑马纹表格行 */
|
:deep(.el-table__row.warning-row) {
|
background-color: #fdf6ec;
|
}
|
:deep(.el-table__row.default-row) {
|
background-color: #f0f9ff;
|
}
|
|
/* 鼠标悬停效果 */
|
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
background-color: #f5f7fa !important;
|
}
|
|
/* 统计信息样式 */
|
.utilization-stats {
|
margin-top: 20px;
|
padding: 15px;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border-radius: 8px;
|
color: white;
|
}
|
.stat-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 10px;
|
text-align: center;
|
}
|
.stat-label {
|
font-size: 18px;
|
opacity: 0.9;
|
margin-bottom: 5px;
|
}
|
.stat-value {
|
font-size: 20px;
|
font-weight: bold;
|
}
|
/* 表单标签和输入框样式 */
|
:deep(.el-form-item__label) {
|
font-weight: 500;
|
color: #606266;
|
}
|
:deep(.el-input__inner) {
|
border-radius: 4px;
|
transition: border-color 0.3s ease;
|
}
|
:deep(.el-input__inner:focus) {
|
border-color: #409EFF;
|
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
|
}
|
|
/* 按钮样式优化 */
|
:deep(.el-button--primary) {
|
background: linear-gradient(135deg, #409EFF 0%, #3375e0 100%);
|
border: none;
|
border-radius: 4px;
|
transition: all 0.3s ease;
|
}
|
:deep(.el-button--primary:hover) {
|
transform: translateY(-1px);
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
|
}
|
|
/* 标签页样式 */
|
:deep(.el-tabs__item) {
|
font-weight: 500;
|
}
|
:deep(.el-tabs__active-bar) {
|
background: linear-gradient(135deg, #409EFF 0%, #3375e0 100%);
|
}
|
/* 平板设备适配 */
|
@media (max-width: 1024px) {
|
.organ-utilization-detail {
|
padding: 15px;
|
}
|
:deep(.el-col) {
|
margin-bottom: 10px;
|
}
|
}
|
|
/* 手机设备适配 */
|
@media (max-width: 768px) {
|
.organ-utilization-detail {
|
padding: 10px;
|
}
|
.detail-title {
|
font-size: 16px;
|
}
|
:deep(.el-table .cell) {
|
padding: 8px 4px;
|
font-size: 12px;
|
}
|
:deep(.el-form-item__label) {
|
font-size: 12px;
|
}
|
}
|
|
/* 超小屏幕设备 */
|
@media (max-width: 480px) {
|
.organ-utilization-detail {
|
padding: 5px;
|
}
|
:deep(.el-card__header) {
|
padding: 10px 15px;
|
}
|
}
|
/* 空状态样式 */
|
.empty-utilization {
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
background: #fafafa;
|
border-radius: 4px;
|
margin: 20px 0;
|
}
|
|
/* 加载状态 */
|
:deep(.el-loading-mask) {
|
border-radius: 4px;
|
}
|
|
/* 文件信息样式 */
|
.file-info {
|
display: flex;
|
align-items: center;
|
padding: 5px 0;
|
}
|
.file-info i {
|
font-size: 18px;
|
margin-right: 10px;
|
}
|
|
/* 动画效果 */
|
.fade-enter-active, .fade-leave-active {
|
transition: opacity 0.3s ease;
|
}
|
.fade-enter, .fade-leave-to {
|
opacity: 0;
|
}
|
</style>
|
