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

# Reviewed, transaction id: 28902
TencentBlueKing · Jan 9, 2025 · 7f4ef21 · 7f4ef21
1 parent f8081d2
commit 7f4ef21
Show file tree

Hide file tree

Showing 13 changed files with 226 additions and 86 deletions.
diff --git a/dbm-ui/frontend/src/components/editable-table/Column.vue b/dbm-ui/frontend/src/components/editable-table/Column.vue
@@ -19,7 +19,10 @@
         content: disabledTips,
         disabled: !disabledTips,
       }"
-      class="bk-editable-table-field-cell">
+      class="bk-editable-table-field-cell"
+      :style="{
+        width: `${tableContext?.columnSizeConfig.value[columnKey]?.renderWidth}px`,
+      }">
       <slot />
 
       <div
@@ -82,6 +85,7 @@
     description?: string;
     loading?: boolean;
     appendRules?: IRule[];
+    resizeable?: boolean;
   }
 
   interface Slots {
@@ -98,8 +102,6 @@
     getRowIndex: () => number;
   }
 
-  const hasOwn = (obj: Record<string, any>, key: string) => Object.prototype.hasOwnProperty.call(obj, key);
-
   export interface IContext {
     instance: ComponentInternalInstance;
     el: HTMLElement;
@@ -119,7 +121,22 @@
   }> = Symbol('EditableTableColumnKey');
 </script>
 <script setup lang="ts">
-  const props = defineProps<Props>();
+  const props = withDefaults(defineProps<Props>(), {
+    field: undefined,
+    rowspan: undefined,
+    width: undefined,
+    minWidth: undefined,
+    maxWidth: undefined,
+    rules: undefined,
+    max: undefined,
+    min: undefined,
+    maxlength: undefined,
+    fixed: undefined,
+    disabledMethod: undefined,
+    description: undefined,
+    appendRules: undefined,
+    resizeable: true,
+  });
   const slots = defineSlots<Slots>();
 
   const tableContext = inject(tableInjectKey);
@@ -129,7 +146,7 @@
   const columnKey = `bk-editable-table-column-${rowContext?.getColumnIndex()}`;
 
   interface IFinalRule {
-    validator: (value: any) => Promise<boolean | string> | boolean | string;
+    validator: (value: any, rowData?: Record<string, any>) => Promise<boolean | string> | boolean | string;
     message: string | (() => string);
     trigger: string;
   }
@@ -324,7 +341,7 @@
     }
     let rules: IRule[] = [];
     // 继承 table 的验证规则
-    if (tableContext && tableContext.props.rules && hasOwn(tableContext.props.rules, props.field)) {
+    if (tableContext && tableContext.props.rules && _.has(tableContext.props.rules, props.field)) {
       rules = tableContext.props.rules[props.field];
     }
     // column 自己的 rules 规则优先级更高
@@ -343,7 +360,7 @@
 
     const doValidate = (() => {
       let stepIndex = -1;
-      return (finalRuleList: IFinalRule[], value: any): Promise<boolean> => {
+      return (finalRuleList: IFinalRule[], value: any, rowDataValue: Record<string, any>): Promise<boolean> => {
         stepIndex = stepIndex + 1;
         // 验证通过
         if (stepIndex >= finalRuleList.length) {
@@ -353,10 +370,10 @@
         const rule = finalRuleList[stepIndex];
 
         return Promise.resolve().then(() => {
-          const result = rule.validator(value);
+          const result = rule.validator(value, rowDataValue);
           // 同步验证通过下一步
           if (result === true) {
-            return doValidate(finalRuleList, value);
+            return doValidate(finalRuleList, value, rowDataValue);
           }
           // Promise异步处理验证结果
           return Promise.resolve(result)
@@ -370,7 +387,7 @@
               }
             })
             .then(
-              () => doValidate(finalRuleList, value),
+              () => doValidate(finalRuleList, value, rowDataValue),
               (errorMessage: string) => {
                 validateState.isError = true;
                 validateState.errorMessage = errorMessage;
@@ -422,9 +439,10 @@
         // 合并规则属性配置
         const finalRuleList = getTriggerRules(mergeRules(rules, getRulesFromProps(props)), trigger);
 
-        const value = _.get(tableContext.props.model[rowContext!.getRowIndex()], props.field || '_');
+        const rowDataValue = tableContext.props.model[rowContext!.getRowIndex()];
+        const value = _.get(rowDataValue, props.field || '_');
 
-        return resolve(doValidate(finalRuleList, value));
+        return resolve(doValidate(finalRuleList, value, rowDataValue));
       }, delay);
     });
   };

diff --git a/dbm-ui/frontend/src/components/editable-table/Index.vue b/dbm-ui/frontend/src/components/editable-table/Index.vue
@@ -104,6 +104,7 @@
       emits: Emits;
       fixedRight: Ref<boolean>;
       fixedLeft: Ref<boolean>;
+      columnSizeConfig: Ref<Record<string, { renderWidth: number }>>;
       registerRow: (rowColumnList: IColumnContext[]) => void;
       updateRow: () => void;
       unregisterRow: (rowColumnList: IColumnContext[]) => void;
@@ -253,6 +254,7 @@
     emits,
     fixedLeft,
     fixedRight,
+    columnSizeConfig,
     registerRow,
     updateRow,
     unregisterRow,
@@ -301,7 +303,6 @@
     }
 
     table {
-      width: 100%;
       text-align: left;
       table-layout: fixed;
     }

diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue b/dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue
@@ -9,6 +9,7 @@
           'fixed-right-column': columnItem.props.fixed === 'right',
         }"
         :column="columnItem"
+        :column-size-config="columnSizeConfig"
         :style="{
           width:
             columnSizeConfig[columnItem.key].renderWidth > 0 ? `${columnSizeConfig[columnItem.key].renderWidth}px` : '',

diff --git a/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts b/dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts
@@ -9,6 +9,10 @@ export default defineComponent({
       type: Object as () => IColumnContext,
       required: true,
     },
+    columnSizeConfig: {
+      type: Object as () => Record<string, { renderWidth: number }>,
+      required: true,
+    },
   },
   setup(props) {
     return () => {
@@ -72,6 +76,12 @@ export default defineComponent({
           'div',
           {
             class: 'bk-editable-table-label-cell',
+            style: {
+              width:
+                props.columnSizeConfig[props.column.key].renderWidth > 0
+                  ? `${props.columnSizeConfig[props.column.key].renderWidth - 20}px`
+                  : '',
+            },
           },
           childNode,
         ),

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Block.vue b/dbm-ui/frontend/src/components/editable-table/edit/Block.vue
@@ -33,7 +33,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { nextTick, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
+  import { nextTick, onMounted, onUpdated, ref, useTemplateRef, type VNode, watch } from 'vue';
 
   import useColumn from '../useColumn';
 
@@ -62,6 +62,12 @@
     columnContext?.validate('change');
   });
 
+  const calcPlaceholder = () => {
+    nextTick(() => {
+      isShowPlacehoder.value = !contentRef.value?.innerText;
+    });
+  };
+
   const handleBlur = () => {
     columnContext?.blur();
     columnContext?.validate('blur');
@@ -72,9 +78,11 @@
   };
 
   onUpdated(() => {
-    nextTick(() => {
-      isShowPlacehoder.value = !contentRef.value?.innerText;
-    });
+    calcPlaceholder();
+  });
+
+  onMounted(() => {
+    calcPlaceholder();
   });
 </script>
 <style lang="less">

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/DatePicker.vue
@@ -5,6 +5,7 @@
     clearable
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script lang="ts">
@@ -16,7 +17,7 @@
     disabledDate?: (date: Date | number) => boolean;
   }
 </script>
-<script setup lang="ts" generic="T extends [string, string] | string | Date">
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
   import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
@@ -48,6 +49,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-date-picker {

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue b/dbm-ui/frontend/src/components/editable-table/edit/TagInput.vue
@@ -1,6 +1,7 @@
 <template>
+  <!-- prettier-ignore -->
   <BkTagInput
-    v-model="modelValue"
+    v-model="(modelValue as string[])"
     allow-create
     class="bk-editable-tag-input"
     v-bind="{ ...attrs, ...props }"
@@ -9,30 +10,31 @@
     @blur="handleBlur"
     @focus="handleFocus" />
 </template>
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends string[] | number[] | string | number">
   import { watch } from 'vue';
 
   import useColumn from '../useColumn';
 
   /* eslint-disable vue/no-unused-properties */
-  interface Props {
+  export interface Props {
     placeholder?: string;
     maxData?: number;
   }
 
-  interface Emits {
+  export interface Emits<T> {
     (e: 'blur'): void;
     (e: 'focus'): void;
+    (e: 'change', value: T): void;
   }
 
   const props = defineProps<Props>();
-  const emits = defineEmits<Emits>();
+  const emits = defineEmits<Emits<T>>();
 
   const attrs = useAttrs();
 
   const columnContext = useColumn();
 
-  const modelValue = defineModel<string[]>();
+  const modelValue = defineModel<T>();
 
   watch(modelValue, () => {
     columnContext?.validate('change');

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue b/dbm-ui/frontend/src/components/editable-table/edit/Textarea.vue
@@ -13,6 +13,7 @@
       v-bind="{ ...attrs, ...props }"
       type="textarea"
       @blur="handleBlur"
+      @change="handleChange"
       @focus="handleFocus" />
     <div
       v-if="slots.append"
@@ -37,6 +38,7 @@
   interface Emits {
     (e: 'blur'): void;
     (e: 'focus'): void;
+    (e: 'change', value: string): void;
   }
 
   const props = defineProps<Props>();
@@ -68,6 +70,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: string) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-textarea {

diff --git a/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue b/dbm-ui/frontend/src/components/editable-table/edit/TimePicker.vue
@@ -4,6 +4,7 @@
     class="bk-editable-time-picker"
     v-bind="{ ...attrs, ...props }"
     @blur="handleBlur"
+    @change="handleChange"
     @focus="handleFocus" />
 </template>
 <script lang="ts">
@@ -16,7 +17,7 @@
     disabledDate?: (date: Date | number) => boolean;
   }
 </script>
-<script setup lang="ts" generic="T extends [string, string] | string | Date">
+<script setup lang="ts" generic="T extends [string, string] | [Date, Date] | string | Date">
   import { useAttrs, watch } from 'vue';
 
   import useColumn from '../useColumn';
@@ -48,6 +49,10 @@
     columnContext?.focus();
     emits('focus');
   };
+
+  const handleChange = (value: T) => {
+    emits('change', value);
+  };
 </script>
 <style lang="less">
   .bk-editable-time-picker {