|  |  |  | 
|---|
|  |  |  | <div class="tab" :class="{ active: activeTabs == 1 }" @click="tabsClick(1)">付款账单</div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="btns"> | 
|---|
|  |  |  | <el-button type="primary" @click="handleEdit()" icon="el-icon-plus" | 
|---|
|  |  |  | <el-button type="primary" @click="$refs.EditRef.open('创建收款账单')" icon="el-icon-plus" | 
|---|
|  |  |  | v-permissions="['business:ywpatrolline:create']">新建</el-button> | 
|---|
|  |  |  | <el-button @click="handleEx" 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="" 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 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> | 
|---|
|  |  |  | <el-button type="text" @click="handleDetail(row)" icon="el-icon-edit" v-permissions="['business:category:update']">查看详情</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </el-table-column> | 
|---|
|  |  |  | </el-table> | 
|---|
|  |  |  | <div class="mt20"> | 
|---|
|  |  |  | <Pagination @size-change="handleSizeChange" @current-change="getList" :pagination="pagination" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <Edit v-if="showEdit" ref="EditRef" @success="getList" @close="showEdit = false" /> | 
|---|
|  |  |  | <Edit ref="EditRef" @success="getList" /> | 
|---|
|  |  |  | <Detail ref="DetailRef" @success="getList" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script> | 
|---|
|  |  |  | import Pagination from '@/components/common/Pagination' | 
|---|
|  |  |  | import QueryForm from '@/components/common/QueryForm' | 
|---|
|  |  |  | import Edit from './components/deviceEdit.vue' | 
|---|
|  |  |  | import { fetchList, deleteById } from '@/api/Inspection/device' | 
|---|
|  |  |  | import Edit from './components/bullEdit.vue' | 
|---|
|  |  |  | import Detail from './components/bullDetail.vue' | 
|---|
|  |  |  | import { fetchList } from '@/api/bill' | 
|---|
|  |  |  | export default { | 
|---|
|  |  |  | components: { | 
|---|
|  |  |  | Pagination, | 
|---|
|  |  |  | QueryForm, | 
|---|
|  |  |  | Edit | 
|---|
|  |  |  | Edit, | 
|---|
|  |  |  | Detail | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | data() { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | loading: false, | 
|---|
|  |  |  | showEdit: false, | 
|---|
|  |  |  | pagination: { | 
|---|
|  |  |  | pageSize: 10, | 
|---|
|  |  |  | page: 1, | 
|---|
|  |  |  | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | methods: { | 
|---|
|  |  |  | getList(page) { | 
|---|
|  |  |  | getList (page) { | 
|---|
|  |  |  | const { pagination, filters } = this | 
|---|
|  |  |  | this.loading = true | 
|---|
|  |  |  | fetchList({ | 
|---|
|  |  |  | model: { | 
|---|
|  |  |  | ...filters, | 
|---|
|  |  |  | ...filters | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | capacity: pagination.pageSize, | 
|---|
|  |  |  | page: page || pagination.page, | 
|---|
|  |  |  | page: page || pagination.page | 
|---|
|  |  |  | }).then(res => { | 
|---|
|  |  |  | console.log(res) | 
|---|
|  |  |  | this.loading = false | 
|---|
|  |  |  | this.list = res.records || [] | 
|---|
|  |  |  | this.list.forEach(item => { | 
|---|
|  |  |  | item.stautsName = item.status == 0 ? '正常' : item.status == 1 ? '损坏' : '报废' | 
|---|
|  |  |  | item.statusName = item.status === 1 ? '损坏' : item.status === 2 ? '报废' : '正常' | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | this.pagination.total = res.total || 0 | 
|---|
|  |  |  | }, () => { | 
|---|
|  |  |  | this.loading = false | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleEx() { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | tabsClick(val) { | 
|---|
|  |  |  | this.activeTabs = val | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleEdit(row) { | 
|---|
|  |  |  | this.showEdit = true | 
|---|
|  |  |  | this.$nextTick(() => { | 
|---|
|  |  |  | this.$refs.EditRef.isShowModal = true | 
|---|
|  |  |  | if (row && row.id) { | 
|---|
|  |  |  | this.$refs.EditRef.getDetail(row.id) | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }) | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleDetail() { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleDel(row) { | 
|---|
|  |  |  | let message = `确认删除该记录吗?` | 
|---|
|  |  |  | this.$dialog.deleteConfirm(message) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.isWorking.delete = true | 
|---|
|  |  |  | deleteById(row.id) | 
|---|
|  |  |  | .then(() => { | 
|---|
|  |  |  | this.$tip.apiSuccess('删除成功') | 
|---|
|  |  |  | this.getList() | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | .catch(() => { }) | 
|---|
|  |  |  | handleDetail(row) { | 
|---|
|  |  |  | this.$refs.DetailRef.open() | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | clear() { | 
|---|
|  |  |  | this.filters = {} | 
|---|
|  |  |  | 
|---|
|  |  |  | @import '@/assets/style/variables.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tabs { | 
|---|
|  |  |  | border-bottom: 1px solid #DFE2E8; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | display: flex; | 
|---|