feat(frontend): 新增 editable-table 组件 #8476

dbm-ui/frontend/src/components/editable-table/Row.vue

@@ -0,0 +1,63 @@
+<template>
+  <tr ref="rowRootRef">
+    <slot />
+  </tr>
+</template>
+<script lang="ts">
+  import _ from 'lodash';
+  import { inject, type InjectionKey, onBeforeMount, onMounted, provide } from 'vue';
+
+  import type { IContext as IColumnContext } from './Column.vue';
+  import { tableInjectKey } from './Index.vue';
+
+  export const injectKey: InjectionKey<{
+    registerColumn: (column: IColumnContext) => void;
+    unregisterColumn: (columnKey: string) => void;
+    getColumnIndex: () => number;
+  }> = Symbol.for('bk-editable-table-row');
+</script>
+<script setup lang="ts">
+  const tableContext = inject(tableInjectKey);
+
+  const rowRootRef = ref<HTMLElement>();
+
+  const columnList: IColumnContext[] = [];
+
+  const registerColumn = (column: IColumnContext) => {
+    const index = _.indexOf(rowRootRef.value!.children, column.el);
+    if (index > -1) {
+      columnList.splice(index, 0, column);
+    } else {
+      columnList.push(column);
+    }
+
+    tableContext?.updateRow();
+  };
+
+  const unregisterColumn = (columnKey: string) => {
+    _.remove(columnList, (item) => item.key === columnKey);
+    tableContext?.updateRow();
+  };
+
+  const getColumnIndex = (() => {
+    let columnIndex = 0;
+    return () => {
+      columnIndex = columnIndex + 1;
+      return columnIndex;
+    };
+  })();
+
+  provide(injectKey, {
+    registerColumn,
+    unregisterColumn,
+    getColumnIndex,
+  });
+
+  onMounted(() => {
+    tableContext?.registerRow(columnList);
+  });
+
+  onBeforeMount(() => {
+    tableContext?.unregisterRow(columnList);
+  });
+</script>

dbm-ui/frontend/src/components/editable-table/component/RenderColGroup.vue

@@ -0,0 +1,26 @@
+<template>
+  <colgroup>
+    <col
+      v-for="item in columnList"
+      :key="item.key"
+      :width="columnSizeMap[item.key].renderWidth ? columnSizeMap[item.key].renderWidth : ''" />
+  </colgroup>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../Column.vue';
+
+  interface Props {
+    columnList: IColumnContext[];
+    columnSizeMap: Record<
+      string,
+      {
+        width?: number;
+        minWidth?: number;
+        maxWidth?: number;
+        renderWidth: number;
+      }
+    >;
+  }
+
+  defineProps<Props>();
+</script>

dbm-ui/frontend/src/components/editable-table/component/render-body/Index.vue

@@ -0,0 +1,28 @@
+<template>
+  <tbody>
+    <tr>
+      <RenderCell
+        v-for="(columnItem, index) in columnList"
+        :key="`#${index}}#${columnItem.props.field}`"
+        :column="columnItem" />
+    </tr>
+  </tbody>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../../Column.vue';
+
+  import RenderCell from './render-cell';
+
+  interface Props {
+    columnList: IColumnContext[];
+  }
+
+  defineProps<Props>();
+</script>
+<style lang="less">
+  .bk-editable-table-cell {
+    display: flex;
+    min-height: 40px;
+    align-items: center;
+  }
+</style>

dbm-ui/frontend/src/components/editable-table/component/render-body/render-cell.ts

@@ -0,0 +1,29 @@
+import { defineComponent, h } from 'vue';
+
+import type { IContext as IColumnContext } from '../../Column.vue';
+
+export default defineComponent({
+  name: 'RenderColumnCell',
+  props: {
+    column: {
+      type: Object as () => IColumnContext,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () =>
+      h(
+        'td',
+        {
+          class: 'bk-editable-table-body-column',
+        },
+        h(
+          'div',
+          {
+            class: 'bk-editable-table-cell',
+          },
+          props.column.slots.default(),
+        ),
+      );
+  },
+});

dbm-ui/frontend/src/components/editable-table/component/render-header/Index.vue

@@ -0,0 +1,74 @@
+<template>
+  <thead class="bk-editable-table-header">
+    <tr>
+      <RenderTh
+        v-for="(columnItem, index) in columnList"
+        :key="`#${index}}#${columnItem.key}`"
+        :class="{
+          [`is-column-fixed-${columnItem.props.fixed}`]: columnItem.props.fixed,
+        }"
+        :column="columnItem"
+        :style="{
+          width:
+            columnSizeConfig[columnItem.key].renderWidth > 0 ? `${columnSizeConfig[columnItem.key].renderWidth}px` : '',
+        }" />
+    </tr>
+  </thead>
+</template>
+<script setup lang="ts">
+  import type { IContext as IColumnContext } from '../../Column.vue';
+
+  import RenderTh from './render-th';
+
+  interface Props {
+    columnList: IColumnContext[];
+    columnSizeConfig: Record<string, Record<'renderWidth', number>>;
+  }
+
+  defineProps<Props>();
+</script>
+<style lang="less">
+  .bk-editable-table-header {
+    th.is-required {
+      .bk-editable-table-label-cell {
+        &::after {
+          margin-left: 4px;
+          line-height: 20px;
+          color: #ea3636;
+          content: '*';
+        }
+      }
+    }
+  }
+
+  .bk-editable-table-label-cell {
+    display: flex;
+    min-height: 40px;
+    align-items: center;
+    font-weight: normal;
+    color: #313238;
+  }
+
+  .bk-editable-table-th-prepend {
+    margin-right: 4px;
+  }
+
+  .bk-editable-table-th-text {
+    display: flex;
+    height: 20px;
+    overflow: hidden;
+    line-height: 20px;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    white-space: nowrap;
+  }
+
+  .bk-editable-table-th-text-description {
+    cursor: pointer;
+    border-bottom: 1px dashed #979ba5;
+  }
+
+  .bk-editable-table-th-append {
+    margin-left: 4px;
+  }
+</style>

dbm-ui/frontend/src/components/editable-table/component/render-header/render-th.ts

@@ -0,0 +1,81 @@
+import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+
+import type { IContext as IColumnContext } from '../../Column.vue';
+
+export default defineComponent({
+  name: 'RenderColumnHead',
+  props: {
+    column: {
+      type: Object as () => IColumnContext,
+      required: true,
+    },
+  },
+  setup(props) {
+    return () => {
+      const childNode = [
+        withDirectives(
+          h(
+            'div',
+            {
+              class: {
+                'bk-editable-table-th-text': true,
+                'bk-editable-table-th-text-description': Boolean(props.column.props.description),
+              },
+            },
+            props.column.slots.head ? props.column.slots.head() : props.column.props.label || '',
+          ),
+          [
+            [
+              resolveDirective('bk-tooltips'),
+              {
+                content: props.column.props.description || '',
+                disabled: !props.column.props.description,
+              },
+            ],
+          ],
+        ),
+      ];
+
+      if (!props.column.slots.head && props.column.slots.headPrepend) {
+        childNode.unshift(
+          h(
+            'div',
+            {
+              class: 'bk-editable-table-th-prepend',
+            },
+            props.column.slots.headPrepend(),
+          ),
+        );
+      }
+
+      if (!props.column.slots.head && props.column.slots.headAppend) {
+        childNode.push(
+          h(
+            'div',
+            {
+              class: 'bk-editable-table-th-append',
+            },
+            props.column.slots.headAppend(),
+          ),
+        );
+      }
+      return h(
+        'th',
+        {
+          class: {
+            'bk-editable-table-header-column': true,
+            'is-required': props.column.props.required,
+          },
+          'data-name': props.column.key,
+        },
+        h(
+          'div',
+          {
+            class: 'bk-editable-table-label-cell',
+          },
+          childNode,
+        ),
+      );
+    };
+  },
+});