|  |  | 
 |  |  |             <div class="zd_list"> | 
 |  |  |                 <div class="zd_list_row"> | 
 |  |  |                     <span>待收款账单数</span> | 
 |  |  |                     <span>2</span> | 
 |  |  |                     <span>{{info.inAmount || 0}}</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="zd_list_row"> | 
 |  |  |                     <span>待收款金额</span> | 
 |  |  |                     <span>¥247.00</span> | 
 |  |  |                     <span>¥{{info.inFee || 0}}</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="zd_list_row"> | 
 |  |  |                     <span>待付款账单数</span> | 
 |  |  |                     <span>3</span> | 
 |  |  |                     <span>{{info.payAmount || 0}}</span> | 
 |  |  |                 </div> | 
 |  |  |                 <div class="zd_list_row"> | 
 |  |  |                     <span>待付款金额</span> | 
 |  |  |                     <span>¥247.00</span> | 
 |  |  |                     <span>¥{{info.payFee || 0}}</span> | 
 |  |  |                 </div> | 
 |  |  |             </div> | 
 |  |  |             <div class="zd_content"> | 
 |  |  | 
 |  |  |                     <span>账单</span> | 
 |  |  |                 </div> | 
 |  |  |                 <el-table | 
 |  |  |                     :data="tableData" | 
 |  |  |                     :data="info.ywContractBillList" | 
 |  |  |                     border | 
 |  |  |                     style="width: 100%"> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="date" | 
 |  |  |                         label="账单编号"> | 
 |  |  |                         <template slot-scope="{row}"> | 
 |  |  |                             <el-button type="text" @click="handleDetail(row.id)">{{row.code}}</el-button> | 
 |  |  |                         </template> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="name" | 
 |  |  |                         label="费用类型"> | 
 |  |  |                         <template slot-scope="{row}"> | 
 |  |  |                             <span v-if="row.costType === 0">租赁费</span> | 
 |  |  |                             <span v-if="row.costType === 1">物业费</span> | 
 |  |  |                             <span v-if="row.costType === 2">租赁押金</span> | 
 |  |  |                             <span v-if="row.costType === 3">物业押金</span> | 
 |  |  |                             <span v-if="row.costType === 4">水电费</span> | 
 |  |  |                             <span v-if="row.costType === 5">杂项费</span> | 
 |  |  |                             <span v-if="row.costType === 6">其他</span> | 
 |  |  |                             <span v-if="row.costType === 7">保证金</span> | 
 |  |  |                         </template> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="address" | 
 |  |  |                         label="计费周期"> | 
 |  |  |                         <template slot-scope="{row}"> | 
 |  |  |                             {{row.startDate}}~{{row.endDate}} | 
 |  |  |                         </template> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="address" | 
 |  |  |                         prop="receivableFee" | 
 |  |  |                         label="应收付金额/原始应收付"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="address" | 
 |  |  |                         prop="actReceivableFee" | 
 |  |  |                         label="实收/付金额"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="address" | 
 |  |  |                         label="需收/付金额"> | 
 |  |  |                         <template slot-scope="{row}"> | 
 |  |  |                             <div style="display: flex; align-items: center;"> | 
 |  |  |                                 <el-tag type="success" v-if="row.needReceivableFee > 0">收</el-tag> | 
 |  |  |                                 <el-tag type="warning" v-if="row.needReceivableFee < 0">付</el-tag> | 
 |  |  |                                 <span>{{Math.abs(row.needReceivableFee)}}</span> | 
 |  |  |                             </div> | 
 |  |  |                         </template> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="address" | 
 |  |  |                         prop="planPayDate" | 
 |  |  |                         label="应收/付日期"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                 </el-table> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!--    账单详情    --> | 
 |  |  |         <Detail ref="DetailRef" /> | 
 |  |  |     </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | <script> | 
 |  |  |   import GlobalWindow from '@/components/common/GlobalWindow' | 
 |  |  |   import BaseOpera from '@/components/base/BaseOpera' | 
 |  |  |   import { getWaitDealList } from '@/api/ywContractBill' | 
 |  |  |   import Detail from '../../finance/components/bullDetail.vue' | 
 |  |  |   export default { | 
 |  |  |     name: 'pendingBills', | 
 |  |  |     components: { | 
 |  |  |       GlobalWindow | 
 |  |  |       GlobalWindow, | 
 |  |  |       Detail | 
 |  |  |     }, | 
 |  |  |     extends: BaseOpera, | 
 |  |  |     data () { | 
 |  |  |       return { | 
 |  |  |         tableData: [] | 
 |  |  |         info: [] | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     methods: { | 
 |  |  |      | 
 |  |  |       open (title, contractId) { | 
 |  |  |         this.title = title | 
 |  |  |         getWaitDealList(contractId) | 
 |  |  |             .then(res => { | 
 |  |  |               this.info = res | 
 |  |  |               this.visible = true | 
 |  |  |             }) | 
 |  |  |       }, | 
 |  |  |       handleDetail (id) { | 
 |  |  |         this.$refs.DetailRef.open('账单详情', id) | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } | 
 |  |  | </script> |