From 293a46e85cff3af59633cff50a2514cdbd7e8c0b Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期四, 20 八月 2026 15:04:24 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev_天津_阳光印刷' into dev_天津_阳光印刷
---
src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue | 188 ++++++++++++++++++----------------------------
1 files changed, 75 insertions(+), 113 deletions(-)
diff --git a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
index d1c9d8d..1019df5 100644
--- a/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
+++ b/src/views/equipmentManagement/inspectionManagement/components/viewFiles.vue
@@ -3,77 +3,20 @@
<el-dialog title="鏌ョ湅闄勪欢"
v-model="dialogVisitable" width="800px" @close="cancel">
<div class="upload-container">
- <!-- 鐢熶骇鍓� -->
<div class="form-container">
- <div class="title">鐢熶骇鍓�</div>
-
- <!-- 鍥剧墖鍒楄〃 -->
+ <div class="title">宸℃闄勪欢</div>
+
<div style="display: flex; flex-wrap: wrap;">
- <img v-for="(item, index) in beforeProductionImgs" :key="index"
- @click="showMedia(beforeProductionImgs, index, 'image')"
+ <img v-for="(item, index) in images" :key="index"
+ @click="showMedia(images, index, 'image')"
:src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
</div>
-
- <!-- 瑙嗛鍒楄〃 -->
+
<div style="display: flex; flex-wrap: wrap;">
<div
- v-for="(videoUrl, index) in beforeProductionVideos"
+ v-for="(videoUrl, index) in videos"
:key="index"
- @click="showMedia(beforeProductionVideos, index, 'video')"
- style="position: relative; margin: 10px; cursor: pointer;"
- >
- <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
- <img src="@/assets/images/video.png" alt="鎾斁" style="width: 30px; height: 30px; opacity: 0.8;" />
- </div>
- <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
- </div>
- </div>
- </div>
-
- <!-- 鐢熶骇鍚� -->
- <div class="form-container">
- <div class="title">鐢熶骇鍚�</div>
-
- <!-- 鍥剧墖鍒楄〃 -->
- <div style="display: flex; flex-wrap: wrap;">
- <img v-for="(item, index) in afterProductionImgs" :key="index"
- @click="showMedia(afterProductionImgs, index, 'image')"
- :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
- </div>
-
- <!-- 瑙嗛鍒楄〃 -->
- <div style="display: flex; flex-wrap: wrap;">
- <div
- v-for="(videoUrl, index) in afterProductionVideos"
- :key="index"
- @click="showMedia(afterProductionVideos, index, 'video')"
- style="position: relative; margin: 10px; cursor: pointer;"
- >
- <div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
- <img src="@/assets/images/video.png" alt="鎾斁" style="width: 30px; height: 30px; opacity: 0.8;" />
- </div>
- <div style="text-align: center; font-size: 12px; color: #666;">鐐瑰嚮鎾斁</div>
- </div>
- </div>
- </div>
-
- <!-- 鐢熶骇闂 -->
- <div class="form-container">
- <div class="title">鐢熶骇闂</div>
-
- <!-- 鍥剧墖鍒楄〃 -->
- <div style="display: flex; flex-wrap: wrap;">
- <img v-for="(item, index) in productionIssuesImgs" :key="index"
- @click="showMedia(productionIssuesImgs, index, 'image')"
- :src="item" style="max-width: 100px; height: 100px; margin: 5px;" alt="">
- </div>
-
- <!-- 瑙嗛鍒楄〃 -->
- <div style="display: flex; flex-wrap: wrap;">
- <div
- v-for="(videoUrl, index) in productionIssuesVideos"
- :key="index"
- @click="showMedia(productionIssuesVideos, index, 'video')"
+ @click="showMedia(videos, index, 'video')"
style="position: relative; margin: 10px; cursor: pointer;"
>
<div style="width: 160px; height: 90px; background-color: #333; display: flex; align-items: center; justify-content: center;">
@@ -85,11 +28,9 @@
</div>
</div>
</el-dialog>
-
- <!-- 缁熶竴濯掍綋鏌ョ湅鍣� -->
+
<div v-if="isMediaViewerVisible" class="media-viewer-overlay" @click.self="closeMediaViewer">
<div class="media-viewer-content" @click.stop>
- <!-- 鍥剧墖 -->
<vue-easy-lightbox
v-if="mediaType === 'image'"
:visible="isMediaViewerVisible"
@@ -97,10 +38,9 @@
:index="currentMediaIndex"
@hide="closeMediaViewer"
></vue-easy-lightbox>
-
- <!-- 瑙嗛 -->
+
<div v-else-if="mediaType === 'video'" style="position: relative;">
- <Video
+ <video
:src="mediaList[currentMediaIndex]"
autoplay
controls
@@ -114,59 +54,83 @@
<script setup>
import { ref } from 'vue';
import VueEasyLightbox from 'vue-easy-lightbox';
+const { proxy } = getCurrentInstance();
-// 鎺у埗寮圭獥鏄剧ず
const dialogVisitable = ref(false);
-// 鍥剧墖鏁扮粍
-const beforeProductionImgs = ref([]);
-const afterProductionImgs = ref([]);
-const productionIssuesImgs = ref([]);
+const images = ref([]);
+const videos = ref([]);
-// 瑙嗛鏁扮粍
-const beforeProductionVideos = ref([]);
-const afterProductionVideos = ref([]);
-const productionIssuesVideos = ref([]);
-
-// 濯掍綋鏌ョ湅鍣ㄧ姸鎬�
const isMediaViewerVisible = ref(false);
const currentMediaIndex = ref(0);
-const mediaList = ref([]); // 瀛樺偍褰撳墠瑕佹煡鐪嬬殑濯掍綋鍒楄〃锛堝惈鍥剧墖鍜岃棰戝璞★級
-const mediaType = ref('image'); // image | video
+const mediaList = ref([]);
+const mediaType = ref('image');
+const javaApi = proxy.javaApi;
-// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
-function processItems(items) {
- const images = [];
- const videos = [];
- items.forEach(item => {
- if (item.contentType?.startsWith('image/')) {
- images.push(item.url);
- } else if (item.contentType?.startsWith('video/')) {
- videos.push(item.url);
+function processFileUrl(fileUrl) {
+ if (!fileUrl) return '';
+
+ if (fileUrl && fileUrl.indexOf('\\') > -1) {
+ const uploadsIndex = fileUrl.toLowerCase().indexOf('uploads');
+ if (uploadsIndex > -1) {
+ const relativePath = fileUrl.substring(uploadsIndex).replace(/\\/g, '/');
+ fileUrl = '/' + relativePath;
+ } else {
+ const parts = fileUrl.split('\\');
+ const fileName = parts[parts.length - 1];
+ fileUrl = '/uploads/' + fileName;
}
- });
- return { images, videos };
+ }
+
+ if (fileUrl && !fileUrl.startsWith('http')) {
+ if (!fileUrl.startsWith('/')) {
+ fileUrl = '/' + fileUrl;
+ }
+ fileUrl = javaApi + fileUrl;
+ }
+
+ return fileUrl;
}
-// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
+function processItems(items) {
+ const imgList = [];
+ const vidList = [];
+
+ if (!items || !Array.isArray(items)) {
+ return { images: imgList, videos: vidList };
+ }
+
+ items.forEach(item => {
+ if (!item || !item.url) return;
+
+ const fileUrl = processFileUrl(item.url);
+
+ const urlLower = fileUrl.toLowerCase();
+ if (urlLower.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/)) {
+ imgList.push(fileUrl);
+ } else if (urlLower.match(/\.(mp4|avi|mov|wmv|flv|mkv|webm)$/)) {
+ vidList.push(fileUrl);
+ } else if (item.contentType) {
+ if (item.contentType.startsWith('image/')) {
+ imgList.push(fileUrl);
+ } else if (item.contentType.startsWith('video/')) {
+ vidList.push(fileUrl);
+ }
+ }
+ });
+
+ return { images: imgList, videos: vidList };
+}
+
const openDialog = async (row) => {
- const { images: beforeImgs, videos: beforeVids } = processItems(row.beforeProduction);
- const { images: afterImgs, videos: afterVids } = processItems(row.afterProduction);
- const { images: issueImgs, videos: issueVids } = processItems(row.productionIssues);
-
- beforeProductionImgs.value = beforeImgs;
- beforeProductionVideos.value = beforeVids;
-
- afterProductionImgs.value = afterImgs;
- afterProductionVideos.value = afterVids;
-
- productionIssuesImgs.value = issueImgs;
- productionIssuesVideos.value = issueVids;
-
+ const { images: imgList, videos: vidList } = processItems(row.commonFileList || []);
+
+ images.value = imgList;
+ videos.value = vidList;
+
dialogVisitable.value = true;
};
-// 鏄剧ず濯掍綋锛堝浘鐗� or 瑙嗛锛�
function showMedia(mediaArray, index, type) {
mediaList.value = mediaArray;
currentMediaIndex.value = index;
@@ -174,14 +138,12 @@
isMediaViewerVisible.value = true;
}
-// 鍏抽棴濯掍綋鏌ョ湅鍣�
function closeMediaViewer() {
isMediaViewerVisible.value = false;
mediaList.value = [];
mediaType.value = 'image';
}
-// 琛ㄥ崟鍏抽棴鏂规硶
const cancel = () => {
dialogVisitable.value = false;
};
@@ -196,7 +158,7 @@
padding: 20px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
-
+
.form-container {
flex: 1;
width: 100%;
@@ -212,7 +174,7 @@
padding-left: 10px;
position: relative;
margin: 6px 0;
-
+
&::before {
content: "";
position: absolute;
--
Gitblit v1.9.3