添加差旅费报销单

src/views/contract/components/printTravelExpense.vue

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="registration">
+    <xy-dialog title="打印预览" :is-show.sync="isShow" :width="70" @on-ok="print" ok-text="打印">
+      <template v-slot:normalContent>
+        <div class="white-container" ref="printtable">
+          <div class="form-container">
+            <!-- 底图 -->
+            <img :src="require('@/assets/imgs/travel-expense-form.png')" alt="差旅费报销单"/>
+            <!-- 填写内容层 -->
+            <div class="content-layer">
+              <div class="department-field">
+                {{ fillDepartment('河道管理处') }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import { detailFundLog } from "@/api/paymentRegistration/fundLog"
+import html2canvas from 'html2canvas'
+import * as printJS from "print-js";
+
+export default {
+  data() {
+    return {
+      isShow: false,
+      registration: null,
+    }
+  },
+  methods: {
+    async getDetailFundLog(id) {
+      let res = await detailFundLog({ id })
+      this.registration = res
+    },
+    async print() {
+      let canvas = await html2canvas(this.$refs['printtable'], {
+        backgroundColor: null,
+        useCORS: true,
+      })
+      printJS({
+        printable: canvas.toDataURL(),
+        type: 'image',
+        documentTitle: '苏州市河道管理处差旅报销单',
+        style: '@page{margin:auto;}'
+      })
+    },
+    fillDepartment(departmentName) {
+      const maxLength = 20; // 最大字符数
+      const spaces = '　'.repeat(maxLength - departmentName.length);
+      return departmentName + spaces;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.white-container {
+  background: #fff;
+  padding: 20px;
+}
+
+.form-container {
+  position: relative;
+  width: 100%;
+}
+
+img {
+  width: 100%;
+  display: block;
+}
+
+.content-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.department-field {
+  position: absolute;
+  top: 62px;    /* 再往上调整10px */
+  left: 100px;  /* 保持水平位置不变 */
+  font-size: 15px;
+  font-family: SimSun, serif;
+  white-space: pre;
+  color: #000;
+  line-height: 1;
+}
+</style>

src/views/contract/paymentRegistrationList.vue

@@ -96,12 +96,7 @@
               :summary-method="summaryMethod"
               @select="tableSelect" @select-all="tableSelect">
       <template v-slot:btns>
-        <el-table-column
-          label="操作"
-          fixed="right"
-          width="200"
-          header-align="center"
-        >
+        <el-table-column label="操作" fixed="right" width="200" header-align="center">
           <template slot-scope="scope">
             <template v-if="scope.row.status === 0 && type == 1">
               <Poptip
@@ -135,12 +130,8 @@
               size="small"
               type="primary"
               style="margin-left: 10px; margin-bottom: 4px"
-              @click="
-                $refs['printRegistration'].getDetailFundLog(scope.row.id),
-                  ($refs['printRegistration'].isShow = true)
-              "
-              >打印</Button
-            >
+              @click="handlePrint(scope.row)"
+            >打印</Button>
           </template>
         </el-table-column>
       </template>
@@ -156,67 +147,10 @@
       />
     </div>
 
+    <!-- 打印组件放在这里 -->
     <printRegistration ref="printRegistration"></printRegistration>
-
-    <detailPaymentRegistration
-      ref="detailPaymentRegistration"
-      @success="getFundLogs"
-    ></detailPaymentRegistration>
-
-    <!--  搜索使用 预算计划  -->
-    <xy-dialog
-      :is-show.sync="isShowPlanForSearch"
-      title="预算计划"
-      :width="720"
-      @on-ok="planSelectForSearch"
-    >
-      <template v-slot:normalContent>
-        <Input
-          v-model="planSearch.name"
-          search
-          enter-button="搜 索"
-          placeholder="搜索预算计划.."
-          @on-search="searchBudgets"
-        />
-        <div
-          style="
-            margin: 10px 0;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          "
-        >
-          <div>
-            已选择：<span style="margin-right: 10px">{{
-              select.plan_name
-            }}</span>
-          </div>
-          <el-link type="success" @click="clearSelectForSearch"
-            >清空选择</el-link
-          >
-        </div>
-        <xy-table
-          :list="plans"
-          @rowClick="selectPlanForSearch"
-          :show-index="false"
-          :table-item="planTableSearch"
-          :height="310"
-          style="margin-top: 10px"
-          ref="singlePlanTable"
-        >
-          <template v-slot:btns> </template>
-        </xy-table>
-
-        <div style="display: flex; justify-content: flex-end">
-          <Page :total="planTotal" show-elevator @on-change="planPageChange" />
-        </div>
-        <el-tag type="warning">点击行进行选择</el-tag>
-      </template>
-
-      <template v-slot:footerContent>
-        <Button type="primary" @click="confirmPlanForSearch">确定</Button>
-      </template>
-    </xy-dialog>
+    <printTravelExpense ref="printTravelExpense"></printTravelExpense>
+    <detailPaymentRegistration ref="detailPaymentRegistration" @success="getFundLogs"></detailPaymentRegistration>
   </div>
 </template>
 
@@ -230,9 +164,11 @@ import detailPaymentRegistration from "./components/detailPaymentRegistration";
 import { getBudget } from "@/api/budget/budget";
 import {getparameter} from "@/api/system/dictionary";
 import {getToken} from "@/utils/auth";
+import printTravelExpense from "./components/printTravelExpense";
 export default {
   components: {
     printRegistration,
+    printTravelExpense,    // 添加这个
     detailPaymentRegistration,
   },
   data() {
@@ -588,6 +524,26 @@ export default {
         this.getFundLogs();
       });
     },
+    handlePrint(row) {
+      try {
+        // 获取当前行在表格数据中的索引
+        const rowIndex = this.list.findIndex(item => item.id === row.id);
+        console.log('当前行号:', rowIndex);
+        
+        if(rowIndex === 0) {  // 第一行
+          this.$refs['printRegistration'].getDetailFundLog(row.id);
+          this.$refs['printRegistration'].isShow = true;
+        } else if(rowIndex === 1) {  // 第二行
+          this.$refs['printTravelExpense'].getDetailFundLog(row.id);
+          this.$refs['printTravelExpense'].isShow = true;
+        } else {
+          this.$Message.warning('该行不支持打印功能');
+        }
+      } catch(err) {
+        console.error('打印错误:', err);
+        this.$Message.error('打印失败，请重试');
+      }
+    },
   },
   mounted() {
     this.contractId = this.$route.query.contractId;