fjhx2012
/
fjhx-cloud-saas


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615
							<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        @page {
            width: 210mm;
            height: 297mm;
        }

        * {
            margin: 0;
            padding: 0;
            font-family: 'Times New Roman', "SimSun";
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-size: 9px;
        }

        .con {
            text-align: center;
        }

        .title {
            font-size: 11px;
        }

        table td {
            padding: 1px;
            vertical-align: top;
        }

        .tip {
            width: 100%;
            height: 40px;
            text-align: left;
        }

        .tip tr td:nth-child(1) {
            width: 80px;
        }

        .putImg {
            position: relative;
            width: 100%;
        }

        /* .putImg img {
              position: absolute;
              width: 200px;
              height: 200px;
              left: 35%;
              margin-left: -200px;
            } */

        .one {
            width: 100%;
            text-align: left;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            border-left: 1px solid black;
        }

        thead {
            font-weight: 600;
        }

        .one tr td {
            border-right: 1px solid black;
        }

        .two {
            width: 100%;
            text-align: left;
            border-top: 1px solid black;
            border-left: 1px solid black;
        }

        .two td {
            border: 0;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }

        .border {
            border-right: 1px solid black;
        }

        .ta_inner thead {
            color: #0647eb;
        }

        .ta_inner tr td {
            border: 0 !important;
        }

        .three {
            width: 100%;
            border: 1px solid black;
            /* text-align: left; */
        }

        .three thead {
            text-align: center;
            line-height: 30px;
            color: #0647eb;
        }

        .three th {
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }

        .three td {
            line-height: 30px;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
            /* border-right: 1px solid black; */
        }

        .four {
            width: 100%;
            border-left: 1px solid black;
            border-top: 1px solid black;
            text-align: left;
            line-height: 15px;
        }

        .four tr td {
            vertical-align: middle;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }

        .five {
            width: 100%;
            border-top: 1px solid black;
            border-left: 1px solid black;
        }

        .five tr td {
            vertical-align: middle;
            border-right: 1px solid black;
            border-bottom: 1px solid black;
        }
    </style>
</head>

<body style="font-size: 13px;">
<div class="con">
    <table border="0" cellpadding="0" cellspacing="0" style="margin:auto">
        <tr style="white-space: nowrap;">
            <td style="width: 70px; padding-right: 10px; vertical-align: middle">
                <!-- 企业logo -->
                <img th:src="${huaWeiUrl}+${company.logo}" alt="" fit="scale-down" style="height: 60px; width: 60px;" />

            </td>
            <td style="text-align: center;vertical-align: middle">
                <!-- 企业英文名称 -->
                <h2>
                    <div style="margin-bottom: 5px;font-weight: 700" th:text="${company.nameEnglish}" />
                </h2>
                <!-- 企业地址 -->
                <div class="title" th:text="'Add: '+${company.addressEnglish}+','+
                                        ${company.cityEnglish}+','+
                                        ${company.provinceEnglish}+','+
                                        ${company.countryEnglish}+','+
                                        ${company.zipCode}" />
            </td>
            <td style="width: 70px;"></td>
        </tr>
    </table>
    <div class="title">
        <h2 style="color: #0647eb; padding: 10px">PROFORMA INVOICE</h2>
    </div>
    <!-- 左上角的表格单号和日期 -->
    <table class="tip">
        <tr>
            <td style="width: 60%">PI NO.:<span th:text="${contract.code}" /></td>
            <td></td>
        </tr>
        <tr>
            <td>PI DATE:<span th:text="${approvedDate}" /></td>
            <td></td>
        </tr>
    </table>
    <!-- 第一个表格 -->
    <div class="putImg"  style="position: relative">
        <div style="position: absolute;top:0px;left: 10px"><img style="width: 200px; height: 200px;" th:src="${huaWeiUrl}+${company.companySeal}" alt="" srcset="" /></div>
        <table class="one" cellspacing="0" cellpadding="0">
            <thead>
            <tr>
                <!-- 卖方 -->
                <td width="50%" style="color: #0647eb;">VENDOR:</td>
                <!-- 买方 -->
                <td style="color: #0647eb;">BUYER:</td>
            </tr>
            </thead>
            <tbody>
            <tr  style="position: relative">
                <td>
                    <!-- 卖方名称 -->
                    <span th:text="${company.nameEnglish}" />

                </td>

                <td>
                    <!-- 买方名称 -->
                    <span th:text="${contract.customerCompanyName}" />
                </td>
            </tr>
            <tr style="height:20px">
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <!-- 卖方地址+邮编+市+省+国家 -->
                    <span th:text="${company.addressEnglish}+', '+${company.zipCode}+', '+${company.cityEnglish}+', '+${company.provinceEnglish}+', '+${company.countryEnglish}" />
                </td>
                <td>
                    <p th:if="${contract.customerCityName != contract.customerState}">
                        <!-- 买方地址+邮编+市+省+国家 -->
                        <span th:text="${contract.customerAddr}+', '+${contract.customerZipCode}+', '+${contract.customerCityName}+', '+${contract.customerState}+', '+${contract.customerCountryEnName} " />
                    </p>
                    <p th:if="${contract.customerCityName == contract.customerState}">
                        <!-- 买方地址+邮编+市+国家 -->
                        <span th:text="${contract.customerAddr}+', '+${contract.customerZipCode}+', '+${contract.customerCityName}+', '+${contract.customerCountryEnName} " />
                    </p>
                    <!-- 买方其他信息家 -->
                    <span th:text="${contract.customerOtherMsg}" />
                </td>
            </tr>
            <tr style="height:20px">
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>
                    <table class="ta_inner">
                        <tr>
                            <td>CONTACT:</td>
                            <td>
                                <!-- 卖方联系人 -->
                                <span th:text="${company.contacts}" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="ta_inner">
                        <tr>
                            <td>
                                CONTACT:
                            </td>
                            <td>
                                <!-- 买方联系人 -->
                                <span th:text="${contract.customerName}" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="ta_inner">
                        <tr>
                            <td>TEL.:</td>
                            <td>
                                <!-- 卖方联系电话 -->
                                <span th:text="${company.mobile}" />
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table class="ta_inner">
                        <tr>
                            <td>
                                TEL.:
                            </td>
                            <td>
                                <!-- 买方联系电话 -->
                                <span th:text="${contract.customerTel}" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <br />
    <!-- 第二个表格 -->
    <table class="two" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td width="33.33%">
                <table class="ta_inner" cellspacing="0" cellpadding="0" border="0px">
                    <thead>
                    <tr>
                        <!-- 原产国 -->
                        <td>COUNTRY OF ORIGIN:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <!-- 卖方国家名称 -->
                            <span th:text="${company.countryEnglish}" />
                        </td>
                    </tr>
                </table>
            </td>
            <td width="33.33%">
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 目的国 -->
                        <td>COUNTRY OF DESTINATION:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <span th:text="${contract.customerCountryId}" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 装运港 -->
                        <td>PLACE OF DISCHARGE:</td>
                    </tr>
                    </thead>
                    <tr>
                        <!-- 装运港 -->
                        <td th:if="${contract.shippingType} eq 1">
                            <span th:text="${contract.wharf}" />
                        </td>
                        <td th:if="${contract.shippingType} eq 2">
                            <span th:text="${contract.wharf}" />
                        </td>
                        <td th:if="${contract.shippingType} eq 3">
                            <span th:text="${company.cityEnglish}" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 贸易方式 -->
                        <td>TERMS OF DELIVERY:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <!-- 贸易方式 -->
                            <span th:text="${contract.tradeModeName}" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 货币代码 -->
                        <td>CURRENCY:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <!-- 货币代码 -->
                            <span th:text="${currencyCode}" />
                        </td>
                    </tr>
                </table>
            </td>
            <td>
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 运输方式 -->
                        <td>EXPORT BY/VIA:</td>
                    </tr>
                    </thead>
                    <tr>
                        <!-- 运输方式 -->
                        <td th:if="${contract.shippingType} eq 1">BY AIR</td>
                        <td th:if="${contract.shippingType} eq 2">BY SEA</td>
                        <td th:if="${contract.shippingType} eq 3">BY EXPRESS</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 交货期 -->
                        <td>DELIVERY TIME:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <!-- 交货期 -->
                            <span th:text="${contract.deliveryDay}" />DAYS
                        </td>
                    </tr>
                </table>
            </td>
            <td colspan="2">
                <table class="ta_inner">
                    <thead>
                    <tr>
                        <!-- 付款条件 -->
                        <td>TERMS OF PAYMENT:</td>
                    </tr>
                    </thead>
                    <tr>
                        <td>
                            <!-- 付款条件 -->
                            <span th:text="${contract.paymentRemark}" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <br />
    <!-- 第三个表格 -->
    <table class="three" cellspacing="0" cellpadding="0" border="0">
        <thead>
        <tr>
            <th style="width: 10%">
                NO.
            </th>
            <th style="width: 35%">
                <!-- 货物描述 -->
                COMMODITY, SPECIFICATION
            </th>
            <th style="width: 12%">
                UNIT
            </th>
            <th style="width: 13%">
                QUANTITY
            </th>
            <th style="width: 15%">
                UNIT PRICE
            </th>
            <th style="width: 15%; border-right: 0;">
                TOTAL PRICE
            </th>
        </tr>
        </thead>
        <tr th:each="product,index:${products}">
            <td>
                <span th:text="${index.index}+1" />
            </td>
            <td>
                <span th:text="${product.productNameEn}" />
                <!-- <br />
                              HS CODE:<span th:text="${product.customsCode}" /> -->
            </td>
            <td>
                <span th:text="${product.unit}" />
            </td>
            <td>
                <span th:text="${product.quantity}" />
            </td>
            <td>
                <span th:text="${currencyType}+''+${product.price}" />
            </td>
            <td style="border-right: 0;">
                <span th:text="${currencyType}+''+${product.sumPrice}" />
            </td>
        </tr>
        <tr style="color: #0647eb;">
            <td colspan="2" style="font-weight: 600;">
                SUBTOTAL:
            </td>
            <td></td>
            <td>
                <span th:text="${productTotalCount}" />
            </td>
            <td></td>
            <td style="border-right: 0;">
                <span th:text="${currencyType}+''+${productTotalAmount}" />
            </td>
        </tr>
        <tr th:each="project,index:${projects}">
            <td colspan="5" style="text-align: right; font-weight: 600; color: #0647eb;">
                <span th:text="${project.projectName}" />:
            </td>
            <td style="border-right: 0;">
                <span th:text="${currencyType}+''+${project.projectPrice}" />
            </td>
        </tr>
        <tr>
            <td colspan="5" style="text-align: right; font-weight: 600; color: #0647eb;">
                TOTAL PRICE:
                <!-- <span th:text="${contract.tradeModeName}" /> VALUE: -->
            </td>
            <td style="border-right: 0;">
                <span th:text="${currencyType}+''+${contractTotalAmount}" />
            </td>
        </tr>
        <tr>
            <td colspan="6" style="text-align: left; border-right: 0; border-bottom: 0; font-weight: 600;">
                <span th:text="${moneyEn}" />
            </td>
        </tr>
    </table>
    <br />
    <!-- 第四个表格 -->
    <table class="four" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th style="width: 100%; color: #0647eb; text-align: left; font-weight: 600;; border-bottom: 1px solid black;">
                ACCOUNT INFORMATION:
            </th>
        </tr>
        </thead>
        <tr>
            <!-- paypal -->
            <td th:if="${contract.payWay} eq 1">
                <p>
                    <!-- 账号 -->
                    <span th:text="${contract.companyBankCard}" />
                </p>
            </td>

            <!-- 银行 -->
            <td th:if="${contract.payWay} eq 2 or ${contract.payWay} eq 3">
                <p>
                    <!-- 收款人名称 -->
                    Beneficiary Name :<span th:text="${contract.collName}" />
                </p>
                <p>
                    <!-- 银行名称 -->
                    Beneficiary Bank :<span th:text="${contract.companyBankName}" />
                </p>
                <p>
                    <!-- 银行地址 -->
                    Beneficiary Bank Address :<span th:text="${contract.companyBankAddr}" />
                </p>
                <p>
                    <!-- 企业账户卡号 -->
                    Beneficiary Account Number :<span th:text="${contract.companyBankCard}" />
                </p>
                <p>
                    <!-- 银行swift code -->
                    Swift Code :<span th:text="${contract.companyBankSwiftCode}" />
                </p>
                <p>
                    <!-- 收款人地址 -->
                    Beneficiary Address:<span th:text="${contract.collAddress}" />
                </p>
            </td>

            <!-- 西联 -->
            <td th:if="${contract.payWay} eq 4">
                <p>
                    <!-- 名 -->
                    First Name(Forname)： :<span th:text="${contract.companyBankCard}" />
                </p>
                <p>
                    <!-- 姓 -->
                    Last Name(Surname) :<span th:text="${contract.companyBankName}" />
                </p>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <!-- 尾部 -->
    <table cellspacing="0" cellpadding="0" style="width:100%;border:0;text-align: left;">
        <thead style="color: #0647eb;">
        <tr>
            <td style="width: 50%">CONFIRMED BY VENDOR:</td>
            <td style="width: 50%">CONFIRMED BY BUYER:</td>
        </tr>
        </thead>
        <tr>
            <td style="width: 50%; position: relative;">
                <!-- 卖方：企业中英文名称 -->
                <span th:text="${company.nameEnglish}" />
                <div style="padding: 10px 0 0 10px; position: absolute; top: -160px">

                </div>
            </td>
            <td style="width: 50%; vertical-align: top">
                <!-- 买方：客户公司 -->
                <span th:text="${contract.customerCompanyName}" />
            </td>
        </tr>
    </table>
</div>
</body>

</html>