<template>
  <div class="tableAllDate" id="exportPdf" ref="exportPdf">
      <div class="title">
        <h3 align="center">中铁开发投资集团有限公司</h3>
        <h3 align="center">物资签收单</h3>
      </div>
      <div class="text">
        <span style="margin-left: 20.5%">收货单位：</span>
        <span style="margin-left: 0.5%">xxx单位</span>
      </div>
      <div class="tableBody">
        <!-- tablePart1 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-left: 20%;margin-top: 10px;" 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>cell 21</td>
          <td>cell 22</td>
          <td>cell 23</td>
          <td>cell 24</td>
          <td>cell 25</td>
          <td>cell 26</td>
          <td>cell 27</td>
        </tr>
        <tr>
          <td>cell 31</td>
          <td>cell 32</td>
          <td>cell 33</td>
          <td>cell 34</td>
          <td>cell 35</td>
          <td>cell 36</td>
          <td>cell 37</td>
        </tr>
        <tr>
          <td>cell 41</td>
          <td>cell 42</td>
          <td>cell 43</td>
          <td>cell 44</td>
          <td>cell 45</td>
          <td>cell 46</td>
          <td>cell 47</td>
        </tr>
        <tr>
          <td>cell 51</td>
          <td>cell 52</td>
          <td>cell 53</td>
          <td>cell 54</td>
          <td>cell 55</td>
          <td>cell 56</td>
          <td>cell 57</td>
        </tr>
        </table>
        <!-- tablePart2 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-left: 20%;
        border-top: 0px" width="1000px" class="tablePart2">
        <tr>
          <th style="width :10.5%">送货人</th>
          <td style="width :16.5%">cell 61</td>
          <th style="width :14%">发货时间</th>
          <td style="width :12%">cell 62</td>
          <th style="width :14%">收货地点</th>
          <td style="width :33%">cell 63</td>
        </tr>
        </table>
        <!-- tablePart3 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-left: 20%;
        border-top: 0px" width="1000px" class="tablePart3">
        <tr>
          <th style="width :10.5%">收货人</th>
          <td style="width :56.5%">cell 71</td>
          <th style="width :14%">收货时间</th>
          <td style="width :19%">cell 72</td>
        </tr>
        </table>
        <!-- tablePart4 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-left: 20%;
        border-top: 0px" width="1000px" class="tablePart4">
        <tr>
          <th style="width :10.5%">司机</th>
          <td style="width :36.5%">cell 81</td>
          <th style="width :13%">车号</th>
          <td style="width :40%">cell 82</td>
        </tr>
        </table>
        <!-- tablePart5 -->
        <table border="1" cellpadding="10" cellspacing="0" style="margin-left: 20%;
        border-top: 0px" width="1000px" class="tablePart5">
        <tr>
          <th style="width :10.5%">备注</th>
          <td style="width :89.5%">cell 91</td>
        </tr>
        </table>
      </div>
      <div>
        <!-- tablePart6 -->
        <table border="0" cellpadding="10" cellspacing="0" style="margin-left: 20%;margin-top: 10px;" width="1000px" class="tablePart6">
        <tr>
          <th style="width :12.5%">送货单位：</th>
          <td style="width :50.5%">sss单位</td>
          <th style="width :15.5%">日期：</th>
          <td style="width :5%">yyyy</td>
          <th style="width :8%">年</th>
          <td style="width :3%">MM</td>
          <th style="width :8%">月</th>
          <td style="width :3%">dd</td>
          <th style="width :5%">日</th>
        </tr>
        </table>
      </div>
      <el-button type="primary" @click="savePdf">
        <i class="el-icon-download"></i>导出(pdf)
      </el-button>
  </div>
</template>

<script>
import table from '@/components/DilCommonUI/packages/table/src/table.vue';
// import PDFSave from 'vue-to-pdf'
// Vue.use(PDFSave)
export default {
  components: { table },
  name: "Login",
  data() {
    return {
      
    };
  },
  methods: {
    savePdf(){
    console.log("导出PDF")
    this.$PDFSave(this.$refs.exportPdf, "我的文件");
    },
  },
};
</script>

<style lang="scss" scoped>
.tableBody{
  table, th, td
  {
      border: 1px solid black;
  }
  .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
  }
}
.text span{
  font-weight: bold;
}
</style>
