<template>
|
<div v-loading="loading" class="conditioner-tab">
|
<section class="config-section">
|
<div class="section-title">计费配置</div>
|
<el-form label-width="150px" size="small" class="config-form">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="计费开关">
|
<el-switch v-model="form.isPwr" :active-value="1" :inactive-value="0" active-text="开启" inactive-text="关闭"/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="18:00-09:00 不停机">
|
<el-switch v-model="form.isRestStop" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="欠费额度（元）">
|
<el-input-number v-model="form.stopMoney" :min="0" :precision="2" :step="10" controls-position="right" style="width: 100%"/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-form-item label="备注" class="remark-item">
|
<el-input
|
v-model="form.gsBz"
|
type="textarea"
|
:rows="2"
|
maxlength="500"
|
show-word-limit
|
placeholder="请输入备注（选填）"
|
/>
|
</el-form-item>
|
</el-form>
|
</section>
|
|
<section class="config-section">
|
<div class="section-header">
|
<span class="section-title">关联内机</span>
|
<el-button type="primary" size="small" icon="el-icon-plus" @click="openSelector">添加内机</el-button>
|
</div>
|
<el-table :data="form.conditioners" stripe size="small" class="device-table" empty-text="暂未关联内机，请点击添加">
|
<el-table-column label="设备" min-width="200" align="left" show-overflow-tooltip>
|
<template slot-scope="{ row }">{{ deviceLabel(row) }}</template>
|
</el-table-column>
|
<el-table-column prop="platformDevId" label="平台设备ID" min-width="110" align="center"/>
|
<el-table-column label="在线" min-width="80" align="center">
|
<template slot-scope="{ row }">
|
<span :class="row.online === '在线' ? 'green' : 'red'">{{ row.online || '-' }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column label="电费占比%" min-width="130" align="center">
|
<template slot-scope="{ row }">
|
<el-input-number v-model="row.devRatio" :min="1" :max="100" size="small" controls-position="right"/>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" width="80" align="center" fixed="right">
|
<template slot-scope="{ $index }">
|
<el-button type="text" class="red" @click="form.conditioners.splice($index, 1)">移除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</section>
|
|
<div class="footer-btns">
|
<el-button type="primary" :loading="saving" v-permissions="['business:ywcustomerrecharge:bindDevice']" @click="save">保存配置</el-button>
|
</div>
|
|
<GlobalWindow title="选择空调内机" :visible.sync="selectorVisible" width="780px" @confirm="confirmSelect">
|
<el-form inline @submit.native.prevent class="selector-form">
|
<el-form-item label="关键字">
|
<el-input v-model="selectorKeyword" placeholder="名称/编号" clearable @keypress.enter.native="searchDevices"/>
|
</el-form-item>
|
<el-button type="primary" @click="searchDevices">查询</el-button>
|
</el-form>
|
<el-table ref="devTable" v-loading="selectorLoading" :data="selectorList" stripe size="small" @selection-change="rows => selectedRows = rows">
|
<el-table-column type="selection" width="45"/>
|
<el-table-column label="设备" min-width="180" align="left" show-overflow-tooltip>
|
<template slot-scope="{ row }">{{ deviceLabel(row) }}</template>
|
</el-table-column>
|
<el-table-column prop="platformDevId" label="平台设备ID" min-width="110" align="center"/>
|
<el-table-column prop="online" label="在线" min-width="80" align="center"/>
|
</el-table>
|
<pagination @current-change="p => { selectorPagination.pageIndex = p; loadDevices() }" :pagination="selectorPagination"/>
|
</GlobalWindow>
|
</div>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import Pagination from '@/components/common/Pagination'
|
import * as rechargeApi from '@/api/business/ywcustomerrecharge'
|
import * as conditionerApi from '@/api/business/ywconditioner'
|
|
export default {
|
name: 'YwCustomerConditionerTab',
|
components: { GlobalWindow, Pagination },
|
props: {
|
customerId: Number,
|
active: Boolean
|
},
|
data () {
|
return {
|
loading: false,
|
saving: false,
|
form: {
|
isPwr: 1,
|
isRestStop: 0,
|
stopMoney: 0,
|
gsBz: '',
|
conditioners: []
|
},
|
selectorVisible: false,
|
selectorLoading: false,
|
selectorKeyword: '',
|
selectorList: [],
|
selectorPagination: { pageIndex: 1, pageSize: 10, total: 0 },
|
selectedRows: []
|
}
|
},
|
watch: {
|
active (val) {
|
if (val) this.loadConfig()
|
},
|
customerId () {
|
if (this.active) this.loadConfig()
|
}
|
},
|
mounted () {
|
if (this.active) this.loadConfig()
|
},
|
methods: {
|
deviceLabel (row) {
|
const parts = [row.floorName, row.roomName, row.name].filter(Boolean)
|
return parts.length ? parts.join('/') : (row.name || row.code || '-')
|
},
|
loadConfig () {
|
if (!this.customerId) return
|
this.loading = true
|
Promise.all([
|
rechargeApi.getGsConfig(this.customerId),
|
rechargeApi.conditionerPage(this.customerId, { page: 1, capacity: 500, model: {} })
|
]).then(([gs, page]) => {
|
if (gs) {
|
this.form.isPwr = gs.isPwr != null ? gs.isPwr : 1
|
this.form.isRestStop = gs.isRestStop != null ? gs.isRestStop : 0
|
this.form.stopMoney = gs.stopMoney != null ? gs.stopMoney : 0
|
this.form.gsBz = gs.gsBz || ''
|
} else {
|
this.form.isPwr = 1
|
this.form.isRestStop = 0
|
this.form.stopMoney = 0
|
this.form.gsBz = ''
|
}
|
this.form.conditioners = (page.records || []).map(c => ({
|
conditionerId: c.id,
|
platformDevId: c.platformDevId,
|
name: c.name,
|
floorName: c.floorName,
|
roomName: c.roomName,
|
online: c.online,
|
devRatio: c.devRatio != null ? c.devRatio : 100
|
}))
|
}).catch(e => this.$tip.apiFailed(e)).finally(() => { this.loading = false })
|
},
|
save () {
|
if (!this.form.conditioners.length) {
|
this.$tip.warning('请至少关联一台内机')
|
return
|
}
|
this.saving = true
|
rechargeApi.saveGsConfig({
|
customerId: this.customerId,
|
isPwr: this.form.isPwr,
|
isRestStop: this.form.isRestStop,
|
stopMoney: this.form.stopMoney,
|
gsBz: this.form.gsBz,
|
conditioners: this.form.conditioners.map(c => ({
|
conditionerId: c.conditionerId,
|
devRatio: c.devRatio
|
}))
|
}).then(() => {
|
this.$tip.success('保存成功')
|
this.loadConfig()
|
this.$emit('success')
|
}).catch(e => this.$tip.apiFailed(e)).finally(() => { this.saving = false })
|
},
|
openSelector () {
|
this.selectorVisible = true
|
this.selectorKeyword = ''
|
this.selectedRows = []
|
this.selectorPagination.pageIndex = 1
|
this.loadDevices()
|
},
|
loadDevices () {
|
this.selectorLoading = true
|
conditionerApi.fetchList({
|
page: this.selectorPagination.pageIndex,
|
capacity: this.selectorPagination.pageSize,
|
model: this.selectorKeyword ? { devKeyword: this.selectorKeyword } : {}
|
}).then(data => {
|
const boundIds = new Set(this.form.conditioners.map(c => c.conditionerId))
|
this.selectorList = (data.records || []).filter(r => !boundIds.has(r.id))
|
this.selectorPagination.total = data.total || 0
|
}).catch(e => this.$tip.apiFailed(e)).finally(() => { this.selectorLoading = false })
|
},
|
searchDevices () {
|
this.selectorPagination.pageIndex = 1
|
this.loadDevices()
|
},
|
confirmSelect () {
|
if (!this.selectedRows.length) {
|
this.$tip.warning('请选择内机')
|
return
|
}
|
this.selectedRows.forEach(r => {
|
this.form.conditioners.push({
|
conditionerId: r.id,
|
platformDevId: r.platformDevId,
|
name: r.name,
|
floorName: r.floorName,
|
roomName: r.roomName,
|
online: r.online,
|
devRatio: 100
|
})
|
})
|
this.selectorVisible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.conditioner-tab {
|
padding-top: 4px;
|
}
|
.config-section {
|
margin-bottom: 16px;
|
padding: 16px;
|
background: #fff;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
}
|
.section-header {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 12px;
|
}
|
.section-title {
|
font-size: 14px;
|
font-weight: 600;
|
color: #303133;
|
line-height: 22px;
|
}
|
.section-header .section-title {
|
margin-bottom: 0;
|
}
|
.config-section > .section-title {
|
margin-bottom: 12px;
|
padding-bottom: 8px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
.config-form {
|
margin-bottom: 0;
|
}
|
.config-form ::v-deep .el-form-item {
|
margin-bottom: 12px;
|
}
|
.config-form ::v-deep .remark-item {
|
margin-bottom: 0;
|
}
|
.config-form ::v-deep .remark-item .el-textarea {
|
max-width: 100%;
|
}
|
.config-form ::v-deep .el-switch {
|
width: auto;
|
}
|
.device-table {
|
width: 100%;
|
}
|
.footer-btns {
|
text-align: right;
|
padding-top: 4px;
|
}
|
.selector-form {
|
margin-bottom: 12px;
|
}
|
.green { color: #67c23a; }
|
.red { color: #f56c6c; }
|
</style>
|
