|  |  | 
 |  |  |                     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 | 
 |  |  |                         label="费用类型"> | 
 |  |  | 
 |  |  |                         label="实收/付金额"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                     <el-table-column | 
 |  |  |                         prop="needReceivableFee" | 
 |  |  |                         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="receivableFee" | 
 |  |  |                         prop="planPayDate" | 
 |  |  |                         label="应收/付日期"> | 
 |  |  |                     </el-table-column> | 
 |  |  |                 </el-table> | 
 |  |  |             </div> | 
 |  |  |         </div> | 
 |  |  |         <!--    账单详情    --> | 
 |  |  |         <Detail ref="DetailRef" /> | 
 |  |  |     </GlobalWindow> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  |   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 () { | 
 |  |  | 
 |  |  |               this.info = res | 
 |  |  |               this.visible = true | 
 |  |  |             }) | 
 |  |  |       }, | 
 |  |  |       handleDetail (id) { | 
 |  |  |         this.$refs.DetailRef.open('账单详情', id) | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   } |