@qin-ui/element-plus-pro 1.4.2 → 1.4.3

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,
@@ -26,9 +32,87 @@ export interface GroupedField {
   componentProps: Record<string, any>;
   container?: Base['formItemContainer'];
   rawField: Field;
-  renderKey: string | number;
 }
 
+/** 将单个字段配置拆分为 grid / formItem / component / slots 分组 */
+const groupField = (
+  field: Field,
+  rawInjectProps: 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, prop: _prop, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
+      field as any;
+
+    // prettier-ignore
+    const { class: injectClassName, style: injectStyle, span: injectSpan, formItemContainer: injectFormItemContainer, xs, sm, md, lg, xl, ...injectRest } = rawInjectProps;
+
+    /*
+     * 字段显式指定 span 时整体接管栅格，不再叠加注入的响应式断点；
+     * 未指定 span 时使用注入的断点配置
+     */
+    const initGridItemProps =
+      span || span === 0 ? { span } : { xs, sm, md, lg, xl, span: injectSpan };
+
+    // 分组字段未指定 span 时整行渲染（span 兜底 24），注入的响应式断点保持生效
+    gridItemProps = fields
+      ? { ...initGridItemProps, span: span ?? 24 }
+      : initGridItemProps;
+    formItemProps = mergeProps(
+      injectRest as any,
+      { class: injectClassName, style: injectStyle },
+      { class: toValue(formItemClass), style: toValue(formItemStyle) },
+      formItemDataAttrs
+    );
+    // 字段级容器优先，回退注入级配置
+    const container = formItemContainer ?? injectFormItemContainer;
+
+    Object.keys(rest).forEach(k => {
+      if (gridItemPropKeySet.has(k)) {
+        gridItemProps[k] = rest[k];
+      } else if (formItemPropKeySet.has(k)) {
+        (formItemProps as any)[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];
+      }
+    });
+
+    // 字段标识经统一解析（prop 优先，path 兜底）；name 作为控件自身属性经 rest 透传
+    return {
+      path: resolveFieldIdentity(field, ELEMENT_FIELD_IDENTITY_KEYS),
+      gridItemProps: gridItemProps as GridItemProps,
+      formItemProps: formItemProps as any,
+      formItemSlots,
+      componentProps,
+      container,
+      rawField: field,
+    };
+  }
+
+  return {
+    path: resolveFieldIdentity(field, ELEMENT_FIELD_IDENTITY_KEYS),
+    gridItemProps: gridItemProps as GridItemProps,
+    formItemProps: formItemProps as any,
+    formItemSlots,
+    componentProps,
+    rawField: field,
+  };
+};
+
 /**
  * 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
  *
@@ -45,82 +129,23 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
 
   return computed<GroupedField[]>(() => {
     const rawInjectProps = 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, prop: _prop, fields, formItemClass, formItemStyle, formItemContainer, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, ...rest } =
-          field as any;
-
-        // prettier-ignore
-        const { class: injectClassName, style: injectStyle, span: injectSpan, formItemContainer: injectFormItemContainer, xs, sm, md, lg, xl, ...injectRest } = rawInjectProps;
-
-        /*
-         * 字段显式指定 span 时整体接管栅格，不再叠加注入的响应式断点；
-         * 未指定 span 时使用注入的断点配置
-         */
-        const initGridItemProps =
-          span || span === 0
-            ? { span }
-            : { xs, sm, md, lg, xl, span: injectSpan };
-
-        // 分组字段未指定 span 时整行渲染（span 兜底 24），注入的响应式断点保持生效
-        gridItemProps = fields
-          ? { ...initGridItemProps, span: span ?? 24 }
-          : initGridItemProps;
-        formItemProps = mergeProps(
-          injectRest as any,
-          { class: injectClassName, style: injectStyle },
-          { class: toValue(formItemClass), style: toValue(formItemStyle) },
-          formItemDataAttrs
-        );
-        const container = formItemContainer ?? injectFormItemContainer;
-
-        Object.keys(rest).forEach(k => {
-          if (gridItemPropKeySet.has(k)) {
-            gridItemProps[k] = rest[k];
-          } else if (formItemPropKeySet.has(k)) {
-            (formItemProps as any)[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];
-          }
-        });
+    return validFields.value.map(field => groupField(field, rawInjectProps));
+  });
+}
 
-        // 字段标识经统一解析（prop 优先，path 兜底）；name 作为控件自身属性经 rest 透传
-        return {
-          path: resolveFieldIdentity(field, ELEMENT_FIELD_IDENTITY_KEYS),
-          gridItemProps: gridItemProps as GridItemProps,
-          formItemProps: formItemProps as any,
-          formItemSlots,
-          componentProps,
-          container,
-          rawField: field,
-          renderKey: getFieldKey(field),
-        };
-      }
+/**
+ * 将单个字段配置拆分为 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 {
-        path: resolveFieldIdentity(field, ELEMENT_FIELD_IDENTITY_KEYS),
-        gridItemProps: gridItemProps as GridItemProps,
-        formItemProps: formItemProps as any,
-        formItemSlots,
-        componentProps,
-        rawField: field,
-        renderKey: getFieldKey(field),
-      };
-    });
-  });
+  return computed<GroupedField>(() =>
+    groupField(toValue(field), toValue(injectFormItemProps) || {})
+  );
 }

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

@@ -1,4 +1,6 @@
 import { toRaw } from 'vue';
+import { resolveFieldIdentity, toPath } from '../../../shared/core';
+import { ELEMENT_FIELD_IDENTITY_KEYS } from '../constants';
 
 const fieldKeyMap = new WeakMap<object, number>();
 let fieldKeySeed = 0;
@@ -25,3 +27,65 @@ export const getFieldKey = (field: unknown): string | number => {
   }
   return key;
 };
+
+/** 数据行对象身份编号 */
+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
+ *
+ * @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, ELEMENT_FIELD_IDENTITY_KEYS);
+  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}`;
+};