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 >
          <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%">江苏{{attorneyMap.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">兹委任重庆市万州区万港船务有限公司
                前来贵港办理我公司的货权提货和水路运输事宜，品种：{{attorneyMap.materialName}}；外轮船名：{{attorneyMap.resultForeignShipName}}；
                数量：{{attorneyMap.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%">{{attorneyMap.attorneyPickupContactPerson}}</td>
            <th style="width :14%">身份证号：</th>
            <td style="width :59%">{{attorneyMap.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%">{{attorneyMap.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>
          <!-- tablePart5 -->
          <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%">{{attorneyMap.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%">{{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>
      </div>
      <div class="buttns">
        <el-button class="buttn"  type="primary" @click="getPdf()">
            <i class="el-icon-download">{{"\xa0\xa0"}}</i>导出(pdf)
        </el-button>
        <el-button class="buttn"  type="primary" v-print="'#pdfDom'" @click="backScan()">
            <i class="el-icon-printer">{{"\xa0\xa0"}}</i>打印
        </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:[],
      attorneyMap:{
        carrierName:"",
        materialName: "",
        resultForeignShipName: "",
        purchaseOrderMaterialNumber:"",
        attorneyPickupContactPerson:"",
        attorneyPickupIdcard:"",
        attorneyContactTelephone:"",
        shipperName:"",
        attorneyTime:"",
        year:"",
        month:"",
        date:"",
      },
      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
        // this.amsShipDeliveryNameLists = this.$route.params.test;
        console.log(this.amsShipDeliveryNameLists)
        for(let i =0;i<this.amsShipDeliveryNameLists.length;i++){
            this.attorneyMap = this.amsShipDeliveryNameLists[i];
            this.year=this.attorneyMap.attorneyTime.split('-')[0]
            this.month=this.attorneyMap.attorneyTime.split('-')[1]
            this.date=this.attorneyMap.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>