refactor(msg): move the timed msg to actions button

emqx · Sep 15, 2023 · 1280974 · 1280974
1 parent fd99d91
commit 1280974
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/src/components/MsgPublish.vue b/src/components/MsgPublish.vue
@@ -133,6 +133,9 @@
             <el-dropdown-item command="clearRetainedMessage" :disabled="!clientConnected">
               <i class="iconfont icon-delete"></i>{{ $t('connections.clearRetainedMessage') }}
             </el-dropdown-item>
+            <el-dropdown-item command="timedMessage" :disabled="!clientConnected || sendTimeId !== null">
+              <i class="iconfont icon-a-timedmessage"></i>{{ $t('connections.timedMessage') }}
+            </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
@@ -251,6 +254,7 @@ export default class MsgPublish extends Vue {
   @Prop({ default: false }) public disabled!: boolean
   @Prop({ default: false }) public mqtt5PropsEnable!: boolean
   @Prop({ default: false }) public clientConnected!: boolean
+  @Prop({ default: null }) public sendTimeId!: number | null
 
   @Getter('currentTheme') private currentTheme!: Theme
 
@@ -560,6 +564,8 @@ export default class MsgPublish extends Vue {
   private handleActionCommand(command: string) {
     if (command === 'clearRetainedMessage') {
       this.onClearRetainedMsgPublish()
+    } else if (command === 'timedMessage') {
+      this.$emit('handleSendTimedMessage')
     }
   }
 

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
@@ -109,27 +109,24 @@
                   <el-dropdown-item command="searchContent">
                     <i class="iconfont icon-search"></i>{{ $t('connections.searchContent') }}
                   </el-dropdown-item>
-                  <el-dropdown-item command="newWindow">
-                    <i class="iconfont icon-a-newwindow"></i>{{ $t('common.newWindow') }}
-                  </el-dropdown-item>
                   <el-dropdown-item command="clearHistory">
                     <i class="iconfont icon-a-clearhistory"></i>{{ $t('connections.clearHistory') }}
                   </el-dropdown-item>
+                  <el-dropdown-item command="useScript" :disabled="!client.connected">
+                    <i class="iconfont icon-a-usescript"></i>{{ $t('script.useScript') }}
+                  </el-dropdown-item>
+                  <el-dropdown-item command="newWindow">
+                    <i class="iconfont icon-a-newwindow"></i>{{ $t('common.newWindow') }}
+                  </el-dropdown-item>
                   <el-dropdown-item command="exportData">
                     <i class="iconfont icon-a-exportdata"></i>{{ $t('connections.exportData') }}
                   </el-dropdown-item>
                   <el-dropdown-item command="importData">
                     <i class="iconfont icon-a-importdata"></i>{{ $t('connections.importData') }}
                   </el-dropdown-item>
-                  <el-dropdown-item command="timedMessage" :disabled="!client.connected || sendTimeId !== null">
-                    <i class="iconfont icon-a-timedmessage"></i>{{ $t('connections.timedMessage') }}
-                  </el-dropdown-item>
                   <el-dropdown-item command="bytesStatistics" :disabled="!client.connected">
                     <i class="iconfont icon-a-bytesstatistics"></i>{{ $t('connections.bytesStatistics') }}
                   </el-dropdown-item>
-                  <el-dropdown-item command="useScript" :disabled="!client.connected">
-                    <i class="iconfont icon-a-usescript"></i>{{ $t('script.useScript') }}
-                  </el-dropdown-item>
                   <el-dropdown-item command="disconnect" :disabled="!client.connected">
                     <i class="el-icon-switch-button"></i>{{ $t('connections.disconnect') }}
                   </el-dropdown-item>
@@ -253,8 +250,10 @@
           :style="{ height: `${inputHeight}px` }"
           :disabled="sendTimeId !== null"
           :clientConnected="client.connected"
+          :sendTimeId="sendTimeId"
           @foucs="handleMessages"
           @handleSend="sendMessage"
+          @handleSendTimedMessage="handleCommand('timedMessage')"
         />
       </div>
     </div>