fix: 1.配置示例、分组管理label的key校验成功后不再自动校验value；2.校验错误信息样式调整--bug=126865383

q15971095971 · Jul 15, 2024 · dc2657f · dc2657f
1 parent d7e4ad0
commit dc2657f
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 41 deletions.
diff --git a/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts b/bcs-services/bcs-bscp/ui/src/i18n/en-us.ts
@@ -781,7 +781,7 @@ export default {
   初始化配置信息: 'Initialize configuration information',
   复制命令: 'Command Copy',
   '仅支持字母，数字，\'-\'，\'_\'，\'.\' 及 \'/\' 且需以字母数字开头和结尾': 'Only supports letters, numbers, \'-\', \'_\', \'.\' and \'/\' characters, and must start and end with a letter or number',
-  '需以字母数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字': 'Must start and end with a letter or number, and may include \'-\', \'_\', \'.\', and alphanumeric characters',
+  '需以字母、数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字及负数': 'Must start and end with a letter or number, can include \'-\', \'_\', \'.\', and alphanumeric characters, as well as negative numbers',
 
   // 公共组件
   页面不存在: 'Page does not exist',

diff --git a/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts b/bcs-services/bcs-bscp/ui/src/i18n/zh-cn.ts
@@ -787,7 +787,7 @@ export default {
   初始化配置信息: '初始化配置信息',
   复制命令: '复制命令',
   '仅支持字母，数字，\'-\'，\'_\'，\'.\' 及 \'/\' 且需以字母数字开头和结尾': '仅支持字母，数字，\'-\'，\'_\'，\'.\' 及 \'/\' 且需以字母数字开头和结尾',
-  '需以字母数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字': '需以字母数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字',
+  '需以字母、数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字及负数': '需以字母、数字开头和结尾，可包含 \'-\'，\'_\'，\'.\' 和字母数字及负数',
 
   // 公共组件
   页面不存在: '页面不存在',

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue b/bcs-services/bcs-bscp/ui/src/views/space/client/example/components/add-label.vue
@@ -30,7 +30,7 @@
         v-model.trim="item.value"
         @blur="validateValue(index)" />
       <span v-show="showErrorValueValidation[index]" class="error-msg is--value">
-        {{ $t("需以字母数字开头和结尾，可包含 '-'，'_'，'.' 和字母数字") }}
+        {{ $t("需以字母、数字开头和结尾，可包含 '-'，'_'，'.' 和字母数字及负数") }}
       </span>
       <div class="label-item-minus" @click="deleteItem(index)"></div>
     </div>
@@ -60,21 +60,25 @@
   const isAllValid = () => {
     let allValid = true;
     labelArr.value.forEach((item, index) => {
-      validateKey(index);
+      // 批量检测时，展示先校验失败的错误信息
+      keyValidateReg.test(item.key) ? validateValue(index) : validateKey(index);
     });
     allValid = !showErrorKeyValidation.value.includes(true) && !showErrorValueValidation.value.includes(true);
     return allValid;
   };
   // 验证key
   const validateKey = (index: number) => {
     showErrorKeyValidation.value[index] = !keyValidateReg.test(labelArr.value[index].key);
-    validateValue(index);
+    if (showErrorValueValidation.value[index]) {
+      showErrorValueValidation.value[index] = false;
+    }
   };
   // 验证value
   const validateValue = (index: number) => {
-    // 只在key验证通过才显示value校验结果。如果value校验失败时去改key值，并且key值改变后也校验失败，只展示key的校验结果
-    showErrorValueValidation.value[index] =
-      keyValidateReg.test(labelArr.value[index].key) && !valueValidateReg.test(labelArr.value[index].value);
+    showErrorValueValidation.value[index] = !valueValidateReg.test(labelArr.value[index].value);
+    if (showErrorKeyValidation.value[index]) {
+      showErrorKeyValidation.value[index] = false;
+    }
   };
   // 添加项目
   const addItem = () => {

diff --git a/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue b/bcs-services/bcs-bscp/ui/src/views/space/groups/components/group-edit-form.vue
@@ -39,16 +39,17 @@
         </span>
       </template>
       <div v-for="(rule, index) in formData.rules" class="rule-config" :key="index">
-        <bk-input
-          v-model="rule.key"
-          style="width: 174px"
-          placeholder="key"
-          :class="{ 'is-error': showErrorKeyValidation[index] }"
-          @change="ruleChange"
-          @blur="validateKey(index)"></bk-input>
-        <span v-show="showErrorKeyValidation[index]" class="error-msg">
-          {{ $t("仅支持字母，数字，'-'，'_'，'.' 及 '/' 且需以字母数字开头和结尾") }}
-        </span>
+        <div style="max-width: 174px; min-width: 174px">
+          <bk-input
+            v-model="rule.key"
+            placeholder="key"
+            :class="{ 'is-error': showErrorKeyValidation[index] }"
+            @change="ruleChange"
+            @blur="validateKey(index)"></bk-input>
+          <div v-show="showErrorKeyValidation[index]" class="error-msg is--key">
+            {{ $t("仅支持字母，数字，'-'，'_'，'.' 及 '/' 且需以字母数字开头和结尾") }}
+          </div>
+        </div>
         <bk-select
           :model-value="rule.op"
           style="width: 82px"
@@ -68,7 +69,8 @@
             :allow-auto-match="true"
             :list="[]"
             placeholder="value"
-            @change="validateValue(index)">
+            @change="validateValue(index)"
+            @blur="validateValue(index)">
           </bk-tag-input>
           <bk-input
             v-else
@@ -79,9 +81,9 @@
             @change="() => (['gt', 'ge', 'lt', 'le'].includes(rule.op) ? validateValue(index) : ruleChange)"
             @blur="validateValue(index)">
           </bk-input>
-          <span v-show="showErrorValueValidation[index]" class="error-msg is--value">
-            {{ $t("需以字母数字开头和结尾，可包含 '-'，'_'，'.' 和字母数字") }}
-          </span>
+          <div v-show="showErrorValueValidation[index]" class="error-msg is--value">
+            {{ $t("需以字母、数字开头和结尾，可包含 '-'，'_'，'.' 和字母数字及负数") }}
+          </div>
         </div>
         <div class="action-btns">
           <i
@@ -256,7 +258,8 @@
     formData.value.rules.forEach((item, index) => {
       const { op } = item;
       if (op === '') return (allValid = false);
-      validateKey(index);
+      // 批量检测时，展示先校验失败的错误信息
+      keyValidateReg.test(item.key) ? validateValue(index) : validateKey(index);
     });
     allValid = !showErrorKeyValidation.value.includes(true) && !showErrorValueValidation.value.includes(true);
     return allValid;
@@ -265,21 +268,23 @@
   // 验证key
   const validateKey = (index: number) => {
     showErrorKeyValidation.value[index] = !keyValidateReg.test(formData.value.rules[index].key);
-    validateValue(index);
+    if (showErrorValueValidation.value[index]) {
+      showErrorValueValidation.value[index] = false;
+    }
   };
   // 验证value
   const validateValue = (index: number) => {
-    // 只在key验证通过才显示value校验结果。如果value校验失败时去改key值，并且key值改变后也校验失败，只展示key的校验结果
     if (Array.isArray(formData.value.rules[index].value)) {
-      const valueArrValidation = (formData.value.rules[index].value as string[]).every((item: string) =>
-        valueValidateReg.test(item),
-      );
+      const valueArrValidation = (formData.value.rules[index].value as string[]).every((item: string) => {
+        return valueValidateReg.test(item);
+      });
       showErrorValueValidation.value[index] =
-        keyValidateReg.test(formData.value.rules[index].key) && !valueArrValidation;
+        !valueArrValidation || !((formData.value.rules[index].value as string[]).length > 0);
     } else {
-      showErrorValueValidation.value[index] =
-        keyValidateReg.test(formData.value.rules[index].key) &&
-        !valueValidateReg.test(`${formData.value.rules[index].value}`);
+      showErrorValueValidation.value[index] = !valueValidateReg.test(`${formData.value.rules[index].value}`);
+    }
+    if (showErrorKeyValidation.value[index]) {
+      showErrorKeyValidation.value[index] = false;
     }
     change();
   };
@@ -308,7 +313,7 @@
   .rule-config {
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: space-between;
     position: relative;
     margin-top: 15px;
@@ -334,9 +339,12 @@
     align-items: center;
     justify-content: space-between;
     width: 38px;
+    height: 32px;
     font-size: 14px;
     color: #979ba5;
-    cursor: pointer;
+    .bk-bscp-icon {
+      cursor: pointer;
+    }
     i:hover {
       color: #3a84ff;
     }
@@ -363,16 +371,14 @@
     }
   }
   .error-msg {
-    position: absolute;
-    left: 0;
-    bottom: -14px;
     font-size: 12px;
-    line-height: 1;
-    white-space: nowrap;
+    line-height: 14px;
+    white-space: normal;
+    word-wrap: break-word;
     color: #ea3636;
     animation: form-error-appear-animation 0.15s;
-    &.is--value {
-      left: 45.5%;
+    &.is--key {
+      white-space: nowrap;
     }
   }
   @keyframes form-error-appear-animation {