<template>
  <div class="tableAllDate">
      <div id="pdfDom">
      <div class="blank">
      </div>
      <div class="title">
        <h1 align="center">达州钢铁集团有限责任公司</h1>
        <h1 align="center">质保书</h1>
      </div>
      <div>
      <!-- tablePart0 -->
        <table border="0" cellpadding="10" cellspacing="0" style="margin: auto;font-size:20px;" width="1000px" class="tablePart0">
        <tr>
          <th style="width :14.5%">收货单位：</th>
          <td style="width :85.5%">{{consigeeName}}</td>
        </tr>
        </table>
      </div>
      <div class="tableBody">
        <!-- tablePart1 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-top: 5px;" width="1000px" class="tablePart1">
        <tr>
          <th style="width :5%">序号</th>
          <th style="width :21.5%">物资(设备)名称</th>
          <th style="width :21.5%">规格型号</th>
          <th style="width :5%">单位</th>
          <th style="width :14%">应发数量</th>
          <th style="width :14%">实发数量</th>
          <th style="width :19%">备注</th>
        </tr>

        <tr>
          <td>1</td>
          <td>{{materialList[0].materialName}}</td>
          <td>{{materialList[0].materialSpe}}{{materialList[0].materialModel}}</td>
          <td>吨</td>
          <td></td>
          <td>{{materialList[0].materialNumber}}</td>
          <td></td>
        </tr>
        <tr>
          <td>2</td>
          <td>{{materialList[1].materialName}}</td>
          <td>{{materialList[1].materialSpe}}{{materialList[1].materialModel}}</td>
          <td>吨</td>
          <td></td>
          <td>{{materialList[1].materialNumber}}</td>
          <td></td>
        </tr>
        <tr>
          <td>3</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td>4</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        </table>
        <!-- tablePart2 -->
        <table border="1" cellpadding="10" cellspacing="0" style="
        border-top: 0px" width="1000px" class="tablePart2">
        <tr>
          <th style="width :10.5%">送货人</th>
          <td style="width :16.5%">张三</td>
          <th style="width :14%">发货时间</th>
          <td style="width :12%">2021-12-08 11:08:32</td>
          <th style="width :14%">收货地点</th>
          <td style="width :33%">重庆市巴南区东温泉镇雨台村</td>
        </tr>
        </table>
        <!-- tablePart3 -->
        <table border="1" cellpadding="10" cellspacing="0" style="
        border-top: 0px" width="1000px" class="tablePart3">
        <tr>
          <th style="width :10.5%">收货人</th>
          <td style="width :56.5%">吴刚</td>
          <th style="width :14%">收货日期</th>
          <td style="width :19%">2021-12-09</td>
        </tr>
        </table>
        <!-- tablePart4 -->
        <table border="1" cellpadding="10" cellspacing="0" style="
        border-top: 0px" width="1000px" class="tablePart4">
        <tr>
          <th style="width :10.5%">司机</th>
          <td style="width :36.5%">张三</td>
          <th style="width :13%">车号</th>
          <td style="width :40%">{{capacityNumber}}</td>
        </tr>
        </table>
        <!-- tablePart5 -->
        <table border="1" cellpadding="10" cellspacing="0" style="
        border-top: 0px" width="1000px" class="tablePart5">
        <tr>
          <th style="width :10.5%">备注</th>
          <td style="width :89.5%">无</td>
        </tr>
        </table>
      </div>
      <div>
        <!-- tablePart6 -->
        <table border="0" cellpadding="10" cellspacing="0" style="margin: auto;margin-top: 5px;font-size:20px;" width="1000px" class="tablePart6">
        <tr>
          <th style="width :14.5%">发货单位：</th>
          <td style="width :48.5%">达州钢铁集团有限责任公司</td>
          <th style="width :15.5%">日期：</th>
          <td style="width :5%">{{year}}</td>
          <th style="width :8%">年</th>
          <td style="width :3%">{{month}}</td>
          <th style="width :8%">月</th>
          <td style="width :3%">{{date}}</td>
          <th style="width :5%">日</th>
        </tr>
        </table>
      </div>
      </div>
      <el-button style="margin-left: 45%;" type="primary" @click="getPdf()">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button>
      <el-button style="margin-left: 45%;margin-top: 0.2%;" type="primary" v-print="'#pdfDom'" @click="backScan()">
        <i class="el-icon-printer"></i>打印
      </el-button>
  </div>
</template>

<script>
import table from '@/components/DilCommonUI/packages/table/src/table.vue';
export default {
  components: { table },
  name: "Login",
  data() {
    return {
      orderNumber: "WYSDD2021120200000803",
      carrierName: null,
      materialList: [
        {
            "materialName": "三级螺纹钢定尺12米",
            "materialModel": "HRB400E",
            "materialWeight": null,
            "materialNumber": 12222,
            "materialSpe": "Φ20"
        },
        {
            "materialName": "五螺纹钢定尺12米",
            "materialModel": "HRB400",
            "materialWeight": null,
            "materialNumber": 12000,
            "materialSpe": "Φ14"
        },
      ],
      capacityNumber: "川A10011",
      consigeeName: null,
      billDate: "2021-12-07",
      year: new Date().getFullYear(),
      month: new Date().getMonth()+1,
      date: new Date().getDate(),
      htmlTitle: '质保书'
    };
  },
  methods: {
      backScan(){
        this.$router.go(-2);
      }
  },
};
</script>

<style lang="scss" scoped>
.title{
  font-size:25px;
}
.tableBody{
  table, th, td
  {
      border: 1px solid black;
      font-size:20px;
      margin: auto;
  }
  .tablePart1 th{
      border-top: 1px solid black;
  }
  .tablePart2 td,th{
    border-top: 0px
  }
  .tablePart3 td,th{
    border-top: 0px
  }
  .tablePart4 td,th{
    border-top: 0px
  }
  .tablePart5 td,th{
    border-top: 0px
  }
}
.blank{
  width: 100%;
  height: 50px;
}
</style>
