1.sop优化

小小儁爺

7 天以前 9e14e61e61a3dfb5271f387bf0844bf31c21daab

 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,10 +321,28 @@
        </el-form-item>
      </el-form>

      <div style="border: 5px solid #ccc;">
        <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"
        />
      </div>
@@ -407,17 +362,19 @@
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'
import pdf from 'vue-pdf'
import Screenfull from '@/components/Screenfull'

export default {
  name: 'WorkOrderList',
  components: {
    Pagination, DateType
    Pagination,
    Screenfull
  },
  directives: { elDragDialog, waves },
  data() {
@@ -446,38 +403,20 @@
        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,
      dialogSopForm: { // 设备SOP表单
      isFullscreen: false, // 全屏状态
      dialogSopForm: { // 设备 SOP 表单
        sop: '',
        v: ''
      },
      sopArr: [],
      baseUrl: process.env.VUE_APP_BASE_API_FILE
      baseUrl: process.env.VUE_APP_BASE_API_FILE,
      numPages: null// pdf总数

    }
  },
@@ -495,18 +434,48 @@
    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('渲染失败')
    },
    // 切换全屏
    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
    },
    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 +489,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 +589,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 +600,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 +619,75 @@
  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;
  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>