X-web/src/views/modules/check/ibc-export.vue

<template>
  <div>
    <!-- <el-dialog
      title="导出"
      width="60%"
      :close-on-click-modal="false"
      :visible.sync="visible"> -->
      <div class="my-title">导出</div>
      <div class="my-table" id="printDiv" style="padding:55px 30px 0 30px;background-color:#fff;">
        <h1 style="text-align: center">入  厂  检  验  报  告</h1>
        <h4 style="text-align: right;margin-right: 20px;margin-top: 40px">编号： {{dataForm.inspectionCode}}</h4>
        <!-- border="1" -->
        <table class="table-first" align="center" cellpadding="8" cellspacing="0" border="1"
               style="margin-top: 10px;font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 1px 1px 0 0;">
          <tbody align="left">
          <tr>
            <td class="title" style="width: 15%">供方单位</td>
            <td colspan="2" style="width: 30%">{{dataForm.source}}</td>
            <td class="title" style="width: 15%">批次号</td>
            <td colspan="3" style="width: 40%">{{dataForm.batchNumber}}</td>
          </tr>
          <tr>
            <td class="title" style="width: 15%">产品名称</td>
            <td colspan="2"  style="width: 30%">{{dataForm.materialName}}</td>
            <td class="title" style="width: 15%">产品图号</td>
            <td colspan="3" style="width: 40%">{{dataForm.specifications}}</td>
          </tr>
          <tr>
            <td class="title" style="width: 15%">来料类型</td>
            <td colspan="6" align="left">
              <el-checkbox-group v-model="idsMaterial">
                <!-- :style="item.id === 1?'margin-left: 30px':''" -->
                <el-checkbox disabled class="my-cb"  v-for="item in optionsMaterial" :label="item.code" :key="item.code"><span style="color: #404040">{{item.value}}</span></el-checkbox>
              </el-checkbox-group>
            </td>
          </tr>
          <tr>
            <td class="title">
              检验设备
              （勾选）
            </td>
            <td colspan="6" align="left">
              {{dataForm.detectionEquipment}}
            </td>
          </tr>
          <tr>
            <td class="title">序号</td>
            <td class="title">检验项目</td>
            <td class="title">技术指标</td>
            <td class="title">实测记录</td>
            <td class="title">交检数</td>
            <td class="title">合格数</td>
            <td class="title">备注</td>
          </tr>
          <tr v-for="(item,i) in checkList" :key="i + '+0001'">
            <td>{{i+1}}</td>
            <td>{{item.inspectionProject}}</td>
            <td>{{item.technicalIndicators}}</td>
            <td>{{item.measuredRecords}}</td>
            <td>{{dataForm.cnt}}</td>
            <td>{{dataForm.qualifiedCnt}}</td>
            <td>{{item.notes}}</td>
          </tr>
          <tr>
            <td class="title">检验结论：</td>
            <td colspan="7">{{dataForm.conclusion}}</td>
          </tr>
          <tr>
            <td class="title">检验员：</td>
            <td colspan="2"><span>{{dataForm.creatorName}}</span>&emsp;<span>{{dataForm.approveDate}}</span></td>
            <td class="title">审核：</td>
            <td colspan="3">梁瑞伟&emsp;<span>{{dataForm.approveDate}}</span></td>
          </tr>
          </tbody>
        </table>
        <!-- <table class="table-data-list" align="center" cellpadding="8" cellspacing="0" border="1"
               style="width:100%;font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 0 1px 0 0">
          <thead>
          <tr>
            <th style="width: 50px">序号</th>
            <th style="width: 20%">检验项目</th>
            <th style="width: 20%">技术指标</th>
            <th style="width: 20%">实测记录</th>
            <th style="width: 80px">交检数</th>
            <th style="width: 80px">合格数</th>
            <th style="width: auto">备注</th>
          </tr>
          </thead>
          <tbody align="center">
          <tr v-for="(item,i) in checkList" :key="i + '+0001'">
            <td>{{i+1}}</td>
            <td>{{item.inspectionProject}}</td>
            <td>{{item.technicalIndicators}}</td>
            <td>{{item.measuredRecords}}</td>
            <td>{{dataForm.cnt}}</td>
            <td>{{dataForm.qualifiedCnt}}</td>
            <td>{{item.notes}}</td>
          </tr>
          </tbody>
        </table> -->
        <!-- <table class="table-conclusion" align="center" cellpadding="8" cellspacing="0" border="1"
               style="font-family: SimSun,serif;font-size: medium;text-align: center;border-width: 0 1px 1px 1px;width: 100%">
          <tbody align="left">
          <tr>
            <th style="text-align: left; width: 200px">检验结论：</th>
          </tr>
          <tr>
            <td>{{dataForm.conclusion}}</td>
          </tr>
          <tr>
            <th>检验员：</th>
            <td><span>{{dataForm.creatorName}}</span>&emsp;<span>{{dataForm.approveDate}}</span></td>
            <th>审核：</th>
            <td>梁瑞伟&emsp;<span>{{dataForm.approveDate}}</span></td>
          </tr>
          </tbody>
        </table> -->
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onChose">取消</el-button>
<!--        <el-button type="primary" v-on:click="getPdf()">导出</el-button>-->
        <el-button type="primary" v-print="printObj">导出</el-button>
      </span>
    <!-- </el-dialog> -->
  </div>
</template>

<script>
  import {getIncomingInspection} from '@/api/check'
  export default {
    name: 'ibc-export',
    data () {
      return {
        printObj: {
          id: 'printDiv',
          popTitle: '-',
          extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>'
        },
        htmlTitle: '入厂检验报告',
        visible: false,
        dataForm: {},
        checkList: [],
        idsMaterial: [],
        optionsMaterial: [
          {
            code: '1', value: '原、辅材料'
          },
          {
            code: '2', value: '外协件'
          },
          {
            code: '3', value: '其他'
          }
        ],
        idsDevice: [1, 2, 10],
        size: ''
      }
    },
    methods: {
      onChose () {
        this.$emit('onChose')
      },
      async init (id) {
        this.visible = true
        this.idsMaterial = []
        this.idsDevice = []
        this.checkList = []
        if (!id) return
        await getIncomingInspection(id).then(({data}) => {
          if (data && data.code === '200') {
            this.dataForm = data.data
            if (data.data.inspectionType) {
              this.idsMaterial.push(data.data.inspectionType)
            }
            if (data.data.qualityInspectionItemsList) {
              this.checkList = data.data.qualityInspectionItemsList
            }
            this.dataForm.approveDate = data.data.updateTime ? data.data.updateTime.substring(0, 10) : ''
          }
        })
      }
    }
  }
</script>

<style scoped>
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 3mm;  /* this affects the margin in the printer settings */
  }

  html{
    background-color: #FFFFFF;
    margin: 0;  /* this affects the margin on the html before sending to printer */
  }

  body{
    border: solid 1px blue ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }

  .table-first td, .table-first th, .table-data-list th, .table-data-list td{
    border-color: grey;
    border-width: 0 0 1px 1px;
  }
  .table-conclusion td, .table-conclusion th{
    border-color: grey;
    border-width: 0;
  }
  .title{
    font-weight: bold;
  }
</style>