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 | 69 ++++++++++++++++++++++++++++++----
1 files changed, 60 insertions(+), 9 deletions(-)
diff --git a/src/views/sopManager/sop.vue b/src/views/sopManager/sop.vue
index 106d5c0..4feb41d 100644
--- a/src/views/sopManager/sop.vue
+++ b/src/views/sopManager/sop.vue
@@ -321,7 +321,12 @@
</el-form-item>
</el-form>
- <div style="border: 5px solid #ccc;" class="sop-preview-container">
+ <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
@@ -329,6 +334,7 @@
:src="baseUrl+dialogSopForm.sop"
fit="contain"
class="sop-image-preview"
+ :style="{height: isFullscreen ? '100vh' : '80vh'}"
/>
<!-- PDF 鎴栧叾浠栫被鍨嬩娇鐢� iframe -->
@@ -336,10 +342,9 @@
v-else
id="iframe"
:src="`${baseUrl}${dialogSopForm.sop}#view=FitH`"
- style="width: 100%;height: 80vh"
+ :style="{width: '100%', height: isFullscreen ? '100vh' : '80vh'}"
frameborder="0"
/>
- <!-- :src="baseUrl+dialogSopForm.sop"-->
</div>
<span slot="footer" class="dialog-footer">
@@ -362,15 +367,12 @@
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,
Screenfull
},
@@ -407,7 +409,8 @@
tableDataDetail: [],
rowData: {}, // 琛岀偣鍑讳簨浠跺瓨鍌ㄥ��
SopDialogVisible: false,
- dialogSopForm: { // 璁惧SOP琛ㄥ崟
+ isFullscreen: false, // 鍏ㄥ睆鐘舵��
+ dialogSopForm: { // 璁惧 SOP 琛ㄥ崟
sop: '',
v: ''
},
@@ -447,10 +450,15 @@
errorHandler() {
console.log('娓叉煋澶辫触')
},
+ // 鍒囨崲鍏ㄥ睆
+ toggleFullscreen() {
+ this.isFullscreen = !this.isFullscreen
+ },
// 寮瑰嚭妗嗗叧闂�
handleSopClose() {
this.SopDialogVisible = false
- this.dialogSopForm = { // 璁惧SOP琛ㄥ崟
+ this.isFullscreen = false // 閲嶇疆鍏ㄥ睆鐘舵��
+ this.dialogSopForm = { // 璁惧 SOP 琛ㄥ崟
sop: '',
v: ''
}
@@ -632,11 +640,54 @@
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;
+ //max-height: 80vh;
display: block;
+
}
</style>
--
Gitblit v1.9.3