<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>
|
<el-button
|
v-else
|
type="primary"
|
style="float: right; padding: 3px 0"
|
@click="handleEdit"
|
>
|
编辑信息
|
</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="donorno">
|
<el-input
|
v-model="form.donorno"
|
:readonly="!isEdit"
|
placeholder="自动生成捐献者编号"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="捐献者姓名" prop="name">
|
<el-input v-model="form.name" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="性别" prop="sex">
|
<el-select
|
v-model="form.sex"
|
:disabled="!isEdit"
|
style="width: 100%"
|
>
|
<el-option label="男" value="1" />
|
<el-option label="女" value="2" />
|
</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="diagnosisname">
|
<el-input v-model="form.diagnosisname" :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="deathjudgedocto">
|
<el-input v-model="form.deathjudgedocto" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="判定医生二" prop="deathjudgedoctt">
|
<el-input v-model="form.deathjudgedoctt" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="器官获取机构" prop="gainhospitalname">
|
<el-input v-model="form.gainhospitalname" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="是否默哀缅怀" prop="isspendremember">
|
<el-select
|
v-model="form.isspendremember"
|
:disabled="!isEdit"
|
style="width: 100%"
|
>
|
<el-option label="是" :value="1" />
|
<el-option label="否" :value="0" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="是否恢复遗体仪容" prop="isrestoreremains">
|
<el-select
|
v-model="form.isrestoreremains"
|
:disabled="!isEdit"
|
style="width: 100%"
|
>
|
<el-option label="是" :value="1" />
|
<el-option label="否" :value="0" />
|
</el-select>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row :gutter="20">
|
<el-col :span="8">
|
<el-form-item label="负责人" prop="responsibleusername">
|
<el-input v-model="form.responsibleusername" :readonly="!isEdit" />
|
</el-form-item>
|
</el-col>
|
<el-col :span="8">
|
<el-form-item label="记录状态" prop="recordstate">
|
<el-tag :type="getStatusTag(form.recordstate)">
|
{{ getStatusText(form.recordstate) }}
|
</el-tag>
|
</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 { deathinfoedit, deathinfoInfo } from "@/api/businessApi";
|
|
export default {
|
name: "DeathJudgmentDetail",
|
data() {
|
return {
|
// 是否编辑模式
|
isEdit: false,
|
// 保存加载状态
|
saveLoading: false,
|
// 表单数据
|
form: {
|
id: undefined,
|
infoid: undefined,
|
donorno: "",
|
name: "",
|
sex: "",
|
age: "",
|
diagnosisname: "",
|
deathreason: "",
|
deathtime: "",
|
deathjudgedocto: "",
|
deathjudgedoctt: "",
|
gainhospitalno: "",
|
gainhospitalname: "",
|
isspendremember: 0,
|
isrestoreremains: 0,
|
rememberannex: "",
|
responsibleuserid: "",
|
responsibleusername: "",
|
recordstate: "0",
|
judgmentDescription: ""
|
},
|
// 表单验证规则
|
rules: {
|
name: [
|
{ required: true, message: "捐献者姓名不能为空", trigger: "blur" }
|
],
|
deathreason: [
|
{ required: true, message: "死亡原因不能为空", trigger: "change" }
|
],
|
deathtime: [
|
{ required: true, message: "死亡时间不能为空", trigger: "change" }
|
],
|
deathjudgedocto: [
|
{ 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.generateDonorNo();
|
}
|
this.getAttachmentList();
|
},
|
methods: {
|
// 生成捐献者编号
|
generateDonorNo() {
|
const timestamp = Date.now().toString();
|
this.form.donorno = 'DONOR' + timestamp.slice(-8);
|
},
|
// 获取详情
|
async getDetail(id) {
|
try {
|
const response = await deathinfoInfo({ id });
|
let realData = {};
|
|
if (response && response.data) {
|
realData = response.data;
|
} else if (response) {
|
realData = response;
|
}
|
|
// 映射字段到表单
|
this.form = {
|
...this.form,
|
...realData,
|
// 确保数值类型字段正确转换
|
isspendremember: realData.isspendremember ? parseInt(realData.isspendremember) : 0,
|
isrestoreremains: realData.isrestoreremains ? parseInt(realData.isrestoreremains) : 0
|
};
|
|
// 解析附件信息
|
if (realData.rememberannex) {
|
this.parseAttachmentData(realData.rememberannex);
|
}
|
|
} catch (error) {
|
console.error('获取死亡判定详情失败:', error);
|
this.$message.error('数据加载失败');
|
}
|
},
|
// 解析附件数据
|
parseAttachmentData(attachmentJson) {
|
try {
|
if (attachmentJson) {
|
const attachments = JSON.parse(attachmentJson);
|
if (Array.isArray(attachments)) {
|
this.attachmentList = attachments;
|
}
|
}
|
} catch (error) {
|
console.error('解析附件数据失败:', error);
|
}
|
},
|
// 构建附件JSON数据
|
buildAttachmentJson() {
|
return JSON.stringify(this.attachmentList);
|
},
|
// 获取状态标签样式
|
getStatusTag(status) {
|
const statusMap = {
|
"0": "warning", // 维护中
|
"1": "success", // 已完成
|
"99": "danger" // 已终止
|
};
|
return statusMap[status] || "info";
|
},
|
// 获取状态文本
|
getStatusText(status) {
|
const textMap = {
|
"0": "维护中",
|
"1": "已完成",
|
"99": "已终止"
|
};
|
return textMap[status] || "未知状态";
|
},
|
// 获取附件列表
|
getAttachmentList() {
|
this.attachmentLoading = true;
|
// 实际项目中从接口获取附件数据
|
setTimeout(() => {
|
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);
|
}
|
|
// 更新附件JSON数据到表单
|
this.form.rememberannex = this.buildAttachmentJson();
|
|
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);
|
// 更新附件JSON数据到表单
|
this.form.rememberannex = this.buildAttachmentJson();
|
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}`);
|
},
|
// 编辑信息
|
handleEdit() {
|
this.isEdit = true;
|
},
|
// 保存信息
|
async handleSave() {
|
this.$refs.form.validate(async valid => {
|
if (valid) {
|
this.saveLoading = true;
|
|
try {
|
// 构建提交数据
|
const submitData = {
|
...this.form,
|
// 确保附件数据最新
|
rememberannex: this.buildAttachmentJson()
|
};
|
|
const response = await deathinfoedit(submitData);
|
|
if (response.code === 200) {
|
this.$message.success('保存成功');
|
this.isEdit = false;
|
|
if (this.$route.path.includes('/add')) {
|
this.$router.push('/case/deathJudgment');
|
}
|
} else {
|
this.$message.error(response.message || '保存失败');
|
}
|
} 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>
|
