| <template> | 
|   <div class="main_app"> | 
|     <QueryForm v-model="filters" :query-form-config="queryFormConfig" @handleQuery="getList(1)" @clear="clear" /> | 
|     <div class="mt20"> | 
| <!--      <el-button v-permissions="['business:ywpatrolline:create']">导出</el-button>--> | 
|     </div> | 
|     <el-table v-loading="loading" :data="list" stripe> | 
|       <el-table-column prop="customerName" label="客户名称" min-width="100" show-overflow-tooltip /> | 
|       <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}"> | 
|           <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="billCode" 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.revenueType === 0">收入</span> | 
|           <span v-if="row.revenueType === 1">支出</span> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="actReceivableFee" 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.payType === 0">现金</span> | 
|           <span v-if="row.payType === 1">网银转账</span> | 
|           <span v-if="row.payType === 2">POS机</span> | 
|           <span v-if="row.payType === 3">支付宝</span> | 
|           <span v-if="row.payType === 4">微信</span> | 
|           <span v-if="row.payType === 5">转账支票</span> | 
|           <span v-if="row.payType === 6">其他</span> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column prop="actPayDate" label="入账日期" show-overflow-tooltip /> | 
|       <el-table-column prop="createDate" label="创建日期" show-overflow-tooltip /> | 
|       <el-table-column prop="realname" label="创建人" show-overflow-tooltip /> | 
|       <el-table-column label="状态" min-width="100" fixed="right" show-overflow-tooltip> | 
|         <template slot-scope="{row}"> | 
|           <el-tag type="success" v-if="row.status === 0">开启</el-tag> | 
|           <el-tag type="info" v-if="row.status === 1">关闭</el-tag> | 
|         </template> | 
|       </el-table-column> | 
|       <el-table-column label="操作" min-width="190" fixed="right"> | 
|         <template slot-scope="{row}"> | 
|           <el-button type="text" @click="$refs.details.open('收支流水详情', row.id)">查看详情</el-button> | 
|           <el-button type="text" @click="closeDW(row.id)" v-if="row.status !== 1">关闭流水</el-button> | 
|         </template> | 
|       </el-table-column> | 
|     </el-table> | 
|     <div class="mt20"> | 
|       <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> | 
|     </div> | 
|     <!--  详情  --> | 
|     <Details ref="details" /> | 
|   </div> | 
| </template> | 
|   | 
| <script> | 
| import Pagination from '@/components/common/Pagination' | 
| import QueryForm from '@/components/common/QueryForm' | 
| import Details from './components/details' | 
| import { fetchList, close } from '@/api/ywContractRevenue' | 
| export default { | 
|   components: { | 
|     Pagination, | 
|     QueryForm, | 
|     Details | 
|   }, | 
|   data() { | 
|     return { | 
|       loading: false, | 
|       pagination: { | 
|         pageSize: 10, | 
|         page: 1, | 
|         total: 0 | 
|       }, | 
|       filters: {}, | 
|       list: [], | 
|       total: 0, | 
|       queryFormConfig: { | 
|         formItems: [ | 
|           { | 
|             filed: 'customerName', | 
|             type: 'input', | 
|             label: '客户名称' | 
|           }, | 
|           { | 
|             filed: 'revenueType', | 
|             type: 'select', | 
|             label: '收支类型', | 
|             options: [ | 
|               { value: 0, label: '收入' }, | 
|               { value: 1, label: '支出' } | 
|             ] | 
|           }, | 
|           { | 
|             filed: 'payType', | 
|             type: 'select', | 
|             label: '收款方式', | 
|             options: [ | 
|               { value: 0, label: '现金' }, | 
|               { value: 1, label: '网银转账' }, | 
|               { value: 2, label: 'POS机' }, | 
|               { value: 3, label: '支付宝' }, | 
|               { value: 4, label: '微信' }, | 
|               { value: 5, label: '转账支票' }, | 
|               { value: 6, label: '其他' } | 
|             ] | 
|           }, | 
|           { | 
|             filed: 'payDate', | 
|             type: 'daterange', | 
|             label: '入账日期' | 
|           }, | 
|         ], | 
|         online: true | 
|       } | 
|     } | 
|   }, | 
|   created() { | 
|     this.getList() | 
|   }, | 
|   methods: { | 
|     getList(page) { | 
|       const { pagination, filters } = this | 
|       let form = JSON.parse(JSON.stringify(filters)) | 
|       if (form && form.payDate && form.payDate.length > 0) { | 
|         form.payDateStart = form.payDate[0] | 
|         form.payDateEnd = form.payDate[1] | 
|       } | 
|       this.loading = true | 
|       fetchList({ | 
|         model: { | 
|           ...form | 
|         }, | 
|         capacity: pagination.pageSize, | 
|         page: page || pagination.page, | 
|       }).then(res => { | 
|         this.loading = false | 
|         this.list = res.records || [] | 
|         this.pagination.total = res.total || 0 | 
|       }, () => { | 
|         this.loading = false | 
|       }) | 
|     }, | 
|     closeDW (id) { | 
|       this.$confirm('确认关闭此流水吗?', '提示', { | 
|         confirmButtonText: '确定', | 
|         cancelButtonText: '取消', | 
|         type: 'warning' | 
|       }).then(() => { | 
|         close(id) | 
|           .then(res => { | 
|             this.getList() | 
|           }) | 
|       }).catch(() => { | 
|        | 
|       }); | 
|     }, | 
|     handleDel(row) { | 
|       let message = `确认删除该记录吗?` | 
|       this.$dialog.deleteConfirm(message) | 
|         .then(() => { | 
|           this.isWorking.delete = true | 
|           deleteById(row.id) | 
|             .then(() => { | 
|               this.$tip.apiSuccess('删除成功') | 
|               this.getList() | 
|             }) | 
|         }) | 
|         .catch(() => { }) | 
|     }, | 
|     clear() { | 
|       this.filters = {} | 
|       this.pagination.pageSize = 10 | 
|       this.pagination.page = 1 | 
|       this.getList() | 
|     }, | 
|     handleSizeChange(capacity) { | 
|       this.pagination.pageSize = capacity | 
|     } | 
|   } | 
| } | 
| </script> | 
|   | 
| <style></style> |