From 45680b99ccdfb0d323088c57c237e0bc714a8e0b Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期五, 13 三月 2026 09:21:32 +0800
Subject: [PATCH] 青岛opo维护

---
 src/views/business/maintain/components/LiverKidneyPanel.vue |  362 ++++++++++++++++++++++++++++++++++++++++++++++-----
 1 files changed, 327 insertions(+), 35 deletions(-)

diff --git a/src/views/business/maintain/components/LiverKidneyPanel.vue b/src/views/business/maintain/components/LiverKidneyPanel.vue
index beb903a..6a1ac0c 100644
--- a/src/views/business/maintain/components/LiverKidneyPanel.vue
+++ b/src/views/business/maintain/components/LiverKidneyPanel.vue
@@ -70,19 +70,89 @@
       </el-table-column>
     </el-table>
 
-    <!-- 闄勪欢涓婁紶鍖哄煙 -->
+    <!-- 闄勪欢涓婁紶鍖哄煙浼樺寲 -->
     <div class="attachment-section">
-      <div class="attachment-title">
+      <div class="attachment-header">
         <i class="el-icon-paperclip"></i>
-        闄勪欢涓婁紶
-        <span class="attachment-tip">鏀寔涓婁紶妫�楠屾姤鍛婂崟绛夋枃浠�</span>
+        <span class="attachment-title">闄勪欢涓婁紶</span>
+        <span class="attachment-tip"
+          >鏀寔涓婁紶妫�楠屾姤鍛婂崟绛夋枃浠� (鏈�澶歿{ attachmentLimit }}涓�)</span
+        >
       </div>
-      <upload-attachment
-        :file-list="attachments"
+
+      <!-- 浣跨敤 UploadAttachment 缁勪欢 -->
+      <UploadAttachment
+        ref="uploadAttachment"
+        :file-list="attachmentFileList"
+        :limit="attachmentLimit"
+        :accept="attachmentAccept"
+        :multiple="true"
         @change="handleAttachmentChange"
-        :limit="10"
-        :accept="'.pdf,.jpg,.jpeg,.png,.doc,.docx'"
+        @upload-success="handleUploadSuccess"
+        @upload-error="handleUploadError"
+        @remove="handleAttachmentRemove"
       />
+
+      <!-- 闄勪欢鍒楄〃灞曠ず -->
+      <div class="attachment-list" v-if="attachments && attachments.length > 0">
+        <div class="list-title">宸蹭笂浼犻檮浠� ({{ attachments.length }})</div>
+        <el-table :data="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
+                v-if="isEditing"
+                size="mini"
+                type="success"
+                @click="handleDownload(scope.row)"
+              >
+                涓嬭浇
+              </el-button>
+              <el-button
+                v-if="isEditing"
+                size="mini"
+                type="danger"
+                @click="handleRemoveAttachment(scope.$index)"
+              >
+                鍒犻櫎
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
 
     <!-- 鍒楃紪杈戝璇濇 -->
@@ -128,23 +198,33 @@
         <el-button type="primary" @click="confirmAddColumn">纭畾</el-button>
       </span>
     </el-dialog>
+
+    <!-- 鏂囦欢棰勮寮圭獥 -->
+    <FilePreviewDialog
+      :visible="previewVisible"
+      :file="currentPreviewFile"
+      @close="previewVisible = false"
+      @download="handleDownload"
+    />
   </div>
 </template>
 
 <script>
 import UploadAttachment from "@/components/UploadAttachment";
+import FilePreviewDialog from "@/components/FilePreviewDialog";
+import dayjs from "dayjs";
 
 export default {
   name: "LiverKidneyPanel",
   components: {
-    UploadAttachment
+    UploadAttachment,
+    FilePreviewDialog
   },
   props: {
     isEditing: {
       type: Boolean,
       default: false
     },
-    // 淇敼 prop 瀹氫箟锛屾敮鎸佸璞℃牸寮忕殑鍒濆鏁版嵁
     initialData: {
       type: Object,
       default: () => ({})
@@ -161,12 +241,20 @@
         time: ""
       },
       tableKey: 0,
-      // 鍐呴儴鏁版嵁鐘舵��
-      internalData: {}
+      internalData: {},
+
+      // 棰勮鐩稿叧
+      previewVisible: false,
+      currentPreviewFile: null,
+
+      // 闄勪欢鐩稿叧閰嶇疆
+      attachmentLimit: 10,
+      attachmentAccept:
+        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+      attachmentFileList: []
     };
   },
   watch: {
-    // 鐩戝惉 initialData 鍙樺寲锛岀‘淇濇暟鎹纭帴鏀� [5](@ref)
     initialData: {
       handler(newData) {
         if (newData && Object.keys(newData).length > 0) {
@@ -192,13 +280,26 @@
         });
       },
       deep: true
+    },
+    // 鐩戝惉闄勪欢鏁版嵁鍙樺寲
+    attachments: {
+      handler(newAttachments) {
+        this.attachmentFileList = newAttachments.map(item => ({
+          uid: item.id || Math.random(),
+          name: item.fileName,
+          fileSize: item.fileSize,
+          url: item.path || item.fileUrl,
+          uploadTime: item.uploadTime,
+          status: "success"
+        }));
+      },
+      deep: true
     }
   },
   methods: {
-    // 浠庡閮ㄦ暟鎹垵濮嬪寲缁勪欢 [9](@ref)
+    // 浠庡閮ㄦ暟鎹垵濮嬪寲缁勪欢
     initFromExternalData() {
       if (this.internalData.data && this.internalData.columns) {
-        // 浣跨敤澶栭儴鏁版嵁鍒濆鍖栬〃鏍�
         this.tableData = this.internalData.data.map(item => ({
           ...item,
           values:
@@ -206,7 +307,6 @@
         }));
         this.dynamicColumns = [...this.internalData.columns];
       } else {
-        // 濡傛灉娌℃湁澶栭儴鏁版嵁锛屼娇鐢ㄩ粯璁ゅ垵濮嬪寲
         this.initTableData();
       }
 
@@ -247,7 +347,6 @@
         { itemName: "INR", unit: "", required: true, reference: "0.85-1.15" }
       ];
 
-      // 濡傛灉娌℃湁鍔ㄦ�佸垪锛屽垵濮嬪寲榛樿鍒�
       if (this.dynamicColumns.length === 0) {
         this.dynamicColumns = [
           {
@@ -265,7 +364,7 @@
       }));
     },
 
-    // 淇濆瓨鏁版嵁鍒扮埗缁勪欢 [2](@ref)
+    // 淇濆瓨鏁版嵁鍒扮埗缁勪欢
     saveData() {
       const dataToEmit = {
         type: "liver_kidney",
@@ -298,7 +397,6 @@
           date: this.columnForm.date,
           time: this.columnForm.time
         };
-        this.internalData.columns.push(newColumn);
 
         this.dynamicColumns.push(newColumn);
 
@@ -313,14 +411,12 @@
         this.columnDialogVisible = false;
         this.$message.success("鏃堕棿鐐规坊鍔犳垚鍔�");
         this.tableKey += 1;
+        this.saveData();
       });
     },
 
     handleDialogClosed() {
-      this.columnForm = {
-        date: "",
-        time: ""
-      };
+      this.columnForm = { date: "", time: "" };
       this.$refs.columnForm && this.$refs.columnForm.clearValidate();
     },
 
@@ -328,12 +424,182 @@
       this.saveData();
     },
 
+    /** 闄勪欢鍙樺寲澶勭悊 */
     handleAttachmentChange(fileList) {
-      this.attachments = fileList;
-      this.$emit("attachment-change", {
-        type: "liver_kidney",
-        attachments: fileList
-      });
+      this.attachmentFileList = fileList;
+    },
+
+    /** 闄勪欢绉婚櫎澶勭悊 */
+    handleAttachmentRemove(file) {
+      if (file.url) {
+        const index = this.attachments.findIndex(
+          item => item.path === file.url || item.fileUrl === file.url
+        );
+        if (index > -1) {
+          this.attachments.splice(index, 1);
+          this.saveData();
+          this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+        }
+      }
+    },
+
+    /** 涓婁紶鎴愬姛澶勭悊 */
+    handleUploadSuccess({ file, fileList, response }) {
+      if (response.code === 200) {
+        const attachmentObj = {
+          fileName: file.name,
+          path: response.fileUrl || file.url,
+          fileUrl: response.fileUrl || file.url,
+          fileType: this.getFileExtension(file.name),
+          fileSize: file.size,
+          uploadTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
+        };
+
+        // 纭繚 attachments 鏄暟缁�
+        if (!Array.isArray(this.attachments)) {
+          this.attachments = [];
+        }
+
+        this.attachments.push(attachmentObj);
+        this.attachmentFileList = fileList;
+        this.saveData();
+        this.$message.success("鏂囦欢涓婁紶鎴愬姛");
+      }
+    },
+
+    /** 涓婁紶閿欒澶勭悊 */
+    handleUploadError({ file, fileList, error }) {
+      console.error("闄勪欢涓婁紶澶辫触:", error);
+      this.$message.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+    },
+
+    /** 鎵嬪姩鍒犻櫎闄勪欢 */
+    handleRemoveAttachment(index) {
+      this.attachments.splice(index, 1);
+      this.attachmentFileList.splice(index, 1);
+      this.saveData();
+      this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+    },
+
+    /** 鏂囦欢棰勮 */
+    handlePreview(file) {
+      this.currentPreviewFile = {
+        fileName: file.fileName,
+        fileUrl: file.path || file.fileUrl,
+        fileType: this.getFileType(file.fileName)
+      };
+      this.previewVisible = true;
+    },
+
+    /** 鏂囦欢涓嬭浇 */
+    handleDownload(file) {
+      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("鏂囦欢璺緞涓嶅瓨鍦紝鏃犳硶涓嬭浇");
+      }
+    },
+
+    /** 鑾峰彇鏂囦欢绫诲瀷 */
+    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";
+    },
+
+    /** 鑾峰彇鏂囦欢鍥炬爣棰滆壊 */
+    getFileIconColor(fileName) {
+      const type = this.getFileType(fileName);
+      const colorMap = {
+        image: "#67C23A",
+        pdf: "#F56C6C",
+        office: "#409EFF",
+        other: "#909399"
+      };
+      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();
+    },
+
+    /** 鏍煎紡鍖栨枃浠跺ぇ灏� */
+    formatFileSize(bytes) {
+      if (!bytes || 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];
+    },
+
+    /** 鏃ユ湡鏃堕棿鏍煎紡鍖� */
+    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;
+      }
     },
 
     forceTableLayout() {
@@ -362,7 +628,6 @@
     }
   },
   mounted() {
-    // 纭繚缁勪欢姝ｇ‘鎸傝浇鍚庡垵濮嬪寲鏁版嵁 [1](@ref)
     this.$nextTick(() => {
       if (Object.keys(this.internalData).length === 0) {
         this.initTableData();
@@ -442,6 +707,7 @@
   margin-right: 4px;
 }
 
+/* 闄勪欢涓婁紶鍖哄煙鏍峰紡浼樺寲 */
 .attachment-section {
   margin-top: 30px;
   padding: 20px;
@@ -450,21 +716,43 @@
   background: #fafafa;
 }
 
-.attachment-title {
-  font-weight: bold;
-  margin-bottom: 15px;
-  color: #409eff;
+.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: 10px;
-  font-weight: normal;
+  margin-left: auto;
 }
 
+.attachment-list {
+  margin-top: 16px;
+}
+
+.list-title {
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: #303133;
+  font-size: 14px;
+}
+
+.file-name {
+  font-size: 13px;
+  margin-left: 8px;
+}
+
+/* 鍝嶅簲寮忚皟鏁� */
 @media (max-width: 768px) {
   .medical-panel {
     padding: 10px;
@@ -488,5 +776,9 @@
     margin-left: 0;
     margin-top: 4px;
   }
+
+  .attachment-section {
+    padding: 10px;
+  }
 }
 </style>

--
Gitblit v1.9.3