From c441e5f3cb734b5db5e893536f267b13814796f5 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期三, 11 三月 2026 10:12:06 +0800
Subject: [PATCH] 青岛推送

---
 src/views/business/assess/components/OrganAssessmentForm.vue |  663 +++++++++++++++++++++++++++++++++++++++---------------
 1 files changed, 475 insertions(+), 188 deletions(-)

diff --git a/src/views/business/assess/components/OrganAssessmentForm.vue b/src/views/business/assess/components/OrganAssessmentForm.vue
index 9a17291..1b732dd 100644
--- a/src/views/business/assess/components/OrganAssessmentForm.vue
+++ b/src/views/business/assess/components/OrganAssessmentForm.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="organ-assessment-form">
-    <el-form :model="organData" label-width="120px">
+    <el-form :model="formData" label-width="120px">
       <el-form-item label="鍔熻兘鐘舵��">
-        <el-select v-model="organData.functionStatus" :disabled="readonly">
+        <el-select v-model="formData.functionStatus">
           <el-option label="姝ｅ父" value="1" />
           <el-option label="杞诲害寮傚父" value="2" />
           <el-option label="閲嶅害寮傚父" value="3" />
@@ -13,232 +13,523 @@
       <el-form-item label="璇勪及鎰忚">
         <el-input
           type="textarea"
-          v-model="organData.assessmentOpinion"
+          v-model="formData.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 class="attachment-header">
+            <i class="el-icon-paperclip"></i>
+            <span class="attachment-title">闄勪欢涓婁紶</span>
+            <span class="attachment-tip"
+              >鏀寔涓婁紶妫�楠屾姤鍛婂崟绛夋枃浠� (鏈�澶歿{ attachmentLimit }}涓�)</span
+            >
           </div>
 
-          <div v-else class="no-attachment">
-            <el-empty description="鏆傛棤闄勪欢" :image-size="50"></el-empty>
+          <!-- 浣跨敤 UploadAttachment 缁勪欢 -->
+          <UploadAttachment
+            ref="uploadAttachment"
+            :file-list="attachmentFileList"
+            :limit="attachmentLimit"
+            :accept="attachmentAccept"
+            :multiple="true"
+            @change="handleAttachmentChange"
+            @upload-success="handleUploadSuccess"
+            @upload-error="handleUploadError"
+            @remove="handleAttachmentRemove"
+          />
+
+          <!-- 闄勪欢鍒楄〃 -->
+          <div
+            class="attachment-list"
+            v-if="formData.attachments && formData.attachments.length > 0"
+          >
+            <div class="list-title">
+              宸蹭笂浼犻檮浠� ({{ formData.attachments.length }})
+            </div>
+            <el-table
+              :data="formData.attachments"
+              style="width: 100%"
+              size="small"
+            >
+              <el-table-column label="鏂囦欢鍚�" min-width="200">
+                <template slot-scope="scope">
+                  <i
+                    class="el-icon-document"
+                    :style="{ color: getFileIconColor(scope.row.fileName) }"
+                  ></i>
+                  <span class="file-name">{{ scope.row.fileName }}</span>
+                </template>
+              </el-table-column>
+              <el-table-column label="鏂囦欢绫诲瀷" width="100">
+                <template slot-scope="scope">
+                  <el-tag
+                    :type="getFileTagType(scope.row.fileName)"
+                    size="small"
+                  >
+                    {{ getFileTypeText(scope.row.fileName) }}
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="涓婁紶鏃堕棿" width="160">
+                <template slot-scope="scope">
+                  <span>{{ formatDateTime(scope.row.uploadTime) }}</span>
+                </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="266" fixed="right">
+                <template slot-scope="scope">
+                  <el-button
+                    size="mini"
+                    type="primary"
+                    @click="handlePreview(scope.row)"
+                    :disabled="!isPreviewable(scope.row.fileName)"
+                  >
+                    棰勮
+                  </el-button>
+                  <el-button
+                    size="mini"
+                    type="success"
+                    @click="handleDownload(scope.row)"
+                  >
+                    涓嬭浇
+                  </el-button>
+                  <el-button
+                    v-if="!readonly"
+                    size="mini"
+                    type="danger"
+                    @click="handleRemoveAttachment(scope.$index)"
+                  >
+                    鍒犻櫎
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
         </div>
       </el-form-item>
 
       <el-form-item v-if="!readonly">
-        <el-button type="primary" @click="handleSave">淇濆瓨璇勪及</el-button>
+        <el-button type="primary" @click="handleSave">璇勪及瀹屾垚</el-button>
         <el-button @click="handleCancel">鍙栨秷</el-button>
+        <el-button
+          type="danger"
+          size="small"
+          @click="handleDelete"
+          icon="el-icon-delete"
+        >
+          鍒犻櫎姝よ瘎浼�
+        </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>
+    <!-- 鏂囦欢棰勮寮圭獥 -->
+    <FilePreviewDialog
+      :visible="previewVisible"
+      :file="currentPreviewFile"
+      @close="previewVisible = false"
+      @download="handleDownload"
+    />
   </div>
 </template>
 
 <script>
-import { getToken } from '@/utils/auth'
+import UploadAttachment from "@/components/UploadAttachment";
+import FilePreviewDialog from "@/components/FilePreviewDialog";
+import dayjs from "dayjs";
 
 export default {
   name: "OrganAssessmentForm",
+  components: {
+    UploadAttachment,
+    FilePreviewDialog
+  },
   props: {
     organData: {
       type: Object,
-      default: () => ({
-        attachments: [] // 纭繚鏈夐檮浠舵暟缁�
-      })
+      default: () => ({})
+    },
+    assessmentIndex: {
+      type: Number,
+      default: 0
     },
     readonly: {
       type: Boolean,
       default: false
+    },
+    // 娣诲姞鐢ㄦ埛淇℃伅props
+    currentUser: {
+      type: Object,
+      default: () => ({
+        name: "璇勪及鍛�"
+      })
     }
   },
   data() {
     return {
+      // 琛ㄥ崟鏁版嵁
+      formData: {
+        functionStatus: "",
+        assessmentOpinion: "",
+        attachments: []
+      },
+      // 棰勮鐩稿叧
       previewVisible: false,
-      currentFile: {},
-      uploadHeaders: {
-        Authorization: 'Bearer ' + getToken()
-      }
+      currentPreviewFile: null,
+      // 闄勪欢鐩稿叧閰嶇疆
+      attachmentLimit: 10,
+      attachmentAccept:
+        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+      attachmentFileList: [],
+      // 鍘熷璇勪及鏁版嵁
+      currentAssessment: null
     };
   },
+  watch: {
+    organData: {
+      handler() {
+        this.initData();
+      },
+      deep: true,
+      immediate: true
+    },
+    // 娣卞害鐩戝惉琛ㄥ崟鏁版嵁鍙樺寲
+    formData: {
+      handler(newVal) {
+        this.$emit("update-assessment", {
+          organData: this.organData,
+          assessmentData: newVal,
+          assessmentIndex: this.assessmentIndex
+        });
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.initData();
+  },
   methods: {
+    // 鍒濆鍖栨暟鎹�
+    initData() {
+      if (!this.organData || !this.organData.assesscontent) {
+        this.formData = {
+          functionStatus: "",
+          assessmentOpinion: "",
+          attachments: []
+        };
+        this.attachmentFileList = [];
+        return;
+      }
+
+      try {
+        const assessData =
+          typeof this.organData.assesscontent === "string"
+            ? JSON.parse(this.organData.assesscontent)
+            : this.organData.assesscontent;
+
+        if (
+          Array.isArray(assessData) &&
+          assessData.length > this.assessmentIndex
+        ) {
+          this.currentAssessment = assessData[this.assessmentIndex];
+
+          // 娣辨嫹璐濇暟鎹紝閬垮厤淇敼鍘熷鏁版嵁
+          const assessmentCopy = JSON.parse(
+            JSON.stringify(this.currentAssessment)
+          );
+
+          this.formData = {
+            functionStatus: assessmentCopy.functionStatus || "",
+            assessmentOpinion: assessmentCopy.assessmentOpinion || "",
+            attachments: Array.isArray(assessmentCopy.attachments)
+              ? [...assessmentCopy.attachments]
+              : []
+          };
+
+          // 鍒濆鍖栭檮浠舵枃浠跺垪琛�
+          this.attachmentFileList = this.formData.attachments.map(item => ({
+            uid: item.id || Math.random(),
+            name: item.fileName,
+            fileSize: item.fileSize,
+            url: item.path || item.fileUrl,
+            uploadTime: item.uploadTime,
+            status: "success"
+          }));
+        } else {
+          console.log("璇勪及绱㈠紩瓒呭嚭鑼冨洿鎴栨暟鎹负绌�");
+          this.resetForm();
+        }
+      } catch (error) {
+        console.error("鍒濆鍖栨暟鎹け璐�:", error);
+        this.resetForm();
+      }
+    },
+
+    // 閲嶇疆琛ㄥ崟
+    resetForm() {
+      this.formData = {
+        functionStatus: "",
+        assessmentOpinion: "",
+        attachments: []
+      };
+      this.attachmentFileList = [];
+    },
+
+    // 淇濆瓨璇勪及
     handleSave() {
-      this.$emit('save', {
-        ...this.organData,
-        assessmentTime: new Date().toISOString(),
-        assessor: '褰撳墠鐢ㄦ埛'
+      // 楠岃瘉蹇呰瀛楁
+      if (!this.formData.functionStatus) {
+        this.$message.warning("璇烽�夋嫨鍔熻兘鐘舵��");
+        return;
+      }
+
+      if (!this.formData.assessmentOpinion) {
+        this.$message.warning("璇疯緭鍏ヨ瘎浼版剰瑙�");
+        return;
+      }
+
+      // 鍑嗗淇濆瓨鐨勬暟鎹�
+      const saveData = {
+        functionStatus: this.formData.functionStatus,
+        assessmentOpinion: this.formData.assessmentOpinion,
+        attachments: Array.isArray(this.formData.attachments)
+          ? [...this.formData.attachments]
+          : []
+      };
+
+      // 娣诲姞璇勪及鑰呭拰璇勪及鏃堕棿
+      const assessmentData = {
+        ...saveData,
+        assessor: this.currentUser.name,
+        assessmentTime: new Date().toISOString()
+      };
+
+      console.log("鍙戦�佷繚瀛樿姹�:", assessmentData);
+
+      this.$emit("save-assessment", {
+        organData: this.organData,
+        assessmentData: assessmentData,
+        assessmentIndex: this.assessmentIndex
       });
     },
 
     handleCancel() {
-      this.$emit('cancel');
+      this.$emit("cancel");
     },
 
-    // 鏂囦欢涓婁紶澶勭悊
-    handleUploadSuccess(response, file) {
+    handleDelete() {
+      this.$confirm("纭鍒犻櫎姝よ瘎浼拌褰曞悧锛�", "纭鍒犻櫎", {
+        confirmButtonText: "纭畾",
+        cancelButtonText: "鍙栨秷",
+        type: "warning"
+      })
+        .then(() => {
+          this.$emit("delete-assessment", {
+            organData: this.organData,
+            assessmentIndex: this.assessmentIndex
+          });
+        })
+        .catch(() => {
+          this.$message.info("宸插彇娑堝垹闄�");
+        });
+    },
+
+    /** 闄勪欢鍙樺寲澶勭悊 */
+    handleAttachmentChange(fileList) {
+      this.attachmentFileList = fileList;
+    },
+
+    /** 闄勪欢绉婚櫎澶勭悊 */
+    handleAttachmentRemove(file) {
+      if (file.url) {
+        const index = this.formData.attachments.findIndex(
+          item => item.path === file.url || item.fileUrl === file.url
+        );
+        if (index > -1) {
+          this.formData.attachments.splice(index, 1);
+          this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+        }
+      }
+    },
+
+    /** 鎵嬪姩鍒犻櫎闄勪欢 */
+    handleRemoveAttachment(index) {
+      this.formData.attachments.splice(index, 1);
+      this.attachmentFileList.splice(index, 1);
+      this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+    },
+
+    /** 涓婁紶鎴愬姛澶勭悊 */
+    handleUploadSuccess({ file, fileList, response }) {
       if (response.code === 200) {
-        // 灏嗘柊鏂囦欢娣诲姞鍒伴檮浠跺垪琛�
-        const newFile = {
-          id: response.data.fileId,
+        console.log(response, "涓婁紶鏁版嵁");
+
+        const attachmentObj = {
           fileName: file.name,
+          path: response.fileUrl || file.url,
+          fileUrl: response.fileUrl || file.url,
           fileType: this.getFileExtension(file.name),
           fileSize: file.size,
-          fileUrl: response.data.fileUrl,
-          uploadTime: new Date().toISOString()
+          uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
         };
 
-        if (!this.organData.attachments) {
-          this.organData.attachments = [];
+        console.log("娣诲姞涓婁紶鐨勯檮浠�:", attachmentObj);
+
+        // 纭繚 attachments 鏄暟缁�
+        if (!Array.isArray(this.formData.attachments)) {
+          this.formData.attachments = [];
         }
-        this.organData.attachments.push(newFile);
 
-        this.$message.success('鏂囦欢涓婁紶鎴愬姛');
+        this.formData.attachments.push(attachmentObj);
+
+        // 鏇存柊鏂囦欢鍒楄〃
+        this.attachmentFileList = fileList;
+
+        this.$message.success("鏂囦欢涓婁紶鎴愬姛");
       }
     },
 
-    handleUploadError(error) {
-      console.error('鏂囦欢涓婁紶澶辫触:', error);
-      this.$message.error('鏂囦欢涓婁紶澶辫触');
+    /** 涓婁紶閿欒澶勭悊 */
+    handleUploadError({ file, fileList, 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.currentPreviewFile = {
+        fileName: file.fileName,
+        fileUrl: file.path || file.fileUrl,
+        fileType: this.getFileType(file.fileName)
+      };
       this.previewVisible = true;
     },
 
+    /** 鏂囦欢涓嬭浇 */
     handleDownload(file) {
-      // 妯℃嫙鏂囦欢涓嬭浇
-      const link = document.createElement('a');
-      link.href = file.fileUrl;
-      link.download = file.fileName;
-      link.click();
-      this.$message.success('寮�濮嬩笅杞芥枃浠�');
+      const fileUrl = file.path || file.fileUrl;
+      const fileName = file.fileName;
+
+      if (fileUrl) {
+        const link = document.createElement("a");
+        link.href = fileUrl;
+        link.download = fileName;
+        link.style.display = "none";
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        this.$message.success("寮�濮嬩笅杞芥枃浠�");
+      } else {
+        this.$message.warning("鏂囦欢璺緞涓嶅瓨鍦紝鏃犳硶涓嬭浇");
+      }
     },
 
-    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('鍒犻櫎鎴愬姛');
-        }
-      });
+    /** 鑾峰彇鏂囦欢绫诲瀷 */
+    getFileType(fileName) {
+      if (!fileName) return "other";
+
+      const extension = fileName
+        .split(".")
+        .pop()
+        .toLowerCase();
+      const imageTypes = ["jpg", "jpeg", "png", "gif", "bmp", "webp"];
+      const pdfTypes = ["pdf"];
+      const officeTypes = ["doc", "docx", "xls", "xlsx", "ppt", "pptx"];
+
+      if (imageTypes.includes(extension)) return "image";
+      if (pdfTypes.includes(extension)) return "pdf";
+      if (officeTypes.includes(extension)) return "office";
+      return "other";
     },
 
-    // 宸ュ叿鏂规硶
-    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'
+    /** 鑾峰彇鏂囦欢鍥炬爣棰滆壊 */
+    getFileIconColor(fileName) {
+      const type = this.getFileType(fileName);
+      const colorMap = {
+        image: "#67C23A",
+        pdf: "#F56C6C",
+        office: "#409EFF",
+        other: "#909399"
       };
-      return iconMap[fileType] || 'el-icon-document';
+      return colorMap[type] || "#909399";
     },
 
+    /** 鑾峰彇鏂囦欢鏍囩绫诲瀷 */
+    getFileTagType(fileName) {
+      const type = this.getFileType(fileName);
+      const typeMap = {
+        image: "success",
+        pdf: "danger",
+        office: "primary",
+        other: "info"
+      };
+      return typeMap[type] || "info";
+    },
+
+    /** 鑾峰彇鏂囦欢绫诲瀷鏂囨湰 */
+    getFileTypeText(fileName) {
+      const type = this.getFileType(fileName);
+      const textMap = {
+        image: "鍥剧墖",
+        pdf: "PDF",
+        office: "鏂囨。",
+        other: "鍏朵粬"
+      };
+      return textMap[type] || "鏈煡";
+    },
+
+    /** 妫�鏌ユ槸鍚﹀彲棰勮 */
+    isPreviewable(fileName) {
+      const type = this.getFileType(fileName);
+      return ["image", "pdf"].includes(type);
+    },
+
+    /** 鑾峰彇鏂囦欢鎵╁睍鍚� */
     getFileExtension(filename) {
-      return filename.split('.').pop().toLowerCase();
+      return filename
+        .split(".")
+        .pop()
+        .toLowerCase();
     },
 
+    /** 鏍煎紡鍖栨枃浠跺ぇ灏� */
     formatFileSize(bytes) {
-      if (bytes === 0) return '0 B';
+      if (!bytes || bytes === 0) return "0 B";
       const k = 1024;
-      const sizes = ['B', 'KB', 'MB', 'GB'];
+      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];
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
     },
 
-    isImage(fileType) {
-      const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
-      return imageTypes.includes(fileType);
+    /** 鏃ユ湡鏃堕棿鏍煎紡鍖� */
+    formatDateTime(dateTime) {
+      if (!dateTime) return "";
+
+      try {
+        const date = new Date(dateTime);
+        if (isNaN(date.getTime())) return dateTime;
+
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        const hours = String(date.getHours()).padStart(2, "0");
+        const minutes = String(date.getMinutes()).padStart(2, "0");
+
+        return `${year}-${month}-${day} ${hours}:${minutes}`;
+      } catch (error) {
+        return dateTime;
+      }
     }
   }
-}
+};
 </script>
 
 <style scoped>
@@ -250,61 +541,57 @@
   border: 1px solid #ebeef5;
   border-radius: 4px;
   padding: 15px;
+  background: #fafafa;
 }
 
-.attachment-upload {
-  margin-bottom: 15px;
+.attachment-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.attachment-title {
+  font-weight: bold;
+  margin: 0 8px;
+  color: #303133;
+}
+
+.attachment-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-left: auto;
 }
 
 .attachment-list {
-  max-height: 300px;
-  overflow-y: auto;
+  margin-top: 16px;
 }
 
-.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;
+.list-title {
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: #303133;
+  font-size: 14px;
 }
 
 .file-name {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin-right: 8px;
+  font-size: 13px;
+  margin-left: 8px;
 }
 
-.file-size {
-  color: #909399;
+::v-deep .el-upload__tip {
   font-size: 12px;
-}
-
-.file-actions {
-  flex-shrink: 0;
-}
-
-.no-attachment {
-  text-align: center;
-  padding: 20px;
   color: #909399;
+  margin-top: 8px;
+}
+
+::v-deep .el-table .cell {
+  padding: 8px 12px;
+}
+
+::v-deep .el-button--mini {
+  padding: 5px 10px;
+  font-size: 12px;
 }
 </style>

--
Gitblit v1.9.3