@qin-ui/element-plus-pro 1.4.1 → 1.4.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 组件实例 */
@@ -16,7 +16,7 @@ export type ProFormInstance = ComponentExposed<typeof ProForm>;
 /** ProForm 组件属性 */
 export type ProFormProps = ComponentProps<typeof ProForm>;
 
-/** BaseFormItem 组件实例（字段级 FormItem） */
-export type ProFormItemInstance = ComponentExposed<typeof BaseFormItem>;
-/** BaseFormItem 组件属性（字段级 FormItem） */
-export type ProFormItemProps = ComponentProps<typeof BaseFormItem>;
+/** BaseFormItems 组件实例（字段级 FormItem） */
+export type ProFormItemsInstance = ComponentExposed<typeof BaseFormItems>;
+/** BaseFormItems 组件属性（字段级 FormItem） */
+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,
@@ -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/disabled.ts

@@ -0,0 +1,37 @@
+/**
+ * 归一化禁用值
+ *
+ * @description 字符串形态与宿主 Boolean prop 一致：`''` 与 `disabled` 为 true，其余取真值
+ * @param value - 原始禁用值
+ * @returns 归一化后的布尔值
+ */
+export const normalizeDisabled = (value: unknown) =>
+  value === '' || value === 'disabled' ? true : Boolean(value);
+
+/**
+ * 解析显式声明的禁用值
+ *
+ * @description `undefined` / `null` 为未声明，返回 `undefined`；其余返回归一化结果
+ * @param value - 原始禁用值
+ * @returns 显式禁用值；未声明时为 `undefined`
+ */
+export const resolveDisabled = (value: unknown): boolean | undefined =>
+  value === undefined || value === null ? undefined : normalizeDisabled(value);
+
+/**
+ * 解析控件最终生效的禁用状态
+ *
+ * @description 字段显式声明（含 `false`）优先；未声明时继承外层禁用，外层为真即禁用；
+ * 外层未禁用时回退 Provider 注入的组件级默认值
+ * @param explicit - 字段显式声明的禁用值
+ * @param inherited - 外层禁用上下文取值
+ * @param fallback - Provider 注入的组件级默认禁用值
+ * @returns 最终生效的禁用状态
+ */
+export const resolveEffectiveDisabled = (
+  explicit: unknown,
+  inherited: unknown,
+  fallback: unknown
+): boolean =>
+  resolveDisabled(explicit) ??
+  (normalizeDisabled(inherited) || normalizeDisabled(fallback));

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}`;
+};

package/src/components/table/components/ProTable.vue

@@ -32,6 +32,11 @@
  * 2. 分页变化：分页参数同步后发起查询
  * 3. 重置：查询参数恢复初始值后重新查询
  *
+ * ## 列来源
+ *
+ * 显式 `:columns` 优先于 `:table` 实例的 `columns`；显式列按原样透传给宿主，不补齐 `key`，
+ * 需由调用方提供 `key` / `dataIndex` / `prop`。显式模式下 `setColumn` 与列控入口均不生效。
+ *
  * @template T - 表格实例类型（useTable 返回值）
  *
  * @param {T} [table] - 列表表格对象，来自 useTable
@@ -141,7 +146,7 @@ type Props = {
   searchFormConfig?: SearchFormConfig;
   /** 表格区域包裹容器 */
   tableContainer?: ContainerComponent | false;
-  /** 直接传入列配置（覆盖 :table 实例的 columns） */
+  /** 直接传入列配置（覆盖 :table 实例的 columns）；列需自备 key / dataIndex / prop，显式模式不参与 setColumn 与列控 */
   columns?: Columns<RecordType>;
   /** 直接传入数据源（覆盖 :table 实例的 data） */
   data?: RecordType[];
@@ -379,6 +384,7 @@ const getIndex = (i: number) => {
 /** 调用方是否显式传入 columns（值为 undefined 时视为未指定） */
 const hasExplicitColumns = computed(() => props.columns !== undefined);
 
+/** 显式列原样透传（key 由调用方提供）；table 列经 core 规范化 */
 const normalizedRawColumns = computed(() => {
   const source = (
     (props.columns ?? toValue(props.table?.columns) ?? []) as any[]
@@ -445,15 +451,23 @@ const computedPagination = computed<false | Partial<PaginationProps>>(() => {
 
 const showPagination = computed(() => computedPagination.value !== false);
 
+// pageSize 变更窗口：窗口内忽略宿主级联的 current-change
+let sizeChangeWindow = false;
+
 const onCurrentChange = (current: number) => {
+  if (sizeChangeWindow) return;
   props.table?.setPageParam?.({ current });
   _search();
 };
 
 // 改变 pageSize 时重置回第 1 页并重新查询
 const onSizeChange = (pageSize: number) => {
+  sizeChangeWindow = true;
   props.table?.setPageParam?.({ pageSize, current: 1 });
   _search();
+  nextTick(() => {
+    sizeChangeWindow = false;
+  });
 };
 
 const onPaginationChange = (currentPage: number, pageSize: number) => {