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:20px;"
            width="1000px"
            class="tablePart0"
          >
            <tr>
              <td style="width :100%">
                江苏{{ item.carrierName }}港口集团股份有限公司：
              </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%" padding-right="20px">
                兹委任重庆市万州区万港船务有限公司
                前来贵港办理我公司的货权提货和水路运输事宜，品种：{{
                  item.materialName
                }}；外轮船名：{{ item.resultForeignShipName }}； 数量：{{
                  item.purchaseOrderMaterialNum
                }}
                湿吨（如遇最后一批提货，须清场）；物流流向：万州港。望贵公司予以支持为盼。
              </td>
            </tr>
          </table>

          <!-- tablePart2 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="
          border-top: 0px"
            width="1000px"
            class="tablePart2"
          >
            <tr>
              <th style="width :16.5%">提货联系人：</th>
              <td style="width :10.5%">
                {{ item.attorneyPickupContactPerson }}
              </td>
              <th style="width :14%">身份证号：</th>
              <td style="width :59%">{{ item.attorneyPickupIdcard }}</td>
            </tr>
          </table>

          <!-- tablePart3 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="
          border-top: 0px"
            width="1000px"
            class="tablePart3"
          >
            <tr>
              <th style="width :16.5%">联系电话：</th>
              <td style="width :83.5%">
                {{ item.attorneyContactTelephone }}
              </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>
            </tr>
          </table>

          <table
            border="1"
            cellpadding="10"
            cellspacing="0"
            style="
          border-top: 0px"
            width="1000px"
            class="tablePart5"
          >
            <tr>
              <th style="width :10.5%">（传真件/扫描件有效）</th>
            </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>
              <td style="width :48.5%">{{ item.shipperName }}</td>
            </tr>
          </table>
        </div>
        <div>
          <!-- tablePart7 -->
          <table
            border="0"
            cellpadding="10"
            cellspacing="0"
            style="margin: auto;margin-top: 5px;font-size:20px;"
            width="1000px"
            class="tablePart7"
          >
            <tr>
              <td style="width :63%"></td>
              <td style="width :5%">{{ item.year }}</td>
              <th style="width :8%">年</th>
              <td style="width :3%">{{ item.month }}</td>
              <th style="width :8%">月</th>
              <td style="width :3%">{{ item.date }}</td>
              <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: 30px;
  }
}
.buttns {
  display: flex;
  flex-wrap: nowrap;
  margin-top: 20px;
  margin-left: 900px;
  .buttn {
    margin-left: 10px;
    width: 130px;
  }
}
.tableBody {
  table,
  th,
  td {
    border: 0px 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>