Merge remote-tracking branch 'origin/master'

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

@@ -1,31 +1,37 @@
 <template>
   <div style="max-height: calc(100vh - 200px); overflow: hidden auto">
-    <el-table :data="formData.data.items" style="width: 100%">
-      <el-table-column label="交易时间" prop="tradingTime" width="110" />
-      <el-table-column label="交易类型" width="110">
-        <template v-slot="scope">
-          <el-tag v-if="scope.row.type === 1" type="success">请款</el-tag>
-          <el-tag v-else-if="scope.row.type === 2" type="warning">到账认领</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="交易金额" prop="tradingAmount" width="110" />
-      <el-table-column label="摘要" prop="remark" />
-      <el-table-column label="资金账户">
-        <template v-slot="scope">
-          <div>{{ scope.row.accountName }} ({{ scope.row.depositBank }})</div>
-        </template>
-      </el-table-column>
-      <el-table-column label="对方账户">
-        <template v-slot="scope">
-          <div>{{ scope.row.targetAccountName }} ({{ scope.row.targetAccount }})</div>
-        </template>
-      </el-table-column>
-    </el-table>
+    <div id="pdfDom" style="padding: 10px">
+      <el-table :data="formData.data.items" style="width: 100%">
+        <el-table-column label="交易时间" prop="tradingTime" width="110" />
+        <el-table-column label="交易类型" width="110">
+          <template v-slot="scope">
+            <el-tag v-if="scope.row.type === 1" type="success">请款</el-tag>
+            <el-tag v-else-if="scope.row.type === 2" type="warning">到账认领</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="交易金额" prop="tradingAmount" width="110" />
+        <el-table-column label="摘要" prop="remark" />
+        <el-table-column label="资金账户">
+          <template v-slot="scope">
+            <div>{{ scope.row.accountName }} ({{ scope.row.depositBank }})</div>
+          </template>
+        </el-table-column>
+        <el-table-column label="对方账户">
+          <template v-slot="scope">
+            <div>{{ scope.row.targetAccountName }} ({{ scope.row.targetAccount }})</div>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div style="text-align: center; padding: 8px">
+      <el-button type="primary" v-print="printObj" size="large">打印</el-button>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { getTransactionList } from '@/api/business/contract/info'
+import { getPdf } from '@/utils/getPdf.js'
 
 const { proxy } = getCurrentInstance()
 const props = defineProps({
@@ -36,6 +42,12 @@ const formData = reactive({
     items: []
   }
 })
+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"/>'
+})
 onMounted(() => {
   getTransactionList({ id: props.rowData.id }).then((res) => {
     formData.data.items = res