<template>
|
<div>
|
<div class="toolbar-row">
|
<el-button type="primary" size="small" v-permissions="['business:ywcustomerrecharge:bindDevice']" @click="openSelector">去选择电表</el-button>
|
</div>
|
<el-table v-loading="loading" :data="list" stripe size="small">
|
<el-table-column prop="name" label="名称" min-width="120" align="center" show-overflow-tooltip/>
|
<el-table-column prop="address" label="表地址" min-width="130" align="center" show-overflow-tooltip/>
|
<el-table-column prop="accountId" label="开户号" min-width="100" align="center"/>
|
<el-table-column prop="roomNames" label="房间" min-width="120" align="center" show-overflow-tooltip/>
|
<el-table-column label="在线" min-width="80" align="center">
|
<template slot-scope="{ row }">
|
<span :class="row.online === 1 ? 'green' : 'red'">{{ row.online === 1 ? '在线' : '离线' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="继电器" min-width="80" align="center">
|
<template slot-scope="{ row }">{{ relayText(row.relayStatus) }}</template>
|
</el-table-column>
|
<el-table-column label="操作" min-width="80" align="center">
|
<template slot-scope="{ row }">
|
<el-button type="text" class="red" v-permissions="['business:ywcustomerrecharge:bindDevice']" @click="remove(row)">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination small @size-change="onSizeChange" @current-change="onPageChange" :pagination="pagination"/>
|
|
<GlobalWindow title="选择电表" :visible.sync="selectorVisible" width="780px" @confirm="confirmSelect">
|
<el-form inline @submit.native.prevent>
|
<el-form-item label="关键字">
|
<el-input v-model="selectorKeyword" placeholder="名称/地址" clearable @keypress.enter.native="searchSelectable"/>
|
</el-form-item>
|
<el-button type="primary" @click="searchSelectable">查询</el-button>
|
</el-form>
|
<el-table ref="selectTable" v-loading="selectorLoading" :data="selectorList" stripe size="small" @selection-change="onSelectionChange">
|
<el-table-column type="selection" width="45"/>
|
<el-table-column prop="name" label="名称" min-width="120" align="center"/>
|
<el-table-column prop="address" label="表地址" min-width="130" align="center"/>
|
<el-table-column prop="roomNames" label="房间" min-width="120" align="center" show-overflow-tooltip/>
|
<el-table-column label="在线" min-width="80" align="center">
|
<template slot-scope="{ row }">
|
<span :class="row.online === 1 ? 'green' : 'red'">{{ row.online === 1 ? '在线' : '离线' }}</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination small @current-change="onSelectorPageChange" :pagination="selectorPagination"/>
|
</GlobalWindow>
|
</div>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import * as api from '@/api/business/ywcustomerrecharge'
|
|
export default {
|
name: 'YwCustomerElectricalTab',
|
components: { GlobalWindow, Pagination },
|
props: {
|
customerId: Number,
|
active: Boolean
|
},
|
data () {
|
return {
|
loading: false,
|
list: [],
|
pagination: { pageIndex: 1, pageSize: 10, total: 0 },
|
selectorVisible: false,
|
selectorLoading: false,
|
selectorList: [],
|
selectorKeyword: '',
|
selectorPagination: { pageIndex: 1, pageSize: 10, total: 0 },
|
selectedRows: []
|
}
|
},
|
watch: {
|
active (val) {
|
if (val) this.loadList()
|
},
|
customerId () {
|
if (this.active) this.loadList()
|
}
|
},
|
mounted () {
|
if (this.active) this.loadList()
|
},
|
methods: {
|
relayText (v) {
|
if (v === '0' || v === 0) return '拉闸'
|
if (v === '1' || v === 1) return '合闸'
|
return v || '-'
|
},
|
loadList () {
|
if (!this.customerId) return
|
this.loading = true
|
api.electricalPage(this.customerId, {
|
page: this.pagination.pageIndex,
|
capacity: this.pagination.pageSize,
|
model: {}
|
}).then(data => {
|
this.list = data.records || []
|
this.pagination.total = data.total || 0
|
}).catch(e => this.$tip.apiFailed(e)).finally(() => { this.loading = false })
|
},
|
onPageChange (p) {
|
this.pagination.pageIndex = p
|
this.loadList()
|
},
|
onSizeChange (s) {
|
this.pagination.pageSize = s
|
this.pagination.pageIndex = 1
|
this.loadList()
|
},
|
remove (row) {
|
this.$dialog.actionConfirm('确认移除该电表关联吗？', '操作确认')
|
.then(() => api.deleteElectrical(this.customerId, row.id))
|
.then(() => {
|
this.$tip.success('已移除')
|
this.loadList()
|
this.$emit('success')
|
})
|
.catch(e => { if (e !== 'cancel') this.$tip.apiFailed(e) })
|
},
|
openSelector () {
|
this.selectorVisible = true
|
this.selectorKeyword = ''
|
this.selectedRows = []
|
this.selectorPagination.pageIndex = 1
|
this.loadSelectable()
|
},
|
loadSelectable () {
|
this.selectorLoading = true
|
api.selectableElectricalPage(this.customerId, {
|
page: this.selectorPagination.pageIndex,
|
capacity: this.selectorPagination.pageSize,
|
model: this.selectorKeyword ? { name: this.selectorKeyword } : {}
|
}).then(data => {
|
this.selectorList = data.records || []
|
this.selectorPagination.total = data.total || 0
|
}).catch(e => this.$tip.apiFailed(e)).finally(() => { this.selectorLoading = false })
|
},
|
searchSelectable () {
|
this.selectorPagination.pageIndex = 1
|
this.loadSelectable()
|
},
|
onSelectorPageChange (p) {
|
this.selectorPagination.pageIndex = p
|
this.loadSelectable()
|
},
|
onSelectionChange (rows) {
|
this.selectedRows = rows
|
},
|
confirmSelect () {
|
if (!this.selectedRows.length) {
|
this.$tip.warning('请选择电表')
|
return
|
}
|
api.saveElectrical({
|
customerId: this.customerId,
|
electricalIds: this.selectedRows.map(r => r.id)
|
}).then(() => {
|
this.$tip.success('保存成功')
|
this.selectorVisible = false
|
this.loadList()
|
this.$emit('success')
|
}).catch(e => this.$tip.apiFailed(e))
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.toolbar-row { margin-bottom: 12px; }
|
.green { color: #67c23a; }
|
.red { color: #f56c6c; }
|
</style>
|
