From 121b620cf22fb6b08f6ce7cc8ccc40a41ed8edb1 Mon Sep 17 00:00:00 2001
From: hLinx <327159425@qq.com>
Date: Thu, 12 Dec 2024 11:59:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=B7=A5=E5=85=B7=E7=AE=B1?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=B5=84=E6=BA=90=E6=B1=A0=E5=8D=8F=E8=AE=AE?=
 =?UTF-8?q?=E5=8F=98=E6=9B=B4=5Feditable=5Ftable=20#8076?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/editable-table/Column.vue  | 27 +++++++++++-
 .../src/components/editable-table/Index.vue   |  1 +
 .../components/editable-table/edit/Input.vue  |  2 -
 dbm-ui/frontend/src/demo/Index.vue            | 42 ++++++++-----------
 4 files changed, 45 insertions(+), 27 deletions(-)

diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
index e85fd9fbb2..9158233dd1 100644
--- 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
index 959d60c138..ccc8094292 100644
--- 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
index a54a6b1474..b1820c1ec5 100644
--- 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
index 1d6efb0628..ca63ccceda 100644
--- 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');
       })