<template>
|
<div class="organ-assessment-form">
|
<el-form :model="organData" label-width="120px">
|
<el-form-item label="功能状态">
|
<el-select v-model="organData.functionStatus" :disabled="readonly">
|
<el-option label="正常" value="1" />
|
<el-option label="轻度异常" value="2" />
|
<el-option label="重度异常" value="3" />
|
<el-option label="无法评估" value="4" />
|
</el-select>
|
</el-form-item>
|
|
<el-form-item label="评估意见">
|
<el-input
|
type="textarea"
|
v-model="organData.assessmentOpinion"
|
:rows="4"
|
:disabled="readonly"
|
placeholder="请输入评估意见"
|
/>
|
</el-form-item>
|
|
<!-- 器官级别附件管理 -->
|
<el-form-item label="相关附件">
|
<div class="attachment-section">
|
<el-upload
|
v-if="!readonly"
|
class="attachment-upload"
|
action="/api/attachment/upload"
|
:headers="uploadHeaders"
|
:on-success="handleUploadSuccess"
|
:on-error="handleUploadError"
|
:before-upload="beforeUpload"
|
:show-file-list="false"
|
:multiple="true"
|
>
|
<el-button size="small" type="primary" icon="el-icon-upload">
|
上传附件
|
</el-button>
|
<div slot="tip" class="el-upload__tip">
|
支持图片、文档等格式，单个文件不超过10MB
|
</div>
|
</el-upload>
|
|
<!-- 附件列表 -->
|
<div v-if="organData.attachments && organData.attachments.length > 0" class="attachment-list">
|
<div v-for="file in organData.attachments" :key="file.id" class="attachment-item">
|
<div class="file-info">
|
<i :class="getFileIcon(file.fileType)" class="file-icon"></i>
|
<span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
|
<span class="file-size">({{ formatFileSize(file.fileSize) }})</span>
|
</div>
|
<div class="file-actions">
|
<el-button type="text" size="mini" @click="handlePreview(file)">预览</el-button>
|
<el-button type="text" size="mini" @click="handleDownload(file)">下载</el-button>
|
<el-button
|
v-if="!readonly"
|
type="text"
|
size="mini"
|
style="color: #F56C6C;"
|
@click="handleDeleteFile(file)"
|
>删除</el-button>
|
</div>
|
</div>
|
</div>
|
|
<div v-else class="no-attachment">
|
<el-empty description="暂无附件" :image-size="50"></el-empty>
|
</div>
|
</div>
|
</el-form-item>
|
|
<el-form-item v-if="!readonly">
|
<el-button type="primary" @click="handleSave">保存评估</el-button>
|
<el-button @click="handleCancel">取消</el-button>
|
</el-form-item>
|
</el-form>
|
|
<!-- 附件预览弹窗 -->
|
<el-dialog
|
:title="`附件预览 - ${currentFile.fileName}`"
|
:visible.sync="previewVisible"
|
width="60%"
|
>
|
<div v-if="isImage(currentFile.fileType)" class="image-preview">
|
<img :src="currentFile.fileUrl" alt="预览图片" style="max-width: 100%;" />
|
</div>
|
<div v-else class="file-preview">
|
<el-alert
|
title="该文件格式不支持在线预览，请下载后查看"
|
type="info"
|
show-icon
|
/>
|
<div style="text-align: center; margin-top: 20px;">
|
<el-button type="primary" @click="handleDownload(currentFile)">
|
<i class="el-icon-download"></i> 下载文件
|
</el-button>
|
</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import { getToken } from '@/utils/auth'
|
|
export default {
|
name: "OrganAssessmentForm",
|
props: {
|
organData: {
|
type: Object,
|
default: () => ({
|
attachments: [] // 确保有附件数组
|
})
|
},
|
readonly: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
previewVisible: false,
|
currentFile: {},
|
uploadHeaders: {
|
Authorization: 'Bearer ' + getToken()
|
}
|
};
|
},
|
methods: {
|
handleSave() {
|
this.$emit('save', {
|
...this.organData,
|
assessmentTime: new Date().toISOString(),
|
assessor: '当前用户'
|
});
|
},
|
|
handleCancel() {
|
this.$emit('cancel');
|
},
|
|
// 文件上传处理
|
handleUploadSuccess(response, file) {
|
if (response.code === 200) {
|
// 将新文件添加到附件列表
|
const newFile = {
|
id: response.data.fileId,
|
fileName: file.name,
|
fileType: this.getFileExtension(file.name),
|
fileSize: file.size,
|
fileUrl: response.data.fileUrl,
|
uploadTime: new Date().toISOString()
|
};
|
|
if (!this.organData.attachments) {
|
this.organData.attachments = [];
|
}
|
this.organData.attachments.push(newFile);
|
|
this.$message.success('文件上传成功');
|
}
|
},
|
|
handleUploadError(error) {
|
console.error('文件上传失败:', error);
|
this.$message.error('文件上传失败');
|
},
|
|
beforeUpload(file) {
|
const isLt10M = file.size / 1024 / 1024 < 10;
|
if (!isLt10M) {
|
this.$message.error('文件大小不能超过 10MB');
|
return false;
|
}
|
return true;
|
},
|
|
// 文件操作
|
handlePreview(file) {
|
this.currentFile = file;
|
this.previewVisible = true;
|
},
|
|
handleDownload(file) {
|
// 模拟文件下载
|
const link = document.createElement('a');
|
link.href = file.fileUrl;
|
link.download = file.fileName;
|
link.click();
|
this.$message.success('开始下载文件');
|
},
|
|
handleDeleteFile(file) {
|
this.$confirm('确定要删除这个附件吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
const index = this.organData.attachments.findIndex(f => f.id === file.id);
|
if (index !== -1) {
|
this.organData.attachments.splice(index, 1);
|
this.$message.success('删除成功');
|
}
|
});
|
},
|
|
// 工具方法
|
getFileIcon(fileType) {
|
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',
|
'gif': 'el-icon-picture'
|
};
|
return iconMap[fileType] || 'el-icon-document';
|
},
|
|
getFileExtension(filename) {
|
return filename.split('.').pop().toLowerCase();
|
},
|
|
formatFileSize(bytes) {
|
if (bytes === 0) return '0 B';
|
const k = 1024;
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
},
|
|
isImage(fileType) {
|
const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
|
return imageTypes.includes(fileType);
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.organ-assessment-form {
|
padding: 20px;
|
}
|
|
.attachment-section {
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
padding: 15px;
|
}
|
|
.attachment-upload {
|
margin-bottom: 15px;
|
}
|
|
.attachment-list {
|
max-height: 300px;
|
overflow-y: auto;
|
}
|
|
.attachment-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 8px 12px;
|
border-bottom: 1px solid #f0f0f0;
|
}
|
|
.attachment-item:last-child {
|
border-bottom: none;
|
}
|
|
.file-info {
|
display: flex;
|
align-items: center;
|
flex: 1;
|
}
|
|
.file-icon {
|
margin-right: 8px;
|
font-size: 16px;
|
color: #409EFF;
|
}
|
|
.file-name {
|
flex: 1;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-right: 8px;
|
}
|
|
.file-size {
|
color: #909399;
|
font-size: 12px;
|
}
|
|
.file-actions {
|
flex-shrink: 0;
|
}
|
|
.no-attachment {
|
text-align: center;
|
padding: 20px;
|
color: #909399;
|
}
|
</style>
|
