|  |  | 
 |  |  |     <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" /> | 
 |  |  |     <div class="df_sb mt20"> | 
 |  |  |       <div class="tabs"> | 
 |  |  |         <div class="tab" :class="{ active: activeTabs == 0 }" @click="tabsClick(0)">收款账单</div> | 
 |  |  |         <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">付款账单</div> | 
 |  |  |         <div class="tab" :class="{ active: billType === 0 }" @click="tabsClick(0)">收款账单</div> | 
 |  |  |         <div class="tab" :class="{ active: billType === 1 }" @click="tabsClick(1)">付款账单</div> | 
 |  |  |       </div> | 
 |  |  |       <div class="btns"> | 
 |  |  |         <el-button type="primary" @click="$refs.EditRef.open('创建收款账单')" icon="el-icon-plus" | 
 |  |  |         <el-button type="primary" @click="addOpen" icon="el-icon-plus" | 
 |  |  |           v-permissions="['business:ywpatrolline:create']">新建</el-button> | 
 |  |  |         <el-button @click="handleDetail" v-permissions="['business:ywpatrolline:create']">导出</el-button> | 
 |  |  | <!--        <el-button @click="handleDetail" v-permissions="['business:ywpatrolline:create']">导出</el-button>--> | 
 |  |  |       </div> | 
 |  |  |     </div> | 
 |  |  |     <el-table v-loading="loading" :data="list" stripe> | 
 |  |  |       <el-table-column prop="" label="客户名称" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="code" label="楼宇名称" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="name" label="房间号" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="stautsName" label="合同编号" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="remark" label="结清状态" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="账单金额" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="应收金额" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="实收金额" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="需收金额" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="费用类型" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="是否逾期" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="计费周期" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="应收日期" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="createTime" label="账单来源" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="statusName" label="合同状态" min-width="100" fixed="right" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="customerName" label="客户名称" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column label="房间" min-width="170" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <div style="display: flex; flex-direction: column;" v-if="row.roomPathName"> | 
 |  |  |             <span v-for="(item, index) in row.roomPathName.split(';')" :key="index">{{item}}</span> | 
 |  |  |           </div> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column prop="contractCode" label="合同编号" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column label="结清状态" min-width="100" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <span v-if="row.payStatus === 0">待收款</span> | 
 |  |  |           <span v-if="row.payStatus === 1">已结清</span> | 
 |  |  |           <span v-if="row.payStatus === 2">部分结清</span> | 
 |  |  |           <span v-if="row.payStatus === 3">待付款</span> | 
 |  |  |           <span v-if="row.payStatus === 4">待退款</span> | 
 |  |  |           <span v-if="row.payStatus === 5">已关闭</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column prop="totleFee" label="账单金额" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="receivableFee" :label="`应${billType === 0 ? '收' : '付'}金额`" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column prop="actReceivableFee" :label="`实${billType === 0 ? '收' : '付'}金额`" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column :label="`需收/付金额`" min-width="100" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           {{Math.abs(row.needReceivableFee)}} | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="费用类型" min-width="100" show-overflow-tooltip> | 
 |  |  |         <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 label="是否逾期" min-width="100" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <span v-if="row.isOverdue === 0">未逾期</span> | 
 |  |  |           <span v-if="row.isOverdue === 1" style="color: red;">已逾期</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="计费周期" min-width="200" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           {{ row.startDate }} ~ {{ row.endDate }} | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column prop="planPayDate" :label="`应${billType === 0 ? '收' : '付'}日期`" min-width="100" show-overflow-tooltip /> | 
 |  |  |       <el-table-column label="账单来源" min-width="100" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <span v-if="row.type === 0">合同账单</span> | 
 |  |  |           <span v-if="row.type === 1">自建账单</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="账单状态" min-width="100" fixed="right" show-overflow-tooltip> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <span v-if="row.status === 0">开启</span> | 
 |  |  |           <span v-if="row.status === 1" style="color: red;">关闭</span> | 
 |  |  |         </template> | 
 |  |  |       </el-table-column> | 
 |  |  |       <el-table-column label="操作" min-width="120" fixed="right"> | 
 |  |  |         <template slot-scope="{row}"> | 
 |  |  |           <el-button type="text" @click="handleDetail(row)" icon="el-icon-edit" v-permissions="['business:category:update']">查看详情</el-button> | 
 |  |  | 
 |  |  |     </div> | 
 |  |  |     <Edit ref="EditRef" @success="getList" /> | 
 |  |  |     <Detail ref="DetailRef" @success="getList" /> | 
 |  |  |     <BullEditFu ref="BullEditFu" @success="getList" /> | 
 |  |  |   </div> | 
 |  |  | </template> | 
 |  |  |  | 
 |  |  | 
 |  |  | import Pagination from '@/components/common/Pagination' | 
 |  |  | import QueryForm from '@/components/common/QueryForm' | 
 |  |  | import Edit from './components/bullEdit.vue' | 
 |  |  | import BullEditFu from './components/bullEditFu.vue' | 
 |  |  | import Detail from './components/bullDetail.vue' | 
 |  |  | import { fetchList } from '@/api/bill' | 
 |  |  | export default { | 
 |  |  | 
 |  |  |     Pagination, | 
 |  |  |     QueryForm, | 
 |  |  |     Edit, | 
 |  |  |     Detail | 
 |  |  |     Detail, | 
 |  |  |     BullEditFu | 
 |  |  |   }, | 
 |  |  |   data() { | 
 |  |  |   data () { | 
 |  |  |     return { | 
 |  |  |       loading: false, | 
 |  |  |       pagination: { | 
 |  |  | 
 |  |  |         page: 1, | 
 |  |  |         total: 0 | 
 |  |  |       }, | 
 |  |  |       activeTabs: 0, | 
 |  |  |       filters: {}, | 
 |  |  |       billType: 0, | 
 |  |  |       filters: { | 
 |  |  |         status: 0 | 
 |  |  |       }, | 
 |  |  |       list: [], | 
 |  |  |       total: 0, | 
 |  |  |       statusMap: [ | 
 |  |  |         { value: 0, label: '待收款' }, | 
 |  |  |         { value: 1, label: '已结算' }, | 
 |  |  |         { value: 2, label: '部分结清' }, | 
 |  |  |         { value: 3, label: '待退款' }, | 
 |  |  |         { value: 4, label: '待付款' }, | 
 |  |  |       ], | 
 |  |  |       queryFormConfig: { | 
 |  |  |         formItems: [ | 
 |  |  |           { | 
 |  |  |             filed: 'name', | 
 |  |  |             filed: 'customerName', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '客户名称', | 
 |  |  |             label: '客户名称' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'contractCode', | 
 |  |  |             type: 'input', | 
 |  |  |             label: '合同编号' | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'status', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '账单状态', | 
 |  |  |             options: [ | 
 |  |  |               { value: '0', label: '开启' }, | 
 |  |  |               { value: '1', label: '关闭' }, | 
 |  |  |               { value: 0, label: '开启' }, | 
 |  |  |               { value: 1, label: '关闭' } | 
 |  |  |             ] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'status', | 
 |  |  |             filed: 'payStatus', | 
 |  |  |             type: 'select', | 
 |  |  |             label: '结清状态', | 
 |  |  |             options: this.statusMap | 
 |  |  |             options: [ | 
 |  |  |               { value: 0, label: '待收款' }, | 
 |  |  |               { value: 1, label: '已结清' }, | 
 |  |  |               { value: 2, label: '部分结清' }, | 
 |  |  |               { value: 3, label: '待付款' }, | 
 |  |  |               { value: 4, label: '待退款' } | 
 |  |  |             ] | 
 |  |  |           }, | 
 |  |  |           { | 
 |  |  |             filed: 'selDate', | 
 |  |  |             type: 'daterange', | 
 |  |  |             label: '应收/付日期' | 
 |  |  |           }, | 
 |  |  |         ], | 
 |  |  |         online: true | 
 |  |  |           } | 
 |  |  |         ] | 
 |  |  |       } | 
 |  |  |     } | 
 |  |  |   }, | 
 |  |  |   created() { | 
 |  |  |   created () { | 
 |  |  |     this.getList() | 
 |  |  |   }, | 
 |  |  |   methods: { | 
 |  |  |     addOpen () { | 
 |  |  |       if (this.billType === 0) { | 
 |  |  |         this.$refs.EditRef.open('创建收款账单') | 
 |  |  |       } else { | 
 |  |  |         this.$refs.BullEditFu.open('创建付款账单') | 
 |  |  |       } | 
 |  |  |     }, | 
 |  |  |     getList (page) { | 
 |  |  |       const { pagination, filters } = this | 
 |  |  |       let form = JSON.parse(JSON.stringify(filters)) | 
 |  |  |       if (form && form.selDate && form.selDate.length > 0) { | 
 |  |  |         form.planPayDateStart = form.payDate[0] | 
 |  |  |         form.planPayDateEnd = form.payDate[1] | 
 |  |  |       } | 
 |  |  |       this.loading = true | 
 |  |  |       fetchList({ | 
 |  |  |         model: { | 
 |  |  |           ...filters | 
 |  |  |           ...filters, | 
 |  |  |           billType: this.billType | 
 |  |  |         }, | 
 |  |  |         capacity: pagination.pageSize, | 
 |  |  |         page: page || pagination.page | 
 |  |  |       }).then(res => { | 
 |  |  |         console.log(res) | 
 |  |  |         this.loading = false | 
 |  |  |         this.list = res.records || [] | 
 |  |  |         this.list.forEach(item => { | 
 |  |  | 
 |  |  |         this.loading = false | 
 |  |  |       }) | 
 |  |  |     }, | 
 |  |  |     tabsClick(val) { | 
 |  |  |       this.activeTabs = val | 
 |  |  |     tabsClick (val) { | 
 |  |  |       this.billType = val | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleDetail(row) { | 
 |  |  |       this.$refs.DetailRef.open() | 
 |  |  |     handleDetail (row) { | 
 |  |  |       this.$refs.DetailRef.open('账单详情', row.id) | 
 |  |  |     }, | 
 |  |  |     clear() { | 
 |  |  |     clear () { | 
 |  |  |       this.filters = {} | 
 |  |  |       this.pagination.pageSize = 10 | 
 |  |  |       this.pagination.page = 1 | 
 |  |  |       this.getList() | 
 |  |  |     }, | 
 |  |  |     handleSizeChange(capacity) { | 
 |  |  |     handleSizeChange (capacity) { | 
 |  |  |       this.pagination.pageSize = capacity | 
 |  |  |       this.getList() | 
 |  |  |     } | 
 |  |  | 
 |  |  | .tabs { | 
 |  |  |   display: flex; | 
 |  |  |   margin-bottom: 20px; | 
 |  |  |   display: flex; | 
 |  |  |   justify-content: center; | 
 |  |  |  | 
 |  |  |   .tab { |