fix(项目管理): 环境管理-Host保存表单检验问题

--bug=1037322 --user=宋昌昌 【项目管理】环境管理-环境-HOST-添加多个host，其中域名为空保存时未提示域名必填 https://www.tapd.cn/55049933/s/1494309

frontend/src/views/project-management/environmental/components/EnvParamBox.vue

@@ -48,7 +48,7 @@
       <EnvParamsTab v-if="activeKey === 'envParams'" />
       <HttpTab v-else-if="activeKey === 'http'" />
       <DataBaseTab v-else-if="activeKey === 'database'" />
-      <HostTab v-else-if="activeKey === 'host'" />
+      <HostTab v-else-if="activeKey === 'host'" ref="hostTabRef" />
       <!-- <PreTab v-else-if="activeKey === 'pre'" />
       <PostTab v-else-if="activeKey === 'post'" /> -->
       <div v-else-if="activeKey === 'pre' || activeKey === 'post'" class="h-full">
@@ -77,6 +77,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { ref } from 'vue';
   import { Message } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
@@ -114,6 +115,7 @@
   const loading = ref(false);
   const tabSettingVisible = ref(false);
   const appStore = useAppStore();
+  const hostTabRef = ref();
 
   const store = useProjectEnvStore();
   const envPluginList = ref<EnvPluginListItem[]>([]);
@@ -216,10 +218,8 @@
     };
   }
 
-  const handleSave = async () => {
+  const saveCallBack = async () => {
-    await envForm.value?.validate(async (valid) => {
+    // 校验通过回调保存
-      if (!valid) {
-        try {
     loading.value = true;
     store.currentEnvDetailInfo.mock = true;
     await updateOrAddEnv({ fileList: [], request: getParameters() });
@@ -227,6 +227,18 @@
 
     Message.success(store.currentEnvDetailInfo.id ? t('common.updateSuccess') : t('common.saveSuccess'));
     emit('ok', store.currentEnvDetailInfo.id);
+  };
+
+  const handleSave = async () => {
+    await envForm.value?.validate(async (valid) => {
+      if (!valid) {
+        try {
+          // 保存Host-Tab的数据(目前只加了Host)
+          if (activeKey.value === 'host') {
+            hostTabRef.value?.validateForm(saveCallBack);
+          } else {
+            await saveCallBack();
+          }
         } catch (error) {
           // eslint-disable-next-line no-console
           console.log(error);
@@ -236,6 +248,7 @@
       }
     });
   };
+
   watchEffect(() => {
     if (store.currentId) {
       store.initEnvDetail();

frontend/src/views/project-management/environmental/components/envParams/HostTab.vue

@@ -48,13 +48,11 @@
   import { onClickOutside } from '@vueuse/core';
   import { debounce } from 'lodash-es';
 
-  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
   import { FormItemModel } from '@/components/business/ms-batch-form/types';
 
   import { useI18n } from '@/hooks/useI18n';
   import useProjectEnvStore from '@/store/modules/setting/useProjectEnvStore';
-  import { getGenerateId } from '@/utils';
 
   import { EnvConfigItem } from '@/models/projectManagement/environmental';
 
@@ -104,6 +102,10 @@
   // 代码编辑器内容
   const editorContent = ref('');
 
+  function validateForm(cb?: () => void) {
+    return batchFormRef.value?.formValidate(cb);
+  }
+
   /**
    * 解析代码编辑器内容
    */
@@ -130,6 +132,10 @@
     });
   }
 
+  defineExpose({
+    validateForm,
+  });
+
   watch(
     () => editorContent.value,
     (val) => {