From 2431480f5859ef40dfdf0eb19e1ba6ddebbd9ef2 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期一, 29 十二月 2025 20:06:22 +0800
Subject: [PATCH] 项目页面优化
---
src/views/business/assess/components/OrganAssessmentForm.vue | 258 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 256 insertions(+), 2 deletions(-)
diff --git a/src/views/business/assess/components/OrganAssessmentForm.vue b/src/views/business/assess/components/OrganAssessmentForm.vue
index 29e03e9..9a17291 100644
--- a/src/views/business/assess/components/OrganAssessmentForm.vue
+++ b/src/views/business/assess/components/OrganAssessmentForm.vue
@@ -1,4 +1,3 @@
-<!-- src/views/case/assessment/components/OrganAssessmentForm.vue -->
<template>
<div class="organ-assessment-form">
<el-form :model="organData" label-width="120px">
@@ -10,6 +9,7 @@
<el-option label="鏃犳硶璇勪及" value="4" />
</el-select>
</el-form-item>
+
<el-form-item label="璇勪及鎰忚">
<el-input
type="textarea"
@@ -19,26 +19,113 @@
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: () => ({})
+ default: () => ({
+ attachments: [] // 纭繚鏈夐檮浠舵暟缁�
+ })
},
readonly: {
type: Boolean,
default: false
}
+ },
+ data() {
+ return {
+ previewVisible: false,
+ currentFile: {},
+ uploadHeaders: {
+ Authorization: 'Bearer ' + getToken()
+ }
+ };
},
methods: {
handleSave() {
@@ -48,9 +135,176 @@
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>
--
Gitblit v1.9.3