1.sop页面优化

小小儁爺

7 天以前 6fabf169ee373a68196d84907eed9346089af9ee

1.sop页面优化

 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>