增加打印

src/views/finance/contrast/index.vue

@@ -699,6 +699,12 @@
                 size="mini"
                 >新 增</el-button
               >
+              <el-button
+                type="warning"
+                size="mini"
+                @click="printHandle"
+                :disabled="DzfeeList.length == 0"
+              >打印</el-button>
             </div>
             <div style="margin: 0 12px">
               <el-button
@@ -1720,6 +1726,90 @@
         </el-dialog>
       </div>
     </div>
+
+    <!--      打印明细-->
+    <el-dialog
+      :visible.sync="print_qkd"
+      width="70%"
+      :close-on-click-modal="false"
+      :modal="false">
+      <div id="print_qkd" class="print-div">
+        <div
+          class="print-title"
+          style="
+            display: flex;
+            justify-content: center;
+            font-size: 24px;
+            margin-bottom: 5px;
+          "
+        >
+          请款单
+        </div>
+        <div style="display: flex;justify-content: space-between;margin-bottom: 5px;">
+          <div>
+            <div>请款单号：{{ queryParams.fBillno }}</div>
+            <div>结算单位：{{ queryParams.fCorpid | corpFormat(fMblnoOptions) }}</div>
+          </div>
+          <div>
+            <div>请款日期：{{ queryParams.fAccbilldate }}</div>
+          </div>
+        </div>
+        <div class="print_table" style="display: flex">
+          <table
+            border="0"
+            cellspacing="0"
+            cellpadding="0"
+            style="width: 100%; line-height: 30px"
+          >
+            <tr>
+              <td>委托单位</td>
+              <td>M B/L NO</td>
+              <td>源业务编号</td>
+              <td>ETD/ETA</td>
+              <td>数量</td>
+              <td>价格</td>
+              <td>费用</td>
+              <td>人民币</td>
+              <td>美元</td>
+            </tr>
+            <tr v-for="(item,index) in DzfeeList">
+              <td></td>
+              <td>{{item.fMblno}}</td>
+              <td>{{item.srcBillNo}}</td>
+              <td>{{item.fBsdate}}</td>
+              <td>{{item.fQty}}</td>
+              <td>{{item.fAmt}}</td>
+              <td>{{item.fFeeName}}</td>
+              <td>{{item.fAmtdr}}</td>
+              <td></td>
+            </tr>
+            <tr>
+              <td colspan="7">合计</td>
+              <td>¥{{ allAmtdr }}</td>
+              <td></td>
+            </tr>
+          </table>
+        </div>
+        <div style="display: flex;justify-content: space-between;margin-top: 5px">
+          <div>领款人：</div>
+          <div>业务经理：</div>
+          <div>财务：</div>
+          <div style="margin-right: 20px">经理：</div>
+        </div>
+      </div>
+      <span lot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          size="mini"
+          @click="
+            print_qkd = false;
+            addprint('qkd');
+          "
+        >打印
+        </el-button>
+        <el-button @click="print_qkd = false" size="mini">取消 </el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -2557,6 +2647,8 @@ export default {
         timeExamine: [{ required: true, message: " ", trigger: "blur" }],
       },
       fStltypeOptions: [],
+      print_qkd: false,
+      allAmtdr: 0,
     };
   },
   components: {
@@ -2608,6 +2700,17 @@ export default {
       }
     }
   },
+  filters: {
+    corpFormat(row, fMblnoOptions) {
+      let name;
+      fMblnoOptions.map((e) => {
+        if (row == e.fId) {
+          name = e.fName;
+        }
+      });
+      return name;
+    },
+  },
   methods: {
     changeMoney() {
       if (
@@ -4849,6 +4952,33 @@ export default {
         this.doNot = true;
       }
     },
+    /** 打印准备 */
+    printHandle() {
+      console.log(this.DzfeeList)
+      for (let item in this.DzfeeList) {
+        if (!this.DzfeeList[item].fId) {
+          return this.$message.error("请先保存!");
+        }
+      }
+      this.allAmtdr = 0;
+      this.DzfeeList.forEach(e => {
+        this.allAmtdr += e.fAmtdr
+      })
+      this.print_qkd = true
+    },
+    addprint(status) {
+      const style =
+        "@page {  } " +
+        "@media print { .print-div{ padding:8px;background-color:#cccccc;} .print-title{display:flex;justify-content: center;font-size:24px} .print_form{font-size:12px} .print_table table {border-right: 1px solid #000;border-bottom: 1px solid #000;font-size:12px} .print_table table td {border-left: 1px solid #000;border-top: 1px solid #000;padding:2px;vertical-align:middle;text-align: center;}";
+      if (status == 'qkd') {
+        print({
+          printable: "print_qkd",
+          type: "html",
+          style: style, // 亦可使用引入的外部css;
+          scanStyles: false,
+        });
+      }
+    },
   },
 };
 </script>
@@ -4903,6 +5033,27 @@ export default {
 .el-icon-full-screen:before {
   content: "\e719";
 }
+
+.print_table {
+  table {
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
+    font-size: 12px;
+    margin-bottom: 5px;
+  }
+
+  table td {
+    border-left: 1px solid #000;
+    border-top: 1px solid #000;
+    vertical-align: middle;
+    padding: 2px;
+    text-align: center;
+  }
+}
+
+.print_form {
+  font-size: 12px;
+}
 </style>
 <style lang="scss">
 .el-dialog__body {