<template>
|
<div class="death-judgment-detail">
|
<el-card class="detail-card">
|
<!-- 基础信息 -->
|
<div slot="header" class="clearfix">
|
<span class="detail-title">死亡判定基本信息</span>
|
<el-button
|
v-if="isEdit"
|
type="primary"
|
style="float: right; padding: 3px 0"
|
@click="handleSave"
|
:loading="saveLoading"
|
>
|
保存信息
|
</el-button>
|
</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="!isEdit"
|
placeholder="自动生成 D+数字"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="捐献者姓名" prop="donorName">
|
<el-input v-model="form.donorName" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="性别" prop="gender">
|
<el-select
|
v-model="form.gender"
|
:disabled="!isEdit"
|
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="8">
|
<el-form-item label="年龄" prop="age">
|
<el-input v-model="form.age" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="疾病诊断" prop="diagnosis">
|
<el-input v-model="form.diagnosis" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="死亡原因" prop="deathReason">
|
<el-select
|
v-model="form.deathReason"
|
:disabled="!isEdit"
|
style="width: 100%"
|
>
|
<el-option label="脑死亡" value="brain_death" />
|
<el-option label="心死亡" value="heart_death" />
|
<el-option label="其他" value="other" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="死亡时间" prop="deathTime">
|
<el-date-picker
|
v-model="form.deathTime"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
style="width: 100%"
|
:disabled="!isEdit"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="判定医生" prop="judgmentDoctor">
|
<el-input v-model="form.judgmentDoctor" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="登记人" prop="registrant">
|
<el-input v-model="form.registrant" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-form-item label="死亡判定说明" prop="judgmentDescription">
|
<el-input
|
type="textarea"
|
:rows="3"
|
v-model="form.judgmentDescription"
|
:readonly="!isEdit"
|
placeholder="详细记录死亡判定过程和依据"
|
/>
|
</el-form-item>
|
</el-form>
|
</el-card>
|
|
<!-- 评估表附件 -->
|
<el-card class="attachment-card">
|
<div slot="header" class="clearfix">
|
<span class="detail-title">死亡判定评估表附件</span>
|
<el-button
|
v-if="isEdit"
|
type="primary"
|
size="mini"
|
@click="openUploadDialog"
|
:loading="uploadLoading"
|
>
|
上传附件
|
</el-button>
|
</div>
|
|
<!-- 附件类型选项卡 -->
|
<el-tabs v-model="activeAttachmentType" type="card">
|
<el-tab-pane
|
v-for="type in attachmentTypes"
|
:key="type.value"
|
:label="type.label"
|
:name="type.value"
|
>
|
<div class="attachment-upload-section">
|
<div class="upload-header">
|
<span class="upload-title">{{ type.label }}</span>
|
<el-tooltip content="点击上传该类型评估表" placement="top">
|
<el-button
|
size="mini"
|
type="primary"
|
icon="el-icon-plus"
|
@click="openUploadDialog(type.value)"
|
:disabled="!isEdit"
|
>
|
添加评估表
|
</el-button>
|
</el-tooltip>
|
</div>
|
|
<!-- 附件列表 -->
|
<el-table
|
:data="getAttachmentsByType(type.value)"
|
v-loading="attachmentLoading"
|
style="width: 100%; margin-top: 15px;"
|
>
|
<el-table-column label="文件名称" min-width="200">
|
<template slot-scope="scope">
|
<div class="file-info">
|
<i
|
class="el-icon-document"
|
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="100" align="center">
|
<template slot-scope="scope">
|
<span>{{ scope.row.uploader }}</span>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
label="操作"
|
width="180"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-view"
|
@click="handlePreview(scope.row)"
|
>预览</el-button
|
>
|
<el-button
|
size="mini"
|
type="text"
|
icon="el-icon-download"
|
@click="handleDownload(scope.row)"
|
>下载</el-button
|
>
|
<el-button
|
v-if="isEdit"
|
size="mini"
|
type="text"
|
icon="el-icon-delete"
|
style="color: #F56C6C;"
|
@click="handleRemoveAttachment(scope.row)"
|
>删除</el-button
|
>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
<div
|
v-if="getAttachmentsByType(type.value).length === 0"
|
class="empty-attachment"
|
>
|
<el-empty description="暂无评估表附件" :image-size="80"></el-empty>
|
</div>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
|
<!-- 上传对话框 -->
|
<el-dialog
|
:title="`上传${getCurrentTypeLabel}评估表`"
|
:visible.sync="uploadDialogVisible"
|
width="500px"
|
:close-on-click-modal="false"
|
>
|
<el-upload
|
ref="uploadRef"
|
class="upload-demo"
|
drag
|
action="#"
|
multiple
|
:file-list="tempFileList"
|
:before-upload="beforeUpload"
|
:on-change="handleFileChange"
|
:on-remove="handleTempRemove"
|
:auto-upload="false"
|
>
|
<i class="el-icon-upload"></i>
|
<div class="el-upload__text">将评估表文件拖到此处，或<em>点击上传</em></div>
|
<div class="el-upload__tip" slot="tip">
|
支持上传pdf、jpg、png、doc、docx、xls、xlsx格式文件，单个文件不超过10MB
|
</div>
|
</el-upload>
|
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
<el-button
|
type="primary"
|
@click="submitUpload"
|
:loading="uploadLoading"
|
:disabled="tempFileList.length === 0"
|
>
|
确认上传
|
</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getDeathJudgmentDetail, updateDeathJudgment } from "./mockDeathJudgmentApi";
|
|
export default {
|
name: "DeathJudgmentDetail",
|
data() {
|
return {
|
// 是否编辑模式
|
isEdit: false,
|
// 保存加载状态
|
saveLoading: false,
|
// 表单数据
|
form: {
|
id: undefined,
|
hospitalNo: "",
|
donorName: "",
|
gender: "",
|
age: "",
|
diagnosis: "",
|
deathReason: "",
|
deathTime: "",
|
judgmentDoctor: "",
|
judgmentDescription: "",
|
registrant: "",
|
registrationTime: ""
|
},
|
// 表单验证规则
|
rules: {
|
donorName: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
deathReason: [
|
{ required: true, message: "死亡原因不能为空", trigger: "change" }
|
],
|
deathTime: [
|
{ required: true, message: "死亡时间不能为空", trigger: "change" }
|
],
|
judgmentDoctor: [
|
{ required: true, message: "判定医生不能为空", trigger: "blur" }
|
]
|
},
|
// 附件相关数据
|
activeAttachmentType: "1",
|
attachmentLoading: false,
|
uploadDialogVisible: false,
|
uploadLoading: false,
|
tempFileList: [],
|
currentUploadType: "",
|
|
// 评估表类型定义
|
attachmentTypes: [
|
{ value: "1", label: "脑死亡判定表" },
|
{ value: "2", label: "脑电图评估表" },
|
{ value: "3", label: "短潜伏期体感诱发电位评估表" },
|
{ value: "4", label: "经颅多普勒超声评估记录" },
|
{ value: "5", label: "卫健委脑损伤质控中心 - 临床综合评估表" },
|
{ value: "6", label: "UW评分表" },
|
{ value: "7", label: "心死亡判定表" }
|
],
|
|
// 附件列表数据
|
attachmentList: []
|
};
|
},
|
computed: {
|
getCurrentTypeLabel() {
|
const type = this.attachmentTypes.find(
|
t => t.value === this.currentUploadType
|
);
|
return type ? type.label : "";
|
}
|
},
|
created() {
|
const id = this.$route.query.id;
|
this.isEdit = this.$route.path.includes('/edit') || this.$route.path.includes('/add');
|
if (id && !this.$route.path.includes('/add')) {
|
this.getDetail(id);
|
} else if (this.$route.path.includes('/add')) {
|
this.generateHospitalNo();
|
}
|
this.getAttachmentList();
|
},
|
methods: {
|
// 生成案例编号
|
generateHospitalNo() {
|
// 模拟生成案例编号：D + 时间戳后6位
|
const timestamp = Date.now().toString();
|
this.form.hospitalNo = 'D' + timestamp.slice(-6);
|
},
|
// 获取详情
|
getDetail(id) {
|
getDeathJudgmentDetail(id).then(response => {
|
if (response.code === 200) {
|
this.form = response.data;
|
}
|
});
|
},
|
// 获取附件列表
|
getAttachmentList() {
|
this.attachmentLoading = true;
|
// 模拟附件数据 - 实际项目中从接口获取
|
setTimeout(() => {
|
this.attachmentList = [
|
{
|
id: 1,
|
type: "1",
|
typeName: "脑死亡判定表",
|
fileName: "脑死亡判定表_202312001.pdf",
|
fileSize: 2548321,
|
uploadTime: "2023-12-01 10:30:00",
|
uploader: "张医生",
|
fileUrl: "/attachments/brain_death_1.pdf"
|
},
|
{
|
id: 2,
|
type: "2",
|
typeName: "脑电图评估表",
|
fileName: "脑电图评估表_202312001.docx",
|
fileSize: 512345,
|
uploadTime: "2023-12-01 14:20:00",
|
uploader: "李医生",
|
fileUrl: "/attachments/eeg_1.docx"
|
}
|
];
|
this.attachmentLoading = false;
|
}, 500);
|
},
|
// 根据类型获取附件
|
getAttachmentsByType(type) {
|
return this.attachmentList.filter(item => item.type === type);
|
},
|
// 获取文件类型
|
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();
|
},
|
// 打开上传对话框
|
openUploadDialog(type = null) {
|
this.currentUploadType = type || this.activeAttachmentType;
|
this.tempFileList = [];
|
this.uploadDialogVisible = true;
|
this.$nextTick(() => {
|
if (this.$refs.uploadRef) {
|
this.$refs.uploadRef.clearFiles();
|
}
|
});
|
},
|
// 上传前校验
|
beforeUpload(file) {
|
const allowedTypes = [
|
'application/pdf',
|
'image/jpeg',
|
'image/png',
|
'application/msword',
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
|
'application/vnd.ms-excel',
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
];
|
|
const maxSize = 10 * 1024 * 1024; // 10MB
|
|
// 校验文件类型
|
const isTypeOk = allowedTypes.includes(file.type) ||
|
file.name.endsWith('.pdf') ||
|
file.name.endsWith('.jpg') ||
|
file.name.endsWith('.jpeg') ||
|
file.name.endsWith('.png') ||
|
file.name.endsWith('.doc') ||
|
file.name.endsWith('.docx') ||
|
file.name.endsWith('.xls') ||
|
file.name.endsWith('.xlsx');
|
|
if (!isTypeOk) {
|
this.$message.error('文件格式不支持，请上传pdf、jpg、png、doc、docx、xls或xlsx格式文件');
|
return false;
|
}
|
|
// 校验文件大小
|
if (file.size > maxSize) {
|
this.$message.error('文件大小不能超过10MB');
|
return false;
|
}
|
|
return true;
|
},
|
// 文件选择变化
|
handleFileChange(file, fileList) {
|
this.tempFileList = fileList;
|
},
|
// 移除临时文件
|
handleTempRemove(file, fileList) {
|
this.tempFileList = fileList;
|
},
|
// 提交上传
|
async submitUpload() {
|
if (this.tempFileList.length === 0) {
|
this.$message.warning('请先选择要上传的文件');
|
return;
|
}
|
|
this.uploadLoading = true;
|
|
try {
|
// 模拟上传过程 - 实际项目中调用上传接口
|
for (const file of this.tempFileList) {
|
const newAttachment = {
|
id: Date.now() + Math.random(),
|
type: this.currentUploadType,
|
typeName: this.getCurrentTypeLabel,
|
fileName: file.name,
|
fileSize: file.size,
|
uploadTime: new Date().toISOString(),
|
uploader: '当前用户',
|
fileUrl: URL.createObjectURL(file.raw)
|
};
|
|
this.attachmentList.push(newAttachment);
|
}
|
|
this.$message.success('文件上传成功');
|
this.uploadDialogVisible = false;
|
this.tempFileList = [];
|
} catch (error) {
|
this.$message.error('文件上传失败');
|
console.error('上传失败:', error);
|
} finally {
|
this.uploadLoading = false;
|
}
|
},
|
// 删除附件
|
handleRemoveAttachment(attachment) {
|
this.$confirm('确定要删除这个评估表附件吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = this.attachmentList.findIndex(item => item.id === attachment.id);
|
if (index !== -1) {
|
this.attachmentList.splice(index, 1);
|
this.$message.success('评估表删除成功');
|
}
|
}).catch(() => {});
|
},
|
// 预览附件
|
handlePreview(attachment) {
|
if (attachment.fileName.endsWith('.pdf')) {
|
window.open(attachment.fileUrl, '_blank');
|
} else if (attachment.fileName.match(/\.(jpg|jpeg|png)$/i)) {
|
this.$alert(`<img src="${attachment.fileUrl}" style="max-width: 100%;" alt="${attachment.fileName}">`,
|
'图片预览', {
|
dangerouslyUseHTMLString: true,
|
customClass: 'image-preview-dialog'
|
});
|
} else {
|
this.$message.info('该文件类型暂不支持在线预览，请下载后查看');
|
}
|
},
|
// 下载附件
|
handleDownload(attachment) {
|
// 实际项目中调用下载接口
|
const link = document.createElement('a');
|
link.href = attachment.fileUrl;
|
link.download = attachment.fileName;
|
link.click();
|
this.$message.success(`开始下载: ${attachment.fileName}`);
|
},
|
// 保存信息
|
handleSave() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.saveLoading = true;
|
|
// 模拟保存过程
|
updateDeathJudgment(this.form)
|
.then(response => {
|
if (response.code === 200) {
|
this.$message.success('保存成功');
|
if (this.$route.path.includes('/add')) {
|
this.$router.push('/case/deathJudgment');
|
} else {
|
this.isEdit = false;
|
}
|
}
|
})
|
.catch(error => {
|
console.error('保存失败:', error);
|
this.$message.error('保存失败');
|
})
|
.finally(() => {
|
this.saveLoading = false;
|
});
|
}
|
});
|
},
|
// 文件大小格式化
|
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')}`;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.death-judgment-detail {
|
padding: 20px;
|
}
|
|
.detail-card {
|
margin-bottom: 20px;
|
}
|
|
.attachment-card {
|
margin-bottom: 20px;
|
}
|
|
.detail-title {
|
font-size: 16px;
|
font-weight: bold;
|
}
|
|
.attachment-upload-section {
|
padding: 10px;
|
}
|
|
.upload-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 15px;
|
}
|
|
.upload-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: #303133;
|
}
|
|
.file-info {
|
display: flex;
|
align-items: center;
|
}
|
|
.empty-attachment {
|
text-align: center;
|
padding: 40px 0;
|
color: #909399;
|
}
|
|
/* 图片预览对话框样式 */
|
:deep(.image-preview-dialog) {
|
width: auto;
|
max-width: 90vw;
|
}
|
|
:deep(.image-preview-dialog .el-message-box__content) {
|
text-align: center;
|
}
|
</style>
|
