1

jy-ui/src/views/business/contract/info/detail.vue

@@ -1,161 +1,167 @@
 <template>
-  <div style="max-height: calc(100vh - 200px); overflow: hidden auto">
-    <div style="text-align: center; font-size: 20px; color: #409eff; font-weight: bold">
-      CONTRACT
-    </div>
-    <!-- 合同基本信息表 -->
-    <table class="contract-table">
-      <tr>
-        <th style="width: 16%">合同编号:</th>
-        <td colspan="3">{{ formData.data.contractNo }}</td>
-      </tr>
-      <tr>
-        <th style="width: 16%">签订日期:</th>
-        <td style="width: 34%">{{ convertDateFormat(formData.data.signingDate) }}</td>
-        <th style="width: 16%">报价有效期:</th>
-        <td style="width: 34%">{{ formData.data.validityDate }} days</td>
-      </tr>
-    </table>
-
-    <!-- 供需方信息表 -->
-    <table class="contract-table">
-      <tr>
-        <th style="width: 50%">供方:</th>
-        <th>需方:</th>
-      </tr>
-      <tr>
-        <td>{{ formData.data.sellerCompany }}</td>
-        <td>{{ formData.data.customerName }}</td>
-      </tr>
-      <tr>
-        <td>{{ formData.data.sellerAddress }}</td>
-        <td>{{ formData.data.customerAddress }}</td>
-      </tr>
-      <tr>
-        <td>{{ formData.data.sellerCountry }}</td>
-        <td>{{ formData.data.customerCountry }}</td>
-      </tr>
-      <tr>
-        <td>{{ formData.data.sellerContact }}</td>
-        <td>{{ formData.data.customerTelNum }}</td>
-      </tr>
-    </table>
+  <div>
+    <div style="max-height: calc(100vh - 256px); overflow: hidden auto">
+      <div id="pdfDom" style="padding: 10px">
+        <div style="text-align: center; font-size: 20px; color: #409eff; font-weight: bold">CONTRACT</div>
+        <!-- 合同基本信息表 -->
+        <table class="contract-table">
+          <tr>
+            <th style="width: 16%">合同编号:</th>
+            <td colspan="3">{{ formData.data.contractNo }}</td>
+          </tr>
+          <tr>
+            <th style="width: 16%">签订日期:</th>
+            <td style="width: 34%">{{ convertDateFormat(formData.data.signingDate) }}</td>
+            <th style="width: 16%">报价有效期:</th>
+            <td style="width: 34%">{{ formData.data.validityDate }} days</td>
+          </tr>
+        </table>
 
-    <!-- 贸易信息表 -->
-    <table class="contract-table">
-      <tr>
-        <th>原产国:</th>
-        <th>目的国:</th>
-        <th>贸易方式:</th>
-      </tr>
-      <tr>
-        <td>{{ formData.data.sellerCountry }}</td>
-        <td>{{ formData.data.customerCountry }}</td>
-        <td>{{ formData.data.deliveryTerms }}</td>
-      </tr>
-      <tr>
-        <th>付款方式:</th>
-        <th>交货期:</th>
-        <th>运输方式:</th>
-      </tr>
-      <tr>
-        <td>{{ formData.data.paymentTerms }}</td>
-        <td>{{ formData.data.deliveryTime }} days</td>
-        <td>{{ formData.data.shippingMethod }}</td>
-      </tr>
-      <tr>
-        <th>装卸港:</th>
-        <th>目的港:</th>
-        <th>质保期:</th>
-      </tr>
-      <tr>
-        <td>{{ formData.data.placeOfDischarge }}</td>
-        <td>{{ formData.data.destination }}</td>
-        <td>{{ formData.data.warrantyPeriod }} days</td>
-      </tr>
-    </table>
+        <!-- 供需方信息表 -->
+        <table class="contract-table">
+          <tr>
+            <th style="width: 50%">供方:</th>
+            <th>需方:</th>
+          </tr>
+          <tr>
+            <td>{{ formData.data.sellerCompany }}</td>
+            <td>{{ formData.data.customerName }}</td>
+          </tr>
+          <tr>
+            <td>{{ formData.data.sellerAddress }}</td>
+            <td>{{ formData.data.customerAddress }}</td>
+          </tr>
+          <tr>
+            <td>{{ formData.data.sellerCountry }}</td>
+            <td>{{ formData.data.customerCountry }}</td>
+          </tr>
+          <tr>
+            <td>{{ formData.data.sellerContact }}</td>
+            <td>{{ formData.data.customerTelNum }}</td>
+          </tr>
+        </table>
 
-    <!-- 产品清单表 -->
-    <table class="contract-table">
-      <tr class="header-row">
-        <th>产品编号</th>
-        <th>产品描述</th>
-        <th>颜色</th>
-        <th>数量 (Pcs)</th>
-        <th>单价</th>
-        <th>总价</th>
-      </tr>
-      <template v-if="formData.data.list && formData.data.list.length > 0">
-        <tr v-for="(item, index) in formData.data.list" :key="index">
-          <td>{{ item.spuCode }}</td>
-          <td>{{ item.spuName }} {{ item.spec }}</td>
-          <td>{{ item.colour }}</td>
-          <td>{{ item.quantity }}</td>
-          <td>{{ item.unitPrice }}</td>
-          <td>{{ formData.data.currency }} {{ item.amount }}</td>
-        </tr>
-      </template>
-      <tr>
-        <th colspan="5">小计:</th>
-        <td>{{ formData.data.currency }} {{ calculateAmount() }}</td>
-      </tr>
-      <tr>
-        <th colspan="5">保险费:</th>
-        <td>{{ formData.data.currency }} {{ formData.data.insurance }}</td>
-      </tr>
-      <tr>
-        <th colspan="5">运费:</th>
-        <td>{{ formData.data.currency }} {{ formData.data.freightPrice }}</td>
-      </tr>
-      <tr>
-        <th colspan="5">合计:</th>
-        <td>{{ formData.data.currency }} {{ formData.data.amount }}</td>
-      </tr>
-    </table>
+        <!-- 贸易信息表 -->
+        <table class="contract-table">
+          <tr>
+            <th>原产国:</th>
+            <th>目的国:</th>
+            <th>贸易方式:</th>
+          </tr>
+          <tr>
+            <td>{{ formData.data.sellerCountry }}</td>
+            <td>{{ formData.data.customerCountry }}</td>
+            <td>{{ formData.data.deliveryTerms }}</td>
+          </tr>
+          <tr>
+            <th>付款方式:</th>
+            <th>交货期:</th>
+            <th>运输方式:</th>
+          </tr>
+          <tr>
+            <td>{{ formData.data.paymentTerms }}</td>
+            <td>{{ formData.data.deliveryTime }} days</td>
+            <td>{{ formData.data.shippingMethod }}</td>
+          </tr>
+          <tr>
+            <th>装卸港:</th>
+            <th>目的港:</th>
+            <th>质保期:</th>
+          </tr>
+          <tr>
+            <td>{{ formData.data.placeOfDischarge }}</td>
+            <td>{{ formData.data.destination }}</td>
+            <td>{{ formData.data.warrantyPeriod }} days</td>
+          </tr>
+        </table>
 
-    <!-- 账户信息表（原文数据不完整，保留空表结构） -->
-    <table class="contract-table">
-      <tr>
-        <th style="width: 40%">账户信息:</th>
-        <td></td>
-      </tr>
-      <template v-if="formData.data.paymentType == 1">
-        <tr>
-          <th>账户名:</th>
-          <td>{{ formData.data.sellAccountName }}</td>
-        </tr>
-        <tr>
-          <th>银行账号:</th>
-          <td>{{ formData.data.sellBankAccount }}</td>
-        </tr>
-        <tr>
-          <th>开户银行:</th>
-          <td>{{ formData.data.sellBankName }}</td>
-        </tr>
-        <tr>
-          <th>联行号:</th>
-          <td>{{ formData.data.sellBankCnapsCode }}</td>
-        </tr>
-      </template>
-      <template v-else-if="formData.data.paymentType == 2">
-        <tr>
-          <th>支付宝:</th>
-          <td>{{ formData.data.sellAlipayAccount }}</td>
-        </tr>
-      </template>
-    </table>
+        <!-- 产品清单表 -->
+        <table class="contract-table">
+          <tr class="header-row">
+            <th>产品编号</th>
+            <th>产品描述</th>
+            <th>颜色</th>
+            <th>数量 (Pcs)</th>
+            <th>单价</th>
+            <th>总价</th>
+          </tr>
+          <template v-if="formData.data.list && formData.data.list.length > 0">
+            <tr v-for="(item, index) in formData.data.list" :key="index">
+              <td>{{ item.spuCode }}</td>
+              <td>{{ item.spuName }} {{ item.spec }}</td>
+              <td>{{ item.colour }}</td>
+              <td>{{ item.quantity }}</td>
+              <td>{{ item.unitPrice }}</td>
+              <td>{{ formData.data.currency }} {{ item.amount }}</td>
+            </tr>
+          </template>
+          <tr>
+            <th colspan="5">小计:</th>
+            <td>{{ formData.data.currency }} {{ calculateAmount() }}</td>
+          </tr>
+          <tr>
+            <th colspan="5">保险费:</th>
+            <td>{{ formData.data.currency }} {{ formData.data.insurance }}</td>
+          </tr>
+          <tr>
+            <th colspan="5">运费:</th>
+            <td>{{ formData.data.currency }} {{ formData.data.freightPrice }}</td>
+          </tr>
+          <tr>
+            <th colspan="5">合计:</th>
+            <td>{{ formData.data.currency }} {{ formData.data.amount }}</td>
+          </tr>
+        </table>
 
-    <!-- 签名栏 -->
-    <div style="margin: 20px 0">签名:</div>
+        <!-- 账户信息表（原文数据不完整，保留空表结构） -->
+        <table class="contract-table">
+          <tr>
+            <th style="width: 40%">账户信息:</th>
+            <td></td>
+          </tr>
+          <template v-if="formData.data.paymentType == 1">
+            <tr>
+              <th>账户名:</th>
+              <td>{{ formData.data.sellAccountName }}</td>
+            </tr>
+            <tr>
+              <th>银行账号:</th>
+              <td>{{ formData.data.sellBankAccount }}</td>
+            </tr>
+            <tr>
+              <th>开户银行:</th>
+              <td>{{ formData.data.sellBankName }}</td>
+            </tr>
+            <tr>
+              <th>联行号:</th>
+              <td>{{ formData.data.sellBankCnapsCode }}</td>
+            </tr>
+          </template>
+          <template v-else-if="formData.data.paymentType == 2">
+            <tr>
+              <th>支付宝:</th>
+              <td>{{ formData.data.sellAlipayAccount }}</td>
+            </tr>
+          </template>
+        </table>
+        <!-- 签名栏 -->
+        <div style="margin: 20px 0">签名:</div>
+      </div>
+    </div>
+    <div style="text-align: center; padding: 8px">
+      <el-button type="primary" v-print="printObj" size="large">打印</el-button>
+      <el-button type="primary" @click="clickDownload()" size="large">下载PDF</el-button>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { getDetailApi } from '@/api/business/contract/info'
+import { getPdf } from '@/utils/getPdf.js'
 
 const { proxy } = getCurrentInstance()
 const props = defineProps({
-  rowData: Object,
+  rowData: Object
 })
 const formData = reactive({
   data: {
@@ -168,20 +174,7 @@ const convertDateFormat = (dateString) => {
   // 提取日、月、年
   const day = date.getDate()
   // 确保月份以英文缩写形式显示
-  const monthNames = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec'
-  ]
+  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
   const month = monthNames[date.getMonth()]
   const year = date.getFullYear().toString().slice(-2) // 获取年份的后两位
   // 组合成目标格式
@@ -192,18 +185,21 @@ const calculateAmount = () => {
   if (formData.data.list && formData.data.list.length > 0) {
     for (let i = 0; i < formData.data.list.length; i++) {
       if (formData.data.list[i].quantity && formData.data.list[i].unitPrice) {
-        amount = Number(
-          Math.round(
-            (amount +
-              Number(formData.data.list[i].unitPrice) * Number(formData.data.list[i].quantity)) *
-              100
-          ) / 100
-        )
+        amount = Number(Math.round((amount + Number(formData.data.list[i].unitPrice) * Number(formData.data.list[i].quantity)) * 100) / 100)
       }
     }
   }
   return amount
 }
+const printObj = ref({
+  id: 'pdfDom',
+  popTitle: '',
+  extraCss: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css',
+  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
+})
+const clickDownload = () => {
+  getPdf('合同' + formData.data.contractNo + '-PDF文件')
+}
 onMounted(() => {
   getDetailApi({ id: props.rowData.id }).then((res) => {
     formData.data = res