From ab0f4380b2ca4f3808263bf641dab10b356fd7c6 Mon Sep 17 00:00:00 2001
From: ssongliu <73214554+ssongliu@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:04:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=9D=E5=AD=98=E4=B8=BB=E6=9C=BA?=
 =?UTF-8?q?=E4=BF=A1=E6=81=AF=E5=BF=85=E9=A1=BB=E5=85=88=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E6=B5=8B=E8=AF=95=20(#574)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/host/terminal/host/operate/index.vue  | 17 ++++++++++++++---
 .../host/terminal/terminal/host-create.vue      | 15 +++++++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/host/terminal/host/operate/index.vue b/frontend/src/views/host/terminal/host/operate/index.vue
index d0645d92f..922d23d1f 100644
--- a/frontend/src/views/host/terminal/host/operate/index.vue
+++ b/frontend/src/views/host/terminal/host/operate/index.vue
@@ -79,7 +79,7 @@
                     <el-button @click="submitAddHost(hostInfoRef, 'testconn')">
                         {{ $t('terminal.testConn') }}
                     </el-button>
-                    <el-button type="primary" @click="submitAddHost(hostInfoRef, dialogData.title)">
+                    <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostInfoRef, dialogData.title)">
                         {{ $t('commons.button.confirm') }}
                     </el-button>
                 </span>
@@ -89,7 +89,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, watch } from 'vue';
 import type { ElForm } from 'element-plus';
 import { Rules } from '@/global/form-rules';
 import { addHost, editHost, testByInfo } from '@/api/modules/host';
@@ -98,7 +98,7 @@ import i18n from '@/lang';
 import { MsgError, MsgSuccess } from '@/utils/message';
 
 const loading = ref();
-
+const isOK = ref(false);
 interface DialogProps {
     title: string;
     rowData?: any;
@@ -109,6 +109,15 @@ const drawerVisiable = ref(false);
 const dialogData = ref<DialogProps>({
     title: '',
 });
+
+watch(
+    () => dialogData.value.rowData,
+    () => {
+        isOK.value = false;
+    },
+    { deep: true },
+);
+
 const groupList = ref();
 const acceptParams = (params: DialogProps): void => {
     dialogData.value = params;
@@ -179,8 +188,10 @@ const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {
             await testByInfo(dialogData.value.rowData).then((res) => {
                 loading.value = false;
                 if (res.data) {
+                    isOK.value = true;
                     MsgSuccess(i18n.global.t('terminal.connTestOk'));
                 } else {
+                    isOK.value = false;
                     MsgError(i18n.global.t('terminal.connTestFailed'));
                 }
             });
diff --git a/frontend/src/views/host/terminal/terminal/host-create.vue b/frontend/src/views/host/terminal/terminal/host-create.vue
index c24d4e665..81db9979e 100644
--- a/frontend/src/views/host/terminal/terminal/host-create.vue
+++ b/frontend/src/views/host/terminal/terminal/host-create.vue
@@ -68,7 +68,7 @@
                     <el-button @click="submitAddHost(hostRef, 'testConn')">
                         {{ $t('terminal.testConn') }}
                     </el-button>
-                    <el-button type="primary" @click="submitAddHost(hostRef, 'saveAndConn')">
+                    <el-button type="primary" :disabled="!isOK" @click="submitAddHost(hostRef, 'saveAndConn')">
                         {{ $t('terminal.saveAndConn') }}
                     </el-button>
                 </span>
@@ -84,10 +84,11 @@ import { Rules } from '@/global/form-rules';
 import { addHost, testByInfo } from '@/api/modules/host';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import i18n from '@/lang';
-import { reactive, ref } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import { MsgError, MsgSuccess } from '@/utils/message';
 
 const dialogVisiable = ref();
+const isOK = ref(false);
 type FormInstance = InstanceType<typeof ElForm>;
 const hostRef = ref<FormInstance>();
 
@@ -106,6 +107,14 @@ let hostInfo = reactive<Host.HostOperate>({
     description: '',
 });
 
+watch(
+    () => hostInfo,
+    () => {
+        isOK.value = false;
+    },
+    { deep: true },
+);
+
 const rules = reactive({
     addr: [Rules.host],
     port: [Rules.requiredInput, Rules.port],
@@ -153,8 +162,10 @@ const submitAddHost = (formEl: FormInstance | undefined, ops: string) => {
             case 'testConn':
                 await testByInfo(hostInfo).then((res) => {
                     if (res.data) {
+                        isOK.value = true;
                         MsgSuccess(i18n.global.t('terminal.connTestOk'));
                     } else {
+                        isOK.value = false;
                         MsgError(i18n.global.t('terminal.connTestFailed'));
                     }
                 });