jonhon-mes-web/src/views/qualityManagement/inspectionArchiving/ERecord/printBlDialog.vue

<template>
    <el-dialog title="打印预览" append-to-body :modelValue="showPrint" fullscreen width="85%" 
      @close="closeDialog">
        <el-button v-print="printConfig" type="primary" class="printButton no-print">打 印</el-button>
        <div id="printMe" ref="printContent" class="printBox">
          
          <div class="fixTopLeft">JONHON受控</div>
          <div class="printTitle">热表分厂质量记录卡</div>
          <div class="tableNo">表号：</div>
         
            <table v-loading="loading" id="cus-table" cellspacing="0" style="width:100%">
      <tbody>
      <tr>
        <td colspan="3">订单号</td>
        <td colspan="2">{{ prWorkOrder.woCode }}</td>
        <td colspan="3">玻璃饼号</td>
        <td colspan="2">{{ dsPart.partName }}</td>
        <td colspan="2">批次号</td>
        <td colspan="2">{{ prWorkOrder.batchNo }}</td>
      </tr>
      <tr>
        <td colspan="3">数量</td>
        <td colspan="2">{{ prWorkOrder.pjYieldOrder.poQty }}</td>
        <td colspan="3">成型厚度(mm)</td>
        <td colspan="2">{{ dsPart.formingThickness }}</td>
        <td colspan="2">粉重(g)</td>
        <td colspan="2">{{ dsPart.powderWeight }}</td>
      </tr>
      <!-- 生产过程 -->
      <tr>
        <td colspan="14" style="font-size:19px">生产过程</td>
      </tr>
      <tr>
        <td>序号</td>
        <td>工序</td>
        <td colspan="12">内容</td>
      </tr>
      <template v-for="(prWpItem,prWpIndex) in prWorkPlanList" :key="prWpIndex">
        <tr>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼压制'" :rowspan="prWpItem.totalPrList+2">{{ prWpItem.orders  }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼压制'" :rowspan="prWpItem.totalPrList+2">{{ prWpItem.procedureSet.ppsName }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼振光'" :rowspan="3">{{ prWpItem.orders }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼振光'" :rowspan="3">{{ prWpItem.procedureSet.ppsName }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼排蜡玻化' || prWpItem.procedureSet.ppsName == '玻璃饼印字'" :rowspan="prWpItem.totalPrList+2">{{ prWpItem.orders }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃饼排蜡玻化' || prWpItem.procedureSet.ppsName == '玻璃饼印字'" :rowspan="prWpItem.totalPrList+2">{{ prWpItem.procedureSet.ppsName }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃封接零件检验'" :rowspan="prWpItem.printChildCheck != null ? prWpItem.printChildCheck.length+3:2">{{ prWpItem.orders }}</td>
          <td v-if="prWpItem.procedureSet.ppsName == '玻璃封接零件检验'" :rowspan="prWpItem.printChildCheck != null ? prWpItem.printChildCheck.length+3:2">{{ prWpItem.procedureSet.ppsName }}</td>
        </tr>
        <template v-if="prWpItem.procedureSet.ppsName == '玻璃饼压制'">
          <tr :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td colspan="3">玻璃粉牌号</td>
            <td colspan="3">玻璃粉检验编号</td>
            <td colspan="2">制饼粉重(g)</td>
            <td colspan="2">模具编号</td>
            <td>设备编号</td>
            <td>操作者</td>
          </tr>
          <tr v-if="prWpItem != null && prWpItem.prList != null" :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td colspan="3">{{ prWpItem.prList[0] ? prWpItem.prList[0].dataFour:'' }}</td>
            <td colspan="3">{{ prWpItem.prList[0] ? prWpItem.prList[0].dataFive:'' }}</td>
            <td colspan="2">{{ prWpItem.prList[0] ? prWpItem.prList[0].dataSix:'' }}</td>
            <td colspan="2">{{ prWpItem.prList[0] ? prWpItem.prList[0].dataSeven:'' }}</td>
            <td>{{ prWpItem.prList[0] ? prWpItem.prList[0].deviceId:"" }}</td>
            <td>{{ prWpItem.prList[0] ? prWpItem.prList[0].createMan.userName:"" }}</td>
          </tr>
        </template>
        <template v-else-if="prWpItem.procedureSet.ppsName == '玻璃饼排蜡玻化'">
          <tr :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td>数量</td>
            <td colspan="3">玻化温度(℃)</td>
            <td colspan="2">入炉时间</td>
            <td colspan="2">出炉时间</td>
            <td>链速(mm/min)</td>
            <td>操作者</td>
            <td colspan="2">设备编号</td>
          </tr>
          <template v-if="prWpItem != null && prWpItem.totalPrList>0 && prWpItem.prList != null">
            <tr v-for="(prLItem,prLIndex) in prWpItem.prList" :key="'100'+prWpIndex+prLIndex">
              <td>{{ prLItem.dataThree }}</td>
              <td colspan="3">{{ prLItem.tempSlot }}</td>
              <td colspan="2">{{ prLItem.inDate }}</td>
              <td colspan="2">{{ prLItem.outDate }}</td>
              <td>{{ prLItem.vSpeed }}</td>
              <td>{{ prLItem.createMan.userName }}</td>
              <td colspan="2">{{ prLItem.deviceId }}</td>
            </tr>
          </template>
        </template>
        <template v-if="prWpItem.procedureSet.ppsName == '玻璃饼振光'">
          <tr v-if=" prWpItem != null && prWpItem.prList != null && prWpItem.prList.length>0 && prWpItem.prList[0].workSlot == '振光'" :key="prWpIndex+Math.floor(Math.random()*100000)">
            <td>振光</td>
            <td>振光针规格</td>
            <td colspan="3">{{ prWpItem.prList[0].dataFour }}</td>
            <td>操作者</td>
            <td>{{ prWpItem.prList[0].createMan.userName }}</td>
            <td>设备编码</td>
            <td>{{ prWpItem.prList[0].deviceId }}</td>
            <td colspan="3" />
          </tr>
          <tr v-else :key="prWpIndex+Math.floor(Math.random()*100000)">
            <td>振光</td>
            <td>振光针规格</td>
            <td colspan="3" />
            <td>操作者</td>
            <td />
            <td>设备编码</td>
            <td />
            <td colspan="3" />
          </tr>
          <tr v-if="(prWpItem != null && prWpItem.prList != null&& prWpItem.prList.length>1 && prWpItem.prList[1].workSlot == '烘干')" :key="prWpIndex+Math.floor(Math.random()*100000)">
            <td>烘干</td>
            <td>开始时间</td>
            <td>{{ prWpItem.prList[1].inDate }}</td>
            <td>结束时间</td>
            <td>{{ prWpItem.prList[1].outDate }}</td>
            <td>烘箱温度(℃)</td>
            <td>{{ prWpItem.prList[1].tempSlot }}</td>
            <td>操作者</td>
            <td>{{ prWpItem.prList[1].createMan.userName }}</td>
            <td>设备编号</td>
            <td colspan="2">{{ prWpItem.prList[1].deviceId }}</td>
          </tr>
          <tr v-else :key="prWpIndex+Math.floor(Math.random()*100000)">
            <td>烘干</td>
            <td>开始时间</td>
            <td />
            <td>结束时间</td>
            <td />
            <td>烘箱温度(℃)</td>
            <td />
            <td>操作者</td>
            <td />
            <td>设备编号</td>
            <td colspan="2" />
          </tr>
        </template>
        <template v-else-if="prWpItem.procedureSet.ppsName == '玻璃饼印字'">
          <tr :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td>油墨物料号</td>
            <td colspan="3">印字版编号</td>
            <td>操作者</td>
            <td colspan="7" />
          </tr>
          <template v-if="prWpItem != null && prWpItem.totalPrList>0 && prWpItem.prList != null">
            <tr v-for="(prLItem,prLIndex) in prWpItem.prList" :key="'100'+prWpIndex+prLIndex">
              <td>{{ prLItem.dataFour }}</td>
              <td colspan="3">{{ prLItem.dataFive }}</td>
              <td>{{ prLItem.createMan.userName }}</td>
              <td colspan="7" />
            </tr>
          </template>
        </template>
        <!-- // 玻璃封接零件检验 -->
        <template v-if="prWpItem.procedureSet.ppsName == '玻璃封接零件检验' && prWpItem.printChildCheck != null && prWpItem.printChildCheck.length>0">
          <tr :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td colspan="12">检验记录</td>
          </tr>
          <tr :key="prWpIndex+Math.floor(Math.random()*100000)+1">
            <td>项目编号</td>
            <td colspan="4">检测项目</td>
            <td colspan="3">检验结果</td>
            <td colspan="2">检验人员</td>
            <td colspan="2">检验日期</td>
          </tr>
          <template v-for="(prCcItem,prCcIndex) in prWpItem.printChildCheck" :key="prCcIndex">
            <tr>
              <td>{{ prCcItem.testOrders }}</td>
              <td colspan="4">{{ prCcItem.testName }}</td>
              <td colspan="3">{{ prCcItem.checkResult }}</td>
              <td colspan="2">{{ prCcItem.checkName }}</td>
              <td colspan="2">{{ prCcItem.checkDate }}</td>
            </tr>
          </template>
        </template>

      </template>
    </tbody>
  </table>
        </div>
    </el-dialog>
</template>

<script>
export default {
  props: {
    showPrint: {
      type: Boolean,
      default: false,
    },
    planList: {
      type: Array,
      default: () => [],
    },
    checkRow: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      printConfig: {
        id: 'printMe',
        extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css',
        extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
      },
      loading: false,
      dsPart: {},
      prWorkOrder: { pjYieldOrder: {} },
      prWorkPlanList: [],
    };
  },
  created() {
    // 模拟数据
    this.prWorkOrder = {
      woCode: 'WO-B24051800160-R001',
      batchNo: 'Y24051800160',
      pjYieldOrder: { poQty: 12 }
    };
    this.dsPart = {
      partName: '13-45-玻璃饼',
      formingThickness: '',
      powderWeight: ''
    };
    this.prWorkPlanList = [
      {
        orders: '0005',
        totalPrList: 1,
        procedureSet: { ppsName: '玻璃饼压制' },
        prList: [{
          dataFour: '11',
          dataFive: '44',
          dataSix: '77',
          dataSeven: '111',
          deviceId: '9652247',
          createMan: { userName: '崔殿龙' }
        }]
      },
      {
        orders: '0010',
        totalPrList: 0,
        procedureSet: { ppsName: '玻璃饼排蜡玻化' },
        prList: []
      },
      {
        orders: '0015',
        totalPrList: 2,
        procedureSet: { ppsName: '玻璃饼振光' },
        prList: [
          {
            workSlot: '振光',
            dataFour: '111113333',
            createMan: { userName: '崔殿龙' },
            deviceId: '9988777'
          },
          {
            workSlot: '烘干',
            inDate: '2024-05-31 15:48:45',
            outDate: '',
            tempSlot: '',
            createMan: { userName: '崔殿龙' },
            deviceId: '9652247'
          }
        ]
      },
      {
        orders: '0020',
        totalPrList: 1,
        procedureSet: { ppsName: '玻璃饼印字' },
        prList: [{
          dataFour: '2',
          dataFive: '25',
          createMan: { userName: '崔殿龙' }
        }]
      },
      {
        orders: '0025',
        totalPrList: 0,
        procedureSet: { ppsName: '玻璃封接零件检验' },
        prList: [],
        printChildCheck: [
          {
            testOrders: '0025-0005',
            testName: '外观检测\n参照文件010-02235435《热表分厂表处理零件检验规范》',
            checkResult: '合格',
            checkName: '李素娟',
            checkDate: '2024-05-31 16:29:45.0'
          }
        ]
      }
    ];
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog');
    },
  },
};
</script>

<style lang="scss" >
.printButton {
  float: right;
  margin-right: 8px;
  margin-top: 16px;
}
.printBox {
  width: 100%;
  padding: 6px;
  text-align: center;
  .printTitle {
    font-size: 22px;
    font-weight: 700;
    padding: 8px;
    color: #606266;
    // margin-bottom: 6px;
  }

  .tableNo {
    text-align: right;
    margin-bottom: 10px;
  }

  table {
    width: 100%;
    table-layout: fixed;
    tr {
      width: 100%;
      // table-layout: fixed;
      page-break-inside: avoid;
      // break-inside: avoid;
    }
    td {
      width: 8.33%;
      min-width: 80px;
      height: 32px;
      border: 1px solid #000;
      background: transparent;
      color: #000;
      font-size: 13px;
      text-align: center;
      padding: 4px 2px;
      margin: 0;
      word-break: break-all;
    }
    // 分页提示行样式
    .page-break-tip {
      page-break-before: always;
      break-before: always;
      height: 20px;
      border: none !important;
    }
  }
}
.fixTopLeft {
  // position: fixed;
  float: left;
  top: 1;
  left: 0;
  font-family: 'SimHei';
  font-size: 24px;
  color: black;
}

@media print {
  /* 隐藏不需要打印的元素：按钮、导航栏、侧边栏等 */
  .no-print,
  header,
  footer,
  .sidebar,
  button {
    display: none !important;
  }
  @page {
    size: auto;
    margin: 6mm;
  }
}
// @media print { @page { size:21cm 29.7cm } }
</style>
<style lang="scss">
@media print {
  .no-print {
    display: none !important;
  }

  .print-btn {
    display: none !important;
  }

  body {
    margin: 0;
    // padding: 20px;
    // font-size: 12pt;
    background: white !important;
  }

  @page {
    size: auto;
    margin: 6mm;
  }

  .printBox {
    width: 100% !important;
    overflow: visible !important;

    table {
      width: 100% !important;
      table-layout: fixed;
      border-collapse: collapse;

      tr {
        page-break-inside: avoid;

        td {
          width: 8.33%;
          font-size: 12px;
          padding: 3px 2px;
        }
      }
    }

    .print-table,
    .print-table td,
    .print-table th {
      border-collapse: collapse !important;
      box-sizing: border-box !important;
      page-break-inside: avoid !important;
    }
  }
}
</style>