@qin-ui/antd-vue-pro 2.5.2 → 2.5.3

package/src/components/form/components/index.ts

@@ -3,12 +3,12 @@ import type {
   ComponentExposed,
 } from 'vue-component-type-helpers';
 import ProForm from './ProForm/index.vue';
-import BaseFormItem from './BaseFormItem/index.vue';
+import BaseFormItems from './BaseFormItems/index.vue';
 
 export { default as BaseField } from './BaseField/index.vue';
 export { default as ContainerFragment } from './ContainerFragment/index.vue';
 export { default as SlotComponent } from './SlotComponent/index.vue';
-export { ProForm, BaseFormItem };
+export { ProForm, BaseFormItems };
 
 // instance
 /** ProForm 的组件实例类型，用于 `ref` 标注与 `defineExpose` 访问 */
@@ -16,7 +16,7 @@ export type ProFormInstance = ComponentExposed<typeof ProForm>;
 /** ProForm 的组件属性类型 */
 export type ProFormProps = ComponentProps<typeof ProForm>;
 
-/** BaseFormItem 的组件实例类型 */
-export type ProFormItemInstance = ComponentExposed<typeof BaseFormItem>;
-/** BaseFormItem 的组件属性类型 */
-export type ProFormItemProps = ComponentProps<typeof BaseFormItem>;
+/** BaseFormItems 的组件实例类型 */
+export type ProFormItemsInstance = ComponentExposed<typeof BaseFormItems>;
+/** BaseFormItems 的组件属性类型 */
+export type ProFormItemsProps = ComponentProps<typeof BaseFormItems>;

package/src/components/form/hooks/useGroupFieldAttrs.ts

@@ -1,5 +1,11 @@
-import { computed, inject, mergeProps, toValue, type ComputedRef } from 'vue';
-import { getFieldKey } from '../utils/fieldKey';
+import {
+  computed,
+  inject,
+  mergeProps,
+  toValue,
+  type ComputedRef,
+  type MaybeRefOrGetter,
+} from 'vue';
 import {
   formItemProps,
   gridItemProps,
@@ -35,16 +41,102 @@ export interface GroupedField {
   formItemContainer?: Base['formItemContainer'];
   /** 字段原始对象，供实例登记与访问器挂载使用 */
   rawField: Field;
-  /** 渲染 key，取自字段对象身份 */
-  renderKey: string | number;
 }
 
+/** 将单个字段配置拆分为 grid / formItem / component / slots 分组 */
+const groupField = (
+  field: Field,
+  rawInject: Record<string, any>
+): GroupedField => {
+  let gridItemProps: Record<string, any> = {};
+  let formItemProps: Record<string, any> = {};
+  const componentProps: Record<string, any> = { slots: {} };
+  const formItemSlots: Record<string, any> = {};
+
+  if (isPlainObject(field)) {
+    // prettier-ignore
+    const { path: _path, name: _name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } =
+      field as any;
+
+    // prettier-ignore
+    const { class: injectClassName, style: injectStyle, span: injectSpan, xs, sm, md, lg, xl, xxl, formItemContainer: injectFormItemContainer, ...injectRest } = rawInject;
+
+    /*
+     * 字段显式指定 span 时整体接管栅格，不再叠加注入的响应式断点；
+     * 未指定 span 时使用注入的断点配置
+     */
+    const initGridItemProps =
+      span || span === 0
+        ? { span }
+        : { xs, sm, md, lg, xl, xxl, span: injectSpan };
+
+    // 分组字段未指定 span 时整行渲染（span 兜底 24），注入的响应式断点保持生效
+    gridItemProps = fields
+      ? { ...initGridItemProps, span: span ?? 24 }
+      : initGridItemProps;
+    // 字段级容器优先，回退注入级配置
+    const container = formItemContainer ?? injectFormItemContainer;
+    formItemProps = mergeProps(
+      injectRest,
+      { class: injectClassName, style: injectStyle },
+      { class: toValue(formItemClass), style: toValue(formItemStyle) },
+      formItemDataAttrs
+    );
+
+    Object.keys(rest).forEach(k => {
+      if (gridItemPropKeySet.has(k)) {
+        gridItemProps[k] = rest[k];
+      } else if (formItemPropKeySet.has(k)) {
+        formItemProps[k] = rest[k];
+      } else {
+        componentProps[k] = rest[k];
+      }
+    });
+
+    Object.assign(componentProps, componentDataAttrs);
+    Object.keys(slots).forEach(k => {
+      if (formItemSlotKeySet.has(k)) {
+        formItemSlots[k] = slots[k];
+      } else {
+        componentProps.slots[k] = slots[k];
+      }
+    });
+
+    // label 插槽与字段 label 同时存在时由插槽渲染，剥离 label 属性
+    if (formItemSlots.label && formItemProps.label !== undefined) {
+      delete formItemProps.label;
+    }
+
+    return {
+      path: resolveFieldIdentity(field),
+      gridItemProps: gridItemProps as GridItemProps,
+      formItemProps: formItemProps as any,
+      formItemSlots,
+      componentProps,
+      formItemContainer: container,
+      rawField: field,
+    };
+  }
+
+  return {
+    path: resolveFieldIdentity(field),
+    gridItemProps: gridItemProps as GridItemProps,
+    formItemProps: formItemProps as any,
+    formItemSlots,
+    componentProps,
+    rawField: field,
+  };
+};
+
 /**
  * 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
  *
  * @description
  * 1. 响应式集成 ProComponentProvider 的 `pro-form-item` 全局变量配置；
  * 2. 剥离 `extraProps`（用户自定义字段标识袋）：保留在字段原始对象上供业务层存取，渲染层经解构剥离，不落入 componentProps 透传。
+ *
+ * @param {ComputedRef<Field[]>} validFields - 已过滤隐藏字段的字段配置数组
+ * @returns 字段渲染分组数组
  */
 export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
   const config = INJECT_CONFIG['pro-form-item'];
@@ -52,89 +144,23 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
 
   return computed<GroupedField[]>(() => {
     const rawInject = toValue(injectFormItemProps) || {};
-    return validFields.value.map(field => {
-      let gridItemProps: Record<string, any> = {};
-      let formItemProps: Record<string, any> = {};
-      const componentProps: Record<string, any> = { slots: {} };
-      const formItemSlots: Record<string, any> = {};
-
-      if (isPlainObject(field)) {
-        // prettier-ignore
-        const { path: _path, name: _name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } =
-          field as any;
-
-        // prettier-ignore
-        const { class: injectClassName, style: injectStyle, span: injectSpan, xs, sm, md, lg, xl, xxl, formItemContainer: injectFormItemContainer, ...injectRest } = rawInject;
-
-        /*
-         * 字段显式指定 span 时整体接管栅格，不再叠加注入的响应式断点；
-         * 未指定 span 时使用注入的断点配置
-         */
-        const initGridItemProps =
-          span || span === 0
-            ? { span }
-            : { xs, sm, md, lg, xl, xxl, span: injectSpan };
-
-        // 分组字段未指定 span 时整行渲染（span 兜底 24），注入的响应式断点保持生效
-        gridItemProps = fields
-          ? { ...initGridItemProps, span: span ?? 24 }
-          : initGridItemProps;
-        // 字段级容器优先，回退注入级配置
-        const container = formItemContainer ?? injectFormItemContainer;
-        formItemProps = mergeProps(
-          injectRest,
-          { class: injectClassName, style: injectStyle },
-          { class: toValue(formItemClass), style: toValue(formItemStyle) },
-          formItemDataAttrs
-        );
-
-        Object.keys(rest).forEach(k => {
-          if (gridItemPropKeySet.has(k)) {
-            gridItemProps[k] = rest[k];
-          } else if (formItemPropKeySet.has(k)) {
-            formItemProps[k] = rest[k];
-          } else {
-            componentProps[k] = rest[k];
-          }
-        });
-
-        Object.assign(componentProps, componentDataAttrs);
-        Object.keys(slots).forEach(k => {
-          if (formItemSlotKeySet.has(k)) {
-            formItemSlots[k] = slots[k];
-          } else {
-            componentProps.slots[k] = slots[k];
-          }
-        });
-
-        // label 插槽与字段 label 同时存在时由插槽渲染，剥离 label 属性
-        if (formItemSlots.label && formItemProps.label !== undefined) {
-          delete formItemProps.label;
-        }
-
-        const raw = resolveFieldIdentity(field);
-        return {
-          path: raw,
-          gridItemProps: gridItemProps as GridItemProps,
-          formItemProps: formItemProps as any,
-          formItemSlots,
-          componentProps,
-          formItemContainer: container,
-          rawField: field,
-          renderKey: getFieldKey(field),
-        };
-      }
-
-      const raw = resolveFieldIdentity(field);
-      return {
-        path: raw,
-        gridItemProps: gridItemProps as GridItemProps,
-        formItemProps: formItemProps as any,
-        formItemSlots,
-        componentProps,
-        rawField: field,
-        renderKey: getFieldKey(field),
-      };
-    });
+    return validFields.value.map(field => groupField(field, rawInject));
   });
 }
+
+/**
+ * 将单个字段配置拆分为 grid / formItem / component / slots 分组
+ *
+ * @description 拆分规则与 `useGroupFieldAttrs` 一致，结果依赖该字段自身配置与 Provider 的 `pro-form-item` 默认值。
+ *
+ * @param {MaybeRefOrGetter<Field>} field - 待拆分的字段配置
+ * @returns {ComputedRef<GroupedField>} 单字段渲染分组
+ */
+export function useGroupedField(field: MaybeRefOrGetter<Field>) {
+  const config = INJECT_CONFIG['pro-form-item'];
+  const injectFormItemProps = inject(config.injectionKey, config.default);
+
+  return computed<GroupedField>(() =>
+    groupField(toValue(field), toValue(injectFormItemProps) || {})
+  );
+}

package/src/components/form/utils/fieldKey.ts

@@ -1,8 +1,26 @@
 import { toRaw } from 'vue';
+import { resolveFieldIdentity, toPath } from '../../../shared/core';
 
 const fieldKeyMap = new WeakMap<object, number>();
 let fieldKeySeed = 0;
 
+/** 数据行对象身份编号 */
+const rowKeyMap = new WeakMap<object, number>();
+let rowKeySeed = 0;
+
+const getRowKey = (row: object) => {
+  const raw = toRaw(row);
+  let key = rowKeyMap.get(raw);
+  if (key === undefined) {
+    key = ++rowKeySeed;
+    rowKeyMap.set(raw, key);
+  }
+  return key;
+};
+
+/** 数组下标段判定：仅十进制非负整数段按数组下标处理 */
+const isIndexSegment = (segment: string) => /^(?:0|[1-9]\d*)$/.test(segment);
+
 /**
  * 字段渲染 key
  *
@@ -25,3 +43,48 @@ export const getFieldKey = (field: unknown): string | number => {
   }
   return key;
 };
+
+/**
+ * 字段的数据行渲染 key
+ *
+ * @description 沿字段路径逐段解析原始表单数据，取路径经过的对象数组行元素身份与行内剩余路径组成 key；
+ * 同一数据行对象在数组增删 / 重排后恒得同一 key。路径不经过对象数组行、行元素为原始值或数据缺失时，
+ * 回退到 {@link getFieldKey} 的字段对象身份。同 key 的去重由调用方按兄弟列表收敛。
+ *
+ * @param field - 字段配置项
+ * @param rawFormData - 原始表单数据（非响应式对象）
+ * @returns 数据行 key；无法定位数据行时返回字段对象身份 key
+ */
+export const getFieldDataKey = (
+  field: unknown,
+  rawFormData: unknown
+): string | number => {
+  const path = resolveFieldIdentity(field);
+  if (!path || rawFormData === null || rawFormData === undefined) {
+    return getFieldKey(field);
+  }
+
+  const segments = toPath(path);
+  let node: any = rawFormData;
+  const rowIds: number[] = [];
+  let lastRowIndex = -1;
+
+  for (let i = 0; i < segments.length; i++) {
+    if (Array.isArray(node)) {
+      const segment = segments[i];
+      if (!isIndexSegment(segment)) break;
+      const element = node[Number(segment)];
+      if (element === null || typeof element !== 'object') break;
+      rowIds.push(getRowKey(toRaw(element) as object));
+      lastRowIndex = i;
+      node = element;
+      continue;
+    }
+    if (node === null || typeof node !== 'object') break;
+    node = node[segments[i]];
+  }
+
+  if (lastRowIndex === -1) return getFieldKey(field);
+  const rest = segments.slice(lastRowIndex + 1).join('.');
+  return `data:${rowIds.join('/')}:${rest}`;
+};