feat(hook): table 组件新增 useTrackTableRow 钩子,实现自动收集行信息

src/components/Table/index.ts

@@ -7,5 +7,6 @@ export * from './src/types/table';
 export * from './src/types/pagination';
 export * from './src/types/tableAction';
 export { useTable } from './src/hooks/useTable';
+export { useTrackTableRow, useTrackTableRowContext } from './src/hooks/useTrackTableRow';
 export type { FormSchema, FormProps } from '@/components/Form/src/types/form';
 export type { EditRecordRow } from './src/components/editable';

src/components/Table/src/BasicTable.vue

@@ -154,6 +154,7 @@
  reload,
  getAutoCreateKey,
  updateTableData,
+ rowKeyToRowMap,
  } = useDataSource(
  getProps,
  {
@@ -319,6 +320,8 @@
  return unref(getBindValues).size as SizeType;
  },
  setCacheColumns,
+ getWrapperElement: () => unref(wrapRef),
+ getRowKeyToRowMap: () => unref(rowKeyToRowMap),
  };
  createTableContext({ ...tableAction, wrapRef, getBindValues });
 

src/components/Table/src/hooks/useDataSource.ts

@@ -10,11 +10,12 @@ import {
  reactive,
  Ref,
  watchEffect,
+ toRaw,
 } from 'vue';
 import { useTimeoutFn } from '@vben/hooks';
 import { buildUUID } from '@/utils/uuid';
 import { isFunction, isBoolean, isObject } from '@/utils/is';
-import { get, cloneDeep, merge } from 'lodash-es';
+import { get, cloneDeep, merge, isString, isNull, toString } from 'lodash-es';
 import { FETCH_SETTING, ROW_KEY, PAGE_SIZE } from '../const';
 import { parseRowKeyValue } from '../helper';
 import type { Key } from 'ant-design-vue/lib/table/interface';
@@ -113,6 +114,46 @@ export function useDataSource(
  return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
  });
 
+ const rowKeyToRowMap = computed(() => {
+ const { rowKey, childrenColumnName = 'children' } = unref(propsRef);
+ const map = new Map<string, Recordable>();
+
+ const traverse = <T extends Recordable = any>(
+ data: T[],
+ callback: (item: T, index: number) => void,
+ ) => {
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i];
+ const hasChildren = item && item[childrenColumnName] && item[childrenColumnName].length > 0;
+ callback && callback(item, i);
+ if (hasChildren) {
+ traverse(item[childrenColumnName], callback);
+ }
+ }
+ };
+
+ traverse(unref(dataSourceRef), (item, index) => {
+ if (unref(getAutoCreateKey)) {
+ const rowKey = item[ROW_KEY];
+ map.set(rowKey, toRaw(item));
+ return;
+ }
+
+ const key = isString(rowKey)
+ ? get(item, rowKey)
+ : isFunction(rowKey)
+ ? rowKey(item, index)
+ : null;
+
+ if (!isNull(key)) {
+ map.set(toString(key), toRaw(item));
+ return;
+ }
+ });
+
+ return map;
+ });
+
  const getDataSourceRef = computed(() => {
  const dataSource = unref(dataSourceRef);
  if (!dataSource || dataSource.length === 0) {
@@ -360,5 +401,6 @@ export function useDataSource(
  insertTableDataRecord,
  findTableDataRecord,
  handleTableChange,
+ rowKeyToRowMap,
  };
 }

src/components/Table/src/hooks/useTable.ts

@@ -168,6 +168,12 @@ export function useTable(tableProps?: Props): [
  scrollTo: (pos: string) => {
  getTableInstance().scrollTo(pos);
  },
+ getRowKeyToRowMap: () => {
+ return getTableInstance().getRowKeyToRowMap();
+ },
+ getWrapperElement: () => {
+ return getTableInstance().getWrapperElement();
+ },
  };
 
  return [register, methods];

src/components/Table/src/hooks/useTableContext.ts

@@ -18,5 +18,5 @@ export function createTableContext(instance: Instance) {
 }
 
 export function useTableContext(): RetInstance {
- return inject(key) as RetInstance;
+ return inject(key, null as any) as RetInstance;
 }

src/components/Table/src/hooks/useTrackTableRow.ts

@@ -0,0 +1,180 @@
+import { useEventListener } from '@vueuse/core';
+import type { TableActionType } from '../types/table';
+import {
+ ref,
+ type ComponentPublicInstance,
+ type ComputedRef,
+ type MaybeRef,
+ unref,
+ computed,
+ toRaw,
+ InjectionKey,
+ provide,
+ inject,
+} from 'vue';
+import { useDesign } from '@/hooks/web/useDesign';
+import { useTableContext } from './useTableContext';
+import { noop } from 'lodash-es';
+
+const rowAttributeKey = 'data-row-key'; // AntDesignVue Table 挂载到 tr 上的属性
+/**
+ * @description 跟踪表格行信息
+ */
+interface UseTrackTableRowOptions {
+ /**
+ * @description 跟踪行信息的触发时机
+ * @default 'click'
+ */
+ trigger?: 'click' | 'hover';
+ /**
+ * @description 跟踪行信息的拦截器，可以返回 false 阻止跟踪，在遇到一些特殊的场景时可能会有用
+ */
+ guard?: (ev: MouseEvent) => boolean | void;
+ /**
+ * @description 是否向下注入行信息，子组件可以使用 useTrackTableRowContext() 直接获取行信息
+ */
+ provide?: boolean;
+}
+
+const triggerToEventNameMap: Record<string, string> = {
+ click: 'click',
+ hover: 'mousemove',
+};
+
+export interface UseTrackTableRowReturn<Row = any> {
+ row: ComputedRef<Row | null>;
+ extend: (data: Partial<Row>) => void;
+}
+
+export function useTrackTableRow<Row extends Record<string, any>>(
+ tableActionRef: MaybeRef<TableActionType | undefined>,
+ options: UseTrackTableRowOptions = {},
+) {
+ const { guard, provide = false, trigger = 'click' } = options;
+
+ const tableContext = useTableContext();
+ const { prefixCls } = useDesign('basic-table');
+
+ const row = ref<Row | null>(null);
+ const extendInfo = ref<Partial<Row>>({});
+
+ function trackRowInfo(ev: MouseEvent) {
+ const shouldTrack = guard?.(ev) ?? true;
+ if (!shouldTrack) return;
+
+ const rowKey = findRowKeyByElement(ev.target);
+ const rowInfo = tryGetRow(rowKey as string);
+ (row as any).value = rowInfo;
+ }
+
+ function getRowKey(target: Element) {
+ return target.getAttribute(rowAttributeKey);
+ }
+
+ function hasRowKey(target: Element) {
+ return !!getRowKey(target);
+ }
+
+ function isRootElement(target: Element) {
+ return target.classList.contains(prefixCls);
+ }
+
+ function findRowKeyByElement(target: EventTarget | null) {
+ const rowKey = null;
+ let current = target as Element;
+ while (current) {
+ if (isRootElement(current)) return null;
+
+ if (hasRowKey(current)) return getRowKey(current);
+
+ current = current.parentElement as Element;
+ }
+ return rowKey;
+ }
+
+ function tryGetRow(rowKey: string) {
+ try {
+ const tableAction = unref(tableActionRef);
+ /**
+ * support useTableContext
+ */
+ const row1 = tableContext?.getRowKeyToRowMap?.().get?.(rowKey as string);
+ /**
+ * support useTable and ref
+ */
+ const row2 = tableAction?.getRowKeyToRowMap?.().get?.(rowKey as string);
+ /**
+ * try guess row1 or row2 not empty
+ */
+ return row1 ?? row2 ?? null;
+ } catch (error) {
+ return null;
+ }
+ }
+
+ function tryGetTableWrapperElement() {
+ try {
+ const tableAction = unref(tableActionRef);
+ /**
+ * support useTableContext
+ */
+ const el1 = tableContext?.getWrapperElement?.();
+ /**
+ * support useTable
+ */
+ const el2 = tableAction?.getWrapperElement?.();
+ /**
+ * support ref
+ */
+ const el3 = (tableAction as any as ComponentPublicInstance)?.$el;
+ /**
+ * try guess el1、el2、el3 not empty
+ */
+ return el1 ?? el2 ?? el3 ?? null;
+ } catch (error) {
+ return null;
+ }
+ }
+
+ useEventListener(
+ computed(tryGetTableWrapperElement),
+ triggerToEventNameMap[trigger],
+ trackRowInfo,
+ { capture: true },
+ );
+
+ function extend(data: Partial<Row>) {
+ extendInfo.value = data as any;
+ }
+
+ const returned: UseTrackTableRowReturn = {
+ row: computed(() => {
+ const rawRow = toRaw(unref(row));
+ if (!rawRow) return null;
+ const rawExtendInfo = toRaw(unref(extendInfo)) as Partial<Row>;
+ return { ...rawRow, ...rawExtendInfo };
+ }) as ComputedRef<Row | null>,
+ extend,
+ };
+
+ if (provide) {
+ createTrackTableRowContext(returned);
+ }
+
+ return returned;
+}
+
+const useTrackTableRowInjectionKey = Symbol(
+ 'track-table-row',
+) as InjectionKey<UseTrackTableRowReturn>;
+
+function createTrackTableRowContext(context: UseTrackTableRowReturn) {
+ return provide(useTrackTableRowInjectionKey, context);
+}
+
+export function useTrackTableRowContext<Row extends Record<string, any>>() {
+ return inject(useTrackTableRowInjectionKey, {
+ row: computed(() => null),
+ extend: noop,
+ }) as UseTrackTableRowReturn<Row>;
+}

src/components/Table/src/types/table.ts

@@ -128,6 +128,8 @@ export interface TableActionType {
  getShowPagination: () => boolean;
  setCacheColumnsByField?: (dataIndex: string | undefined, value: BasicColumn) => void;
  setCacheColumns?: (columns: BasicColumn[]) => void;
+ getRowKeyToRowMap: () => Map<string, Recordable>;
+ getWrapperElement: () => Nullable<HTMLElement>;
 }
 
 export interface FetchSetting {

src/locales/lang/en/routes/demo.json

@@ -174,6 +174,8 @@
  "editRowTable": "Editable row",
  "authColumn": "Auth column",
  "resizeParentHeightTable": "resizeParentHeightTable",
- "vxeTable": "VxeTable"
+ "vxeTable": "VxeTable",
+ "trackTableRow":"autoTrackTableRowInfo",
+ "trackTableRowBindingModal":"trackTableRowBindingModal"
  }
 }

src/locales/lang/zh-CN/routes/demo.json

@@ -173,6 +173,8 @@
  "editRowTable": "可编辑行",
  "authColumn": "权限列",
  "resizeParentHeightTable": "继承父元素高度",
- "vxeTable": "VxeTable"
+ "vxeTable": "VxeTable",
+ "trackTableRow":"自动收集行信息",
+ "trackTableRowBindingModal":"自动收集结合弹窗回填"
  }
 }

src/router/routes/modules/demo/comp.ts

@@ -263,6 +263,22 @@ const comp: AppRouteModule = {
  title: t('routes.demo.table.vxeTable'),
  },
  },
+ {
+ path: 'trackTableRow',
+ name: 'TrackTableRowDemo',
+ component: () => import('@/views/demo/table/TrackTableRow.vue'),
+ meta: {
+ title: t('routes.demo.table.trackTableRow'),
+ },
+ },
+ {
+ path: 'trackTableRowBindingModal',
+ name: 'TrackTableRowBindingModalDemo',
+ component: () => import('@/views/demo/table/TrackTableRowBindingModal.vue'),
+ meta: {
+ title: t('routes.demo.table.trackTableRowBindingModal'),
+ },
+ },
  ],
  },
  {

src/views/demo/table/AccountModal.vue

@@ -0,0 +1,45 @@
+<template>
+ <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
+ <BasicForm @register="registerForm" />
+ </BasicModal>
+</template>
+<script lang="ts" setup>
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicForm, useForm } from '@/components/Form';
+import { accountFormSchema } from '@/views/demo/system/account/account.data';
+import { useTrackTableRowContext } from '@/components/Table';
+import { computed, unref } from 'vue';
+
+defineOptions({ name: 'AccountModal' });
+
+const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
+ labelWidth: 100,
+ baseColProps: { span: 24 },
+ schemas: accountFormSchema,
+ showActionButtonGroup: false,
+ actionColOptions: {
+ span: 23,
+ },
+});
+
+const { row } = useTrackTableRowContext()
+const getTitle = computed(() => `${unref(row) ? '编辑' : '新增'}账号`)
+
+const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
+ resetFields();
+ setModalProps({ confirmLoading: false });
+ setFieldsValue(unref(row) ?? {})
+});
+
+async function handleSubmit() {
+ try {
+ const values = await validate();
+ setModalProps({ confirmLoading: true });
+ // TODO custom api
+ console.log(values);
+ closeModal();
+ } finally {
+ setModalProps({ confirmLoading: false });
+ }
+}
+</script>