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/maintainInfo.vue |  376 +++++++++++++++++++++++++++++++++++++++++++++--------
 1 files changed, 319 insertions(+), 57 deletions(-)

diff --git a/src/views/business/maintain/maintainInfo.vue b/src/views/business/maintain/maintainInfo.vue
index b1470fc..8083e63 100644
--- a/src/views/business/maintain/maintainInfo.vue
+++ b/src/views/business/maintain/maintainInfo.vue
@@ -53,11 +53,6 @@
           <el-col :span="8">
             <el-form-item label="鎮h�呯姸鎬�" prop="recordstate">
               <el-select v-model="form.recordstate" style="width: 100%">
-                <!-- <el-option label="DCD" value="1" />
-                <el-option label="DBD" value="2" />
-                <el-option label="DBCD" value="3" />
-                <el-option label="宸插畬鎴愭崘鐚�" value="4" />
-                <el-option label="鏈畬鎴愭崘鐚�" value="5" /> -->
                 <el-option
                   v-for="dict in dict.type.sys_DonationCategory || []"
                   :key="dict.value"
@@ -66,20 +61,6 @@
                 ></el-option>
               </el-select>
             </el-form-item>
-            <!-- <el-form-item
-              align="left"
-              label="鎮h�呮崘鐚姸鎬�"
-              prop="donationcategory"
-            >
-              <el-radio-group v-model="form.recordstate">
-                <el-radio
-                  v-for="dict in dict.type.sys_DonationCategory || []"
-                  :key="dict.value"
-                  :label="dict.value"
-                  >{{ dict.label }}</el-radio
-                >
-              </el-radio-group>
-            </el-form-item> -->
           </el-col>
           <el-col :span="8">
             <el-form-item
@@ -127,10 +108,6 @@
           <el-col :span="8">
             <el-form-item label="琛�鍨�" prop="bloodtype">
               <el-select v-model="form.bloodtype" style="width: 100%">
-                <!-- <el-option label="A鍨�" value="A" />
-                <el-option label="B鍨�" value="B" />
-                <el-option label="O鍨�" value="O" />
-                <el-option label="AB鍨�" value="AB" /> -->
                 <el-option
                   v-for="dict in dict.type.sys_BloodType"
                   :key="dict.value"
@@ -423,9 +400,16 @@
         </el-row>
 
         <el-form-item label="闄勪欢">
-          <upload-attachment
-            :file-list="cultureForm.attachments"
+          <UploadAttachment
+            ref="cultureUploadAttachment"
+            :file-list="cultureFileList"
+            :limit="10"
+            :accept="attachmentAccept"
+            :multiple="true"
             @change="handleCultureAttachmentChange"
+            @upload-success="handleCultureUploadSuccess"
+            @upload-error="handleCultureUploadError"
+            @remove="handleCultureAttachmentRemove"
           />
         </el-form-item>
       </el-form>
@@ -486,9 +470,16 @@
         </el-form-item>
 
         <el-form-item label="闄勪欢">
-          <upload-attachment
-            :file-list="recordForm.attachments"
+          <UploadAttachment
+            ref="recordUploadAttachment"
+            :file-list="recordFileList"
+            :limit="10"
+            :accept="attachmentAccept"
+            :multiple="true"
             @change="handleRecordAttachmentChange"
+            @upload-success="handleRecordUploadSuccess"
+            @upload-error="handleRecordUploadError"
+            @remove="handleRecordAttachmentRemove"
           />
         </el-form-item>
       </el-form>
@@ -505,11 +496,67 @@
     </el-dialog>
 
     <!-- 闄勪欢棰勮瀵硅瘽妗� -->
-    <attachment-preview
-      :visible="attachmentPreviewVisible"
-      :file-list="currentAttachmentList"
+    <el-dialog
       :title="attachmentPreviewTitle"
-      @close="attachmentPreviewVisible = false"
+      :visible.sync="attachmentPreviewVisible"
+      width="900px"
+      @close="handleAttachmentPreviewClose"
+    >
+      <el-table :data="currentAttachmentList" 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="150" fixed="right">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="handlePreviewAttachment(scope.row)"
+              :disabled="!isPreviewable(scope.row.fileName)"
+            >
+              棰勮
+            </el-button>
+            <el-button
+              size="mini"
+              type="success"
+              @click="handleDownloadAttachment(scope.row)"
+            >
+              涓嬭浇
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+
+    <!-- 鏂囦欢棰勮寮圭獥 -->
+    <FilePreviewDialog
+      :visible="filePreviewVisible"
+      :file="currentPreviewFile"
+      @close="filePreviewVisible = false"
+      @download="handleDownloadAttachment"
     />
   </div>
 </template>
@@ -518,17 +565,18 @@
 import { maintainList, maintainedit, maintainAdd } from "@/api/businessApi";
 import Pagination from "@/components/Pagination";
 import UploadAttachment from "@/components/UploadAttachment";
-import AttachmentPreview from "@/components/AttachmentPreview";
+import FilePreviewDialog from "@/components/FilePreviewDialog";
 import LiverKidneyPanel from "./components/LiverKidneyPanel.vue";
 import BloodRoutinePanel from "./components/BloodRoutinePanel.vue";
 import UrineRoutinePanel from "./components/UrineRoutinePanel.vue";
+import dayjs from "dayjs";
 
 export default {
   name: "MaintenanceDetail",
   components: {
     Pagination,
     UploadAttachment,
-    AttachmentPreview,
+    FilePreviewDialog,
     LiverKidneyPanel,
     BloodRoutinePanel,
     UrineRoutinePanel
@@ -565,10 +613,8 @@
         incompleteReason: ""
       },
       activeTab: "culture",
-      liverKidneyData: {}, // 浠� maintainList 鎺ュ彛鑾峰彇鐨勬暟鎹�
-      bloodRoutineData: {}, // 浠� maintainList 鎺ュ彛鑾峰彇鐨勬暟鎹�
-      liverKidneyData: {}, // 浠� maintainList 鎺ュ彛鑾峰彇鐨勬暟鎹�
       extracontentinfo: {},
+
       // 鍩瑰吇缁撴灉鐩稿叧鏁版嵁
       cultureList: [],
       cultureLoading: false,
@@ -582,6 +628,7 @@
         result: "闃存��",
         attachments: []
       },
+      cultureFileList: [],
       cultureRules: {
         cultureType: [
           { required: true, message: "璇烽�夋嫨鍩瑰吇绫诲瀷", trigger: "change" }
@@ -615,6 +662,7 @@
         checkRecord: "",
         attachments: []
       },
+      recordFileList: [],
       recordRules: {
         recordTime: [
           { required: true, message: "璇烽�夋嫨鏍告煡鏃堕棿", trigger: "change" }
@@ -631,6 +679,14 @@
       attachmentPreviewVisible: false,
       currentAttachmentList: [],
       attachmentPreviewTitle: "",
+
+      // 鏂囦欢棰勮鐩稿叧
+      filePreviewVisible: false,
+      currentPreviewFile: null,
+
+      // 闄勪欢鐩稿叧閰嶇疆
+      attachmentLimit: 10,
+      attachmentAccept: ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
 
       // 璇勪及鏁版嵁瀛樺偍
       assessmentData: {
@@ -651,7 +707,7 @@
     }
   },
   methods: {
-    // 鍔犺浇缁存姢鏁版嵁[1,3](@ref)
+    // 鍔犺浇缁存姢鏁版嵁
     async loadMaintenanceData() {
       try {
         this.cultureLoading = true;
@@ -661,7 +717,7 @@
         const queryParams = {};
 
         if (id) {
-          queryParams.id = id;
+          queryParams.infoid = infoid;
           this.currentMaintenanceId = id;
           this.isEditMode = true;
         } else if (infoid) {
@@ -672,30 +728,27 @@
           this.$message.error("缂哄皯蹇呰鐨勮矾鐢卞弬鏁�");
           return;
         }
+
         queryParams.infoid = infoid;
         const response = await maintainList(queryParams);
         if (response.code === 200) {
           let maintenanceData = response.data[0];
 
-          // 澶勭悊鏁扮粍鍝嶅簲
           if (Array.isArray(maintenanceData)) {
             maintenanceData = maintenanceData[0] || {};
           }
           if (maintenanceData.extracontent) {
-             this.extracontentinfo = JSON.parse(maintenanceData.extracontent);
+            this.extracontentinfo = JSON.parse(maintenanceData.extracontent);
             if (this.extracontentinfo.specialMedicalHistory) {
-              this.form.specialMedicalHistory =
-                this.extracontentinfo.specialMedicalHistory;
+              this.form.specialMedicalHistory = this.extracontentinfo.specialMedicalHistory;
             }
           }
 
-          // 瑙f瀽itemDesc瀛楁涓殑JSON鏁版嵁[6,8](@ref)
           if (maintenanceData.itemDesc) {
             try {
               const itemDescData = maintenanceData.itemDesc;
               this.assessmentData = { ...this.assessmentData, ...itemDescData };
 
-              // 濉厖鍚勪釜妯″潡鐨勬暟鎹�
               if (itemDescData.cultureResults) {
                 this.cultureList = itemDescData.cultureResults;
               }
@@ -716,7 +769,6 @@
             }
           }
 
-          // 濉厖鍩虹琛ㄥ崟鏁版嵁
           this.form = { ...this.form, ...maintenanceData };
           this.$message.success("鏁版嵁鍔犺浇鎴愬姛");
         } else {
@@ -731,10 +783,9 @@
       }
     },
 
-    // 淇濆瓨鎵�鏈夋暟鎹甗1,2](@ref)
+    // 淇濆瓨鎵�鏈夋暟鎹�
     async handleSave() {
       try {
-        // 鏋勫缓淇濆瓨鏁版嵁
         const saveData = {
           ...this.form,
           itemDesc: {
@@ -748,11 +799,9 @@
         this.extracontentinfo.specialMedicalHistory = this.form.specialMedicalHistory;
         let response;
         if (this.isEditMode && this.currentMaintenanceId) {
-          // 缂栬緫妯″紡锛岃皟鐢╩aintainedit鎺ュ彛[1](@ref)
           saveData.id = this.currentMaintenanceId;
           response = await maintainedit(saveData);
         } else {
-          // 鏂板妯″紡锛岃皟鐢╩aintainAdd鎺ュ彛[2](@ref)
           response = await maintainAdd(saveData);
         }
 
@@ -763,7 +812,6 @@
             id: this.$route.query.infoid,
             extracontent: JSON.stringify(this.extracontentinfo)
           });
-          // 濡傛灉鏄柊澧炰繚瀛橈紝鏇存柊褰撳墠ID
           if (!this.isEditMode && response.data && response.data.id) {
             this.currentMaintenanceId = response.data.id;
             this.isEditMode = true;
@@ -795,6 +843,7 @@
         result: "闃存��",
         attachments: []
       };
+      this.cultureFileList = [];
       this.cultureDialogVisible = true;
       this.$nextTick(() => {
         this.$refs.cultureForm && this.$refs.cultureForm.clearValidate();
@@ -804,6 +853,14 @@
     handleEditCulture(row) {
       this.cultureDialogTitle = "缂栬緫鍩瑰吇璁板綍";
       this.cultureForm = { ...row };
+      this.cultureFileList = row.attachments ? row.attachments.map(item => ({
+        uid: item.id || Math.random(),
+        name: item.fileName,
+        fileSize: item.fileSize,
+        url: item.path || item.fileUrl,
+        uploadTime: item.uploadTime,
+        status: "success"
+      })) : [];
       this.cultureDialogVisible = true;
       this.$nextTick(() => {
         this.$refs.cultureForm && this.$refs.cultureForm.clearValidate();
@@ -816,7 +873,6 @@
           this.cultureSaveLoading = true;
 
           if (this.cultureForm.id) {
-            // 缂栬緫鐜版湁璁板綍
             const index = this.cultureList.findIndex(
               item => item.id === this.cultureForm.id
             );
@@ -824,7 +880,6 @@
               this.cultureList.splice(index, 1, { ...this.cultureForm });
             }
           } else {
-            // 鏂板璁板綍
             this.cultureForm.id = Date.now();
             this.cultureList.push({ ...this.cultureForm });
           }
@@ -864,6 +919,7 @@
         checkRecord: "",
         attachments: []
       };
+      this.recordFileList = [];
       this.recordDialogVisible = true;
       this.$nextTick(() => {
         this.$refs.recordForm && this.$refs.recordForm.clearValidate();
@@ -873,6 +929,14 @@
     handleEditRecord(row) {
       this.recordDialogTitle = "缂栬緫鎶ょ悊鏍告煡璁板綍";
       this.recordForm = { ...row };
+      this.recordFileList = row.attachments ? row.attachments.map(item => ({
+        uid: item.id || Math.random(),
+        name: item.fileName,
+        fileSize: item.fileSize,
+        url: item.path || item.fileUrl,
+        uploadTime: item.uploadTime,
+        status: "success"
+      })) : [];
       this.recordDialogVisible = true;
       this.$nextTick(() => {
         this.$refs.recordForm && this.$refs.recordForm.clearValidate();
@@ -885,7 +949,6 @@
           this.recordSaveLoading = true;
 
           if (this.recordForm.id) {
-            // 缂栬緫鐜版湁璁板綍
             const index = this.recordList.findIndex(
               item => item.id === this.recordForm.id
             );
@@ -893,7 +956,6 @@
               this.recordList.splice(index, 1, { ...this.recordForm });
             }
           } else {
-            // 鏂板璁板綍
             this.recordForm.id = Date.now();
             this.recordList.push({ ...this.recordForm });
           }
@@ -918,13 +980,90 @@
         .catch(() => {});
     },
 
-    // 闄勪欢鐩稿叧鏂规硶
+    // 鍩瑰吇璁板綍闄勪欢鐩稿叧鏂规硶
     handleCultureAttachmentChange(fileList) {
-      this.cultureForm.attachments = fileList;
+      this.cultureFileList = fileList;
     },
 
+    handleCultureUploadSuccess({ 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")
+        };
+
+        if (!Array.isArray(this.cultureForm.attachments)) {
+          this.cultureForm.attachments = [];
+        }
+
+        this.cultureForm.attachments.push(attachmentObj);
+        this.cultureFileList = fileList;
+        this.$message.success("鏂囦欢涓婁紶鎴愬姛");
+      }
+    },
+
+    handleCultureUploadError({ file, fileList, error }) {
+      console.error("鍩瑰吇璁板綍闄勪欢涓婁紶澶辫触:", error);
+      this.$message.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+    },
+
+    handleCultureAttachmentRemove(file) {
+      if (file.url) {
+        const index = this.cultureForm.attachments.findIndex(
+          item => item.path === file.url || item.fileUrl === file.url
+        );
+        if (index > -1) {
+          this.cultureForm.attachments.splice(index, 1);
+          this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+        }
+      }
+    },
+
+    // 鎶ょ悊璁板綍闄勪欢鐩稿叧鏂规硶
     handleRecordAttachmentChange(fileList) {
-      this.recordForm.attachments = fileList;
+      this.recordFileList = fileList;
+    },
+
+    handleRecordUploadSuccess({ 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")
+        };
+
+        if (!Array.isArray(this.recordForm.attachments)) {
+          this.recordForm.attachments = [];
+        }
+
+        this.recordForm.attachments.push(attachmentObj);
+        this.recordFileList = fileList;
+        this.$message.success("鏂囦欢涓婁紶鎴愬姛");
+      }
+    },
+
+    handleRecordUploadError({ file, fileList, error }) {
+      console.error("鎶ょ悊璁板綍闄勪欢涓婁紶澶辫触:", error);
+      this.$message.error("鏂囦欢涓婁紶澶辫触锛岃閲嶈瘯");
+    },
+
+    handleRecordAttachmentRemove(file) {
+      if (file.url) {
+        const index = this.recordForm.attachments.findIndex(
+          item => item.path === file.url || item.fileUrl === file.url
+        );
+        if (index > -1) {
+          this.recordForm.attachments.splice(index, 1);
+          this.$message.success("闄勪欢鍒犻櫎鎴愬姛");
+        }
+      }
     },
 
     handleViewCultureAttachments(row) {
@@ -937,6 +1076,124 @@
       this.currentAttachmentList = row.attachments || [];
       this.attachmentPreviewTitle = `鎶ょ悊鏍告煡璁板綍闄勪欢 - ${row.recorder}`;
       this.attachmentPreviewVisible = true;
+    },
+
+    handleAttachmentPreviewClose() {
+      this.currentAttachmentList = [];
+      this.attachmentPreviewTitle = "";
+    },
+
+    handlePreviewAttachment(file) {
+      this.currentPreviewFile = {
+        fileName: file.fileName,
+        fileUrl: file.path || file.fileUrl,
+        fileType: this.getFileType(file.fileName)
+      };
+      this.filePreviewVisible = true;
+    },
+
+    handleDownloadAttachment(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;
+      }
     },
 
     // 璇勪及鏁版嵁鍙樻洿澶勭悊
@@ -1002,4 +1259,9 @@
 .fixed-width .el-button {
   margin: 0 2px;
 }
+
+.file-name {
+  font-size: 13px;
+  margin-left: 8px;
+}
 </style>

--
Gitblit v1.9.3