Merge pull request #953 from Carlmac/fix-new-resource-validate

src/dashboard-front/src/views/resource/setting/comps/back-config.vue

@@ -1,5 +1,11 @@
 <template>
-  <bk-form ref="backRef" :model="backConfigData" :rules="rules" class="back-config-container">
+  <bk-form
+    ref="backRef"
+    :model="backConfigData"
+    :rules="rules"
+    class="back-config-container"
+    @validate="setInvalidPropId"
+  >
     <bk-form-item
       :label="t('服务')"
       required
@@ -28,7 +34,7 @@
         </bk-option>
       </bk-select>
       <bk-button theme="primary" class="ml10" v-if="isEditService" @click="editService">
-        编辑服务
+        {{ t('编辑服务') }}
       </bk-button>
     </bk-form-item>
     <bk-alert
@@ -107,6 +113,7 @@
           :placeholder="t('斜线(/)开头的合法URL路径，不包含http(s)开头的域名')"
           clearable
           class="w568"
+          id="back-config-path"
           @change="isPathValid = false"
           @input="isPathValid = false"
         />
@@ -255,6 +262,9 @@ const rules = {
 // 后端地址是否校验通过
 const isPathValid = ref(false);
 
+// 错误表单项的 #id
+const invalidFormElementIds = ref<string[]>([]);
+
 // 提示默认超时时间
 const formatDefaultTime = computed(() => {
   return (payload: any) => {
@@ -514,7 +524,20 @@ const init = async () => {
   }
 };
 
+// 监听表单校验时间，收集 #id
+const setInvalidPropId = (property: string, result: boolean) => {
+  if (!result) {
+    let _property = '';
+    if (property.includes('.')) {
+      const paths = property.split('.');
+      _property = paths[paths.length - 1];
+    }
+    invalidFormElementIds.value.push(`back-config-${_property}`);
+  }
+};
+
 const validate = async () => {
+  invalidFormElementIds.value = [];
   let isHost = true;
   for (let i = 0; i < servicesConfigs.value?.length; i++) {
     const item = servicesConfigs.value[i];
@@ -559,6 +582,7 @@ onMounted(() => {
 
 defineExpose({
   backConfigData,
+  invalidFormElementIds,
   validate,
 });
 </script>

src/dashboard-front/src/views/resource/setting/comps/base-info.vue

@@ -1,6 +1,12 @@
 
 <template>
-  <bk-form ref="formRef" :model="formData" :rules="rules" class="resource-baseinfo">
+  <bk-form
+    ref="formRef"
+    :model="formData"
+    :rules="rules"
+    class="resource-baseinfo"
+    @validate="setInvalidPropId"
+  >
     <bk-form-item
       :label="t('名称')"
       property="name"
@@ -9,6 +15,7 @@
         v-model="formData.name"
         :placeholder="t('由字母、数字、下划线（_）组成，首字符必须是字母，长度小于256个字符')"
         class="name"
+        id="base-info-name"
         clearable
       />
       <div class="common-form-tips">
@@ -142,6 +149,9 @@ const rules = {
 
 const resourcePermRequiredBackup = ref(false);
 
+// 错误表单项的 #id
+const invalidFormElementIds = ref<string[]>([]);
+
 watch(
   () => props.detail,
   (val: any) => {
@@ -182,13 +192,22 @@ const init = async () => {
   labelsData.value = res;
 };
 
+// 监听表单校验时间，收集 #id
+const setInvalidPropId = (property: string, result: boolean) => {
+  if (!result) {
+    invalidFormElementIds.value.push(`base-info-${property}`);
+  }
+};
+
 const validate = async () => {
+  invalidFormElementIds.value = [];
   await formRef.value?.validate();
 };
 
 init();
 defineExpose({
   formData,
+  invalidFormElementIds,
   validate,
 });
 </script>

src/dashboard-front/src/views/resource/setting/comps/front-config.vue

@@ -1,9 +1,16 @@
 
 <template>
-  <bk-form ref="frontRef" :model="frontConfigData" :rules="rules" class="front-config-container">
+  <bk-form
+    ref="frontRef"
+    :model="frontConfigData"
+    :rules="rules"
+    class="front-config-container"
+    @validate="setInvalidPropId"
+  >
     <bk-form-item
       :label="t('请求方法')"
       property="method"
+      id="front-config-method"
       required>
       <bk-select
         :input-search="false"
@@ -25,6 +32,7 @@
           clearable
           @input="clearValidate"
           class="w700"
+          id="front-config-path"
         />
         <bk-checkbox class="ml12" v-model="frontConfigData.match_subpath">
           {{ t('匹配所有子路径') }}
@@ -107,6 +115,9 @@ const rules = ref<any>({
   ],
 });
 
+// 错误表单项的 #id
+const invalidFormElementIds = ref<string[]>([]);
+
 watch(
   () => props.detail,
   (val: any) => {
@@ -132,7 +143,15 @@ watch(
   { deep: true },
 );
 
+// 监听表单校验时间，收集 #id
+const setInvalidPropId = (property: string, result: boolean) => {
+  if (!result) {
+    invalidFormElementIds.value.push(`front-config-${property}`);
+  }
+};
+
 const validate = async () => {
+  invalidFormElementIds.value = [];
   await frontRef.value?.validate();
 };
 
@@ -143,6 +162,7 @@ const clearValidate = () => {
 
 defineExpose({
   frontConfigData,
+  invalidFormElementIds,
   validate,
 });
 </script>

src/dashboard-front/src/views/resource/setting/edit.vue

@@ -114,11 +114,33 @@ const getResourceDetails = async () => {
 
 // 提交
 const handleSubmit = async () => {
-  await Promise.all([
-    baseInfoRef.value?.validate(),
-    frontConfigRef.value?.validate(),
-    backConfigRef.value?.validate(),
-  ]);
+  try {
+    // 校验表单数据
+    await Promise.all([
+      baseInfoRef.value?.validate(),
+      frontConfigRef.value?.validate(),
+      backConfigRef.value?.validate(),
+    ]);
+  } catch {
+    // 校验失败，获取非法表单项的 #id
+    const invalidFormElementIds = [
+      ...baseInfoRef.value?.invalidFormElementIds,
+      ...frontConfigRef.value?.invalidFormElementIds,
+      ...backConfigRef.value?.invalidFormElementIds,
+    ];
+    if (invalidFormElementIds.length) {
+      // 根据表单项 #id 获取元素，滚动到视图中间，并 focus
+      const el = document.querySelector(`#${invalidFormElementIds[0]}`);
+      if (el) {
+        el.scrollIntoView({
+          behavior: 'smooth', // 平滑滚动
+          block: 'center',
+        });
+        el.focus?.();
+      }
+    }
+    return;
+  }
   const baseFormData = baseInfoRef.value.formData;
   const frontFormData = frontConfigRef.value.frontConfigData;
   const backFormData = backConfigRef.value.backConfigData;