|
@@ -1,91 +1,119 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
- <div id="pdfDom" ref="pdfDom" style="padding: 30px 60px" v-loading="loading">
|
|
|
- <div>
|
|
|
+ <div id="pdfDom" ref="pdfDom" style="padding: 30px 60px;color:#000; text-align: center;" v-loading="loading">
|
|
|
+
|
|
|
+ <div class="title">
|
|
|
福建三梵体育用品实业有限公司
|
|
|
- <div>
|
|
|
- 销售订单
|
|
|
+ </div>
|
|
|
+ <div class="title-info">
|
|
|
+ <div class="vertical-bar"></div>
|
|
|
+ <div class="content">销售订单</div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;">
|
|
|
+ <div style="width:50%">
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 需方:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 需方名称:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 联系人:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 联系电话:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 传真:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div style="display:flex;font-weight:700">
|
|
|
- <div style="width:50%">
|
|
|
- <div class="row">
|
|
|
- <div style="width:100px">
|
|
|
+ <div style="width:50%">
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 订单编号:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
|
|
|
- </div>
|
|
|
- <div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 下单日期:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="width:50%">
|
|
|
- <div class="row">
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 结算方式:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 业务员/联系电话:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <div class="row">
|
|
|
+ <div class="left">
|
|
|
+ 送货地址:
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- <table border="1" style="width: 100%" class="table">
|
|
|
- <tr>
|
|
|
- <td style="width: 50%; text-align: left">
|
|
|
- Buyer: {{ pdfData.buyCorporationName }}
|
|
|
- </td>
|
|
|
- <td style="width: 50%; text-align: left">
|
|
|
- Seller: {{ pdfData.sellCorporationNameEn }}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table> -->
|
|
|
- <table border="1" style="width: 100%; border-top: none" class="table">
|
|
|
- <tr>
|
|
|
- <td style="width: 15%">PI No.</td>
|
|
|
- <td style="width: 35%">{{ pdfData.contractCode }}</td>
|
|
|
- <td style="width: 15%">Date:</td>
|
|
|
- <td style="width: 35%">{{ pdfData.createTimeEn }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <!-- 客户合同号 -->
|
|
|
- <td style="width: 15%">PO No.</td>
|
|
|
- <td style="width: 35%"></td>
|
|
|
- <td style="width: 15%">Loading Port:</td>
|
|
|
- <td style="width: 35%">{{ pdfData.transportRemark }}</td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <div style="height: 15px; background: #7f197f"></div>
|
|
|
<table border="1" style="width: 100%" class="table">
|
|
|
<tr>
|
|
|
- <td style="width: 15%">Image</td>
|
|
|
- <td style="width: 20%">Description</td>
|
|
|
- <td style="width: 15%">Size</td>
|
|
|
- <td style="width: 12%">Packaging</td>
|
|
|
- <td style="width: 12%">
|
|
|
- Order <br />
|
|
|
- Quantity
|
|
|
- </td>
|
|
|
- <td style="width: 13%">Unit <br />Price</td>
|
|
|
- <td style="width: 13%">Total <br />Amount</td>
|
|
|
+ <td>序号</td>
|
|
|
+ <td>产品名称</td>
|
|
|
+ <td>规格型号</td>
|
|
|
+ <td>产品纹路</td>
|
|
|
+ <td> 颜色</td>
|
|
|
+ <td>单位</td>
|
|
|
+ <td>数量</td>
|
|
|
+ <td>单价</td>
|
|
|
+ <td>金额</td>
|
|
|
+ <td>备注</td>
|
|
|
</tr>
|
|
|
|
|
|
<tr v-if="pdfData.productInfoList && pdfData.productInfoList.length > 0" v-for="(item, index) in pdfData.productInfoList"
|
|
|
:key="item.productId">
|
|
|
- <td style="width: 15%">
|
|
|
- <img :src="item.fileList[0].fileUrl" alt="" fit="scale-down" style="height: 60px; width: 60px"
|
|
|
- v-if="item.fileList && item.fileList.length > 0" />
|
|
|
- </td>
|
|
|
- <td style="width: 20%">{{ item.productName }}</td>
|
|
|
- <td style="width: 15%">
|
|
|
- <span v-if="item.productModel">{{ item.productModel }} cm</span>
|
|
|
- </td>
|
|
|
- <td style="width: 12%">{{ item.packMethod }}</td>
|
|
|
- <td style="width: 12%">
|
|
|
- {{ item.productQuantity }}
|
|
|
- </td>
|
|
|
- <td style="width: 13%">
|
|
|
- {{ pdfData.currency }} {{ moneyFormat(item.productPrice, 2) }}
|
|
|
- </td>
|
|
|
- <td style="width: 13%">
|
|
|
- {{ pdfData.currency }} {{ moneyFormat(item.amount, 2) }}
|
|
|
- </td>
|
|
|
+
|
|
|
</tr>
|
|
|
<template v-if="
|
|
|
pdfData.contractProjectList &&
|
|
@@ -105,116 +133,7 @@
|
|
|
</td>
|
|
|
</tr>
|
|
|
</template>
|
|
|
- <tr>
|
|
|
- <td colspan="6" style="text-align: right">Total Amount:</td>
|
|
|
- <td>
|
|
|
- {{ pdfData.currency }}
|
|
|
- {{ moneyFormat(pdfData.totalAmount, 2) }}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td colspan="6" style="text-align: right">
|
|
|
- Deposit( {{ pdfData.advanceRatio }} %):
|
|
|
- </td>
|
|
|
- <td>{{ pdfData.currency }} {{ getBalance(pdfData.advanceRatio) }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td colspan="6" style="text-align: right">
|
|
|
- Balance( {{ pdfData.advanceRatioOne }} %):
|
|
|
- </td>
|
|
|
- <td>
|
|
|
- {{ pdfData.currency }} {{ getBalance(pdfData.advanceRatioOne) }}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <div style="height: 15px; background: #7f197f"></div>
|
|
|
- <table border="1" style="width: 100%" class="table">
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">1.Lead Time:</td>
|
|
|
- <td style="text-align: left">{{ pdfData.deliveryTime }}</td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">2.Payment Term:</td>
|
|
|
- <td style="text-align: left">
|
|
|
- <div v-html="pdfData.remark"></div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">3.Shipping Mode</td>
|
|
|
- <td style="text-align: left">
|
|
|
- {{ dictValueLabel(pdfData.transportMethod, shippingMethod) }}
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">4.Insurance</td>
|
|
|
- <td style="text-align: left">By Buyer</td>
|
|
|
- </tr>
|
|
|
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">5.Banking Info</td>
|
|
|
- <td style="text-align: left">
|
|
|
- <div>Beneficiary Name: {{ pdfData.beneficiaryName }}</div>
|
|
|
- <div>Beneficiary Bank: {{ pdfData.beneficiaryBank }}</div>
|
|
|
- <div>
|
|
|
- Beneficiary Bank Address:
|
|
|
- {{ pdfData.beneficiaryBankAddress }}
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- Beneficiary Account Number:
|
|
|
- {{ pdfData.beneficiaryAccountNumber }}
|
|
|
- </div>
|
|
|
- <div>Swift Code: {{ pdfData.swiftCode }}</div>
|
|
|
- <div>Beneficiary Address: {{ pdfData.beneficiaryAddress }}</div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- <tr>
|
|
|
- <td class="width-one" style="text-align: left">
|
|
|
- 6.Important Clauses:
|
|
|
- </td>
|
|
|
- <td style="text-align: left">
|
|
|
- A:Making payment will be considered as confirmation and
|
|
|
- countersignature of this order. Order can not be canceled after
|
|
|
- confirmation and countersignature except acceptance by the seller.
|
|
|
- The Buyer has obligation to make full payment of order including
|
|
|
- canceled orders.
|
|
|
- <br />
|
|
|
- B:The seller should not be responsible for the delay cause by the
|
|
|
- buyer and force majeure.
|
|
|
- <br />
|
|
|
- C:Modification of products will not be allowed after the deposit has
|
|
|
- been arranged unless acceptance by the seller. All costs and
|
|
|
- <br />consequences arising from modifying the product or other
|
|
|
- things will be borne by the buyer.
|
|
|
- <br />
|
|
|
- D:Packging details including shipping marks, barcodes, artworks,etc
|
|
|
- .should be provided 30 days before cargo readty agreed by both
|
|
|
- <br />parties.The delay caused by the buyer's failure to submit the
|
|
|
- packaging materials on time will be borne the buyer.
|
|
|
- <br />
|
|
|
- E: Shipping information including consignee and notify party,
|
|
|
- discharge port, loading port ects should be provided 20 before
|
|
|
- cargo<br />
|
|
|
- ready date. The delay caused by the buyer's failure to provide
|
|
|
- shipping information on time will be borne by the buyer.
|
|
|
- <br />
|
|
|
- F:Please notify the seller of the special requirements of shipping
|
|
|
- documents and certificates when placing an order.
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
- </table>
|
|
|
- <table border="1" style="width: 100%; border-top: none" class="table">
|
|
|
- <tr>
|
|
|
- <td style="width: 50%; text-align: left">
|
|
|
- The Buyer's Signature
|
|
|
- <div style="width: 200px; height: 200px"></div>
|
|
|
- </td>
|
|
|
- <td style="width: 50%; text-align: left">
|
|
|
- The Seller's Signature
|
|
|
- <div style="width: 200px; height: 200px">
|
|
|
- <img v-if="pdfData.companySeal" :src="pdfData.companySeal" alt="" fit="scale-down" style="height: 200px; width: 200px" />
|
|
|
- </div>
|
|
|
- </td>
|
|
|
- </tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -341,14 +260,36 @@ watch(
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.color-class {
|
|
|
- color: #7f197f;
|
|
|
+.title {
|
|
|
+ font-size: 32px;
|
|
|
+ // font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
-.bck {
|
|
|
- background: #7f197f;
|
|
|
+.title-info {
|
|
|
+ text-align: center;
|
|
|
+ width: 100%;
|
|
|
+ margin: 30px 0;
|
|
|
+ .vertical-bar {
|
|
|
+ width: 6px;
|
|
|
+ height: 18px;
|
|
|
+ background-color: #0084ff;
|
|
|
+ margin-right: 9px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ // font-weight: 600;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #333333;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
}
|
|
|
-.width-one {
|
|
|
- width: 140px;
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ line-height: 28px;
|
|
|
+ .left {
|
|
|
+ width: 120px;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
}
|
|
|
.table {
|
|
|
border-collapse: collapse;
|