mqtt

src/views/ems/site/mqtt/AddMqtt.vue

@@ -0,0 +1,111 @@
+<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>