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 | 238 +++++++++++++++++++++++++++--------------------------------
1 files changed, 110 insertions(+), 128 deletions(-)
diff --git a/src/views/sopManager/sop.vue b/src/views/sopManager/sop.vue
index 284fd4d..106d5c0 100644
--- a/src/views/sopManager/sop.vue
+++ b/src/views/sopManager/sop.vue
@@ -6,7 +6,9 @@
娴欐睙浼樻浣撹偛鐢ㄥ搧鑲′唤鏈夐檺鍏徃宸ュ簭SOP
</div>
- <div class="bodyTopFormGroup" style="margin-top: 0px;">
+ <screenfull id="screenfull" class="right-menu-item hover-effect" />
+
+ <div class="bodyTopFormGroup">
<el-form
ref="form"
:model="form"
@@ -31,66 +33,24 @@
/>
</el-select>
</el-form-item>
- <el-form-item label="宸ュ崟鐘舵��" style=" display: flex;">
- <el-select
- v-model="form.mesorderstus"
- :popper-append-to-body="false"
- style="width: 200px"
- placeholder="璇烽�夋嫨"
- filterable
- >
- <el-option
- v-for="item in erporderstusArr"
- :key="item.code"
- :label="item.name"
- :value="item.code"
- />
- </el-select>
- </el-form-item>
<el-form-item label="宸ュ崟缂栧彿" style=" display: flex;">
<el-input v-model="form.mesordercode" placeholder="璇疯緭鍏�" style="width: 200px" />
</el-form-item>
<el-form-item label="婧愬崟鍗曞彿" style="display: flex;">
<el-input v-model="form.sourceorder" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
- <el-form-item label="閿�鍞鍗�" style="display: flex;">
+ <el-form-item v-show="isExpandForm" label="閿�鍞鍗�" style="display: flex;">
<el-input v-model="form.saleordercode" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
- <!-- <el-form-item v-show="isExpandForm" label="鍗曟嵁绫诲瀷" style=" display: flex;">-->
- <!-- <el-select-->
- <!-- v-model="form.ordertype"-->
- <!-- :popper-append-to-body="false"-->
- <!-- style="width: 200px"-->
- <!-- placeholder="璇烽�夋嫨"-->
- <!-- >-->
- <!-- <el-option-->
- <!-- v-for="item in ordertypeArr"-->
- <!-- :key="item.code"-->
- <!-- :label="item.name"-->
- <!-- :value="item.code"-->
- <!-- />-->
- <!-- </el-select>-->
- <!-- </el-form-item>-->
<el-form-item v-show="isExpandForm" label="浜у搧缂栫爜" style=" display: flex;">
<el-input v-model="form.partcode" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
<el-form-item v-show="isExpandForm" label="浜у搧鍚嶇О" style=" display: flex;">
<el-input v-model="form.partname" style="width: 200px" placeholder="璇疯緭鍏�" />
</el-form-item>
- <el-form-item v-show="isExpandForm" label="浜у搧瑙勬牸" style=" display: flex;">
- <el-input v-model="form.partspec" style="width: 200px" placeholder="璇疯緭鍏�" />
- </el-form-item>
- <el-form-item v-show="isExpandForm" label="鍒涘缓浜哄憳" style=" display: flex;">
- <el-input v-model="form.creatuser" style="width: 200px" placeholder="璇疯緭鍏�" />
- </el-form-item>
- <DateType
- ref="DateTypeRef"
- :is-expand-form="isExpandForm"
- style="display:flex;justify-content: center;align-items: center;position: relative"
- :datatype-list="datatypeList"
- @DateTypeChange="DateTypeChange"
- @cycleTimeChange="cycleTimeChange"
- />
+ <!-- <el-form-item v-show="isExpandForm" label="浜у搧瑙勬牸" style=" display: flex;">-->
+ <!-- <el-input v-model="form.partspec" style="width: 200px" placeholder="璇疯緭鍏�" />-->
+ <!-- </el-form-item>-->
</div>
<div
@@ -121,7 +81,7 @@
</div>
</div>
- <div class="elTableDiv">
+ <div class="elTableDiv" style="margin: 5px 0;">
<el-table
ref="tableDataRef"
class="tableFixed"
@@ -129,7 +89,7 @@
:height="isExpandForm?tableHeight:(tableHeight+40)+'px'"
border
:row-class-name="tableRowClassName"
- :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+80)+'px'}"
+ :style="{width: 100+'%',height:isExpandForm?tableHeight:(tableHeight+40)+'px'}"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
:cell-style="this.$cellStyle"
@@ -143,13 +103,27 @@
fixed
/>
<el-table-column
+ prop="wkshp_name"
+ label="鐢熶骇杞﹂棿"
+ width="120"
+ show-tooltip-when-overflow
+ sortable="custom"
+ >
+ <template slot-scope="{row}">
+ <div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>
+ <div v-else>/</div>
+ </template>
+ </el-table-column>
+ <el-table-column
prop="wo_code"
label="宸ュ崟缂栧彿"
+ width="160"
show-tooltip-when-overflow
sortable="custom"
/>
<el-table-column
prop="m_po"
+ width="160"
label="婧愬崟鍗曞彿"
sortable="custom"
show-tooltip-when-overflow
@@ -163,6 +137,7 @@
prop="saleOrderCode"
label="閿�鍞鍗�"
sortable="custom"
+ width="160"
show-tooltip-when-overflow
>
<template slot-scope="{row}">
@@ -178,7 +153,6 @@
/>
<el-table-column
prop="partname"
-
label="浜у搧鍚嶇О"
show-tooltip-when-overflow
sortable="custom"
@@ -187,7 +161,6 @@
prop="partspec"
label="浜у搧瑙勬牸"
sortable="custom"
-
show-tooltip-when-overflow
>
<template slot-scope="{row}">
@@ -195,7 +168,6 @@
<div v-else>/</div>
</template>
</el-table-column>
-
<el-table-column
prop="route_name"
label="宸ヨ壓璺嚎"
@@ -207,30 +179,18 @@
<div v-else>/</div>
</template>
</el-table-column>
-
<el-table-column
prop="plan_qty"
label="宸ュ崟鏁�"
+ width="120"
sortable="custom"
show-tooltip-when-overflow
/>
-
- <el-table-column
- prop="wkshp_name"
- label="鐢熶骇杞﹂棿"
- show-tooltip-when-overflow
- sortable="custom"
- >
- <template slot-scope="{row}">
- <div v-if="row.wkshp_name">{{ row.wkshp_name }}</div>
- <div v-else>/</div>
- </template>
- </el-table-column>
-
</el-table>
</div>
<!--鍒嗛〉-->
<pagination
+ style="padding: 2px 0 4px 0"
:total="total"
:page.sync="form.page"
:limit.sync="form.rows"
@@ -240,12 +200,12 @@
@pagination="getMesOrderSearch"
/>
- <div class="elTableDiv">
+ <div class="elTableDiv" style="margin: 5px 0;">
<el-table
ref="tableDataRef2"
:data="tableDataDetail"
border
- height="310px"
+ height="190"
:row-class-name="tableRowClassName"
highlight-current-row
:header-cell-style="this.$headerCellStyle"
@@ -257,20 +217,6 @@
prop="搴忓彿"
fixed
/>
-
- <!-- <el-table-column-->
- <!-- prop="partcode"-->
- <!-- label="浜у搧缂栫爜"-->
- <!-- width="150"-->
- <!-- show-tooltip-when-overflow-->
- <!-- />-->
- <!-- <el-table-column-->
- <!-- prop="partname"-->
- <!-- label="浜у搧鍚嶇О"-->
- <!-- width="200"-->
- <!-- show-tooltip-when-overflow-->
- <!-- />-->
-
<el-table-column
label="宸ュ簭缂栫爜"
prop="step_code"
@@ -326,21 +272,13 @@
>
<template slot-scope="{row}">
<div class="operationClass">
- <el-tooltip v-del-tab-index class="item" effect="dark" content="SOP棰勮" placement="top">
- <i
- class="el-icon-files"
- style="cursor: pointer;color:#42b983;margin-right: 15px"
- @click="view(row)"
- />
- </el-tooltip>
-
+ <el-button type="text" @click="view(row)">棰勮</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
-
<!-- sop-->
<el-dialog
title="娴欐睙浼樻浣撹偛鐢ㄥ搧鑲′唤鏈夐檺鍏徃SOP棰勮"
@@ -352,7 +290,6 @@
>
<el-form inline label-width="110px" style="display:flex">
-
<el-form-item label="宸ュ崟鍙�">
<el-input v-model="rowData.wo_code" disabled style="width: 200px" />
</el-form-item>
@@ -384,12 +321,25 @@
</el-form-item>
</el-form>
- <div style="border: 5px solid #ccc;">
- <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"
/>
+ <!-- :src="baseUrl+dialogSopForm.sop"-->
</div>
<span slot="footer" class="dialog-footer">
@@ -407,17 +357,22 @@
import elDragDialog from '@/directive/el-drag-dialog'
import waves from '@/directive/waves'
import { PrentOrganizationNoCompany } from '@/api/GeneralBasicData'
-import DateType from '@/components/DateType'
import {
SopSearchMesOrderProcessSopSearch,
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: {
- Pagination, DateType
+ VueOfficePdf,
+ Pagination,
+ Screenfull
},
directives: { elDragDialog, waves },
data() {
@@ -446,29 +401,9 @@
page: 1, // 绗嚑椤�
rows: 20 // 姣忛〉澶氬皯鏉�
},
- erporderstusArr: [
- { code: 'NEW', name: '鏂板伐鍗�' },
- // { code: 'CREATING', name: '鎵ц涓�' },
- // { code: 'CREATED', name: '宸插叧闂�' }
- { code: 'ALLO', name: '宸叉淳鍙�' },
- { code: 'START', name: '寮�宸�' },
- { code: 'CLOSED', name: '瀹屽伐' }
- // { code: 'NOSCHED', name: '寰呮帓绋�' },
- // { code: 'SCHED', name: '宸叉帓绋�' }
- ],
wkshopcodeArr: [],
total: 10,
tableData: [],
- ordertypeArr: [// 宸ュ崟绫诲瀷
- { code: 'PO', name: '鏍囧噯宸ュ崟' },
- { code: 'FO', name: '鎶ュ簾琛ュ崟' }
- ],
- datatypeList: [
- { code: 'PS', name: '棰勮寮�宸ユ棩鏈�' },
- { code: 'PE', name: '棰勮瀹屽伐鏃ユ湡' },
- { code: 'ED', name: '棰勮浜や粯鏃ユ湡' },
- { code: 'CT', name: '宸ュ崟鍒涘缓鏃ユ湡' }
- ],
tableDataDetail: [],
rowData: {}, // 琛岀偣鍑讳簨浠跺瓨鍌ㄥ��
SopDialogVisible: false,
@@ -477,7 +412,8 @@
v: ''
},
sopArr: [],
- baseUrl: process.env.VUE_APP_BASE_API_FILE
+ baseUrl: process.env.VUE_APP_BASE_API_FILE,
+ numPages: null// pdf鎬绘暟
}
},
@@ -495,6 +431,22 @@
this.getHeight()
},
methods: {
+ getNumPages(url) {
+ const loadingTask = pdf.createLoadingTask(url)
+ console.log(loadingTask)
+ loadingTask.promise.then(pdf => {
+ this.numPages = pdf._pdfInfo.numPages// 杩欓噷鏄〉鐮侊紝鍙兘璧嬪�间笉涓�鏍凤紝鍙互鎵撳嵃鐪嬩竴涓�
+ console.log('pdf', pdf, this.numPages)
+ }).catch(err => {
+ console.error('pdf 鍔犺浇澶辫触', err)
+ })
+ },
+ renderedHandler() {
+ console.log('娓叉煋瀹屾垚')
+ },
+ errorHandler() {
+ console.log('娓叉煋澶辫触')
+ },
// 寮瑰嚭妗嗗叧闂�
handleSopClose() {
this.SopDialogVisible = false
@@ -503,10 +455,19 @@
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
},
async view(row) {
+ // window.open('http://121.196.36.24:8049/APP/Chrome.apk')
+
const data = {
materielcode: this.rowData.partcode,
routecode: this.rowData.route_code,
@@ -520,14 +481,9 @@
this.sopArr = res
this.dialogSopForm.sop = res[0].filepath
this.dialogSopForm.v = res[0].version
- this.SopDialogVisible = true
- },
- DateTypeChange(value) {
- this.form.datatype = value
- },
- cycleTimeChange(val) {
- this.form.timeValue = val
+ this.getNumPages(this.baseUrl + this.dialogSopForm.sop)
+ this.SopDialogVisible = true
},
tableRowClassName({ row, rowIndex }) {
return 'custom-row'
@@ -625,7 +581,7 @@
getHeight() {
this.$nextTick(() => {
this.mainHeight = window.innerHeight
- this.tableHeight = this.mainHeight - 600
+ this.tableHeight = this.mainHeight - 450
this.$refs.tableDataRef.doLayout()
this.$refs.tableDataRef2.doLayout()
})
@@ -636,17 +592,17 @@
</script>
<style scoped lang="scss">
-.footerButton{
+.footerButton {
position: absolute;
bottom: 15px;
margin-left: calc(50% - 50px);
}
-::v-deep .el-dialog__body{
+::v-deep .el-dialog__body {
padding: 0 20px !important;
}
-.headTitle{
+.headTitle {
height: 70px;
display: flex;
justify-content: center;
@@ -655,6 +611,32 @@
font-weight: bolder;
font-family: Arial;
//font-family: "Avenir", Helvetica, Arial, sans-serif;
+}
+.pagination-container {
+ ::v-deep .el-input__inner {
+ 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