From 82ca886683d0944e71fcdc740f743a7414c7dc50 Mon Sep 17 00:00:00 2001
From: "han\\hanst" <songtao.han@xujiesoft.com>
Date: Mon, 18 May 2026 10:28:04 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9F=A5=E7=9C=8B=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../longtron/production-plan-home-order.vue   | 363 +++++++++++++++++
 .../production-plan-renovation-order.vue      | 365 ++++++++++++++++++
 2 files changed, 728 insertions(+)

diff --git a/src/views/modules/longtron/production-plan-home-order.vue b/src/views/modules/longtron/production-plan-home-order.vue
index 2779b858..a57919d1 100644
--- a/src/views/modules/longtron/production-plan-home-order.vue
+++ b/src/views/modules/longtron/production-plan-home-order.vue
@@ -132,6 +132,18 @@
                   <el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip>
                     <template slot-scope="scope">{{ scope.row.comment || '-' }}</template>
                   </el-table-column>
+                  <el-table-column label="影像" width="95" align="center">
+                    <template slot-scope="scope">
+                      <a
+                        v-if="isMediaNodeLog(scope.row)"
+                        type="text"
+                        size="mini"
+                        @click="openMediaFileDialog(scope.row)">
+                        查看文件
+                      </a>
+                      <span v-else>-</span>
+                    </template>
+                  </el-table-column>
                 </el-table>
               </div>
             </div>
@@ -227,11 +239,86 @@
         <el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button>
       </el-footer>
     </el-dialog>
+
+    <el-dialog
+      title="报工影像文件"
+      :visible.sync="mediaDialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="handleMediaDialogClose"
+      v-drag>
+      <div v-loading="mediaDialogLoading" class="media-dialog-body">
+        <div class="media-dialog-meta">
+          <span>节点：{{ mediaDialogLog.nodeName || mediaDialogLog.nodeCode || '-' }}</span>
+          <span>报工时间：{{ mediaDialogLog.logTime || '-' }}</span>
+        </div>
+        <el-table v-if="mediaFileList.length > 0" class="file-table" :data="mediaFileList" border size="small" height="360px">
+          <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
+          <el-table-column label="缩略图" width="150" align="center">
+            <template slot-scope="scope">
+              <div class="media-thumb-cell">
+                <el-button v-if="resolveMediaKind(scope.row) === 'other'" type="text" size="mini" disabled>不支持</el-button>
+                <span v-else-if="scope.row.previewLoading" class="media-thumb-loading">加载中...</span>
+                <img
+                  v-else-if="resolveMediaKind(scope.row) === 'image' && scope.row.previewUrl"
+                  :src="scope.row.previewUrl"
+                  class="media-thumb media-thumb-image"
+                  alt="media-thumb"
+                  @click="previewMediaFile(scope.row)">
+                <video
+                  v-else-if="resolveMediaKind(scope.row) === 'video' && scope.row.previewUrl"
+                  :src="scope.row.previewUrl"
+                  class="media-thumb media-thumb-video"
+                  muted
+                  playsinline
+                  preload="metadata"
+                  @click="previewMediaFile(scope.row)">
+                </video>
+                <el-button v-else type="text" size="mini" @click="previewMediaFile(scope.row)">加载预览</el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="90" align="center">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="resolveMediaKind(scope.row) === 'video' ? 'warning' : (resolveMediaKind(scope.row) === 'image' ? 'success' : 'info')">
+                {{ getMediaKindLabel(scope.row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="上传时间" min-width="170" align="center">
+            <template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-else description="当前日志暂无影像文件"></el-empty>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="mediaDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <div v-if="mediaPreviewVisible" class="media-preview-overlay" @click="closeMediaPreview">
+      <i class="el-icon-close media-preview-close" @click.stop="closeMediaPreview"></i>
+      <img
+        v-if="mediaPreviewType === 'image'"
+        :src="mediaPreviewUrl"
+        :alt="mediaPreviewName || 'media-preview'"
+        class="media-preview-image"
+        @click.stop="closeMediaPreview">
+      <video
+        v-else-if="mediaPreviewType === 'video'"
+        :src="mediaPreviewUrl"
+        class="media-preview-video"
+        controls
+        autoplay
+        @click.stop>
+      </video>
+    </div>
   </div>
 </template>
 
 <script>
 import { deleteHomeLiftOrder, finishHomeLiftOrder, getHomeLiftOrderList, getNodeAssigneeList, getNodeAssigneeUsers, getReportLogList, reportHomeLiftOrderNode, saveHomeLiftOrder, saveNodeAssignee } from '@/api/longchuang/productionPlan'
+import { previewOssFileById2, queryOssFilePlus } from '@/api/oss/oss'
 
 export default {
   name: 'ProductionPlanHomeOrder',
@@ -249,6 +336,14 @@ export default {
       detailTabName: 'statusLogs',
       selectedOrderLogList: [],
       detailLogLoading: false,
+      mediaDialogVisible: false,
+      mediaDialogLoading: false,
+      mediaDialogLog: {},
+      mediaFileList: [],
+      mediaPreviewVisible: false,
+      mediaPreviewUrl: '',
+      mediaPreviewType: '',
+      mediaPreviewName: '',
       pageIndex: 1,
       pageSize: 20,
       totalPage: 0,
@@ -259,6 +354,9 @@ export default {
   activated() {
     this.getDataList()
   },
+  beforeDestroy() {
+    this.releaseMediaFileUrls()
+  },
   methods: {
     getDataList(flag) {
       if (flag === 'Y') this.pageIndex = 1
@@ -331,6 +429,165 @@ export default {
         this.selectedOrderLogList = []
       })
     },
+    isMediaNodeLog(row) {
+      if (!row || !row.logNo) {
+        return false
+      }
+      if (row.action && row.action !== '报工完成') {
+        return false
+      }
+      const codeSet = ['platformDebug', 'bgCeiling', 'doorAssy', 'pack']
+      const nameSet = ['平台组装/调试', '背景墙/吊顶组装', '门组装', '打包']
+      const nodeCode = String(row.nodeCode || '').trim()
+      const nodeName = String(row.nodeName || '').replace(/\s+/g, '')
+      return codeSet.includes(nodeCode) || nameSet.some(item => item.replace(/\s+/g, '') === nodeName)
+    },
+    async openMediaFileDialog(row) {
+      if (!row || !row.logNo || !row.nodeCode) {
+        this.$message.warning('当前日志未关联影像文件')
+        return
+      }
+      this.releaseMediaFileUrls()
+      this.closeMediaPreview()
+      this.mediaFileList = []
+      this.mediaDialogLog = { ...row }
+      this.mediaDialogVisible = true
+      this.mediaDialogLoading = true
+      try {
+        const { data } = await queryOssFilePlus({
+          orderRef1: this.selectedOrder.orderNo || row.orderNo,
+          orderRef2: row.nodeCode,
+          orderRef3: row.logNo
+        })
+        this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
+          ...item,
+          previewUrl: '',
+          previewLoading: false
+        }))
+        this.mediaFileList.forEach(item => {
+          const kind = this.resolveMediaKind(item)
+          if (kind !== 'other') {
+            this.loadMediaPreviewUrl(item, kind, false)
+          }
+        })
+      } catch (e) {
+        this.mediaFileList = []
+        this.$message.error('影像文件加载失败')
+      } finally {
+        this.mediaDialogLoading = false
+      }
+    },
+    handleMediaDialogClose() {
+      this.mediaDialogLoading = false
+      this.mediaDialogLog = {}
+      this.releaseMediaFileUrls()
+      this.mediaFileList = []
+      this.closeMediaPreview()
+    },
+    releaseMediaFileUrls() {
+      this.mediaFileList.forEach(item => {
+        if (item && item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl)
+        }
+      })
+    },
+    getMediaExt(fileRow) {
+      if (!fileRow) {
+        return ''
+      }
+      const ext = fileRow.fileType || fileRow.fileSuffix || ''
+      return String(ext).replace(/^\./, '').toLowerCase()
+    },
+    resolveMediaKind(fileRow) {
+      const ext = this.getMediaExt(fileRow)
+      const imageExtList = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
+      const videoExtList = ['mp4', 'webm', 'mov', 'avi', 'm4v', '3gp']
+      if (imageExtList.includes(ext)) {
+        return 'image'
+      }
+      if (videoExtList.includes(ext)) {
+        return 'video'
+      }
+      return 'other'
+    },
+    getMediaKindLabel(fileRow) {
+      const kind = this.resolveMediaKind(fileRow)
+      if (kind === 'image') {
+        return '照片'
+      }
+      if (kind === 'video') {
+        return '视频'
+      }
+      return '其他'
+    },
+    buildPreviewMimeType(fileRow, kind) {
+      const ext = this.getMediaExt(fileRow)
+      if (kind === 'image') {
+        if (ext === 'jpg') {
+          return 'image/jpeg'
+        }
+        return ext ? `image/${ext}` : 'image/jpeg'
+      }
+      if (kind === 'video') {
+        return ext ? `video/${ext}` : 'video/mp4'
+      }
+      return 'application/octet-stream'
+    },
+    async loadMediaPreviewUrl(fileRow, fixedKind = '', showError = true) {
+      if (!fileRow || !fileRow.id) {
+        return false
+      }
+      const kind = fixedKind || this.resolveMediaKind(fileRow)
+      if (kind === 'other') {
+        return false
+      }
+      if (fileRow.previewUrl) {
+        return true
+      }
+      if (fileRow.previewLoading) {
+        return false
+      }
+      this.$set(fileRow, 'previewLoading', true)
+      const mimeType = this.buildPreviewMimeType(fileRow, kind)
+      try {
+        const { data } = await previewOssFileById2({ id: fileRow.id, fileType: mimeType })
+        const blob = data instanceof Blob ? data : new Blob([data], { type: mimeType })
+        this.$set(fileRow, 'previewUrl', URL.createObjectURL(blob))
+        return true
+      } catch (e) {
+        if (showError) {
+          this.$message.error('文件预览加载失败')
+        }
+        return false
+      } finally {
+        this.$set(fileRow, 'previewLoading', false)
+      }
+    },
+    async previewMediaFile(fileRow) {
+      const kind = this.resolveMediaKind(fileRow)
+      if (kind === 'other') {
+        this.$message.warning('当前文件暂不支持预览')
+        return
+      }
+      if (!fileRow || !fileRow.id) {
+        this.$message.warning('文件信息不完整，无法预览')
+        return
+      }
+      const loaded = await this.loadMediaPreviewUrl(fileRow, kind, true)
+      if (!loaded) {
+        return
+      }
+      this.mediaPreviewType = kind
+      this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
+      this.mediaPreviewUrl = fileRow.previewUrl
+      this.mediaPreviewVisible = true
+    },
+    closeMediaPreview() {
+      this.mediaPreviewVisible = false
+      this.mediaPreviewType = ''
+      this.mediaPreviewName = ''
+      this.mediaPreviewUrl = ''
+    },
     resetQuery() {
       this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 }
       this.getDataList('Y')
@@ -755,8 +1012,114 @@ export default {
   padding: 8px;
 }
 
+.media-dialog-body {
+  min-height: 360px;
+}
+
+.media-dialog-meta {
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  color: #606266;
+  font-size: 12px;
+}
+
+.media-thumb-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-thumb-loading {
+  color: #909399;
+  font-size: 12px;
+}
+
+.media-thumb {
+  width: 100px;
+  height: 55px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  object-fit: cover;
+  background: #000;
+  cursor: zoom-in;
+}
+
+.media-thumb:hover {
+  border-color: #409eff;
+}
+
+.media-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.media-preview-close {
+  position: absolute;
+  right: 24px;
+  top: 24px;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.media-preview-image {
+  max-width: calc(100vw - 60px);
+  max-height: calc(100vh - 60px);
+  object-fit: contain;
+  cursor: zoom-out;
+}
+
+.media-preview-video {
+  max-width: calc(100vw - 60px);
+  max-height: calc(100vh - 60px);
+  background: #000;
+}
+
 .el-icon-check {
   color: #67c23a;
   font-weight: 1000;
 }
+
+.file-table {
+  background-color: #fff;
+  border-radius: 4px;
+}
+.file-table >>> .cell {
+  line-height: 55px;
+  height: 55px;
+}
+.file-table >>> .el-table__header-wrapper th,
+.file-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #f5f7fa !important;
+  color: #333;
+  font-weight: 600;
+  border-color: #ebeef5;
+  padding: 8px 0;
+}
+
+.file-table >>> .el-table__header-wrapper .cell,
+.file-table >>> .el-table__fixed-header-wrapper .cell{
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+  line-height: 20px;
+  height: 20px;
+}
+
+.file-table >>> .el-table__body tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+.file-table >>> .el-table__body tr.current-row > td {
+  background-color: #ecf5ff !important;
+}
 </style>
diff --git a/src/views/modules/longtron/production-plan-renovation-order.vue b/src/views/modules/longtron/production-plan-renovation-order.vue
index 66861a35..f0aa09e6 100644
--- a/src/views/modules/longtron/production-plan-renovation-order.vue
+++ b/src/views/modules/longtron/production-plan-renovation-order.vue
@@ -129,6 +129,18 @@
                   <el-table-column prop="comment" label="备注" min-width="220" show-overflow-tooltip>
                     <template slot-scope="scope">{{ scope.row.comment || '-' }}</template>
                   </el-table-column>
+                  <el-table-column label="影像" width="95" align="center">
+                    <template slot-scope="scope">
+                      <a
+                        v-if="isMediaNodeLog(scope.row)"
+                        type="text"
+                        size="mini"
+                        @click="openMediaFileDialog(scope.row)">
+                        查看文件
+                      </a>
+                      <span v-else>-</span>
+                    </template>
+                  </el-table-column>
                 </el-table>
               </div>
             </div>
@@ -223,11 +235,86 @@
         <el-button plain class="add-btn" :loading="setUp.assignButton" @click="saveNodeAssigneeAction">保存分配</el-button>
       </el-footer>
     </el-dialog>
+
+    <el-dialog
+      title="报工影像文件"
+      :visible.sync="mediaDialogVisible"
+      width="600px"
+      :close-on-click-modal="false"
+      @close="handleMediaDialogClose"
+      v-drag>
+      <div v-loading="mediaDialogLoading" class="media-dialog-body">
+        <div class="media-dialog-meta">
+          <span>节点：{{ mediaDialogLog.nodeName || mediaDialogLog.nodeCode || '-' }}</span>
+          <span>报工时间：{{ mediaDialogLog.logTime || '-' }}</span>
+        </div>
+        <el-table v-if="mediaFileList.length > 0" :data="mediaFileList" class="file-table" border size="small" height="360px">
+          <el-table-column type="index" label="#" width="55" align="center"></el-table-column>
+          <el-table-column label="缩略图" width="150" align="center">
+            <template slot-scope="scope">
+              <div class="media-thumb-cell">
+                <el-button v-if="resolveMediaKind(scope.row) === 'other'" type="text" size="mini" disabled>不支持</el-button>
+                <span v-else-if="scope.row.previewLoading" class="media-thumb-loading">加载中...</span>
+                <img
+                  v-else-if="resolveMediaKind(scope.row) === 'image' && scope.row.previewUrl"
+                  :src="scope.row.previewUrl"
+                  class="media-thumb media-thumb-image"
+                  alt="media-thumb"
+                  @click="previewMediaFile(scope.row)">
+                <video
+                  v-else-if="resolveMediaKind(scope.row) === 'video' && scope.row.previewUrl"
+                  :src="scope.row.previewUrl"
+                  class="media-thumb media-thumb-video"
+                  muted
+                  playsinline
+                  preload="metadata"
+                  @click="previewMediaFile(scope.row)">
+                </video>
+                <el-button v-else type="text" size="mini" @click="previewMediaFile(scope.row)">加载预览</el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="90" align="center">
+            <template slot-scope="scope">
+              <el-tag size="mini" :type="resolveMediaKind(scope.row) === 'video' ? 'warning' : (resolveMediaKind(scope.row) === 'image' ? 'success' : 'info')">
+                {{ getMediaKindLabel(scope.row) }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="上传时间" min-width="170" align="center">
+            <template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
+          </el-table-column>
+        </el-table>
+        <el-empty v-else description="当前日志暂无影像文件"></el-empty>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="mediaDialogVisible = false">关闭</el-button>
+      </div>
+    </el-dialog>
+
+    <div v-if="mediaPreviewVisible" class="media-preview-overlay" @click="closeMediaPreview">
+      <i class="el-icon-close media-preview-close" @click.stop="closeMediaPreview"></i>
+      <img
+        v-if="mediaPreviewType === 'image'"
+        :src="mediaPreviewUrl"
+        :alt="mediaPreviewName || 'media-preview'"
+        class="media-preview-image"
+        @click.stop="closeMediaPreview">
+      <video
+        v-else-if="mediaPreviewType === 'video'"
+        :src="mediaPreviewUrl"
+        class="media-preview-video"
+        controls
+        autoplay
+        @click.stop>
+      </video>
+    </div>
   </div>
 </template>
 
 <script>
 import { deleteRenovationOrder, finishRenovationOrder, getNodeAssigneeList, getNodeAssigneeUsers, getRenovationOrderList, getReportLogList, reportRenovationOrderNode, saveNodeAssignee, saveRenovationOrder } from '@/api/longchuang/productionPlan'
+import { previewOssFileById2, queryOssFilePlus } from '@/api/oss/oss'
 
 export default {
   name: 'ProductionPlanRenovationOrder',
@@ -245,6 +332,14 @@ export default {
       detailTabName: 'statusLogs',
       selectedOrderLogList: [],
       detailLogLoading: false,
+      mediaDialogVisible: false,
+      mediaDialogLoading: false,
+      mediaDialogLog: {},
+      mediaFileList: [],
+      mediaPreviewVisible: false,
+      mediaPreviewUrl: '',
+      mediaPreviewType: '',
+      mediaPreviewName: '',
       pageIndex: 1,
       pageSize: 20,
       totalPage: 0,
@@ -255,6 +350,9 @@ export default {
   activated() {
     this.getDataList()
   },
+  beforeDestroy() {
+    this.releaseMediaFileUrls()
+  },
   methods: {
     getDataList(flag) {
       if (flag === 'Y') this.pageIndex = 1
@@ -364,6 +462,165 @@ export default {
         this.selectedOrderLogList = []
       })
     },
+    isMediaNodeLog(row) {
+      if (!row || !row.logNo) {
+        return false
+      }
+      if (row.action && row.action !== '报工完成') {
+        return false
+      }
+      const codeSet = ['inspect', 'pack']
+      const nameSet = ['检验', '打包']
+      const nodeCode = String(row.nodeCode || '').trim()
+      const nodeName = String(row.nodeName || '').replace(/\s+/g, '')
+      return codeSet.includes(nodeCode) || nameSet.some(item => item.replace(/\s+/g, '') === nodeName)
+    },
+    async openMediaFileDialog(row) {
+      if (!row || !row.logNo || !row.nodeCode) {
+        this.$message.warning('当前日志未关联影像文件')
+        return
+      }
+      this.releaseMediaFileUrls()
+      this.closeMediaPreview()
+      this.mediaFileList = []
+      this.mediaDialogLog = { ...row }
+      this.mediaDialogVisible = true
+      this.mediaDialogLoading = true
+      try {
+        const { data } = await queryOssFilePlus({
+          orderRef1: this.selectedOrder.orderNo || row.orderNo,
+          orderRef2: row.nodeCode,
+          orderRef3: row.logNo
+        })
+        this.mediaFileList = (data && data.code === 0 ? (data.rows || []) : []).map(item => ({
+          ...item,
+          previewUrl: '',
+          previewLoading: false
+        }))
+        this.mediaFileList.forEach(item => {
+          const kind = this.resolveMediaKind(item)
+          if (kind !== 'other') {
+            this.loadMediaPreviewUrl(item, kind, false)
+          }
+        })
+      } catch (e) {
+        this.mediaFileList = []
+        this.$message.error('影像文件加载失败')
+      } finally {
+        this.mediaDialogLoading = false
+      }
+    },
+    handleMediaDialogClose() {
+      this.mediaDialogLoading = false
+      this.mediaDialogLog = {}
+      this.releaseMediaFileUrls()
+      this.mediaFileList = []
+      this.closeMediaPreview()
+    },
+    releaseMediaFileUrls() {
+      this.mediaFileList.forEach(item => {
+        if (item && item.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl)
+        }
+      })
+    },
+    getMediaExt(fileRow) {
+      if (!fileRow) {
+        return ''
+      }
+      const ext = fileRow.fileType || fileRow.fileSuffix || ''
+      return String(ext).replace(/^\./, '').toLowerCase()
+    },
+    resolveMediaKind(fileRow) {
+      const ext = this.getMediaExt(fileRow)
+      const imageExtList = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
+      const videoExtList = ['mp4', 'webm', 'mov', 'avi', 'm4v', '3gp']
+      if (imageExtList.includes(ext)) {
+        return 'image'
+      }
+      if (videoExtList.includes(ext)) {
+        return 'video'
+      }
+      return 'other'
+    },
+    getMediaKindLabel(fileRow) {
+      const kind = this.resolveMediaKind(fileRow)
+      if (kind === 'image') {
+        return '照片'
+      }
+      if (kind === 'video') {
+        return '视频'
+      }
+      return '其他'
+    },
+    buildPreviewMimeType(fileRow, kind) {
+      const ext = this.getMediaExt(fileRow)
+      if (kind === 'image') {
+        if (ext === 'jpg') {
+          return 'image/jpeg'
+        }
+        return ext ? `image/${ext}` : 'image/jpeg'
+      }
+      if (kind === 'video') {
+        return ext ? `video/${ext}` : 'video/mp4'
+      }
+      return 'application/octet-stream'
+    },
+    async loadMediaPreviewUrl(fileRow, fixedKind = '', showError = true) {
+      if (!fileRow || !fileRow.id) {
+        return false
+      }
+      const kind = fixedKind || this.resolveMediaKind(fileRow)
+      if (kind === 'other') {
+        return false
+      }
+      if (fileRow.previewUrl) {
+        return true
+      }
+      if (fileRow.previewLoading) {
+        return false
+      }
+      this.$set(fileRow, 'previewLoading', true)
+      const mimeType = this.buildPreviewMimeType(fileRow, kind)
+      try {
+        const { data } = await previewOssFileById2({ id: fileRow.id, fileType: mimeType })
+        const blob = data instanceof Blob ? data : new Blob([data], { type: mimeType })
+        this.$set(fileRow, 'previewUrl', URL.createObjectURL(blob))
+        return true
+      } catch (e) {
+        if (showError) {
+          this.$message.error('文件预览加载失败')
+        }
+        return false
+      } finally {
+        this.$set(fileRow, 'previewLoading', false)
+      }
+    },
+    async previewMediaFile(fileRow) {
+      const kind = this.resolveMediaKind(fileRow)
+      if (kind === 'other') {
+        this.$message.warning('当前文件暂不支持预览')
+        return
+      }
+      if (!fileRow || !fileRow.id) {
+        this.$message.warning('文件信息不完整，无法预览')
+        return
+      }
+      const loaded = await this.loadMediaPreviewUrl(fileRow, kind, true)
+      if (!loaded) {
+        return
+      }
+      this.mediaPreviewType = kind
+      this.mediaPreviewName = fileRow.fileName || fileRow.newFileName || ''
+      this.mediaPreviewUrl = fileRow.previewUrl
+      this.mediaPreviewVisible = true
+    },
+    closeMediaPreview() {
+      this.mediaPreviewVisible = false
+      this.mediaPreviewType = ''
+      this.mediaPreviewName = ''
+      this.mediaPreviewUrl = ''
+    },
     resetQuery() {
       this.searchData = { projectNo: '', modelNo: '', color: '', status: '', deliveryStartDate: '', deliveryEndDate: '', page: 1, limit: 20 }
       this.getDataList('Y')
@@ -784,8 +1041,116 @@ export default {
 .logs-table-wrapper {
   padding: 8px;
 }
+
+.media-dialog-body {
+  min-height: 360px;
+}
+
+.media-dialog-meta {
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  color: #606266;
+  font-size: 12px;
+}
+
+.media-thumb-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-thumb-loading {
+  color: #909399;
+  font-size: 12px;
+}
+
+
+.media-thumb {
+  width: 100px;
+  height: 55px;
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  object-fit: cover;
+  background: #000;
+  cursor: zoom-in;
+}
+
+.media-thumb:hover {
+  border-color: #409eff;
+}
+
+.media-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.media-preview-close {
+  position: absolute;
+  right: 24px;
+  top: 24px;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+}
+
+.media-preview-image {
+  max-width: calc(100vw - 60px);
+  max-height: calc(100vh - 60px);
+  object-fit: contain;
+  cursor: zoom-out;
+}
+
+.media-preview-video {
+  max-width: calc(100vw - 60px);
+  max-height: calc(100vh - 60px);
+  background: #000;
+}
+
 .el-icon-check {
   color: #67c23a;
   font-weight: 1000;
 }
+
+.file-table {
+  background-color: #fff;
+  border-radius: 4px;
+}
+.file-table >>> .cell {
+  line-height: 55px;
+  height: 55px;
+}
+.file-table >>> .el-table__header-wrapper th,
+.file-table >>> .el-table__fixed-header-wrapper th {
+  background-color: #f5f7fa !important;
+  color: #333;
+  font-weight: 600;
+  border-color: #ebeef5;
+  padding: 8px 0;
+}
+
+.file-table >>> .el-table__header-wrapper .cell,
+.file-table >>> .el-table__fixed-header-wrapper .cell{
+  padding: 0 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px !important;
+  line-height: 20px;
+  height: 20px;
+}
+
+.file-table >>> .el-table__body tr:hover > td {
+  background-color: #f5f7fa !important;
+}
+
+.file-table >>> .el-table__body tr.current-row > td {
+  background-color: #ecf5ff !important;
+}
 </style>