112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<el-dialog :visible.sync="dialogTableVisible" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" destroy-on-close lock-scroll append-to-body width="400px" class="ems-dialog" :title="mode === 'add'?'新增配置':`编辑配置` " >
|
||
|
|
<el-form v-loading="loading>0" ref="addTempForm" :model="formData" :rules="rules" size="medium" label-width="140px">
|
||
|
|
<el-form-item label="订阅topic" prop="deviceName">
|
||
|
|
<el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
<el-form-item label="topic描述" prop="description">
|
||
|
|
<el-input v-model="formData.topicName" type="textarea" placeholder="请输入" clearable :style="{width: '100%'}">
|
||
|
|
</el-input>
|
||
|
|
</el-form-item>
|
||
|
|
</el-form>
|
||
|
|
<div slot="footer">
|
||
|
|
<el-button @click="closeDialog">取消</el-button>
|
||
|
|
<el-button type="primary" @click="saveDialog">确定</el-button>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import {editMqtt,addMqtt,getMqttDetail} from "@/api/ems/site";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
loading:0,
|
||
|
|
dialogTableVisible:false,
|
||
|
|
mode:'',
|
||
|
|
formData: {
|
||
|
|
id:'',//设备唯一标识
|
||
|
|
topicName:'',
|
||
|
|
mqttTopic:''
|
||
|
|
},
|
||
|
|
rules: {
|
||
|
|
mqttTopic:[
|
||
|
|
{ required: true, message: '请输入订阅topic', trigger: 'blur'},
|
||
|
|
],
|
||
|
|
topicName:[
|
||
|
|
{ required: true, message: '请输入topic描述', trigger: 'blur'},
|
||
|
|
],
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showDialog(id){
|
||
|
|
this.dialogTableVisible = true
|
||
|
|
if(id){
|
||
|
|
this.mode = 'edit'
|
||
|
|
this.formData.id = id
|
||
|
|
this.getDetail(id)
|
||
|
|
}else{
|
||
|
|
this.mode = 'add'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
getDetail(id){
|
||
|
|
getMqttDetail(id).then(response => {
|
||
|
|
const {topicName='',mqttTopic=''} = JSON.parse(JSON.stringify(response?.data || {}));
|
||
|
|
this.formData.mqttTopic=mqttTopic;
|
||
|
|
this.formData.topicName=topicName;
|
||
|
|
})
|
||
|
|
},
|
||
|
|
saveDialog() {
|
||
|
|
this.$refs.addTempForm.validate(valid => {
|
||
|
|
if (!valid) return
|
||
|
|
this.loading+=1
|
||
|
|
const {
|
||
|
|
id='',
|
||
|
|
mqttTopic='',//站点ID
|
||
|
|
topicName='',//设备id
|
||
|
|
}= this.formData;
|
||
|
|
if(this.mode === 'add'){
|
||
|
|
addMqtt( {mqttTopic,topicName}).then(response => {
|
||
|
|
if(response.code === 200){
|
||
|
|
//新增成功
|
||
|
|
// 关闭弹窗 更新表格
|
||
|
|
this.$emit('update')
|
||
|
|
this.closeDialog()
|
||
|
|
}
|
||
|
|
}).finally(() => {
|
||
|
|
this.loading-=1
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
editMqtt({mqttTopic,topicName,id}).then(response => {
|
||
|
|
if(response.code === 200){
|
||
|
|
//新增成功
|
||
|
|
// 关闭弹窗 更新表格
|
||
|
|
this.$emit('update')
|
||
|
|
this.closeDialog()
|
||
|
|
}
|
||
|
|
}).finally(() => {
|
||
|
|
this.loading-=1
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
closeDialog(){
|
||
|
|
this.$emit('clear')
|
||
|
|
// 清空所有数据
|
||
|
|
this.formData= {
|
||
|
|
id:'',//设备唯一标识
|
||
|
|
mqttTopic:'',
|
||
|
|
topicName:''
|
||
|
|
}
|
||
|
|
this.$refs.addTempForm.resetFields()
|
||
|
|
this.dialogTableVisible=false
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
</style>
|