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

TencentBlueKing · Dec 15, 2024 · 3e7d000 · 3e7d000
1 parent 08d840d
commit 3e7d000
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 145 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -4,11 +4,13 @@
     ref="rootRef"
     class="bk-editable-table-body-column"
     :class="{
+      [`fixed-${fixed}-column`]: fixed,
       'is-focused': isFocused,
       'is-error': validateState.isError,
       'is-disabled': Boolean(disabledTips),
-      [`is-column-fixed-${fixed}`]: fixed,
       'is-previous-sibling-rowspan': isPreviousSiblingRowspan,
+      'is-fixed':
+        (fixed === 'left' && tableContext?.fixedLeft.value) || (fixed === 'right' && tableContext?.fixedRight.value),
     }"
     :data-name="columnKey"
     :rowspan="rowspan">
@@ -402,24 +404,24 @@
     }
 
     return new Promise((resolve, reject) => {
-      const delay = Math.max(Number(tableContext.props.validateDelay || 200), 0);
+      const delay = Math.max(Number(tableContext.props.validateDelay || 200), 200);
       setTimeout(() => {
         if (trigger === undefined) {
-          if (triggerQueue.length > 1) {
-            triggerQueue.pop();
+          triggerQueue.pop();
+          if (triggerQueue.length > 0) {
             return reject(false);
           }
         }
+
         // 处理 change 和 blur 触发器
         if (trigger === 'change' || trigger === 'blur') {
           const latestQueue = trigger === 'change' ? triggerChangeQueue : triggerBlurQueue;
-          if (triggerQueue.length > 0 || latestQueue.length > 1) {
-            latestQueue.pop();
-            return resolve(true);
-          }
           latestQueue.pop();
+          if (triggerQueue.length > 0 || latestQueue.length > 0) {
+            return reject(false);
+          }
         }
-        triggerQueue.pop();
+
         return resolve(doValidate());
       }, delay);
     });
@@ -490,16 +492,18 @@
   @error-z-index: 101;
   @fixed-error-z-index: 121;
 
-  .bk-editable-table {
-    td.bk-editable-table-body-column {
-      &.is-focused {
-        z-index: @focus-z-index;
+  @keyframes editable-table-column-loading {
+    0% {
+      transform: rotateZ(0);
+    }
 
-        &::before {
-          border-color: #3a84ff;
-        }
-      }
+    100% {
+      transform: rotateZ(360deg);
+    }
+  }
 
+  .bk-editable-table {
+    td.bk-editable-table-body-column {
       &.is-disabled {
         .bk-editable-table-field-cell {
           &::after {
@@ -526,21 +530,28 @@
         }
       }
 
-      &.is-previous-sibling-rowspan {
+      &.is-focused {
+        z-index: @focus-z-index;
+
         &::before {
-          left: -1px;
+          border-color: #3a84ff;
         }
       }
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
-        &.is-focused {
-          z-index: @fixed-focus-z-index;
+      &.is-previous-sibling-rowspan {
+        &::before {
+          left: -1px;
         }
+      }
 
+      &.is-fixed {
         &.is-error {
           z-index: @fixed-error-z-index;
         }
+
+        &.is-focused {
+          z-index: @fixed-focus-z-index;
+        }
       }
     }
   }
@@ -566,16 +577,6 @@
     transform: translateY(-50%);
   }
 
-  @keyframes editable-table-column-loading {
-    0% {
-      transform: rotateZ(0);
-    }
-
-    100% {
-      transform: rotateZ(360deg);
-    }
-  }
-
   .bk-editable-table-column-loading {
     position: absolute;
     z-index: 1;

diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -49,7 +49,16 @@
 </template>
 <script lang="ts">
   import _ from 'lodash';
-  import { type ComponentInternalInstance, type InjectionKey, provide, ref, shallowRef, type VNode, watch } from 'vue';
+  import {
+    type ComponentInternalInstance,
+    type InjectionKey,
+    provide,
+    type Ref,
+    ref,
+    shallowRef,
+    type VNode,
+    watch,
+  } from 'vue';
 
   import Column, { type IContext as IColumnContext } from './Column.vue';
   import RenderHeader from './component/render-header/Index.vue';
@@ -65,40 +74,45 @@
   import Row from './Row.vue';
   import { type IRule } from './types';
   import useColumn from './useColumn';
+  import useTable from './useTable';
 
   /* eslint-disable vue/no-unused-properties */
-  interface Props {
+  export interface Props {
     model: Record<string, any>[];
     rules?: Record<string, IRule[]>;
     validateDelay?: number;
   }
 
-  interface Emits {
+  export interface Emits {
     (e: 'validate', property: string, result: boolean, message: string): boolean;
   }
 
   interface Slots {
     default: () => VNode;
   }
 
-  interface Expose {
+  export interface Expose {
     validate: () => Promise<boolean>;
     validateByRowIndex: (row: number | number[]) => Promise<boolean>;
     validateByColumnIndex: (row: number | number[]) => Promise<boolean>;
     validateByField: (row: string | string[]) => Promise<boolean>;
   }
 
-  export const tableInjectKey: InjectionKey<{
-    props: Props;
-    emits: Emits;
-    registerRow: (rowColumnList: IColumnContext[]) => void;
-    updateRow: () => void;
-    unregisterRow: (rowColumnList: IColumnContext[]) => void;
-    getAllColumnList: () => IColumnContext[][];
-    getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
-  }> = Symbol.for('bk-editable-table');
-
-  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn };
+  export const tableInjectKey: InjectionKey<
+    {
+      props: Props;
+      emits: Emits;
+      fixedRight: Ref<boolean>;
+      fixedLeft: Ref<boolean>;
+      registerRow: (rowColumnList: IColumnContext[]) => void;
+      updateRow: () => void;
+      unregisterRow: (rowColumnList: IColumnContext[]) => void;
+      getAllColumnList: () => IColumnContext[][];
+      getColumnRelateRowIndexByInstance: (columnInstance: ComponentInternalInstance) => number;
+    } & Expose
+  > = Symbol.for('bk-editable-table');
+
+  export { Block, Column, DatePicker, Input, Row, Select, TagInput, Textarea, TimePicker, useColumn, useTable };
 </script>
 <script setup lang="ts">
   const props = defineProps<Props>();
@@ -122,7 +136,7 @@
   const isShowScrollX = ref(true);
 
   const { handleMouseDown, handleMouseMove, columnSizeConfig } = useResize(tableRef, resizePlaceholderRef, columnList);
-  const { leftFixedStyles, rightFixedStyles, initalScroll } = useScroll(tableRef);
+  const { leftFixedStyles, rightFixedStyles, initalScroll, fixedLeft, fixedRight } = useScroll(tableRef);
 
   watch(
     columnSizeConfig,
@@ -164,16 +178,6 @@
       _.some(rowColumnList, (column) => column.instance === columnInstance),
     );
 
-  provide(tableInjectKey, {
-    props,
-    emits,
-    registerRow,
-    updateRow,
-    unregisterRow,
-    getAllColumnList: () => rowList.value,
-    getColumnRelateRowIndexByInstance,
-  });
-
   const handleScrollX = _.throttle((event: Event) => {
     tableRef.value!.scrollLeft = (event.target as Element)!.scrollLeft;
   }, 30);
@@ -183,60 +187,80 @@
     tableRef.value?.click();
   }, 30);
 
-  defineExpose<Expose>({
-    validate() {
-      return Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
-        () => true,
-        () => false,
-      );
-    },
-    validateByRowIndex(rowIndex: number | number[]) {
-      const rowIndexList = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
-
-      const columnList = rowIndexList.reduce<IColumnContext[]>((result, index) => {
-        result.push(...rowList.value[index]);
-        return result;
-      }, []);
-
-      return Promise.all(columnList.map((column) => column.validate())).then(
-        () => true,
-        () => false,
-      );
-    },
-    validateByColumnIndex(columnIndex: number | number[]) {
-      const columnIndexList = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
+  const validate = () =>
+    Promise.all(_.flatten(rowList.value).map((column) => column.validate())).then(
+      () => true,
+      () => false,
+    );
+  const validateByRowIndex = (rowIndex: number | number[]) => {
+    const rowIndexList = Array.isArray(rowIndex) ? rowIndex : [rowIndex];
 
-      const columnList = rowList.value.reduce((result, rowItem) => {
-        columnIndexList.forEach((index) => {
-          result.push(rowItem[index]);
-        });
-        return result;
-      }, []);
+    const columnList = rowIndexList.reduce<IColumnContext[]>((result, index) => {
+      result.push(...rowList.value[index]);
+      return result;
+    }, []);
 
-      return Promise.all(columnList.map((column) => column.validate())).then(
-        () => true,
-        () => false,
-      );
-    },
-    validateByField(field: string | string[]) {
-      const fieldList = Array.isArray(field) ? field : [field];
-
-      const columnList = rowList.value.reduce((result, rowItem) => {
-        fieldList.forEach((field) => {
-          rowItem.forEach((column) => {
-            if (column.props.field && column.props.field === field) {
-              result.push(column);
-            }
-          });
+    return Promise.all(columnList.map((column) => column.validate())).then(
+      () => true,
+      () => false,
+    );
+  };
+  const validateByColumnIndex = (columnIndex: number | number[]) => {
+    const columnIndexList = Array.isArray(columnIndex) ? columnIndex : [columnIndex];
+
+    const columnList = rowList.value.reduce((result, rowItem) => {
+      columnIndexList.forEach((index) => {
+        result.push(rowItem[index]);
+      });
+      return result;
+    }, []);
+
+    return Promise.all(columnList.map((column) => column.validate())).then(
+      () => true,
+      () => false,
+    );
+  };
+  const validateByField = (field: string | string[]) => {
+    const fieldList = Array.isArray(field) ? field : [field];
+
+    const columnList = rowList.value.reduce((result, rowItem) => {
+      fieldList.forEach((field) => {
+        rowItem.forEach((column) => {
+          if (column.props.field && column.props.field === field) {
+            result.push(column);
+          }
         });
-        return result;
-      }, []);
+      });
+      return result;
+    }, []);
 
-      return Promise.all(columnList.map((column) => column.validate())).then(
-        () => true,
-        () => false,
-      );
-    },
+    return Promise.all(columnList.map((column) => column.validate())).then(
+      () => true,
+      () => false,
+    );
+  };
+
+  provide(tableInjectKey, {
+    props,
+    emits,
+    fixedLeft,
+    fixedRight,
+    registerRow,
+    updateRow,
+    unregisterRow,
+    getAllColumnList: () => rowList.value,
+    getColumnRelateRowIndexByInstance,
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
+  });
+
+  defineExpose<Expose>({
+    validate,
+    validateByRowIndex,
+    validateByColumnIndex,
+    validateByField,
   });
 </script>
 <style lang="less">
@@ -306,12 +330,12 @@
         }
       }
 
-      &.is-column-fixed-left {
+      &.fixed-left-column {
         position: sticky;
         left: 0;
       }
 
-      &.is-column-fixed-right {
+      &.fixed-right-column {
         position: sticky;
         right: 0;
       }
@@ -322,8 +346,8 @@
       color: #313238;
       background-color: #fafbfd;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.fixed-left-column,
+      &.fixed-right-column {
         z-index: 9;
         background-color: #fafbfd;
       }
@@ -336,8 +360,7 @@
     td {
       padding: 0;
 
-      &.is-column-fixed-left,
-      &.is-column-fixed-right {
+      &.is-fixed {
         z-index: @fixed-column-z-index;
         background: #fff;
       }