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/UrineRoutinePanel.vue |  639 ++++++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 485 insertions(+), 154 deletions(-)

diff --git a/src/views/business/maintain/components/UrineRoutinePanel.vue b/src/views/business/maintain/components/UrineRoutinePanel.vue
index 4d62072..e482237 100644
--- a/src/views/business/maintain/components/UrineRoutinePanel.vue
+++ b/src/views/business/maintain/components/UrineRoutinePanel.vue
@@ -43,7 +43,7 @@
       >
         <template #default="scope">
           <div class="item-name-cell">
-            <span :class="{'required-item': scope.row.required}">
+            <span :class="{ 'required-item': scope.row.required }">
               {{ scope.row.itemName }}
             </span>
             <el-tooltip
@@ -85,8 +85,12 @@
                   :value="option.value"
                 />
               </el-select>
-              <span v-else class="value-text" :title="getSelectLabel(scope.row, index)">
-                {{ getSelectLabel(scope.row, index) || '-' }}
+              <span
+                v-else
+                class="value-text"
+                :title="getSelectLabel(scope.row, index)"
+              >
+                {{ getSelectLabel(scope.row, index) || "-" }}
               </span>
             </template>
 
@@ -102,9 +106,12 @@
               />
               <div v-else class="value-display-container">
                 <span class="value-text" :title="scope.row.values[index]">
-                  {{ scope.row.values[index] || '-' }}
+                  {{ scope.row.values[index] || "-" }}
                 </span>
-                <span v-if="scope.row.values[index] && scope.row.unit" class="unit-text">
+                <span
+                  v-if="scope.row.values[index] && scope.row.unit"
+                  class="unit-text"
+                >
                   {{ scope.row.unit }}
                 </span>
               </div>
@@ -112,20 +119,6 @@
           </div>
         </template>
       </el-table-column>
-
-      <!-- <el-table-column
-        v-if="isEditing"
-        label="鎿嶄綔"
-        width="120"
-        fixed="right"
-        class-name="leave-alone"
-      >
-        <template #default>
-          <el-button link type="primary" @click="addColumn" size="small">
-            鏂板鍒�
-          </el-button>
-        </template>
-      </el-table-column> -->
     </el-table>
 
     <!-- 缁熻淇℃伅 -->
@@ -133,7 +126,9 @@
       <el-card shadow="never">
         <div class="stats-content">
           <span class="stats-title">鏁版嵁缁熻:</span>
-          <span class="stats-item">鎬昏褰曟暟: {{ dynamicColumns.length }} 涓椂闂寸偣</span>
+          <span class="stats-item"
+            >鎬昏褰曟暟: {{ dynamicColumns.length }} 涓椂闂寸偣</span
+          >
           <span class="stats-item">宸插～鍐�: {{ filledCount }} 椤�</span>
           <span class="stats-item">瀹屾垚搴�: {{ completionRate }}%</span>
         </div>
@@ -145,14 +140,84 @@
       <div class="attachment-header">
         <i class="el-icon-paperclip"></i>
         <span class="attachment-title">闄勪欢涓婁紶</span>
-        <span class="attachment-tip">鏀寔涓婁紶灏垮父瑙勬楠屾姤鍛婂崟绛夋枃浠� (鏈�澶�10涓�)</span>
+        <span class="attachment-tip"
+          >鏀寔涓婁紶灏垮父瑙勬楠屾姤鍛婂崟绛夋枃浠� (鏈�澶�10涓�)</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>
 
     <!-- 鍒楃紪杈戝璇濇 -->
@@ -165,7 +230,7 @@
       <el-form
         :model="columnForm"
         label-width="80px"
-        ref="columnForm"
+        ref="columnFormU"
         :rules="columnRules"
       >
         <el-form-item label="鏃ユ湡" prop="date">
@@ -206,21 +271,36 @@
         >
           鍒犻櫎
         </el-button>
-        <el-button type="primary" @click="confirmAddColumn" :loading="saveLoading">
+        <el-button
+          type="primary"
+          @click="confirmAddColumn"
+          :loading="saveLoading"
+        >
           纭畾
         </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: 'UrineRoutinePanel',
+  name: "UrineRoutinePanel",
   components: {
     UploadAttachment,
+    FilePreviewDialog
   },
   props: {
     isEditing: {
@@ -228,8 +308,8 @@
       default: false
     },
     initialData: {
-      type: Array,
-      default: () => []
+      type: Object,
+      default: () => ({})
     },
     showStatistics: {
       type: Boolean,
@@ -239,34 +319,33 @@
   data() {
     return {
       tableData: [],
-      dynamicColumns: [
-        {
-          label: '2024-12-27\n08:00',
-          key: 'time1',
-          date: '2024-12-27',
-          time: '08:00',
-          remark: '鏅ㄥ翱妫�娴�'
-        }
-      ],
+      dynamicColumns: [],
       attachments: [],
       columnDialogVisible: false,
       columnForm: {
-        date: '',
-        time: '',
-        remark: ''
+        date: "",
+        time: "",
+        remark: ""
       },
       editingColumnIndex: null,
       tableKey: 0,
       tableLoading: false,
       saveLoading: false,
+      internalData: {},
       columnRules: {
-        date: [
-          { required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' }
-        ],
-        time: [
-          { required: true, message: '璇烽�夋嫨鏃堕棿', trigger: 'change' }
-        ]
-      }
+        date: [{ required: true, message: "璇烽�夋嫨鏃ユ湡", trigger: "change" }],
+        time: [{ required: true, message: "璇烽�夋嫨鏃堕棿", trigger: "change" }]
+      },
+
+      // 棰勮鐩稿叧
+      previewVisible: false,
+      currentPreviewFile: null,
+
+      // 闄勪欢鐩稿叧閰嶇疆
+      attachmentLimit: 10,
+      attachmentAccept:
+        ".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.txt",
+      attachmentFileList: []
     };
   },
   computed: {
@@ -274,7 +353,7 @@
       let count = 0;
       this.tableData.forEach(row => {
         row.values.forEach(value => {
-          if (value && value.toString().trim() !== '') {
+          if (value && value.toString().trim() !== "") {
             count++;
           }
         });
@@ -287,14 +366,20 @@
     }
   },
   watch: {
+    initialData: {
+      handler(newData) {
+        console.log(newData);
+        if (newData && Object.keys(newData).length > 0) {
+          this.internalData = { ...newData };
+          this.initFromExternalData();
+        }
+      },
+      immediate: true,
+      deep: true
+    },
     isEditing(newVal) {
       if (!newVal) {
-        this.$emit('data-change', {
-          type: 'urine_routine',
-          data: this.tableData,
-          columns: this.dynamicColumns,
-          attachments: this.attachments
-        });
+        this.saveData();
       }
       this.$nextTick(() => {
         this.forceTableLayout();
@@ -308,121 +393,187 @@
       },
       deep: true,
       immediate: 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: {
-    initTableData() {
-      const medicalItems = [
+    // 浠庡閮ㄦ暟鎹垵濮嬪寲缁勪欢
+    initFromExternalData() {
+      console.log(this.internalData, "this.internalData");
 
+      if (this.internalData.data && this.internalData.columns) {
+        this.tableData = this.internalData.data.map(item => ({
+          ...item,
+          values:
+            item.values || new Array(this.internalData.columns.length).fill("")
+        }));
+        this.dynamicColumns = [...this.internalData.columns];
+      } else {
+        this.initTableData();
+      }
+
+      // 鍒濆鍖栭檮浠�
+      if (this.internalData.attachments) {
+        this.attachments = [...this.internalData.attachments];
+      }
+    },
+
+    // 鍒濆鍖栭粯璁よ〃鏍兼暟鎹�
+    initTableData() {
+      const medicalItems = this.getMedicalItems();
+
+      if (this.dynamicColumns.length === 0) {
+        this.dynamicColumns = [
+          {
+            label: `${new Date().toISOString().split("T")[0]}\n08:00`,
+            key: "time1",
+            date: new Date().toISOString().split("T")[0],
+            time: "08:00",
+            remark: "鏅ㄥ翱妫�娴�"
+          }
+        ];
+      }
+
+      this.tableData = medicalItems.map(item => ({
+        ...item,
+        values: new Array(this.dynamicColumns.length).fill("")
+      }));
+    },
+
+    // 灏垮父瑙勬娴嬮」鐩畾涔�
+    getMedicalItems() {
+      return [
         {
-          itemName: '灏块噺',
-          type: 'number',
+          itemName: "灏块噺",
+          type: "number",
           required: true,
-          unit: 'ml/h',
-          reference: '姝ｅ父鑼冨洿瑙嗘儏鍐佃�屽畾'
+          unit: "ml/h",
+          reference: "姝ｅ父鑼冨洿瑙嗘儏鍐佃�屽畾"
         },
         {
-          itemName: '棰滆壊',
-          type: 'select',
+          itemName: "棰滆壊",
+          type: "select",
           required: true,
           options: [
-            { value: '娣￠粍鑹�', label: '娣￠粍鑹�' },
-            { value: '榛勮壊', label: '榛勮壊' },
-            { value: '娣遍粍鑹�', label: '娣遍粍鑹�' },
-            { value: '绾㈣壊', label: '绾㈣壊' },
-            { value: '鐧借壊', label: '鐧借壊' },
-            { value: '鍏朵粬', label: '鍏朵粬' }
+            { value: "娣￠粍鑹�", label: "娣￠粍鑹�" },
+            { value: "榛勮壊", label: "榛勮壊" },
+            { value: "娣遍粍鑹�", label: "娣遍粍鑹�" },
+            { value: "绾㈣壊", label: "绾㈣壊" },
+            { value: "鐧借壊", label: "鐧借壊" },
+            { value: "鍏朵粬", label: "鍏朵粬" }
           ]
         },
         {
-          itemName: '澶栬',
-          type: 'select',
+          itemName: "澶栬",
+          type: "select",
           required: false,
           options: [
-            { value: '娓呬寒', label: '娓呬寒' },
-            { value: '寰祳', label: '寰祳' },
-            { value: '娴戞祳', label: '娴戞祳' },
-            { value: '娌夋穩', label: '娌夋穩' },
-            { value: '鍏朵粬', label: '鍏朵粬' }
+            { value: "娓呬寒", label: "娓呬寒" },
+            { value: "寰祳", label: "寰祳" },
+            { value: "娴戞祳", label: "娴戞祳" },
+            { value: "娌夋穩", label: "娌夋穩" },
+            { value: "鍏朵粬", label: "鍏朵粬" }
           ]
         },
         {
-          itemName: '灏胯泲鐧�',
-          type: 'select',
+          itemName: "灏胯泲鐧�",
+          type: "select",
           required: true,
           options: [
-            { value: '-', label: '闃存��(-)' },
-            { value: '卤', label: '寰噺(卤)' },
-            { value: '+', label: '闃虫��(+)' },
-            { value: '++', label: '闃虫��(++)' },
-            { value: '+++', label: '闃虫��(+++)' }
+            { value: "-", label: "闃存��(-)" },
+            { value: "卤", label: "寰噺(卤)" },
+            { value: "+", label: "闃虫��(+)" },
+            { value: "++", label: "闃虫��(++)" },
+            { value: "+++", label: "闃虫��(+++)" }
           ],
-          reference: '姝ｅ父涓洪槾鎬�(-)'
+          reference: "姝ｅ父涓洪槾鎬�(-)"
         },
         {
-          itemName: 'pH鍊�',
-          type: 'number',
+          itemName: "pH鍊�",
+          type: "number",
           required: true,
-          placeholder: '4.5-8.0',
-          unit: '',
-          reference: '4.5-8.0',
+          placeholder: "4.5-8.0",
+          unit: "",
+          reference: "4.5-8.0",
           min: 4.5,
           max: 8.0
         },
         {
-          itemName: '鐧界粏鑳�',
-          type: 'select',
+          itemName: "鐧界粏鑳�",
+          type: "select",
           required: true,
           options: [
-            { value: '-', label: '闃存��(-)' },
-            { value: '+', label: '闃虫��(+)' },
-            { value: '++', label: '闃虫��(++)' },
-            { value: '+++', label: '闃虫��(+++)' }
+            { value: "-", label: "闃存��(-)" },
+            { value: "+", label: "闃虫��(+)" },
+            { value: "++", label: "闃虫��(++)" },
+            { value: "+++", label: "闃虫��(+++)" }
           ],
-          reference: '姝ｅ父涓洪槾鎬�(-)'
+          reference: "姝ｅ父涓洪槾鎬�(-)"
         },
         {
-          itemName: '绾㈢粏鑳�',
-          type: 'number',
+          itemName: "绾㈢粏鑳�",
+          type: "number",
           required: true,
-          unit: '/渭L',
-          reference: '0-9.2',
+          unit: "/渭L",
+          reference: "0-9.2",
           min: 0,
           max: 9.2
         },
         {
-          itemName: '缁嗚弻',
-          type: 'number',
+          itemName: "缁嗚弻",
+          type: "number",
           required: true,
-          unit: '/渭L',
-          reference: '0-385',
+          unit: "/渭L",
+          reference: "0-385",
           min: 0,
           max: 385
         }
       ];
+    },
 
-      this.tableData = medicalItems.map(item => ({
-        ...item,
-        values: new Array(this.dynamicColumns.length).fill('')
-      }));
+    // 淇濆瓨鏁版嵁鍒扮埗缁勪欢
+    saveData() {
+      const dataToEmit = {
+        type: "urine_routine",
+        data: this.tableData,
+        columns: this.dynamicColumns,
+        attachments: this.attachments
+      };
+      this.$emit("data-change", dataToEmit);
     },
 
     getSelectLabel(row, columnIndex) {
-      if (!row.options || !row.values[columnIndex]) return row.values[columnIndex];
-      const option = row.options.find(opt => opt.value === row.values[columnIndex]);
+      if (!row.options || !row.values[columnIndex])
+        return row.values[columnIndex];
+      const option = row.options.find(
+        opt => opt.value === row.values[columnIndex]
+      );
       return option ? option.label : row.values[columnIndex];
     },
 
     addColumn() {
       this.editingColumnIndex = null;
       this.columnForm = {
-        date: new Date().toISOString().split('T')[0],
-        time: '08:00',
-        remark: ''
+        date: new Date().toISOString().split("T")[0],
+        time: "08:00",
+        remark: ""
       };
       this.columnDialogVisible = true;
       this.$nextTick(() => {
-        this.$refs.columnForm && this.$refs.columnForm.clearValidate();
+        this.$refs.columnFormU && this.$refs.columnFormU.clearValidate();
       });
     },
 
@@ -432,31 +583,28 @@
       this.columnForm = {
         date: column.date,
         time: column.time,
-        remark: column.remark || ''
+        remark: column.remark || ""
       };
       this.columnDialogVisible = true;
     },
 
     confirmAddColumn() {
-      this.$refs.columnForm.validate((valid) => {
+      this.$refs.columnFormU.validate(valid => {
         if (!valid) {
-          this.$message.warning('璇峰畬鍠勬椂闂寸偣淇℃伅');
+          this.$message.warning("璇峰畬鍠勬椂闂寸偣淇℃伅");
           return;
         }
 
         this.saveLoading = true;
 
         if (this.editingColumnIndex !== null) {
-          // 缂栬緫鐜版湁鍒�
           const column = this.dynamicColumns[this.editingColumnIndex];
           column.label = `${this.columnForm.date}\n${this.columnForm.time}`;
           column.date = this.columnForm.date;
           column.time = this.columnForm.time;
           column.remark = this.columnForm.remark;
-          this.$message.success('鏃堕棿鐐逛慨鏀规垚鍔�');
+          this.$message.success("鏃堕棿鐐逛慨鏀规垚鍔�");
         } else {
-          // 鏂板鍒�
-          const newIndex = this.dynamicColumns.length + 1;
           const newColumn = {
             label: `${this.columnForm.date}\n${this.columnForm.time}`,
             key: `time${Date.now()}`,
@@ -464,26 +612,29 @@
             time: this.columnForm.time,
             remark: this.columnForm.remark
           };
+          this.internalData.columns.push(newColumn);
 
           this.dynamicColumns.push(newColumn);
           this.tableData.forEach(row => {
-            row.values.push('');
+            if (!row.values) row.values = [];
+            row.values.push("");
           });
-          this.$message.success('鏃堕棿鐐规坊鍔犳垚鍔�');
+          this.$message.success("鏃堕棿鐐规坊鍔犳垚鍔�");
         }
 
         this.columnDialogVisible = false;
         this.saveLoading = false;
         this.tableKey += 1;
+        this.saveData();
       });
     },
 
     handleDeleteColumn() {
       if (this.editingColumnIndex !== null) {
-        this.$confirm('纭畾瑕佸垹闄よ繖涓椂闂寸偣鍚楋紵', '鎻愮ず', {
-          confirmButtonText: '纭畾',
-          cancelButtonText: '鍙栨秷',
-          type: 'warning'
+        this.$confirm("纭畾瑕佸垹闄よ繖涓椂闂寸偣鍚楋紵", "鎻愮ず", {
+          confirmButtonText: "纭畾",
+          cancelButtonText: "鍙栨秷",
+          type: "warning"
         }).then(() => {
           this.dynamicColumns.splice(this.editingColumnIndex, 1);
           this.tableData.forEach(row => {
@@ -491,7 +642,8 @@
           });
           this.columnDialogVisible = false;
           this.tableKey += 1;
-          this.$message.success('鏃堕棿鐐瑰垹闄ゆ垚鍔�');
+          this.saveData();
+          this.$message.success("鏃堕棿鐐瑰垹闄ゆ垚鍔�");
         });
       }
     },
@@ -499,11 +651,11 @@
     handleDialogClosed() {
       this.editingColumnIndex = null;
       this.columnForm = {
-        date: '',
-        time: '',
-        remark: ''
+        date: "",
+        time: "",
+        remark: ""
       };
-      this.$refs.columnForm && this.$refs.columnForm.clearValidate();
+      this.$refs.columnFormU && this.$refs.columnFormU.clearValidate();
     },
 
     disableFutureDates(time) {
@@ -511,26 +663,191 @@
     },
 
     handleValueChange(row, columnIndex) {
-      this.$emit('data-change', {
-        type: 'urine_routine',
-        data: this.tableData,
-        columns: this.dynamicColumns
-      });
+      this.saveData();
     },
 
+    /** 闄勪欢鍙樺寲澶勭悊 */
     handleAttachmentChange(fileList) {
-      this.attachments = fileList;
-      this.$emit('attachment-change', {
-        type: 'urine_routine',
-        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")
+        };
+
+        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() {
       this.$nextTick(() => {
-        const table = this.$el.querySelector('.el-table');
+        const table = this.$el.querySelector(".el-table");
         if (table) {
-          window.dispatchEvent(new Event('resize'));
+          window.dispatchEvent(new Event("resize"));
         }
       });
     },
@@ -554,7 +871,12 @@
     }
   },
   mounted() {
-    this.initTableData();
+    this.$nextTick(() => {
+      if (Object.keys(this.internalData).length === 0) {
+        this.initTableData();
+      }
+      this.forceTableLayout();
+    });
   }
 };
 </script>
@@ -687,6 +1009,7 @@
   font-size: 14px;
 }
 
+/* 闄勪欢涓婁紶鍖哄煙鏍峰紡浼樺寲 */
 .attachment-section {
   margin-top: 24px;
   padding: 20px;
@@ -710,6 +1033,22 @@
 .attachment-tip {
   font-size: 12px;
   color: #909399;
+}
+
+.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;
 }
 
 /* 鍝嶅簲寮忚璁� */
@@ -739,13 +1078,5 @@
     flex-direction: column;
     gap: 4px;
   }
-}
-
-/* 鍔ㄧ敾鏁堟灉 */
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.3s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
 }
 </style>

--
Gitblit v1.9.3