添加断开连接的按钮

guoshilong

2023-03-22 e0f9517f4b60d253b46abb20feb15d23ebaf32bc

 src/views/funcController.vue

@@ -1,6 +1,11 @@
<template>
  <div>
    <avue-form ref="form" v-model="form" :option="option" @submit="connect"></avue-form>
    <avue-form ref="form" v-model="form" :option="option" @submit="connect">
      <template slot-scope="{size}" slot="menuForm">
        <el-button v-if="!socketIoClient" type="primary"  :size="size" @click="$refs.form.submit()">连 接</el-button>
        <el-button v-if="socketIoClient" type="danger" :size="size" @click="disconnect">断 开</el-button>
      </template>
    </avue-form>
    <div class="menu-btn-group">
      <el-button size="small" v-for="data in menuList" :index="data.id" :key="data.id" @click="menuChange(data)">
        {{ data.name }}
@@ -47,6 +52,7 @@
      option:{
        emptyBtn:false,
        submitText: "连接",
        submitBtn:false,
        menuSpan: 1,
        column:[
          {
@@ -81,6 +87,7 @@
      },
      menuList:[],
      currentClick:{},
      socketIoClient:null,
    }
  },
  mounted() {
@@ -102,9 +109,6 @@
    },
    //连接
    connect(form,done){
      // if (this.socketIoClient !=null ){
      //   this.socketIoClient.disconnect()
      // }
      let serveUri = 'http://192.168.0.200:10246'
      let params = {
        current :form.controllerEquipmentCode
@@ -127,6 +131,7 @@
          getAll(params).then(res=>{
            if (res.data.code == 200){
              this.menuList = res.data.data
              this.$notify.success({title:"连接成功"})
            }
          })
        }
@@ -138,6 +143,19 @@
        });
      });
    },
    disconnect() {
      console.log(this.socketIoClient)
      if (this.socketIoClient != null){
        this.socketIoClient.disconnect()
        this.menuList = []
        if (this.socketIoClient.disconnected){
          this.socketIoClient = null
          this.$notify.success({title:"断开成功"})
        }else {
          this.$notify.error({title:"断开失败"})
        }
      }
    },
  }
}
</script>