From 6fabf169ee373a68196d84907eed9346089af9ee Mon Sep 17 00:00:00 2001
From: 小小儁爺 <1694218219@qq.com>
Date: 星期四, 26 三月 2026 09:05:31 +0800
Subject: [PATCH] 1.sop页面优化
---
src/views/sopManager/sop.vue | 67 ++++++++++++++++++++++++---------
1 files changed, 48 insertions(+), 19 deletions(-)
diff --git a/src/views/sopManager/sop.vue b/src/views/sopManager/sop.vue
index 338382c..106d5c0 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,25 @@
</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">
+
+ <!-- 鍥剧墖绫诲瀷棰勮 -->
+ <el-image
+ v-if="isImageType(dialogSopForm.sop)"
:src="baseUrl+dialogSopForm.sop"
+ fit="contain"
+ class="sop-image-preview"
+ />
+
+ <!-- PDF 鎴栧叾浠栫被鍨嬩娇鐢� iframe -->
+ <iframe
+ v-else
+ id="iframe"
+ :src="`${baseUrl}${dialogSopForm.sop}#view=FitH`"
style="width: 100%;height: 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;"-->
- <!-- />-->
-
+ <!-- :src="baseUrl+dialogSopForm.sop"-->
</div>
<span slot="footer" class="dialog-footer">
@@ -366,12 +365,14 @@
// 寮曞叆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() {
@@ -453,6 +454,13 @@
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 +618,25 @@
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;
+}
+
+.sop-image-preview {
+ max-width: 100%;
+ max-height: 80vh;
+ display: block;
+}
</style>
--
Gitblit v1.9.3