收款单、其他应收单 打印

src/views/finance/receipt_list.vue

@@ -15,9 +15,9 @@
                   <el-form-item label="单据类型" prop="billType">
                     <!-- <el-input v-model="searchForm.billType" placeholder="请输入"></el-input> -->
                     <el-select v-model="searchForm.billType" class="selectStyle" placeholder="请选择" filterable>
-                      <el-option label="收款单" value="1"> </el-option>
-                      <el-option label="付款单" value="3"> </el-option>
-                      <el-option label="退款单" value="2"> </el-option>
+                      <el-option label="收款单" value="1"></el-option>
+                      <el-option label="付款单" value="3"></el-option>
+                      <el-option label="退款单" value="2"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -36,7 +36,7 @@
                       filterable
                       clearable
                     >
-                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"> </el-option>
+                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -50,7 +50,7 @@
                       filterable
                       clearable
                     >
-                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"> </el-option>
+                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -100,7 +100,7 @@
                       filterable
                       clearable
                     >
-                      <el-option v-for="(v, i) in orage" :key="i" :label="v.label" :value="v.value"> </el-option>
+                      <el-option v-for="(v, i) in orage" :key="i" :label="v.label" :value="v.value"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -112,14 +112,14 @@
       <!-- 按钮 -->
       <div class="btn-group clearfix">
         <div class="fl">
-          <!-- <el-button
+          <el-button
             type="primary"
             size="mini"
             v-if="$checkBtnRole('print', $route.meta.roles)"
             @click="toPrint"
             :disabled="tableSelection.length < 1"
             >打印发货单
-          </el-button> -->
+          </el-button>
         </div>
         <div class="fr">
           <!-- <ExportButton :exUrl="'k3/receipt/export'" :exParams="exParams" class="exportClass" /> -->
@@ -150,10 +150,10 @@
                   scope.row.billType == 1
                     ? '收款单'
                     : scope.row.billType == 2
-                    ? '退款单'
-                    : scope.row.billType == 3
-                    ? '付款单'
-                    : ''
+                      ? '退款单'
+                      : scope.row.billType == 3
+                        ? '付款单'
+                        : ''
                 }}
               </template>
             </el-table-column>
@@ -242,16 +242,18 @@
                   class="textColor"
                   v-if="$checkBtnRole('examine', $route.meta.roles) && scope.row.status == 'C'"
                   @click="NoExamineFn(scope.row.id)"
-                  >弃审</el-button
+                >弃审
+                </el-button
                 >
                 <el-button type="text" class="textColor" @click="seeFn(scope.row.id)">查看</el-button>
-                <!-- <el-button
+                <el-button
                   type="text"
                   class="textColor"
                   v-if="$checkBtnRole('print', $route.meta.roles)"
                   @click="toPrint(scope.row, 2)"
-                  >打印</el-button
-                > -->
+                >打印
+                </el-button
+                >
               </template>
             </el-table-column>
           </el-table>
@@ -280,6 +282,7 @@
 
 <script>
 import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
+
 disAutoConnect()
 import printPreview from './components/design/preview.vue'
 import { getCompanyList } from '@/api/user'
@@ -289,6 +292,7 @@ import ReceiptListDetail from './components/receipt_list-detail'
 import ReceiptPrint from '@/views/finance/components/receipt_print.vue'
 import { changeNumberMoneyToChinese, dateFormat } from '@/utils/util'
 import { numToFixed } from '@/filters'
+
 export default {
   components: {
     ReceiptPrint,
@@ -345,7 +349,8 @@ export default {
     this.getCustomerDataList()
     this.getCompanyList()
   },
-  mounted() {},
+  mounted() {
+  },
   methods: {
     //获取经销商列表
     async getCustomerDataList() {

src/views/finance/receivable_list.vue

@@ -22,10 +22,10 @@
                 <el-col :xs="24" :sm="12" :lg="6">
                   <el-form-item label="单据来源" prop="source">
                     <el-select v-model="searchForm.source" class="selectStyle" placeholder="请选择" filterable>
-                      <el-option value="工程押金"> </el-option>
-                      <el-option value="保证金"> </el-option>
-                      <el-option value="工程价差"> </el-option>
-                      <el-option value="仓储费"> </el-option>
+                      <el-option value="工程押金"></el-option>
+                      <el-option value="保证金"></el-option>
+                      <el-option value="工程价差"></el-option>
+                      <el-option value="仓储费"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -38,7 +38,7 @@
                   <el-form-item label="往来单位" prop="userName">
                     <!-- <el-input v-model="searchForm.userName" placeholder="请输入"></el-input> -->
                     <el-select class="selectStyle" v-model="searchForm.userName" placeholder="请选择" filterable>
-                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"> </el-option>
+                      <el-option v-for="(v, i) in customerList" :key="i" :label="v.name" :value="v.name"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
@@ -82,12 +82,21 @@
       <div class="btn-group clearfix">
         <div class="fl">
           <el-button
+            type="primary"
+            size="mini"
+            v-if="$checkBtnRole('print', $route.meta.roles)"
+            @click="toPrint"
+            :disabled="tableSelection.length < 1"
+          >打印发货单
+          </el-button>
+          <el-button
             v-if="$checkBtnRole('add', $route.meta.roles)"
             type="primary"
             icon="el-icon-plus"
             size="mini"
             @click="addFn"
-            >新建</el-button
+          >新建
+          </el-button
           >
 
           <el-popconfirm
@@ -97,7 +106,8 @@
             title="这是一段内容确定删除吗？"
           >
             <el-button :disabled="deleList.length < 1" slot="reference" type="danger" icon="el-icon-minus" size="mini"
-              >批量删除</el-button
+            >批量删除
+            </el-button
             >
           </el-popconfirm>
         </div>
@@ -109,6 +119,7 @@
       <div class="mymain-container">
         <div class="table">
           <el-table
+            ref="table"
             v-loading="listLoading"
             :data="dataList"
             element-loading-text="Loading"
@@ -119,8 +130,10 @@
             @selection-change="selectionChangeFn"
             show-summary
             :summary-method="$getSummaries"
+            @select="handleSelectAll"
+            @select-all="handleSelectAll"
           >
-            <el-table-column align="center" type="selection" width="51"> </el-table-column>
+            <el-table-column align="center" type="selection" width="51"></el-table-column>
             <el-table-column
               align="left"
               label="单据类型"
@@ -206,25 +219,37 @@
             <el-table-column align="center" label="操作" min-width="160" show-overflow-tooltip fixed="right">
               <template slot-scope="scope">
                 <el-button
+                  type="text"
+                  class="textColor"
+                  v-if="$checkBtnRole('print', $route.meta.roles)"
+                  @click="toPrint(scope.row, 2)"
+                >打印
+                </el-button
+                >
+                <el-button
                   v-if="
                     (scope.row.examineStatus == 'WAIT' || scope.row.examineStatus == 'FAIL') &&
                     $checkBtnRole('examine', $route.meta.roles)
                   "
                   type="text"
                   @click="approvalFn(scope.row.id)"
-                  >审批</el-button
+                >审批
+                </el-button
                 >
                 <el-button type="text" v-if="scope.row.examineStatus == 'SAVE'" @click="bringFn(scope.row.id)"
-                  >提审</el-button
+                >提审
+                </el-button
                 >
                 <el-button
                   type="text"
                   v-if="scope.row.examineStatus == 'OK' || scope.row.examineStatus == 'FAIL'"
                   @click="unApprovalFn(scope.row.id)"
-                  >弃审</el-button
+                >弃审
+                </el-button
                 >
                 <el-button type="text" v-if="scope.row.examineStatus == 'SAVE'" @click="detailFn(scope.row.id, 'edit')"
-                  >编辑</el-button
+                >编辑
+                </el-button
                 >
                 <el-button type="text" @click="detailFn(scope.row.id, 'detail')">详情</el-button>
               </template>
@@ -249,25 +274,38 @@
     <ReceivableListAdd @updateList="updateList" v-else-if="showPage == 2" />
     <ReceivableListApproval :approvalId="approvalId" @updateList="updateList" v-else-if="showPage == 3" />
     <ReceivableListDetail :approvalId="approvalId" :czType="czType" v-else-if="showPage == 4" />
+    <print-preview ref="preView" />
   </div>
 </template>
 
 <script>
+
 import { getCustomerList } from '@/api/finance/wallet'
 import {
   getFinanceOtherReceList,
   getFinanceOtherReceDelete,
+  getFinanceOtherReceDetail,
   getFinanceOtherReceApply,
   getFinanceOtherReceAbandon
 } from '@/api/finance/receivable_list'
 import ReceivableListAdd from './components/receivable_list-add'
 import ReceivableListApproval from './components/receivable_list-approval'
 import ReceivableListDetail from './components/receivable_list-detail'
+import { disAutoConnect, hiprint } from 'vue-plugin-hiprint'
+
+disAutoConnect()
+import printPreview from './components/design/preview.vue'
+
+import { getCompanyList } from '@/api/user'
+import { numToFixed } from '@/filters'
+import { changeNumberMoneyToChinese } from '@/utils/util'
+
 export default {
   components: {
     ReceivableListAdd,
     ReceivableListApproval,
-    ReceivableListDetail
+    ReceivableListDetail,
+    printPreview
   },
   data() {
     return {
@@ -290,7 +328,10 @@ export default {
       approvalId: null,
       czType: '',
       isCollapse: true,
-      deleList: []
+      deleList: [],
+      hiprintTemplate: '',
+      company: '',
+      tableSelection: []
     }
   },
   computed: {
@@ -309,6 +350,7 @@ export default {
   created() {
     this.getDataList({ pageSize: this.pageSize, pageNum: this.currentPage })
     this.getCustomerDataList()
+    this.getCompanyList()
   },
   methods: {
     //获取经销商列表
@@ -339,6 +381,9 @@ export default {
         examineStatus: this.examine
       })
     },
+    handleSelectAll(selection) {
+      this.tableSelection = this.$refs.table.selection
+    },
     //radio切换'
     changeRadioGroupFn(v) {
       this.getDataList({
@@ -424,6 +469,135 @@ export default {
     //新建
     addFn() {
       this.showPage = 2
+    },
+    // 点击打印
+    async toPrint(row, type) {
+      // 初始化模板，否则生成的模板叠加
+      hiprint.init()
+      this.hiprintTemplate = new hiprint.PrintTemplate()
+      // 兼容批量打印
+      let params = !type ? this.tableSelection : [row.id]
+      let len = params.length
+      let loadingLen = len
+      // 使用 i-- 提升for效率
+      this.$startLoading()
+      for (let i = len; i > 0; i--) {
+        try {
+          const { data } = await getFinanceOtherReceDetail({
+            id: params[i - 1].id || params[i - 1]
+          })
+          // 模板基础配置
+          this.panel = this.hiprintTemplate.addPrintPanel({
+            height: 140,
+            width: 241,
+            fontFamily: '黑体',
+            fontSize: 13,
+            paperFooter: 340,
+            paperHeader: 10,
+            paperNumberDisabled: true
+          })
+
+          // 获取收款单模板和基础配置
+          this.panel.addPrintHtml({
+            options: {
+              width: 633,
+              top: 30,
+              left: 20,
+              fontFamily: '黑体',
+              fontSize: 13,
+              content: this.setTableDom(data)
+            }
+          })
+
+          loadingLen--
+        } catch (error) {
+          console.log(999)
+          this.$endLoading()
+          return
+        }
+      }
+      if (loadingLen === 0) {
+        this.$endLoading()
+      }
+      console.log(333)
+      // 预览打印内容
+      this.$refs.preView.show(this.hiprintTemplate, this.panel)
+    },
+    getCompanyList() {
+      getCompanyList().then(res => {
+        this.company = res.data ? res.data[0].companyName : ''
+      })
+    },
+    // 收款单打印模板
+    setTableDom(data) {
+      console.log(this.company, this.nowDate())
+      return `
+       <div style="font-family:'黑体';">
+          <h1 style="text-align:center">${this.company}其他收款单</h1>
+          <div >
+            <table border=".5" cellspacing="0" width="856" height="250"
+             style="border-color: rgb(0,0,0);
+              border-collapse: collapse;
+              border-style: none;
+              border: 1px solid rgb(0,0,0);
+              font-weight: normal;
+              direction: ltr;
+              padding-bottom: 0pt;
+              padding-left: 4pt;
+              padding-right: 4pt;
+              padding-top: 0pt;
+              text-decoration: none;
+              vertical-align: middle;
+              box-sizing: border-box;
+              word-wrap: break-word;
+              word-break: break-all;">
+                <tr>
+                  <td>单据编号</td>
+                  <td>${data.code}</td>
+                  <td>业务日期</td>
+                  <td>${data.createTime}</td>
+                  <td>打印日期</td>
+                <td>${this.nowDate()}</td>
+                </tr>
+                <tr>
+                  <td>付款单位</td>
+                  <td colspan="5">${data.items[0].customerName}</td>
+                </tr>
+                <tr>
+                  <td>钱包</td>
+                  <td>${data.items[0].customerWalletName}</td>
+                  <td>实收金额</td>
+                  <td style="text-align:right">${numToFixed(data.totalAmount)}</td>
+                  <td colspan="2">${changeNumberMoneyToChinese(data.totalAmount)}</td>
+                </tr>
+                <tr>
+                  <td>备注</td>
+                  <td colspan="5">${data.remark}</td>
+                </tr>
+            </table>
+          </div>
+          <div style="margin:100px 0 0 0">
+            <div>打印</div>
+          </div>
+       </div>
+      `
+    },
+    // 获取当前时间
+    nowDate() {
+      var date = new Date()
+      var seperator1 = '-'
+      var year = date.getFullYear()
+      var month = date.getMonth() + 1
+      var strDate = date.getDate()
+      if (month >= 1 && month <= 9) {
+        month = '0' + month
+      }
+      if (strDate >= 0 && strDate <= 9) {
+        strDate = '0' + strDate
+      }
+      var currentdate = year + seperator1 + month + seperator1 + strDate
+      console.log(currentdate)
+      return currentdate
     }
   }
 }
@@ -432,9 +606,11 @@ export default {
 .selectStyle {
   width: 100%;
 }
+
 .dateStyle {
   width: 100%;
 }
+
 .delClass {
   margin-left: 10px;
 }