icore-pass/src/views/TMS/components/importedShip/shipmentInstructionText.vue

<template>
  <div class="tableAllDate">
    <page-title>返回</page-title>
    <div id="pdfDom">
      <div class="blank"></div>
      <!-- 循环遍历传过来的数组中的所有的对象，生成多张提货委托书 -->
      <div
        v-for="(item, index) in shipmentInstructionLists"
        :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;font-family: FangSong;line-height: 50px"
            width="1000px"
            class="tablePart0"
          >
            <tr>
              <td style="width: 100%">TO:{{ item.piername }}有限公司：</td>
            </tr>
          </table>
        </div>
        <div class="tableBody">
          <!-- tablePart1 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin-top: 5px;font-family: FangSong;line-height: 40px;"
            width="1000px"
            class="tablePart1"
          >
            <tr>
              <td style="width: 100%" padding-right="20px;">
                &nbsp;&nbsp;&nbsp;&nbsp; 兹委任{{ item.carrierName }}有限公司
                代表我司到贵港办理:海轮"{{ item.foreignShipName }}"{{
                  item.numberOfLoans
                }}湿吨
                {{
                  item.materialName
                }}的提货、数量、清场、交接等相关事宜。恳请给予办理为盼!
                谢谢!(传真件与原件具有同等法律效应)。
              </td>
            </tr>
          </table>

          <!-- tablePart2 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart2"
          >
            <tr>
              <th style="width: 1.1%"></th>
              <th style="width: 20.5%">具体提货船舶信息如下:</th>
            </tr>
          </table>

          <!-- tablePart3 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart3"
          >
            <tr>
              <th style="width: 0.6%"></th>
              <th style="width: 10.5%">
                船名:{{ item.capacityNumber }}（{{ item.instruct }}吨）航次{{
                  item.capacityBookingNumber
                }}
              </th>
            </tr>
          </table>

          <!-- tablePart4 -->
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart4"
          >
            <tr>
              <th style="width: 0.6%"></th>
              <th style="width: 10.5%">船舶联系方式:{{ item.capacityTel }}</th>
            
            </tr>
          </table>
        

          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart5"
          >
            <tr>
              <th style="width: 0.6%"></th>
              <th style="width: 10.5%">
                中转港:{{ item.transitPort }}, 目的港:{{ item.arriveName }}
              </th>
            </tr>
          </table>
          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart6"
          >
            <tr>
              <th style="width: 0.6%"></th>
              <th style="width: 10.5%">收货人:{{ item.shipperName }}</th>
            </tr>
          </table>

          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="border-top: 0px;font-family: FangSong;line-height: 40px"
            width="1000px"
            class="tablePart7"
          >
            <tr>
              <th style="width: 0.6%"></th>
              <th style="width: 10.5%">交接方式:{{ item.havdoverMode }}</th>
            </tr>
          </table>
        </div>
        <div>
          <!-- tablePart6 -->
          <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="tablePart6"
          >
            <tr>
              <th style="width: 50px"></th>
              <td style="width: 35%">{{ 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.6%">{{ item.month }}</td>
              <th style="width: 3%">月</th>
              <td style="width: 0.5%">{{ item.date }}</td>
              <th style="width: 3%">日</th>
              <th style="width:7%"></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 {
      shipmentInstructionLists: [],
      htmlTitle: "装船通知单",
    };
  },
  created() {
    this.getwts();
  },
  methods: {
    backScan() {
      this.$router.go(-2);
    },
    getwts() {
      console.log(this.$route.params.text);
      this.shipmentInstructionLists = JSON.parse(
        this.$route.params.text
      ).shipmentInstructionList;
      console.log(this.shipmentInstructionLists);
      // this.amsShipDeliveryNameLists = this.$route.params.test;
      console.log(this.shipmentInstructionLists);
      this.shipmentInstructionLists.forEach((e) => {
        e.year = e.instructionTime.split("-")[0];
        e.month = e.instructionTime.split("-")[1];
        e.date = e.instructionTime.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: 25px;
  margin-left: 465px;
  .buttn {
    margin-left: 10px;
    width: 270px;
  }
}
.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;
  }
  .tablePart8 td,
  th {
    border-top: 0px;
  }
}
.blank {
  width: 100%;
  height: 50px;
}
</style>