测试补打收据

wuxw
1 parent c036402c
Showing 4 changed files with 113 additions and 103 deletions
src/App.vue
src/components/fee/simplifyFeeReceipt.vue
src/views/fee/printPayFeeList.vue
src/views/fee/roomCreateFeeList.vue
@@ -553,4 +553,16 @@ h3 {
     font-size: 13px;
     color: #606266;
   }
+  
+.vc-table-border {
+    border: 1px solid #000000;
+}
+
+.vc-table-border tr td {
+    border: 1px solid #000000;
+}
+
+.vc-table-border tr th {
+    border: 1px solid #000000;
+}
 </style> 
 \ No newline at end of file
@@ -57,8 +57,8 @@
       </el-col>
     </el-row>
     <div class="margin-top">
-      <el-table :data="simplifyFeeReceiptInfo.feeReceipts" border stripe>
-        <el-table-column type="selection" width="55" align="center"></el-table-column>
+      <el-table :data="simplifyFeeReceiptInfo.feeReceipts" @selection-change="handleSelectionChange" border stripe>
+        <el-table-column type="selection" width="55" align="center" ></el-table-column>
         <el-table-column prop="receiptCode" :label="$t('simplifyFeeReceipt.receiptCode')"
           align="center"></el-table-column>
         <el-table-column :label="$t('simplifyFeeReceipt.feeType')" align="center">
@@ -353,6 +353,9 @@ export default {
     },
     dateFormat(date) {
       return dateFormat(date)
+    },
+    handleSelectionChange(val) {
+      this.simplifyFeeReceiptInfo.selectReceipts = val.map(item => item.receiptId)
     }
   }
 }
 <template>
   <div class="print-pay-fee-container">
-    <el-card class="box-card">
-      <div class="text-center">
-        <div style="color:#000;font-size:26px">{{ printPayFeeInfo.communityName }}
-          <span v-if="printPayFeeInfo.apply === 'Y'">{{ $t('printPayFee.apply') }}</span>
-          <span v-if="printPayFeeInfo.apply === 'N'">{{ $t('printPayFee.receipt') }}</span>
-          <span v-if="printPayFeeInfo.apply === 'R'">{{ $t('printPayFee.refund') }}</span>
-        </div>
+    <div class="text-center">
+      <div style="color:#000;font-size:26px">{{printPayFeeInfo.communityName}}
+        <span v-if="printPayFeeInfo.apply === 'Y'">{{ $t('printPayFee.apply') }}</span>
+        <span v-if="printPayFeeInfo.apply === 'N'">{{ $t('printPayFee.receipt') }}</span>
+        <span v-if="printPayFeeInfo.apply === 'R'">{{ $t('printPayFee.refund') }}</span>
       </div>
-      <div style="color:#000;font-size:18px;margin-left:20px">
-        <div class="float-left">
-          {{ $t('printPayFee.owner') }}：{{ printPayFeeInfo.payObjName }}
-        </div>
-        <div class="float-right text-right">
-          <span>{{ $t('printPayFee.receiptNum') }}{{ printPayFeeInfo.receiptNum }}</span>
-          <br />
-          <span>{{ $t('printPayFee.payTime') }}：{{ printPayFeeInfo.feeTime }}</span>
-        </div>
+    </div>
+    <div style="color:#000;font-size:18px;margin-left:20px">
+      <div class="float-left">
+        <span></span>
+        <br />
+        {{ $t('printPayFee.owner') }}：{{printPayFeeInfo.payObjName}}
       </div>
-      <el-table :data="printPayFeeInfo.fees" border style="width: 100%;color:#000;font-size:20px">
-        <el-table-column prop="index" :label="$t('printPayFee.serialNumber')" width="80" align="center">
-          <template slot-scope="scope">
-            {{ scope.$index + 1 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="feeName" :label="$t('printPayFee.feeItem')" align="center"></el-table-column>
-        <el-table-column prop="objName" :label="$t('printPayFee.houseCar')" align="center"></el-table-column>
-        <el-table-column :label="$t('printPayFee.feeRange')" align="center">
-          <template slot-scope="scope">
-            <div v-if="scope.row.preDegrees">
-              {{ dateFormat(scope.row.startTime) }}
+      <div class="float-right text-right">
+        <span>{{ $t('printPayFee.receiptNum') }}{{printPayFeeInfo.receiptNum}}</span>
+        <br />
+        <span>{{ $t('printPayFee.payTime') }}：{{printPayFeeInfo.feeTime}}</span>
+      </div>
+    </div>
+    
+    <table class="table vc-table-border" style="color:#000;font-size:18px;width:100%;border-collapse:collapse;">
+      <thead>
+        <tr>
+          <th class="text-center" width="80px">{{ $t('printPayFee.serialNumber') }}</th>
+          <th class="text-center">{{ $t('printPayFee.feeItem') }}</th>
+          <th class="text-center">{{ $t('printPayFee.houseCar') }}</th>
+          <th class="text-center">{{ $t('printPayFee.feeRange') }}</th>
+          <th class="text-center">{{ $t('printPayFee.unitPrice') }}</th>
+          <th class="text-center">{{ $t('printPayFee.areaUsage') }}</th>
+          <th class="text-center">{{ $t('printPayFee.paymentMethod') }}</th>
+          <th class="text-center">{{ $t('printPayFee.receivableActual') }}</th>
+          <th class="text-center">{{ $t('printPayFee.discountAmount') }}</th>
+          <th class="text-center">{{ $t('printPayFee.remark') }}</th>
+        </tr>
+      </thead>
+      <tbody style="color:#000;font-size:20px">
+        <tr v-for="(item,index) in printPayFeeInfo.fees" :key="index" class="vc-table-border">
+          <th scope="row" class="text-center">{{index +1}}</th>
+          <td class="text-center">{{item.feeName}}</td>
+          <td class="text-center">{{item.objName}}</td>
+          <td class="text-center">
+            <div v-if="item.preDegrees">
+              {{dateFormat(item.startTime)}}
               <span>{{ $t('printPayFee.to') }}</span>
-              {{ dateFormat(scope.row.endTime) }}<br />
-              {{ scope.row.preDegrees }} {{ $t('printPayFee.to') }} {{ scope.row.curDegrees }}
+              {{dateFormat(item.endTime)}}<br />
+              {{item.preDegrees}} {{ $t('printPayFee.to') }} {{item.curDegrees}}
             </div>
-            <div v-else-if="scope.row.feeTypeCd === '888800010006'">
+            <div v-else-if="item.feeTypeCd === '888800010006'">
               {{ $t('printPayFee.none') }}
             </div>
             <div v-else>
-              {{ dateFormat(scope.row.startTime) }}{{ $t('printPayFee.to') }}{{ dateFormat(scope.row.endTime) }}
+              {{dateFormat(item.startTime)}}{{$t('printPayFee.to')}}{{dateFormat(item.endTime)}}
             </div>
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('printPayFee.unitPrice')" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.squarePrice }}<br />{{ scope.row.units }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="area" :label="$t('printPayFee.areaUsage')" align="center"></el-table-column>
-        <el-table-column prop="primeRate" :label="$t('printPayFee.paymentMethod')" align="center"></el-table-column>
-        <el-table-column :label="$t('printPayFee.receivableActual')" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.receivableAmount }}/{{ scope.row.amount }}{{ $t('printPayFee.yuan') }}
-            <span v-if="scope.row.amount < 0">({{ $t('printPayFee.refund') }})</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="discountPrice" :label="$t('printPayFee.discountAmount')" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.discountPrice || 0 }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="remark" :label="$t('printPayFee.remark')" width="200" align="center"></el-table-column>
-      </el-table>
-
-      <el-row>
-        <el-col :span="3" class="text-center">{{ $t('printPayFee.capitalRMB') }}</el-col>
-        <el-col :span="2" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</el-col>
-        <el-col :span="1" class="text-center">{{ printPayFeeInfo.amount }}</el-col>
-        <el-col :span="2" class="text-center">{{ $t('printPayFee.accountDeduction') }}</el-col>
-        <el-col :span="2" class="text-center">{{ printPayFeeInfo.acctAmount }}</el-col>
-      </el-row>
+          </td>
+          <td class="text-center">{{item.squarePrice}}<br />{{item.units}}</td>
+          <td class="text-center">{{item.area}}</td>
+          <td class="text-center">{{item.primeRate}}</td>
+          <td class="text-center">
+            {{item.receivableAmount}}/{{item.amount}}{{$t('printPayFee.yuan')}}
+            <span v-if="item.amount < 0">({{ $t('printPayFee.refund') }})</span>
+          </td>
+          <td class="text-center">{{item.discountPrice || 0}}</td>
+          <td class="text-center" width="200px">{{item.remark}}</td>
+        </tr>
+        <tr>
+          <td colspan="3" class="text-center">{{ $t('printPayFee.capitalRMB') }}</td>
+          <td colspan="2" class="text-center">{{changeNumMoneyToChinese(printPayFeeInfo.amount)}}</td>
+          <td colspan="1" class="text-center">{{printPayFeeInfo.amount}}</td>
+          <td colspan="2" class="text-center">{{ $t('printPayFee.accountDeduction') }}</td>
+          <td colspan="2" class="text-center">{{printPayFeeInfo.acctAmount}}</td>
+        </tr>
+        <tr v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg">
+          <td colspan="6">
+            <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
+          </td>
+          <td colspan="4">
+            <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
+          </td>
+        </tr>
+      </tbody>
+    </table>
-      <el-row v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg">
-        <el-col :span="6">
-          <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
-        </el-col>
-        <el-col :span="4">
-          <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
-        </el-col>
-      </el-row>
+    <el-row style="color:#000;font-size:18px;margin-left: 10px;" class="flex justify-between">
+      <el-col :span="6">{{ $t('printPayFee.departmentHead') }}</el-col>
+      <el-col :span="6">{{ $t('printPayFee.operator') }}：{{userInfo.name}}</el-col>
+      <el-col :span="6">{{ $t('printPayFee.financeReceipt') }}</el-col>
+      <el-col :span="6">{{ $t('printPayFee.customerConfirm') }}</el-col>
+    </el-row>
-      <el-row style="color:#000;font-size:18px;margin-left: 10px;">
-        <el-col :span="6">
-          {{ $t('printPayFee.departmentHead') }}
-        </el-col>
-        <el-col :span="6">
-          {{ $t('printPayFee.operator') }}：{{ userInfo.name }}
-        </el-col>
-        <el-col :span="6">
-          {{ $t('printPayFee.financeReceipt') }}
-        </el-col>
-        <el-col :span="6">
-          {{ $t('printPayFee.customerConfirm') }}
-        </el-col>
-      </el-row>
-
-      <el-row id="print-btn">
-        <el-col :span="24">
-          <el-button type="primary" class="float-right" @click="handlePrint">
-            <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
-          </el-button>
-          <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
-            {{ $t('common.cancel') }}
-          </el-button>
-        </el-col>
-      </el-row>
-    </el-card>
+    <el-row id="print-btn">
+      <el-col :span="24">
+        <el-button type="primary" class="float-right" @click="handlePrint">
+          <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
+        </el-button>
+        <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
+          {{ $t('common.cancel') }}
+        </el-button>
+      </el-col>
+    </el-row>
   </div>
 </template>
 <script>
-import { getCommunityId } from '@/api/community/communityApi'
+import { getCommunityId, getCommunityName } from '@/api/community/communityApi'
 import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeApi'
-import { getUserId,getUserName } from '@/api/user/userApi'
+import { getUserId, getUserName } from '@/api/user/userApi'
 import { dateFormat } from '@/utils/dateUtil'
 export default {
@@ -155,9 +148,11 @@ export default {
       this.printPayFeeInfo.receiptId = this.$route.query.receiptId
       this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
       this.printPayFeeInfo.detailIds = this.$route.query.detailIds
-      this.printPayFeeInfo.apply = this.$route.query.apply
+      if(this.$route.query.apply){
+        this.printPayFeeInfo.apply = this.$route.query.apply
+      }
       this.printPayFeeInfo.merge = this.$route.query.merge
-      this.printPayFeeInfo.communityName = this.$route.query.communityName || ''
+      this.printPayFeeInfo.communityName =  getCommunityName()
       this.loadReceipt()
       this.loadPrintSpec()
@@ -74,7 +74,7 @@
               <simplify-callable v-if="roomCreateFeeInfo._currentTab === 'simplifyCallable'"
                 ref="simplifyCallable"></simplify-callable>
             </el-tab-pane>
-            <el-tab-pane v-if="hasPrivilege('502020092373407363')" label="补打收据" name="simplifyFeeReceipt">
+            <el-tab-pane label="补打收据" v-if="hasPrivilege('502020092373407363')" name="simplifyFeeReceipt" >
               <simplify-fee-receipt v-if="roomCreateFeeInfo._currentTab === 'simplifyFeeReceipt'"
                 ref="simplifyFeeReceipt"></simplify-fee-receipt>
             </el-tab-pane>