fix: 保存主机信息必须先通过连接测试 (#574)

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'));
                 }
             });

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'));
                     }
                 });