添加断开连接的按钮

guoshilong

2023-03-22 e0f9517f4b60d253b46abb20feb15d23ebaf32bc

 src/views/funcView.vue

@@ -3,9 +3,13 @@
    <el-row>
      <el-col :span="4">
        <div class="search">
          <avue-form :option="option" v-model="form" @submit="connect">
          <avue-form ref="form" :option="option" v-model="form" @submit="connect">
            <template slot-scope="{}" slot="equipmentCodeLabel">
              <span></span>
            </template>
            <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>
@@ -119,6 +123,7 @@
        menuSpan: 6,
        emptyBtn: false,
        submitText: '连接',
        submitBtn:false,
        column: [
          {
            label: "显示设备",
@@ -249,6 +254,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:"断开失败"})
        }
      }
    },
    left() {
      this.$refs.flipbook.flipLeft()
    },