emsfront/src/views/ems/site/mqtt/index.vue

<template>
  <div class="ems-dashboard-editor-container" style="background-color: #ffffff" v-loading="loading">
    <el-form :inline="true" class="select-container">
      <el-form-item label="站点选择">
        <el-select v-model="form.siteId" placeholder="请选择换电站名称" :loading="searchLoading" loading-text="正在加载数据" clearable>
          <el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订阅topic">
        <el-input
            v-model="form.mqttTopic"
            clearable
            placeholder="请输入订阅topic"
            style="width: 150px"
        ></el-input>
      </el-form-item>
      <el-form-item label="topic描述">
        <el-input
            v-model="form.topicName"
            clearable
            placeholder="请输入topic描述"
            style="width: 150px"
        ></el-input>
      </el-form-item>
      <el-form-item>
                <el-button native-type="button" type="primary" @click="onSearch">搜索</el-button>
                <el-button native-type="button" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="addPowerConfig('')">新增</el-button>
    <el-table
        :data="tableData"
        class="common-table"
        max-height="600px"
        stripe
        style="width: 100%;margin-top: 25px">
        <el-table-column
          label="站点"
          prop="siteId">
      </el-table-column>
      <el-table-column
          label="消息等级"
          prop="qos">
      </el-table-column>
      <el-table-column
          label="订阅topic"
          prop="mqttTopic">
      </el-table-column>
      <el-table-column
          label="topic描述"
          prop="topicName">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              style="margin-top:10px;"
              type="warning"
              @click="addPowerConfig(scope.row.id)">
            编辑
          </el-button>
          <el-button
              size="mini"
              style="margin-top:10px;"
              type="danger"
              @click="deleteMqtt(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        v-show="tableData.length>0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        style="margin-top:15px;text-align: center"
    >
    </el-pagination>
    <add-mqtt ref="addMqtt" @update="getData"/>
  </div>
</template>

<script>
import {deleteMqtt,getMqttList} from '@/api/ems/site'
import {getAllSites} from '@/api/ems/zddt'
import AddMqtt from './AddMqtt.vue'
export default {
  name: "Mqtt",
  components: {AddMqtt},
  computed: { },
  data() {
    return {
      form:{
        siteId:"",
        topicName:'',
        mqttTopic:''
      },
      siteList:[],
      searchLoading:false,
      loading:false,
      tableData:[],
      pageSize:10,//分页栏当前每个数据总数
      pageNum:1,//分页栏当前页数
      totalSize:0,//table表格数据总数
    }
  },
  methods:{
    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.$nextTick(()=>{
        this.getData()
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$nextTick(()=>{
        this.getData()
      })
    },
    // 搜索
    onSearch(){
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    onReset(){
      this.form={
        siteId:'',
        topicName:'',
        mqttTopic:''
      }
      this.pageNum =1//每次搜索从1开始搜索
      this.getData()
    },
    //获取站点列表
    getZdList(){
      this.searchLoading=true
      return getAllSites().then(response => {
        this.siteList = response?.data || []
      //  if( this.siteList.length>0 ) this.siteId = this.siteList[0].siteId
      }).finally(() => {this.searchLoading=false})
    },
    getData(){
      this.loading=true;
      const {mqttTopic,topicName,siteId} = this.form;
      const {pageNum,pageSize} = this;
      getMqttList({pageNum,pageSize,mqttTopic,topicName,siteId}).then(response => {
        this.tableData=response?.rows || [];
        this.totalSize = response?.total || 0
      }).finally(() => {this.loading=false})
    },
    addPowerConfig(id=''){
      this.$refs.addMqtt.showDialog(id);
    },
    deleteMqtt(row){
      this.$confirm(`确认要删除该配置吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        showClose:false,
        closeOnClickModal:false,
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            deleteMqtt(row.id).then(response => {
              response.code === 200 && done();
            }).finally(() => {
              instance.confirmButtonLoading = false;
            })
          } else {
            done();
          }
        }
      }).then(() => {
        //只有在废弃成功的情况下会走到这里
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getData()
        //调用接口 更新表格数据
      }).catch(() => {
        //取消关机
      });
    },
  },
  mounted() {
    this.loading=true
    this.getZdList()
    this.getData()
  }
}
</script>