kd-aiot-frontend-mes/src/components/print/OrderPrint.vue

<template>
  <ele-modal :visible.sync="visible" type="工单打印" width="1200px" :close-on-click-modal="false">
    <div class="print-container" ref="pagesRef">
      <el-row class="main-data">
        <el-col :span="6">
          <div class="bg"> 生产工单号 </div>
          <div class="code">条码区</div>
          <div class="value">{{ infoData.code }}</div>
        </el-col>
        <el-col :span="5">
          <div class="bg">生产版本</div>
          <div class="value">{{ infoData.produceVersionName }}</div>
          <div class="bg">物料编码</div>
          <div class="value">{{ infoData.productCode }}</div>
        </el-col>
        <el-col :span="5">
          <div class="bg">计划编号</div>
          <div class="value">{{ infoData.productionPlanCode }}</div>
          <div class="bg">产品名称</div>
          <div class="value">{{ infoData.productName }}</div>
        </el-col>
        <el-col :span="4">
          <div class="bg">计划类型</div>
          <div class="value">{{ typeList[infoData.planType] }}</div>
          <div class="bg">要求生产数量</div>
          <div class="value">{{ infoData.formingNum }}PCS</div>
        </el-col>
        <el-col :span="4">
          <div class="bg">工单状态</div>
          <div class="value">{{ statusList[infoData.status] }}</div>
          <div class="bg">要求生产重量</div>
          <div class="value">{{ infoData.formingWeight }}KG</div>
        </el-col>
      </el-row>

      <template v-for="(item, index) in processList">
        <el-row
          class="processes-data"
          :key="index"
          v-if="item.taskTypeName === '挤压生产'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 挤压生产</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in extrusion"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>

        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '自然干燥'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 自然干燥</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in drying"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '升温干燥'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 升温干燥</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->

          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in temperature"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName.includes('定长')"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 半加定长</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in halflong"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '备炉'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 备炉</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in furnace"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '烧结'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 烧结</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in sinter"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '质检'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 质检</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in quality"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          class="processes-data"
          :key="index"
          v-else-if="item.taskTypeName === '包装'"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 包装</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in packageOpt"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
            <el-col
              v-for="material in itm.workReportCategoryList.filter(
                (i) => i.rootCategoryLevelId == 10
              )"
              :span="24"
              style="padding-left: 0"
              :key="material.code"
            >
              <el-col :span="8" class="border-dashed-right border-dashed-bottom"
                >物料名称：{{ material.name }}
              </el-col>
              <el-col :span="4" class="border-dashed-right border-dashed-bottom"
                >物料编码：{{ material.code }}
              </el-col>
              <el-col :span="4" class="border-dashed-right border-dashed-bottom"
                >物料数量：{{ material.number }}
              </el-col>
              <el-col :span="8" class="border-dashed-right border-dashed-bottom"
                >批次号：{{ material.batchNo }}
              </el-col>
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row
          :key="index"
          class="processes-data"
          v-else-if="item.taskTypeName.includes('库')"
        >
          <el-col :span="24" class="bg top">
            <div class="title">{{ index + 1 }}0 入库</div>
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in preStorage"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
        <el-row class="processes-data" :key="index" v-else>
          <el-col :span="24" class="bg top">
            <div class="title"
              >{{ index + 1 }}0
              {{
                item.taskTypeName === '深加工'
                  ? '深加工（精磨）'
                  : item.taskTypeName
              }}</div
            >
          </el-col>
          <!-- <el-col :span="10" class="bg top">备注：</el-col> -->
          <template v-for="(itm, idx) in item.list || []">
            <el-col
              :span="t.span"
              class="border-dashed-right border-dashed-bottom"
              v-for="(t, i) in deepProcesse"
              :key="i + '-' + idx"
            >
              {{ t.label }}：{{
                (t.formatter && t.formatter(itm)) || itm[t.key]
              }}
            </el-col>
          </template>
          <el-col :span="24" v-if="!(item.list && item.list.length)">
            <div class="no-data">暂无数据</div>
          </el-col>
        </el-row>
      </template>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="handlePrint">打印</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import {
    downloadPDF,
    canvasSplit,
    a4Height,
    a4Width,
    margin
  } from '@/utils/pdf.js';
  import { printWorkOrderInfo } from '@/api/produceOrder/index.js';
  export default {
    props: {
      infoData: {
        type: Object,
        default: () => ({})
      },
      processList: {
        type: Array,
        default: () => []
      },
      workOrderId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        visible: false,
        typeList: {
          1: '内销订单',
          2: '外销订单',
          3: '预制订单'
        },
        statusList: {
          4: '待生产',
          5: '生产中',
          6: '已完成',
          7: '已延期'
        },
        // 挤压生产
        extrusion: [
          {
            label: '原料牌号',
            key: 'brandNo',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.workReportCategoryList[0]?.brandNum;
            }
          },
          {
            label: '原料批次号',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.workReportCategoryList[0]?.batchNo;
            }
          },
          {
            label: '投料重量(KG)',
            key: 'feedingWeight',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return (
                itm.workReportCategoryList[0]?.number ||
                itm.workReportCategoryList[0]?.totalWeight
              );
            }
          },
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },

          {
            label: '设备号',
            key: 'deviceCode',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },
          {
            label: '模具编号/型号',
            key: 'xxx',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 5
              );
              return obj && obj.code + '/' + obj.model;
            }
          },
          {
            label: '舟皿名称',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.name;
            }
          },
          {
            label: '舟皿数量',
            key: 'boatNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.extraField?.boatNum || '0';
            }
          },

          {
            label: '冲压次数',
            key: 'stampingTimes',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 5
              );
              return obj?.extraField?.stampingTimes;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom'
          },
          {
            label: '备注',
            key: 'remark',
            span: 12,
            class: 'border-dashed-right border-dashed-bottom'
          }
          // {
          //   label: '清缸时长',
          //   key: 'xxx',
          //   span: 8
          // }
        ],
        // 自然干燥
        drying: [
          {
            label: '干燥时长(分钟)',
            key: 'dryingDuration',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.workReportArea?.extraField?.dryTime;
            }
          },
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },
          {
            label: '区域编号',
            key: 'areaCode',
            span: 8,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.workReportArea?.code;
            }
          },

          {
            label: '舟皿编码',
            key: 'xxx',
            span: 8,
            class: 'border-dashed-right ',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.code;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '备注',
            key: 'remark',
            span: 4,
            class: 'border-dashed-right'
          }
        ],
        // 升温燥
        temperature: [
          {
            label: '升温曲线',
            key: 'temperatureRamp',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.extraField?.temperatureRamp;
            }
          },
          // {
          //   label: '干燥时长(分钟)',
          //   key: 'xxx',
          //   span: 4,
          //   class: 'border-dashed-right border-dashed-bottom'
          // },
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },
          {
            label: '设备号',
            key: 'deviceCode',
            span: 8,
            class: ' border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },

          {
            label: '舟皿编码',
            key: 'xxx',
            span: 8,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.code;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '备注',
            key: 'remark',
            span: 8,
            class: 'border-dashed-right'
          }
        ],
        // 半加定长
        halflong: [
          // {
          //   label: '长度(mm)',
          //   key: 'xxx',
          //   span: 8,
          //   class: 'border-dashed-right border-dashed-bottom'
          // },
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },
          {
            label: '设备号',
            key: 'deviceCode',
            span: 8,
            class: ' border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },

          {
            label: '舟皿名称',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.name;
            }
          },
          {
            label: '舟皿数量',
            key: 'boatNum',
            span: 4,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 8
              );
              return obj?.extraField?.boatNum || '0';
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '备注',
            key: 'remark',
            span: 4,
            class: 'border-dashed-right'
          }
        ],
        // 备炉
        furnace: [
          {
            label: '产品数量',
            key: 'xxx',
            span: 8,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = itm.workReportCategoryList.find(
                (i) => i.rootCategoryLevelId == 9
              );
              return obj?.number;
            }
          },
          {
            label: '设备号',
            key: 'deviceCode',
            span: 4,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 8,
            class: 'border-dashed-right'
          }
          // {
          //   label: '备注',
          //   key: 'remark',
          //   span: 4,
          //   class: 'border-dashed-right'
          // }
        ],
        // 烧结
        sinter: [
          // {
          //   label: '烧结曲线',
          //   key: 'sinteringCurve',
          //   span: 4,
          //   class: 'border-dashed-right border-dashed-bottom'
          // },
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom border-dashed-right',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },
          {
            label: '设备号',
            key: 'deviceCode',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '备注',
            key: 'remark',
            span: 4,
            class: 'border-dashed-right'
          }
        ],
        // 质检
        // quality: [
        //   {
        //     label: '半检结果',
        //     key: 'xxx',
        //     span: 12,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '员工号',
        //     key: 'executorJobNum',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '日期',
        //     key: 'executeTime',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '成检结果',
        //     key: 'xxx',
        //     span: 12,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '员工号',
        //     key: 'executorJobNum',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '日期',
        //     key: 'executeTime',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '外径',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '长度',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '垂直度',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '圆度',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '跳动',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-bottom'
        //   },
        //   {
        //     label: '抗拆/损伤',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '直线度',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '粗糙度',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '其它',
        //     key: 'xxx',
        //     span: 4,
        //     class: ' border-dashed-bottom border-dashed-right '
        //   },
        //   {
        //     label: '合格数',
        //     key: 'standardNum',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '合格数',
        //     key: 'noStandardNum',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '待处理',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '让步',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-right border-dashed-bottom'
        //   },
        //   {
        //     label: '可修',
        //     key: 'xxx',
        //     span: 4,
        //     class: 'border-dashed-bottom'
        //   },
        //   {
        //     label: '员工号',
        //     key: 'executorJobNum',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '日期',
        //     key: 'executeTime',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   },
        //   {
        //     label: '备注',
        //     key: 'remark',
        //     span: 4,
        //     class: 'border-dashed-right'
        //   }
        // ],
        // 深加工
        deepProcesse: [
          {
            label: '合格数',
            key: 'standardNum',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.standardNum + '';
            }
          },
          {
            label: '不合格数',
            key: 'noStandardNum',
            span: 4,
            class: 'border-dashed-bottom',
            formatter(itm) {
              return itm.productInfo?.noStandardNum || '0';
            }
          },
          {
            label: '设备号',
            key: 'deviceCode',
            span: 4,
            class: 'border-dashed-right',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 4
              );
              return obj?.code;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '备注',
            key: 'remark',
            span: 4,
            class: 'border-dashed-right'
          }
        ],
        // 包装
        packageOpt: [
          {
            label: '包装要求',
            key: 'xxx',
            span: 8,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.packDemand;
            }
          },
          {
            label: '包装单位',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.packUnit;
            }
          },
          {
            label: '包装数量',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.packNum;
            }
          },
          {
            label: '最小包装单元',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return `${itm.packInfo.minPackNum}PCS/${itm.packInfo.packUnit}`;
            }
          },
          {
            label: '净重',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.netWeight;
            }
          },
          {
            label: '毛重',
            key: 'xxx',
            span: 4,
            class: ' border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.roughWeight;
            }
          },
          {
            label: '尾料',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              return itm?.packInfo?.surplusNum;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 4,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 12,
            class: 'border-dashed-right'
          }
          // {
          //   label: '备注',
          //   key: 'remark',
          //   span: 12,
          //   class: 'border-dashed-right'
          // }
        ],
        // 预缴库
        preStorage: [
          {
            label: '产品数量',
            key: 'xxx',
            span: 4,
            class: 'border-dashed-right border-dashed-bottom',
            formatter(itm) {
              const obj = (itm.workReportDeviceList || []).find(
                (i) => i.rootCategoryLevelId == 9
              );
              return obj?.number;
            }
          },
          {
            label: '员工号',
            key: 'executorJobNum',
            span: 8,
            class: 'border-dashed-right'
          },
          {
            label: '日期',
            key: 'executeTime',
            span: 12,
            class: 'border-dashed-right'
          }
        ]
      };
    },

    methods: {
      open() {
        this.visible = true;
        this.init();
      },
      init() {
        for (const p of this.processList) {
          this.$set(p, 'list', []);
        }
        printWorkOrderInfo(this.workOrderId).then((res) => {
          for (const t of res.taskInfo) {
            for (const p of this.processList) {
              if (t.taskName === p.taskTypeName && t.taskCode === p.taskCode) {
                p.list.push(t);
              }
            }
          }
        });
      },
      cancel() {
        this.visible = false;
      },
      //打印
      handlePrint() {
        this.PrintLoading = true;
        const page = this.$refs.pagesRef;

        const pHeight = page.offsetHeight;
        const pWidth = page.offsetWidth;

        const lineHeight = 36;

        const onePageHeight = (a4Height / a4Width) * pWidth;

        const maxPageHeight = Math.min(
          Math.floor(onePageHeight / lineHeight) * lineHeight,
          pHeight
        );

        let leftH = pHeight;

        const splitPos = [];

        do {
          splitPos.push(
            (splitPos[splitPos.length - 1] || 0) +
              (leftH > maxPageHeight ? maxPageHeight : leftH)
          );
          leftH -= maxPageHeight;
        } while (leftH > 0);

        downloadPDF(page, splitPos, '生产工单').then(
          () => (this.PrintLoading = false)
        );
      }
    }
  };
</script>
<style scoped lang="scss">
  $heihgt: 36px;
  $border: 1px solid #ddd;

  * {
    box-sizing: border-box !important;
  }

  .bg {
    background-color: #f1f1f1;
    line-height: $heihgt - 2px;
    height: $heihgt;
  }

  .border-dashed-right {
    border-right: $border;
  }

  .border-dashed-bottom {
    border-bottom: $border;
  }

  .main-data {
    .bg {
      text-align: center;
      border-right: $border;
      border-bottom: $border;
    }

    .value {
      line-height: $heihgt - 2px;
      height: $heihgt;
      border-right: $border;
      border-bottom: $border;
      padding-left: 10px;
    }

    .code {
      line-height: 2 * $heihgt;
      height: 2 * $heihgt;
      border-right: $border;
      border-bottom: $border;
      text-align: center;
      color: rgba(0, 0, 0, 0.3);
      font-size: 18px;
    }
  }

  .print-container {
    border-top: $border;
    border-left: $border;
    border-right: $border;
    font-size: 14px;
  }

  .processes-data {
    .title {
      color: #000;
      font-weight: bold;
    }

    :deep(.el-col) {
      line-height: $heihgt - 2px;
      height: $heihgt;
      padding-left: 10px;
    }

    .top {
      border-top: $border;
      border-bottom: $border;
    }
  }
</style>