From 9e14e61e61a3dfb5271f387bf0844bf31c21daab Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 26 三月 2026 10:38:16 +0800
Subject: [PATCH] 1.sop优化
---
src/views/sopManager/sop.vue | 130 +++++++++++++++++++++++++++++++++++--------
1 files changed, 105 insertions(+), 25 deletions(-)
diff --git a/src/views/sopManager/sop.vue b/src/views/sopManager/sop.vue
index 338382c..4feb41d 100644
--- a/src/views/sopManager/sop.vue
+++ b/src/views/sopManager/sop.vue
@@ -6,6 +6,8 @@
娴欐睙浼樻浣撹偛鐢ㄥ搧鑲′唤鏈夐檺鍏徃宸ュ簭SOP
</div>
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
<div class="bodyTopFormGroup">
<el-form
ref="form"
@@ -277,7 +279,6 @@
</el-table>
</div>
</div>
-
<!-- sop-->
<el-dialog
title="娴欐睙浼樻浣撹偛鐢ㄥ搧鑲′唤鏈夐檺鍏徃SOP棰勮"
@@ -320,27 +321,30 @@
</el-form-item>
</el-form>
- <div style="border: 5px solid #ccc;">
- <!-- <vue-office-pdf-->
- <!-- :src="baseUrl+dialogSopForm.sop"-->
- <!-- style="width: 100%;height: 80vh"-->
- <!-- @rendered="renderedHandler"-->
- <!-- @error="errorHandler"-->
- <!-- />-->
- <iframe
+ <div style="border: 5px solid #ccc;" class="sop-preview-container" :class="{ 'fullscreen': isFullscreen }">
+ <!-- 鍏ㄥ睆鍒囨崲鎸夐挳 -->
+ <div class="fullscreen-toggle" @click="toggleFullscreen">
+ <svg-icon v-if="!isFullscreen" icon-class="fullscreen" />
+ <svg-icon v-else icon-class="exit-fullscreen" />
+ </div>
+
+ <!-- 鍥剧墖绫诲瀷棰勮 -->
+ <el-image
+ v-if="isImageType(dialogSopForm.sop)"
:src="baseUrl+dialogSopForm.sop"
- style="width: 100%;height: 80vh"
+ fit="contain"
+ class="sop-image-preview"
+ :style="{height: isFullscreen ? '100vh' : '80vh'}"
+ />
+
+ <!-- PDF 鎴栧叾浠栫被鍨嬩娇鐢� iframe -->
+ <iframe
+ v-else
+ id="iframe"
+ :src="`${baseUrl}${dialogSopForm.sop}#view=FitH`"
+ :style="{width: '100%', height: isFullscreen ? '100vh' : '80vh'}"
frameborder="0"
/>
- <!-- <pdf-->
- <!-- v-for="item in numPages"-->
- <!-- :key="item"-->
- <!-- ref="pdf"-->
- <!-- :src="baseUrl+dialogSopForm.sop"-->
- <!-- :page="item"-->
- <!-- style="display: inline-block;width: 800px;height: 500px;"-->
- <!-- />-->
-
</div>
<span slot="footer" class="dialog-footer">
@@ -363,15 +367,14 @@
SopSearchMesOrderSearch,
SopSearchUpdateMesOrderStepSearch
} from '@/api/SopManager'
-// 寮曞叆VueOfficePdf缁勪欢
-import VueOfficePdf from '@vue-office/pdf'
import pdf from 'vue-pdf'
+import Screenfull from '@/components/Screenfull'
export default {
name: 'WorkOrderList',
components: {
- VueOfficePdf,
- Pagination
+ Pagination,
+ Screenfull
},
directives: { elDragDialog, waves },
data() {
@@ -406,7 +409,8 @@
tableDataDetail: [],
rowData: {}, // 琛岀偣鍑讳簨浠跺瓨鍌ㄥ��
SopDialogVisible: false,
- dialogSopForm: { // 璁惧SOP琛ㄥ崟
+ isFullscreen: false, // 鍏ㄥ睆鐘舵��
+ dialogSopForm: { // 璁惧 SOP 琛ㄥ崟
sop: '',
v: ''
},
@@ -446,13 +450,25 @@
errorHandler() {
console.log('娓叉煋澶辫触')
},
+ // 鍒囨崲鍏ㄥ睆
+ toggleFullscreen() {
+ this.isFullscreen = !this.isFullscreen
+ },
// 寮瑰嚭妗嗗叧闂�
handleSopClose() {
this.SopDialogVisible = false
- this.dialogSopForm = { // 璁惧SOP琛ㄥ崟
+ this.isFullscreen = false // 閲嶇疆鍏ㄥ睆鐘舵��
+ this.dialogSopForm = { // 璁惧 SOP 琛ㄥ崟
sop: '',
v: ''
}
+ },
+ // 鍒ゆ柇鏄惁涓哄浘鐗囩被鍨�
+ isImageType(filepath) {
+ if (!filepath) return false
+ const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp']
+ const lowerPath = filepath.toLowerCase()
+ return imageExtensions.some(ext => lowerPath.endsWith(ext))
},
sopChange(val) {
this.dialogSopForm.v = this.sopArr.find(i => i.filepath === val).version
@@ -610,4 +626,68 @@
height: 26px !important;
}
}
+
+#screenfull{
+ position: absolute;
+ right: 20px;
+ top:20px;
+ font-size: 28px;
+ cursor: pointer;
+}
+
+.sop-preview-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 80vh;
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+.fullscreen {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ z-index: 9999;
+ background: #fff;
+ border: none !important;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+}
+
+.fullscreen-toggle {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ z-index: 10000;
+ cursor: pointer;
+ width: 40px;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 50%;
+ transition: all 0.3s ease;
+
+ &:hover {
+ background: rgba(0, 0, 0, 0.8);
+ transform: scale(1.1);
+ }
+
+ ::v-deep .svg-icon {
+ font-size: 20px;
+ color: #fff;
+ }
+}
+
+.sop-image-preview {
+ max-width: 100%;
+ //max-height: 80vh;
+ display: block;
+
+}
</style>
--
Gitblit v1.9.3