<template>
|
<GlobalWindow title="编辑电表" :visible.sync="visible" width="720px" :confirm-working="isWorking" @confirm="confirm">
|
<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="electrical-edit-form">
|
<el-form-item label="采集器号">
|
<span>{{ form.collectorId }}</span>
|
<span :class="form.online === 1 ? 'green' : 'red'" style="margin-left: 12px">{{ form.online === 1 ? '在线' : '离线' }}</span>
|
</el-form-item>
|
<el-form-item label="表地址">{{ form.address }}</el-form-item>
|
<el-form-item label="电表类型">{{ form.type || '-' }}</el-form-item>
|
<el-form-item label="继电器">
|
<span v-if="form.relayStatus === '0' || form.relayStatus === 0" class="red">断开</span>
|
<span v-else-if="form.relayStatus === '1' || form.relayStatus === 1" class="green">闭合</span>
|
<span v-else>-</span>
|
</el-form-item>
|
<el-form-item label="电表名称">
|
<span>{{ form.name || '-' }}</span>
|
</el-form-item>
|
<el-form-item label="电表参数" prop="electricalParamId">
|
<el-select v-model="form.electricalParamId" clearable placeholder="请选择电表参数" style="width: 400px">
|
<el-option v-for="p in paramList" :key="p.id" :label="p.name" :value="p.id"></el-option>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="电表倍率" prop="rate">
|
<el-input-number v-model="form.rate" :min="0.01" :precision="2" :step="0.1" style="width: 400px"/>
|
<div class="form-tip">针对互感表需要配置，其它单相表默认配置1即可</div>
|
</el-form-item>
|
<el-form-item label="请选择房源">
|
<el-tree
|
ref="roomTree"
|
:data="houseList"
|
show-checkbox
|
node-key="idd"
|
:props="{ children: 'projectDataVOList', label: 'name' }"
|
:default-checked-keys="checkedKeys"
|
@check="onRoomCheck"
|
style="max-height: 320px; overflow: auto; width: 400px; border: 1px solid #dcdfe6; padding: 8px;"
|
/>
|
</el-form-item>
|
<el-form-item label="已选房源">
|
<div class="selected-room-list">
|
<template v-if="selectedRooms.length">
|
<el-tag
|
v-for="room in selectedRooms"
|
:key="room.idd"
|
closable
|
class="selected-room-tag"
|
@close="removeSelectedRoom(room)"
|
>{{ room.roomPath }}</el-tag>
|
</template>
|
<span v-else class="selected-room-empty">-</span>
|
</div>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { tree } from '@/api/project/ywProject'
|
import { getDetail, saveDetail, fetchParamList } from '@/api/business/ywelectrical'
|
|
export default {
|
name: 'YwElectricalEdit',
|
components: { GlobalWindow },
|
data () {
|
return {
|
visible: false,
|
isWorking: false,
|
form: {},
|
paramList: [],
|
houseList: [],
|
checkedKeys: [],
|
selectedRooms: [],
|
rules: {
|
}
|
}
|
},
|
methods: {
|
open (row) {
|
this.visible = true
|
this.checkedKeys = []
|
this.selectedRooms = []
|
this.loadParams()
|
this.loadHouseTree()
|
getDetail(row.id).then(data => {
|
this.form = { ...data, rate: data.rate != null ? Number(data.rate) : 1 }
|
if (data.roomIds && data.roomIds.length) {
|
this.checkedKeys = data.roomIds.map(id => '3-' + id)
|
this.$nextTick(() => {
|
if (this.$refs.roomTree) {
|
this.$refs.roomTree.setCheckedKeys(this.checkedKeys)
|
this.syncSelectedRoomsFromTree()
|
}
|
})
|
}
|
}).catch(e => this.$tip.apiFailed(e))
|
},
|
loadParams () {
|
fetchParamList().then(res => {
|
this.paramList = (res && res.records) ? res.records : []
|
}).catch(() => {})
|
},
|
loadHouseTree () {
|
tree({}).then(res => {
|
this.markTreeNodes(res || [])
|
this.houseList = res || []
|
this.$nextTick(() => {
|
if (this.checkedKeys.length && this.$refs.roomTree) {
|
this.$refs.roomTree.setCheckedKeys(this.checkedKeys)
|
this.syncSelectedRoomsFromTree()
|
}
|
})
|
})
|
},
|
markTreeNodes (arr, ancestors) {
|
if (!arr) return
|
arr.forEach(node => {
|
node.idd = node.lv + '-' + node.id
|
node.disabled = node.lv !== 3
|
const names = (ancestors || []).concat(node.name)
|
if (node.lv === 3) {
|
node.roomPath = names.length >= 3 ? names.slice(-3).join('/') : names.join('/')
|
}
|
if (node.projectDataVOList && node.projectDataVOList.length) {
|
this.markTreeNodes(node.projectDataVOList, names)
|
}
|
})
|
},
|
syncSelectedRoomsFromTree () {
|
const tree = this.$refs.roomTree
|
if (!tree) {
|
this.selectedRooms = []
|
return
|
}
|
const nodes = tree.getCheckedNodes(true).filter(n => n.lv === 3)
|
this.selectedRooms = nodes.map(n => ({
|
id: n.id,
|
idd: n.idd,
|
roomPath: n.roomPath || n.name
|
}))
|
this.form.roomIds = nodes.map(n => n.id)
|
this.checkedKeys = nodes.map(n => n.idd)
|
},
|
removeSelectedRoom (room) {
|
const tree = this.$refs.roomTree
|
if (!tree || !room) return
|
tree.setChecked(room.idd, false, true)
|
this.syncSelectedRoomsFromTree()
|
},
|
onRoomCheck () {
|
this.syncSelectedRoomsFromTree()
|
},
|
confirm () {
|
this.$refs.form.validate(valid => {
|
if (!valid) return
|
this.isWorking = true
|
saveDetail({
|
id: this.form.id,
|
electricalParamId: this.form.electricalParamId,
|
rate: this.form.rate,
|
roomIds: this.form.roomIds || []
|
})
|
.then(() => {
|
this.$tip.success('保存成功')
|
this.visible = false
|
this.$emit('success')
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.isWorking = false })
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.green { color: #67c23a; }
|
.red { color: #f56c6c; }
|
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
|
.selected-room-list {
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
max-width: 560px;
|
min-height: 32px;
|
gap: 8px;
|
}
|
.selected-room-tag {
|
max-width: 100%;
|
white-space: normal;
|
height: auto;
|
line-height: 1.5;
|
padding-top: 4px;
|
padding-bottom: 4px;
|
}
|
.selected-room-empty {
|
color: #909399;
|
}
|
</style>
|
