<template>
|
<div v-loading="loading">
|
<el-form label-width="120px" size="small">
|
<el-form-item label="选择电表">
|
<el-select v-model="electricalId" placeholder="请选择电表" filterable style="width: 360px" @change="loadRemoteInfo">
|
<el-option v-for="item in electricalList" :key="item.id" :label="item.name + ' (' + item.address + ')'" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<account-recharge-panel
|
v-if="electricalId"
|
:info="info"
|
:latest="latest"
|
:form="form"
|
:is-operating="isOperating"
|
:purchase-count="purchaseCount"
|
mode="recharge"
|
@read="readMeter"
|
@confirm="confirmRecharge"
|
/>
|
<!-- <div v-if="electricalId" class="extra-btns">
|
<el-button type="warning" plain :loading="isOperating" v-permissions="['business:ywcustomerrecharge:recharge']" @click="resetAccount('resetPrepay')">清零(预付费)</el-button>
|
<el-button type="warning" plain :loading="isOperating" v-permissions="['business:ywcustomerrecharge:recharge']" @click="resetAccount('resetPostpay')">清零(后付费)</el-button>
|
</div>
|
-->
|
<div v-if="!electricalList.length && !loading" class="empty-tip">该商户尚未关联电表，请先在关联设备中添加</div>
|
</div>
|
</template>
|
|
<script>
|
import AccountRechargePanel from './AccountRechargePanel'
|
import * as api from '@/api/business/ywcustomerrecharge'
|
|
export default {
|
name: 'YwCustomerElectricalRechargePanel',
|
components: { AccountRechargePanel },
|
props: {
|
customer: { type: Object, default: () => ({}) }
|
},
|
data () {
|
return {
|
loading: false,
|
electricalList: [],
|
electricalId: null,
|
info: {},
|
latest: null,
|
purchaseCount: '0',
|
form: { money: 0, remark: '' },
|
isOperating: false
|
}
|
},
|
mounted () {
|
this.loadElectricalList()
|
},
|
methods: {
|
loadElectricalList () {
|
this.loading = true
|
api.electricalPage(this.customer.id, { page: 1, capacity: 500, model: {} })
|
.then(data => {
|
this.electricalList = data.records || []
|
if (this.electricalList.length) {
|
this.electricalId = this.electricalList[0].id
|
this.loadRemoteInfo()
|
}
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.loading = false })
|
},
|
loadRemoteInfo () {
|
if (!this.electricalId) return
|
api.getElectricalRemoteInfo(this.electricalId).then(res => {
|
this.info = res.electrical || {}
|
this.latest = res.latestData
|
this.purchaseCount = res.purchaseCount || '0'
|
}).catch(e => this.$tip.apiFailed(e))
|
},
|
readMeter () {
|
if (!this.electricalId) return
|
this.isOperating = true
|
api.readMeter(this.customer.id, this.electricalId)
|
.then(res => {
|
this.info = res.electrical || this.info
|
this.latest = res.latestData
|
this.$tip.success(res.message || '抄表完成')
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.isOperating = false })
|
},
|
confirmRecharge () {
|
this.$dialog.actionConfirm('确认充值吗？', '操作确认')
|
.then(() => {
|
this.isOperating = true
|
return api.rechargeElectrical({
|
customerId: this.customer.id,
|
electricalId: this.electricalId,
|
money: this.form.money,
|
remark: this.form.remark
|
})
|
})
|
.then(msg => {
|
this.$tip.success(msg || '提交成功，请在充值记录中查看结果')
|
this.loadRemoteInfo()
|
this.$emit('success')
|
})
|
.catch(e => { if (e !== 'cancel') this.$tip.apiFailed(e) })
|
.finally(() => { this.isOperating = false })
|
},
|
resetAccount (resetAction) {
|
const label = resetAction === 'resetPrepay' ? '预付费' : '后付费'
|
this.$dialog.actionConfirm('确认清零并切换到' + label + '模式吗？', '操作确认')
|
.then(() => {
|
this.isOperating = true
|
return api.resetElectrical({
|
customerId: this.customer.id,
|
electricalId: this.electricalId,
|
resetAction
|
})
|
})
|
.then(msg => {
|
this.$tip.success(msg || '提交成功')
|
this.loadRemoteInfo()
|
this.$emit('success')
|
})
|
.catch(e => { if (e !== 'cancel') this.$tip.apiFailed(e) })
|
.finally(() => { this.isOperating = false })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.extra-btns { margin-top: 12px; }
|
.empty-tip { padding: 24px; color: #909399; text-align: center; }
|
</style>
|
