|
@@ -34,6 +34,109 @@
|
|
|
</template>
|
|
|
</byTable>
|
|
|
</div>
|
|
|
+
|
|
|
+ <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="860" v-loading="loadingPrint">
|
|
|
+ <div id="pdfDom" style="width: 800px; padding: 16px; font-size: 12px !important">
|
|
|
+ <div style="font-size: 18px; text-align: center">{{ printDetails.sellCorporationNameEn }}</div>
|
|
|
+ <div style="text-align: center">
|
|
|
+ {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
|
|
|
+ </div>
|
|
|
+ <div style="font-size: 14px; color: #409eff; text-align: center; padding-top: 16px">PROFORMA INVOICE</div>
|
|
|
+ <div style="padding-top: 8px">
|
|
|
+ <div>PI NO. : {{ printDetails.contractCode }}</div>
|
|
|
+ <div>PI DATE: {{ printDetails.createTimeEn }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="border: 1px solid #999; display: flex">
|
|
|
+ <div style="width: 50%; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">VENDOR:</div>
|
|
|
+ <div>{{ printDetails.sellCorporationNameEn }}</div>
|
|
|
+ <div style="padding: 16px 0">
|
|
|
+ {{ printDetails.sellCountryName }},{{ printDetails.sellProvinceName }},{{ printDetails.sellCityName }},{{ printDetails.sellDetailedAddress }}
|
|
|
+ </div>
|
|
|
+ <div>{{ printDetails.sellContactName }},{{ printDetails.sellContactNumber }}</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 50%">
|
|
|
+ <div style="color: #409eff">BUYER:</div>
|
|
|
+ <div>{{ printDetails.buyCorporationName }}</div>
|
|
|
+ <div style="padding: 16px 0">
|
|
|
+ {{ printDetails.buyCountryName }},{{ printDetails.buyProvinceName }},{{ printDetails.buyCityName }},{{ printDetails.buyDetailedAddress }}
|
|
|
+ </div>
|
|
|
+ <div>{{ printDetails.buyContactName }},{{ printDetails.buyContactNumber }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 16px"></div>
|
|
|
+ <div style="border: 1px solid #999">
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <div style="width: 33%; border-bottom: 1px solid #999; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">COUNTRY OF ORIGIN:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 34%; border-bottom: 1px solid #999; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">COUNTRY OF DESTINATION:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%; border-bottom: 1px solid #999">
|
|
|
+ <div style="color: #409eff">PLACE OF DISCHARGE:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <div style="width: 33%; border-bottom: 1px solid #999; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">TERMS OF DELIVERY:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 34%; border-bottom: 1px solid #999; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">CURRENCY:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 33%; border-bottom: 1px solid #999">
|
|
|
+ <div style="color: #409eff">EXPORT BY/VIA:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <div style="width: 33%; border-right: 1px solid #999">
|
|
|
+ <div style="color: #409eff">DELIVERY TIME:</div>
|
|
|
+ </div>
|
|
|
+ <div style="width: 67%">
|
|
|
+ <div style="color: #409eff">TERMS OF PAYMENT:</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 16px"></div>
|
|
|
+ <div class="baseRow" style="display: flex; color: #409eff">
|
|
|
+ <div class="contentRow" style="width: 50px; text-align: center">NO.</div>
|
|
|
+ <div class="contentRow" style="width: calc(100% - 450px); text-align: center">COMMODITY, SPECIFICATION</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">UNIT</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">QUANTITY</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">UNIT PRICE</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">TOTAL PRICE</div>
|
|
|
+ </div>
|
|
|
+ <div v-if="printDetails.productInfoList && printDetails.productInfoList.length > 0">
|
|
|
+ <div class="baseRow" style="display: flex" v-for="(item, index) in printDetails.productInfoList" :key="item.productId">
|
|
|
+ <div class="contentRow" style="width: 50px; text-align: center">{{ index + 1 }}</div>
|
|
|
+ <div class="contentRow" style="width: calc(100% - 450px); text-align: center">{{ item.productName }}</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">{{ item.productUnit }}</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">{{ item.productQuantity }}</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">{{ item.productPrice }}</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">{{ item.amount }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="baseRow" style="display: flex; color: #409eff">
|
|
|
+ <div class="contentRow" style="width: calc(100% - 400px); text-align: center">SUBTOTAL: </div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center"></div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">168</div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center"></div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">1200</div>
|
|
|
+ </div>
|
|
|
+ <div class="baseRow" style="display: flex; color: #409eff">
|
|
|
+ <div class="contentRow" style="width: calc(100% - 100px); text-align: right;">FREIGHT COST: </div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">1200</div>
|
|
|
+ </div>
|
|
|
+ <div class="baseRow" style="display: flex; color: #409eff">
|
|
|
+ <div class="contentRow" style="width: calc(100% - 100px); text-align: right;">TOTAL PRICE: </div>
|
|
|
+ <div class="contentRow" style="width: 100px; text-align: center">1200</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openPrint = false" size="large">取消</el-button>
|
|
|
+ <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -237,6 +340,17 @@ const config = computed(() => {
|
|
|
return [
|
|
|
{
|
|
|
attrs: {
|
|
|
+ label: "打印",
|
|
|
+ type: "primary",
|
|
|
+ text: true,
|
|
|
+ },
|
|
|
+ el: "button",
|
|
|
+ click() {
|
|
|
+ clickPrint(row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
label: "作废",
|
|
|
type: "primary",
|
|
|
text: true,
|
|
@@ -327,6 +441,19 @@ const newContract = () => {
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
+const openPrint = ref(true);
|
|
|
+const loadingPrint = ref(false);
|
|
|
+const printDetails = ref({});
|
|
|
+const clickPrint = (row) => {
|
|
|
+ loadingPrint.value = true;
|
|
|
+ openPrint.value = true;
|
|
|
+ proxy.post("/contract/getContractPdfInfo", { id: row.id }).then((res) => {
|
|
|
+ printDetails.value = res;
|
|
|
+ });
|
|
|
+};
|
|
|
+const clickDownload = () => {
|
|
|
+ proxy.getPdf("外销合同PDF文件");
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
@@ -336,4 +463,14 @@ const newContract = () => {
|
|
|
::v-deep(.el-input-number .el-input__inner) {
|
|
|
text-align: left;
|
|
|
}
|
|
|
+.baseRow {
|
|
|
+ min-height: 24px;
|
|
|
+ border-top: 1px solid #999;
|
|
|
+ border-left: 1px solid #999;
|
|
|
+}
|
|
|
+.contentRow {
|
|
|
+ border-right: 1px solid #999;
|
|
|
+ line-height: 24px;
|
|
|
+ padding-left: 4px;
|
|
|
+}
|
|
|
</style>
|