emsfront/src/views/ems/site/mqtt/AddMqtt.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="站点" prop="siteId">
        <el-select v-model="formData.siteId" :disabled="mode === 'edit'" placeholder="请选择站点" :loading="searchLoading" loading-text="正在加载数据">
            <el-option v-for="(item,index) in siteList" :key="index+'zdxeSelect'" :label="item.siteName" :value="item.siteId" ></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="消息等级" prop="qos">
        <el-select v-model="formData.qos" placeholder="请选择消息等级">
            <el-option :value="1">1</el-option>
            <el-option :value="2">2</el-option>
            <el-option :value="3">3</el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="订阅topic" prop="mqttTopic">
        <el-input v-model="formData.mqttTopic" placeholder="请输入" clearable :style="{width: '100%'}">
        </el-input>
      </el-form-item>
      <el-form-item label="topic描述" prop="topicName">
        <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";
import {getAllSites} from '@/api/ems/zddt'
export default {
  data() {
    return {
      loading:0,
      siteList:[],
      searchLoading:false,
      dialogTableVisible:false,
      mode:'',
      formData: {
        id:'',//设备唯一标识
        siteId:'',
        qos:'',
        topicName:'',
        mqttTopic:''
      },
      rules: {
        siteId:[
          { required: true, message: '请选择站点', trigger: 'blur'},
        ],
        qos:[
          { required: true, message: '请选择消息等级', trigger: 'blur'},
        ],
        mqttTopic:[
          { required: true, message: '请输入订阅topic', trigger: 'blur'},
        ],
        topicName:[
          { required: true, message: '请输入topic描述', trigger: 'blur'},
        ],
      },
    }
  },
  methods: {
    showDialog(id){
      this.dialogTableVisible = true
      this.getZdList()
      if(id){
        this.mode = 'edit'
        this.formData.id = id
        this.getDetail(id)
      }else{
        this.mode = 'add'
      }
    },
     //获取站点列表
    getZdList(){
      this.searchLoading=true
      getAllSites().then(response => {
        this.siteList = response?.data || []
      }).finally(() => {this.searchLoading=false})
    },
    getDetail(id){
      getMqttDetail(id).then(response => {
        const {topicName='',mqttTopic='',qos='',siteId=''} = JSON.parse(JSON.stringify(response?.data || {}));
        this.formData.mqttTopic=mqttTopic;
        this.formData.topicName=topicName;
        this.formData.qos=qos;
        this.formData.siteId=siteId;
      })
    },
    saveDialog() {
      this.$refs.addTempForm.validate(valid => {
        if (!valid) return
        this.loading+=1
        const {
          id='',
          siteId='',
          qos='',
          mqttTopic='',//站点ID
          topicName='',//设备id
        }= this.formData;
        if(this.mode === 'add'){
          addMqtt( {mqttTopic,topicName,siteId,qos}).then(response => {
            if(response.code === 200){
              //新增成功
              // 关闭弹窗 更新表格
              this.$emit('update')
              this.closeDialog()
            }
          }).finally(() => {
            this.loading-=1
          })
        }else{
          editMqtt({mqttTopic,topicName,id,siteId,qos}).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>