<!-- CaseDetailPreview.vue -->
|
<template>
|
<div class="case-detail-preview">
|
<!-- 基本信息 -->
|
<div class="preview-section">
|
<h4>基本信息</h4>
|
<div class="preview-content">
|
<div class="preview-item">
|
<label>捐献编号：</label><span>{{ caseData.donorNo }}</span>
|
</div>
|
<div class="preview-item">
|
<label>捐献者姓名：</label><span>{{ caseData.donorName }}</span>
|
</div>
|
<div class="preview-item">
|
<label>性别：</label
|
><span>{{ caseData.gender === "0" ? "男" : "女" }}</span>
|
</div>
|
<div class="preview-item">
|
<label>年龄：</label><span>{{ caseData.age }}岁</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 医疗信息 -->
|
<div class="preview-section">
|
<h4>医疗信息</h4>
|
<div class="preview-content">
|
<div class="preview-item full-width">
|
<label>疾病诊断：</label><span>{{ caseData.diagnosis }}</span>
|
</div>
|
<div class="preview-item">
|
<label>住院号：</label><span>{{ caseData.inpatientNo }}</span>
|
</div>
|
<div class="preview-item">
|
<label>主治医生：</label><span>{{ caseData.doctorName }}</span>
|
</div>
|
</div>
|
</div>
|
|
<!-- 医院信息 -->
|
<div class="preview-section">
|
<h4>医院信息</h4>
|
<div class="preview-content">
|
<div class="preview-item">
|
<label>医院名称：</label><span>{{ caseData.hospitalName }}</span>
|
</div>
|
<div class="preview-item full-width">
|
<label>医院地址：</label><span>{{ caseData.hospitalAddress }}</span>
|
</div>
|
</div>
|
</div>
|
<!-- 附件信息模块 -->
|
<el-card class="detail-section">
|
<div slot="header" class="section-header">
|
<span class="section-title">附件信息</span>
|
<el-button type="text" icon="el-icon-upload" @click="handleUpload"
|
>上传附件</el-button
|
>
|
</div>
|
<el-table :data="attachmentList" style="width: 100%">
|
<el-table-column label="文件名" width="300">
|
<template slot-scope="scope">
|
<i class="el-icon-document" style="margin-right: 8px;"></i>
|
<span>{{ scope.row.fileName }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="文件类型" width="120">
|
<template slot-scope="scope">
|
<el-tag size="small">{{ scope.row.fileType }}</el-tag>
|
</template>
|
</el-table-column>
|
<el-table-column label="大小" width="100">
|
<template slot-scope="scope">
|
<span>{{ formatFileSize(scope.row.fileSize) }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="上传时间" width="180">
|
<template slot-scope="scope">
|
<span>{{ scope.row.uploadTime }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作">
|
<template slot-scope="scope">
|
<el-button size="mini" @click="handlePreview(scope.row)"
|
>预览</el-button
|
>
|
<el-button
|
size="mini"
|
type="success"
|
@click="handleDownload(scope.row)"
|
>下载</el-button
|
>
|
<el-button
|
size="mini"
|
type="danger"
|
@click="handleDelete(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</div>
|
</template>
|
|
<script>
|
import pdf from "vue-pdf";
|
|
export default {
|
name: "CaseDetailPreview",
|
components: {
|
pdf
|
},
|
props: {
|
caseData: {
|
type: Object,
|
default: () => ({})
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.preview-section {
|
margin-bottom: 20px;
|
padding-bottom: 15px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
|
.preview-section h4 {
|
margin: 0 0 10px 0;
|
color: #409eff;
|
font-size: 14px;
|
}
|
|
.preview-content {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 10px;
|
}
|
|
.preview-item {
|
display: flex;
|
width: calc(50% - 10px);
|
margin-bottom: 8px;
|
}
|
|
.preview-item.full-width {
|
width: 100%;
|
}
|
|
.preview-item label {
|
font-weight: bold;
|
color: #606266;
|
min-width: 80px;
|
}
|
|
.preview-item span {
|
color: #303133;
|
word-break: break-all;
|
}
|
</style>
|
