feat(frontend): 工具箱支持资源池协议变更_editable_table TencentBlueKing#8076

hLinx · Dec 13, 2024 · 121b620 · 121b620
1 parent 8f44114
commit 121b620
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 27 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -42,6 +42,8 @@
 </template>
 <script lang="ts">
   import { Loading } from 'bkui-vue/lib/icon';
+  import _ from 'lodash';
+  import find from 'lodash/find';
   import get from 'lodash/get';
   import isFunction from 'lodash/isFunction';
   import {
@@ -260,6 +262,7 @@
       if (rule.trigger === trigger) {
         result.push(rule);
       }
+      console.log('getTriggerRules = ', result);
       return result;
     }, [] as IFinalRule[]);
 
@@ -295,6 +298,7 @@
     return result ? '无法操作' : '';
   });
 
+  const triggerQueue: (string | undefined)[] = [];
   const validate = (trigger?: string): Promise<boolean> => {
     // 重新触发验证重置上次的验证状态
     validateState.isError = false;
@@ -379,7 +383,28 @@
         });
       };
     })();
-    return doValidate();
+
+    triggerQueue.push(trigger);
+
+    return new Promise((resolve) => {
+      setTimeout(
+        () => {
+          if (triggerQueue.length < 1) {
+            return resolve(true);
+          }
+          const changeCommand = _.remove(triggerQueue, (item) => item === 'change');
+          if (changeCommand.length > 0) {
+            return resolve(doValidate());
+          }
+
+          if (triggerQueue.length > 0) {
+            triggerQueue.splice(0, triggerQueue.length);
+            return resolve(doValidate());
+          }
+        },
+        Math.max(Number(tableContext.props.validateDelay || 300), 0),
+      );
+    });
   };
 
   provide(EditableTableColumnKey, {

diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -70,6 +70,7 @@
   interface Props {
     model: Record<string, any>[];
     rules?: Record<string, IRule[]>;
+    validateDelay?: number;
   }
 
   interface Emits {

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Input.vue b/dbm-ui/frontend/src/components/editable-table/edit/Input.vue
@@ -37,14 +37,12 @@
 
   watch(modelValue, () => {
     columnContext?.validate('change');
-    console.log('change');
   });
 
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
     emits('blur');
-    console.log('handleBlur');
   };
 
   const handleFocus = () => {

diff --git a/dbm-ui/frontend/src/demo/Index.vue b/dbm-ui/frontend/src/demo/Index.vue
@@ -10,8 +10,7 @@
         field="name"
         fixed="left"
         label="第一列"
-        :min-width="300"
-        :rowspan="5">
+        :min-width="300">
         <EditInput
           v-model="item.name"
           clearable
@@ -20,8 +19,7 @@
       <EditableTableColumn
         field="age"
         label="第二列"
-        :min-width="300"
-        required>
+        :min-width="300">
         <EditSelect v-model="item.age">
           <BkOption
             id="1"
@@ -34,8 +32,7 @@
       <EditableTableColumn
         field="date"
         label="第三列"
-        :min-width="300"
-        required>
+        :min-width="300">
         <EditDatePicker
           v-model="item.date"
           @change="handleChange" />
@@ -113,36 +110,33 @@
   const dataModel = reactive([
     createData(),
     createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
-    createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
+    // createData(),
   ]);
 
   const rules = {
     name: [
       {
         validator: (value: string) => {
-          console.log('name = ', value);
+          console.log('validator name = ', value);
           return Boolean(value);
         },
         message: '错了',
-        trigger: 'blur',
+        trigger: 'change',
       },
     ],
     age: [
       {
-        validator: (value: string) => {
-          console.log('validator', value);
-          return true;
-        },
+        validator: () => false,
         message: '错了没',
         trigger: 'change',
       },
@@ -160,7 +154,7 @@
   const handleSubmit = () => {
     isSubmiting.value = true;
     tableRef
-      .value!.validate()
+      .value!.validateByColumnIndex(0)
       .then(() => {
         console.log('success');
       })