From c4439dd57d5550f9deace69a5facbeb68a81f34e Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 20 六月 2025 17:09:00 +0800
Subject: [PATCH] 1.巡检管理-已上传的图片和视频预览
---
src/assets/images/video.png | 0
package.json | 1
src/views/inspectionManagement/components/viewFiles.vue | 246 +++++++++++++++++++++++++++++++++++++++++++++++++
src/views/inspectionManagement/index.vue | 15 ++
src/components/Table/ETable.vue | 5 +
5 files changed, 266 insertions(+), 1 deletions(-)
diff --git a/package.json b/package.json
index d916e6c..d69c048 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
"splitpanes": "3.1.5",
"vue": "3.4.31",
"vue-cropper": "1.1.1",
+ "vue-easy-lightbox": "^1.19.0",
"vue-qrcode": "^2.2.2",
"vue-router": "4.4.0",
"vuedraggable": "4.1.0"
diff --git a/src/assets/images/video.png b/src/assets/images/video.png
new file mode 100644
index 0000000..7a90175
--- /dev/null
+++ b/src/assets/images/video.png
Binary files differ
diff --git a/src/components/Table/ETable.vue b/src/components/Table/ETable.vue
index 24fe060..ca9c483 100644
--- a/src/components/Table/ETable.vue
+++ b/src/components/Table/ETable.vue
@@ -37,6 +37,8 @@
<slot name="operations" :row="scope.row">
<el-button v-if="operations.includes('edit')" link type="primary" size="small"
@click="handleEdit(scope.row)">缂栬緫</el-button>
+ <el-button v-if="operations.includes('viewFile')" link type="primary" size="small"
+ @click="handleView(scope.row)">鏌ョ湅闄勪欢</el-button>
<!-- <el-button-->
<!-- v-if="operations.includes('delete')"-->
<!-- link-->
@@ -173,6 +175,9 @@
const handleEdit = (row) => {
emit('edit', row)
}
+const handleView = (row) => {
+ emit('viewFile', row)
+}
const handleDelete = (row) => {
ElMessageBox.confirm(
props.deleteConfirmText,
diff --git a/src/views/inspectionManagement/components/viewFiles.vue b/src/views/inspectionManagement/components/viewFiles.vue
new file mode 100644
index 0000000..d1c9d8d
--- /dev/null
+++ b/src/views/inspectionManagement/components/viewFiles.vue
@@ -0,0 +1,246 @@
+<template>
+ <div>
+ <el-dialog title="鏌ョ湅闄勪欢"
+ v-model="dialogVisitable" width="800px" @close="cancel">
+ <div class="upload-container">
+ <!-- 鐢熶骇鍓� -->
+ <div class="form-container">
+ <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')"
+ :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"
+ :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')"
+ 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>
+ </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"
+ :imgs="mediaList"
+ :index="currentMediaIndex"
+ @hide="closeMediaViewer"
+ ></vue-easy-lightbox>
+
+ <!-- 瑙嗛 -->
+ <div v-else-if="mediaType === 'video'" style="position: relative;">
+ <Video
+ :src="mediaList[currentMediaIndex]"
+ autoplay
+ controls
+ style="max-width: 90vw; max-height: 80vh;"
+ />
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+<script setup>
+import { ref } from 'vue';
+import VueEasyLightbox from 'vue-easy-lightbox';
+
+// 鎺у埗寮圭獥鏄剧ず
+const dialogVisitable = ref(false);
+
+// 鍥剧墖鏁扮粍
+const beforeProductionImgs = ref([]);
+const afterProductionImgs = ref([]);
+const productionIssuesImgs = 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
+
+// 澶勭悊姣忎竴绫绘暟鎹細鍒嗙鍥剧墖鍜岃棰�
+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);
+ }
+ });
+ return { images, videos };
+}
+
+// 鎵撳紑寮圭獥骞跺姞杞芥暟鎹�
+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;
+
+ dialogVisitable.value = true;
+};
+
+// 鏄剧ず濯掍綋锛堝浘鐗� or 瑙嗛锛�
+function showMedia(mediaArray, index, type) {
+ mediaList.value = mediaArray;
+ currentMediaIndex.value = index;
+ mediaType.value = type;
+ isMediaViewerVisible.value = true;
+}
+
+// 鍏抽棴濯掍綋鏌ョ湅鍣�
+function closeMediaViewer() {
+ isMediaViewerVisible.value = false;
+ mediaList.value = [];
+ mediaType.value = 'image';
+}
+
+// 琛ㄥ崟鍏抽棴鏂规硶
+const cancel = () => {
+ dialogVisitable.value = false;
+};
+
+defineExpose({ openDialog });
+</script>
+<style scoped lang="scss">
+.upload-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 20px;
+ border: 1px solid #dcdfe6;
+ box-sizing: border-box;
+
+ .form-container {
+ flex: 1;
+ width: 100%;
+ margin-bottom: 20px;
+ }
+}
+
+.title {
+ font-size: 14px;
+ color: #165dff;
+ line-height: 20px;
+ font-weight: 600;
+ padding-left: 10px;
+ position: relative;
+ margin: 6px 0;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 0;
+ top: 3px;
+ width: 4px;
+ height: 14px;
+ background-color: #165dff;
+ }
+}
+
+.media-viewer-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 9999;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.media-viewer-content {
+ position: relative;
+ max-width: 90vw;
+ max-height: 90vh;
+ overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/inspectionManagement/index.vue b/src/views/inspectionManagement/index.vue
index bb313fd..64bc036 100644
--- a/src/views/inspectionManagement/index.vue
+++ b/src/views/inspectionManagement/index.vue
@@ -51,7 +51,11 @@
:show-selection="true"
:border="true"
:maxHeight="480"
- @edit="handleAdd"></ETable>
+ operationsWidth="130"
+ :operations="['edit', 'viewFile']"
+ @edit="handleAdd"
+ @viewFile="viewFile"
+ ></ETable>
</div>
<pagination
v-if="total>0"
@@ -65,6 +69,7 @@
</el-card>
<form-dia ref="formDia" @closeDia="handleQuery"></form-dia>
<qr-code-dia ref="qrCodeDia" @closeDia="handleQuery"></qr-code-dia>
+ <view-files ref="viewFiles"></view-files>
</div>
</template>
@@ -77,9 +82,11 @@
import FormDia from "@/views/inspectionManagement/components/formDia.vue";
import QrCodeDia from "@/views/inspectionManagement/components/qrCodeDia.vue";
import {delInspectionTask, inspectionTaskList} from "@/api/inspectionManagement/index.js";
+import ViewFiles from "@/views/inspectionManagement/components/viewFiles.vue";
const formDia = ref()
const qrCodeDia = ref()
+const viewFiles = ref()
// 鏌ヨ鍙傛暟
const queryParams = reactive({
supplierName: "",
@@ -154,6 +161,12 @@
}
})
};
+// 鏌ョ湅闄勪欢
+const viewFile = (row) => {
+ nextTick(() => {
+ viewFiles.value?.openDialog(row)
+ })
+}
// 鍒犻櫎浠诲姟
const handleDelete = () => {
if (selectedRows.value.length === 0) {
--
Gitblit v1.9.3