<template>
|
<GlobalWindow title="编辑空调内机" :visible.sync="visible" width="720px" :confirm-working="isWorking" @confirm="confirm">
|
<el-form ref="form" :model="form" label-width="120px" class="conditioner-edit-form">
|
<el-form-item label="设备名称">
|
<span>{{ form.name || '-' }}</span>
|
</el-form-item>
|
<el-form-item label="设备编号">
|
<span>{{ form.code || '-' }}</span>
|
</el-form-item>
|
<el-form-item label="网关MAC">
|
<span>{{ form.wgMac || '-' }}</span>
|
<span :class="isOnline ? 'green' : 'red'" style="margin-left: 12px">{{ form.online || '离线' }}</span>
|
</el-form-item>
|
<el-form-item label="设备类型">
|
<span>{{ form.devTypeName || form.pid || '-' }}</span>
|
</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-item label="备注">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
:rows="4"
|
maxlength="500"
|
show-word-limit
|
placeholder="请输入备注"
|
style="width: 400px"
|
/>
|
</el-form-item>
|
</el-form>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import { tree } from '@/api/project/ywProject'
|
import { getManageDetail, saveManageDetail } from '@/api/business/ywconditionerdevice'
|
|
export default {
|
name: 'YwConditionerDeviceEdit',
|
components: { GlobalWindow },
|
data () {
|
return {
|
visible: false,
|
isWorking: false,
|
form: {},
|
houseList: [],
|
checkedKeys: [],
|
selectedRooms: []
|
}
|
},
|
computed: {
|
isOnline () {
|
const o = this.form && this.form.online
|
return o === '在线' || o === 1 || o === '1'
|
}
|
},
|
methods: {
|
open (row) {
|
this.visible = true
|
this.checkedKeys = []
|
this.selectedRooms = []
|
this.loadHouseTree()
|
getManageDetail(row.id).then(data => {
|
this.form = { ...data }
|
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))
|
},
|
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 treeRef = this.$refs.roomTree
|
if (!treeRef) {
|
this.selectedRooms = []
|
return
|
}
|
const nodes = treeRef.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 treeRef = this.$refs.roomTree
|
if (!treeRef || !room) return
|
treeRef.setChecked(room.idd, false, true)
|
this.syncSelectedRoomsFromTree()
|
},
|
onRoomCheck () {
|
this.syncSelectedRoomsFromTree()
|
},
|
confirm () {
|
this.isWorking = true
|
saveManageDetail({
|
id: this.form.id,
|
roomIds: this.form.roomIds || [],
|
remark: this.form.remark || ''
|
})
|
.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; }
|
.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>
|
