|
@@ -0,0 +1,372 @@
|
|
|
+<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 class="link-top">
|
|
|
+ <br />
|
|
|
+ <i class="titleText2" align="center">业务联系函</i>
|
|
|
+ </div>
|
|
|
+ </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%">{{ item.carrierName }}:</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tableBody">
|
|
|
+ <!-- tablePart1 -->
|
|
|
+ <table
|
|
|
+ border="0"
|
|
|
+ cellpadding="10"
|
|
|
+ cellspacing="0"
|
|
|
+ style="margin-top: 0px; font-family: FangSong; line-height: 40px"
|
|
|
+ width="1000px"
|
|
|
+ class="tablePart1"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <th style="width: 1.1%"></th>
|
|
|
+ <th style="width: 20.5%">
|
|
|
+ <!-- 兹委任{{ item.carrierName }}有限公司
|
|
|
+ 代表我司到贵港办理:海轮"{{ item.foreignShipName }}"{{
|
|
|
+ item.numberOfLoans
|
|
|
+ }}湿吨
|
|
|
+ {{
|
|
|
+ item.materialName
|
|
|
+ }}的提货、数量、清场、交接等相关事宜。恳请给予办理为盼!
|
|
|
+ 谢谢!(传真件与原件具有同等法律效应)。 -->
|
|
|
+ 感谢贵司对我司的大力支持!
|
|
|
+ </th>
|
|
|
+ </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%">
|
|
|
+ 现我司已安排船舶到贵港提运 {{ item.numberOfLoans }}吨{{
|
|
|
+ item.materialName
|
|
|
+ }}:
|
|
|
+ </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.capacityBookingNumber }}航次,吨位:{{
|
|
|
+ item.instruct
|
|
|
+ }}吨,船电:
|
|
|
+ {{ item.capacityTel }}
|
|
|
+ </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.8%"></th>
|
|
|
+ <th style="width: 7.5%">中转港:{{item.transitPort}}</th>
|
|
|
+ <th style="width: 7.5%">目的港:{{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="tablePart5"
|
|
|
+ >
|
|
|
+ <tr>
|
|
|
+ <th style="width: 0.6%"></th>
|
|
|
+ <th style="width: 10.5%">
|
|
|
+ 预计{{ item.year }}年{{item.month}}月{{item.date}}日抵达贵港
|
|
|
+ </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%">望贵司能够积极配合与支持</th>
|
|
|
+ </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.65%"></th>
|
|
|
+ <th style="width: 12.5%; font-family: FangSong">顺祝</th>
|
|
|
+
|
|
|
+ </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: 12.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;
|
|
|
+ font-family: FangSong;
|
|
|
+ line-height: 40px;
|
|
|
+ "
|
|
|
+ width="1000px"
|
|
|
+ class="tablePart6"
|
|
|
+ >
|
|
|
+ <tr></tr>
|
|
|
+ <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>
|
|
|
+ <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: 35%">{{ item.shipperName }}</td>
|
|
|
+ </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: 85px;
|
|
|
+ .titleText {
|
|
|
+ font-size: 45px;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 900;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .titleText2 {
|
|
|
+ font-size: 40px;
|
|
|
+ font-family: SimSun;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ .link-top {
|
|
|
+ width: 50%;
|
|
|
+ height: 1px;
|
|
|
+ margin-left: 25%;
|
|
|
+ border-top: solid #00050b 1px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.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: 0px 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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.luokuan {
|
|
|
+ margin-top: 150px !important;
|
|
|
+}
|
|
|
+.blank {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+}
|
|
|
+</style>
|