1.sop优化

小小儁爺

8 小时以前 b5272a50e48ee65f260bee54b70f389c98cc267a

 src/views/sopManager/sop.vue

@@ -6,7 +6,7 @@
        浙江优步体育用品股份有限公司工序SOP
      </div>

      <div class="bodyTopFormGroup" style="margin-top: 0px;">
      <div class="bodyTopFormGroup">
        <el-form
          ref="form"
          :model="form"
@@ -31,66 +31,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 +79,7 @@
        </div>
      </div>

      <div class="elTableDiv">
      <div class="elTableDiv" style="margin: 5px 0;">
        <el-table
          ref="tableDataRef"
          class="tableFixed"
@@ -129,7 +87,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 +101,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 +135,7 @@
            prop="saleOrderCode"
            label="销售订单"
            sortable="custom"
            width="160"
            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
@@ -178,7 +151,6 @@
          />
          <el-table-column
            prop="partname"

            label="产品名称"
            show-tooltip-when-overflow
            sortable="custom"
@@ -187,7 +159,6 @@
            prop="partspec"
            label="产品规格"
            sortable="custom"

            show-tooltip-when-overflow
          >
            <template slot-scope="{row}">
@@ -195,7 +166,6 @@
              <div v-else>/</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="route_name"
            label="工艺路线"
@@ -207,30 +177,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 +198,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 +215,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,14 +270,7 @@
          >
            <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>
@@ -385,11 +322,27 @@
      </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
          :src="baseUrl+dialogSopForm.sop"
          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;"-->
        <!--        />-->

      </div>

      <span slot="footer" class="dialog-footer">
@@ -407,17 +360,20 @@
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'

export default {
  name: 'WorkOrderList',
  components: {
    Pagination, DateType
    VueOfficePdf,
    Pagination
  },
  directives: { elDragDialog, waves },
  data() {
@@ -446,29 +402,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 +413,8 @@
        v: ''
      },
      sopArr: [],
      baseUrl: process.env.VUE_APP_BASE_API_FILE
      baseUrl: process.env.VUE_APP_BASE_API_FILE,
      numPages: null// pdf总数

    }
  },
@@ -495,6 +432,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
@@ -507,6 +460,8 @@
      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 +475,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 +575,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 +586,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 +605,11 @@
  font-weight: bolder;
  font-family: Arial;
  //font-family: "Avenir", Helvetica, Arial, sans-serif;
}

.pagination-container {
  ::v-deep .el-input__inner {
    height: 26px !important;
  }
}
</style>