icore-pass/src/views/appoint/components/ship/attorneytext.vue

<template>
  <div class="tableAllDate">
    <page-title>返回</page-title>
    <div id="pdfDom">
      <div class="blank"></div>
      <!-- 循环遍历传过来的数组中的所有的对象，生成多张提货委托书 -->
      <div
        v-for="(item, index) in amsShipDeliveryNameLists"
        :key="index"
        style="margin-top: 40px"
      >
        <div class="title">
          <i class="titleText" align="center">委托书</i>
        </div>
        <div>
          <!-- tablePart0 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto; font-size: 25px"
            width="1000px"
            class="tablePart0"
          >
            <tr>
              <td style="width: 100%; font-family: FangSong">
                {{ item.pickupAllName }}：
              </td>
            </tr>
          </table>
        </div>
        <div class="tableBody">
          <!-- tablePart1 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin-top: 5px"
            width="1000px"
            class="tablePart1"
          >
            <tr>
              <td
                style="width: 100%; font-family: FangSong; line-height: 40px"
                padding-right="20px"
              >
                &nbsp;&nbsp; 兹委任{{
                  item.carrierName
                }}
                前来贵港办理我公司的货权提货和水路运输事宜，品种:{{
                  item.materialName
                }};外轮船名：{{ item.realForeignShipName }}; 数量:{{
                  item.purchaseOrderMaterialNum
                }}
                湿吨（如遇该轮最后一批提货请清场),物流流向:{{
                  item.portName1
                }}。望贵公司予以支持为盼。
              </td>
            </tr>
          </table>

          <!-- tablePart2 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px; line-height: 40px"
            width="1000px"
            class="tablePart2"
          >
            <tr>
              <th style="width: 3%"></th>
              <th
                style="width: 16.5%; padding-left: 2 px; font-family: FangSong"
              >
                提货联系人：
              </th>
              <td style="width: 10.5%; font-family: FangSong">
                {{ item.attorneyPickupContactPerson }}
              </td>
              <th style="width: 3%"></th>
              <th style="width: 13%; font-family: FangSong">身份证号：</th>
              <td style="width: 59%; font-family: FangSong">
                {{ item.attorneyPickupIdcard }}
              </td>
            </tr>
          </table>

          <!-- tablePart3 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px; line-height: 40px"
            width="1000px"
            class="tablePart3"
          >
            <tr>
              <th style="width: 3%"></th>
              <th style="width: 13.5%; font-family: FangSong">联系电话：</th>
              <td style="width: 98%; font-family: FangSong">
                {{ item.attorneyContactTelephone }}
              </td>
            </tr>
          </table>

          <!-- tablePart4 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px; line-height: 40px"
            width="1000px"
            class="tablePart4"
          >
            <tr>
              <th style="width: 0.4%"></th>
              <th style="width: 12.5%; font-family: FangSong">顺颂商祺！</th>
            </tr>
          </table>

          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px; line-height: 40px"
            width="1000px"
            class="tablePart5"
          >
            <tr>
              <th style="width: 0.3%"></th>
              <th style="width: 10.5%; font-family: FangSong">
                （传真件/扫描件有效）
              </th>
            </tr>
          </table>
        </div>
        <div class="luokuan">
          <!-- tablePart6 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="
              margin: auto;
              margin-top: 5px;
              font-size: 25px;
              line-height: 40px;
            "
            width="1000px"
            class="tablePart6"
          >
            <tr>
              <td style="width: 38%"></td>
            </tr>
            <tr>
              <td style="width: 38%"></td>
            </tr>
            <tr>
              <td style="width: 38%"></td>
            </tr>
            <tr>
              <td style="width: 38%"></td>
            </tr>
            <tr>
              <th style="width: 50px"></th>
              <th style="width: 50px"></th>
              <td style="width: 50px"></td>
              <td style="width: 50px"></td>
              <td style="width: 50px"></td>
              <td style="width: 38%; font-family: FangSong">
                {{ item.shipperName }}
              </td>
            </tr>
          </table>
        </div>
        <div>
          <!-- tablePart7 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="
              margin: auto;
              margin-top: 5px;
              font-size: 25px;
              font-family: FangSong;
              line-height: 40px;
            "
            width="1000px"
            class="tablePart7"
          >
            <tr>
              <td style="width: 63%"></td>
              <td style="width: 1%">{{ item.year }}</td>
              <th style="width: 3%">年</th>
              <td style="width: 0.7%">{{ item.month }}</td>
              <th style="width: 3%">月</th>
              <td style="width: 0.7%">{{ item.date }}</td>
              <th style="width: 3%">日</th>
              <th style="width: 5%"></th>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="buttns">
      <el-button class="buttn" type="primary" @click="getPdf()">
        <i class="el-icon-download">{{ "\xa0\xa0" }}</i
        >导出(委托书pdf)
      </el-button>
    </div>
  </div>
</template>

<script>
import table from "@/components/DilCommonUI/packages/table/src/table.vue";
import PageTitle from "@/components/Page/Title";
export default {
  components: { table },
  components: { PageTitle },
  name: "Login",
  data() {
    return {
      amsShipDeliveryNameLists: [],
      htmlTitle: "委托书"
    };
  },
  created() {
    this.getwts();
  },
  methods: {
    backScan() {
      this.$router.go(-2);
    },
    getwts() {
      // console.log(this.$route.params.test)
      this.amsShipDeliveryNameLists = JSON.parse(
        this.$route.params.test
      ).amsShipDeliveryNameList;
      console.log(this.amsShipDeliveryNameLists);
      // this.amsShipDeliveryNameLists = this.$route.params.test;
      console.log(this.amsShipDeliveryNameLists);
      this.amsShipDeliveryNameLists.forEach(e => {
        e.year = e.attorneyTime.split("-")[0];
        e.month = e.attorneyTime.split("-")[1];
        e.date = e.attorneyTime.split("-")[2].split(" ")[0];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;
  margin-bottom: 30px;
  .titleText {
    font-size: 45px;
    font-family: SimSun;
    font-weight: 900;
    line-height: 40px;
  }
}
.buttns {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  margin-left: 465px;
  .buttn {
    margin-left: 10px;
    width: 260px;
  }
}
.luokuan {
  margin-top: 150px !important;
}
.tableBody {
  table,
  th,
  td {
    border: 0px solid black;
    font-size: 25px;
    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>