@qin-ui/antd-vue-pro 2.3.3 → 2.4.0

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

@@ -0,0 +1,126 @@
+import { computed, inject, mergeProps, toValue, type ComputedRef } from 'vue';
+import {
+  formItemProps,
+  gridItemProps,
+  type FormItemProps,
+  type GridItemProps,
+} from '../../../shared/ui';
+import { isPlainObject } from '../../../shared/core';
+import { INJECT_CONFIG } from '../../component-provider/constants';
+import { FORM_ITEM_SLOT_KEYS } from '../constants';
+import type { Base, Field } from '../types';
+
+const formItemPropKeys = Object.keys(formItemProps()).concat([
+  'formItemContainer',
+]);
+const gridItemPropKeys = Object.keys(gridItemProps());
+
+export interface GroupedField {
+  path: string;
+  gridItemProps: GridItemProps;
+  formItemProps: FormItemProps;
+  formItemSlots: Record<(typeof FORM_ITEM_SLOT_KEYS)[number], any>;
+  componentProps: Record<string, any>;
+  formItemContainer?: Base['formItemContainer'];
+  rawField: Field;
+}
+
+/**
+ * 将 fields 配置数组逐个拆分为 grid / formItem / component / slots 分组。
+ *
+ * @description
+ * 1. 响应式集成 ProComponentProvider 的 `pro-form-item` 全局变量配置；
+ * 2. 剥离 `extraProps`（用户自定义字段标识袋）：保留在字段原始对象上供业务层存取，渲染层经解构剥离，避免落入 componentProps 透传为无效 DOM 属性。
+ */
+export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
+  const config = INJECT_CONFIG['pro-form-item'];
+  const injectFormItemProps = inject(config.injectionKey, config.default);
+
+  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
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { path, name, fields, formItemClass, formItemStyle, hidden, span, getFormItemRef, getComponentRef, getFormItemComputedProps, getComponentComputedProps, slots = {}, formItemDataAttrs = {}, componentDataAttrs = {}, extraProps, formItemContainer, ...rest } =
+          field as any;
+
+        const {
+          class: injectClassName,
+          style: injectStyle,
+          span: injectSpan,
+          xs,
+          sm,
+          md,
+          lg,
+          xl,
+          xxl,
+          ...injectRest
+        } = rawInject;
+
+        // 字段显式 span 优先，否则回退注入配置的响应式断点
+        const initGridItemProps =
+          span || span === 0
+            ? { span }
+            : { xs, sm, md, lg, xl, xxl, span: injectSpan };
+
+        gridItemProps = fields ? { span: span ?? 24 } : initGridItemProps;
+        formItemProps = mergeProps(
+          injectRest,
+          { class: injectClassName, style: injectStyle },
+          { class: toValue(formItemClass), style: toValue(formItemStyle) },
+          formItemDataAttrs
+        );
+
+        Object.keys(rest).forEach(k => {
+          if (gridItemPropKeys.includes(k)) {
+            gridItemProps[k] = rest[k];
+          } else if (formItemPropKeys.includes(k)) {
+            formItemProps[k] = rest[k];
+          } else {
+            componentProps[k] = rest[k];
+          }
+        });
+
+        Object.assign(componentProps, componentDataAttrs);
+        Object.keys(slots).forEach(k => {
+          if (FORM_ITEM_SLOT_KEYS.includes(k as any)) {
+            formItemSlots[k] = slots[k];
+          } else {
+            componentProps.slots[k] = slots[k];
+          }
+        });
+
+        const raw = (toValue(name) ?? toValue(path)) as
+          | string
+          | number[]
+          | undefined;
+        return {
+          path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+          gridItemProps: gridItemProps as GridItemProps,
+          formItemProps: formItemProps as any,
+          formItemSlots,
+          componentProps,
+          formItemContainer,
+          rawField: field,
+        };
+      }
+
+      const raw =
+        toValue((field as any)?.name) ?? toValue((field as any)?.path);
+      return {
+        path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
+        gridItemProps: gridItemProps as GridItemProps,
+        formItemProps: formItemProps as any,
+        formItemSlots,
+        componentProps,
+        rawField: field,
+      };
+    });
+  });
+}

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

@@ -30,9 +30,33 @@ export type VModelProps<T = any> = {
   'onUpdate:value'?: (val: T) => void;
 };
 
+/**
+ * 字段值格式化/转换处理器
+ *
+ * @description 支持函数形态或包含 get/set 方法的对象形态。
+ *
+ * ### 行为与契约说明
+ * 1. **旧值参数按需注入**：底层基于函数的形参声明个数（`fn.length > 1`）决定是否读取旧值。若转换逻辑需要使用旧值，请显式声明两个形参 `(val, oldVal) => ...`（请勿使用默认参数或 `...args` 剩余参数，否则 `fn.length` 无法正确识别）；
+ * 2. **只读快照副本**：传入的 `oldVal` 为只读快照副本，不得依赖原地修改写回；仅当 formatter 声明双形参时才克隆旧值，单参转换零开销。
+ *
+ * @example
+ * ```ts
+ * // 1. 单参数转换（常见）：无需旧值，零多余开销
+ * valueFormatter: (val) => val?.trim()
+ *
+ * // 2. 双参数转换：需要基于旧值做对比或回退
+ * valueFormatter: (val, oldVal) => (isValid(val) ? val : oldVal)
+ *
+ * // 3. 对象形态：分别定义读（展示）与写（存储）转换
+ * valueFormatter: {
+ *   get: (val) => (val ? dayjs(val).format('YYYY-MM-DD') : ''),
+ *   set: (val, oldVal) => (val ? dayjs(val).valueOf() : undefined),
+ * }
+ * ```
+ */
 export type ValueFormatter =
-  | { (val: any, oldVal: any): any }
-  | { get?: (val: any) => any; set?: (val: any, oldVal: any) => any };
+  | { (val: any, oldVal?: any): any }
+  | { get?: (val: any) => any; set?: (val: any, oldVal?: any) => any };
 
 /**
  * @description 自定义组件

package/src/components/table/components/ColumnControl.vue

@@ -18,11 +18,10 @@ type Props = {
   table?: Table;
   columnControl?: ColumnControlConfig;
 };
-const {
-  columns,
-  table = undefined,
-  columnControl = undefined,
-} = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  table: undefined,
+  columnControl: undefined,
+});
 
 const { t } = useLocale();
 
@@ -39,7 +38,7 @@ const checkedColumnsOptions = computed<
     disabled: boolean;
   }>
 >(() =>
-  columns.flatMap(item => {
+  props.columns.flatMap(item => {
     const rawKey =
       item.key ??
       (Array.isArray(item.dataIndex)
@@ -47,12 +46,14 @@ const checkedColumnsOptions = computed<
         : item.dataIndex);
     if (!rawKey || !item.title) return [];
     const key = String(rawKey);
-    if (columnControl?.excludedKeys?.some(ek => String(ek) === key)) return [];
+    if (props.columnControl?.excludedKeys?.some(ek => String(ek) === key))
+      return [];
     const disabled =
-      columnControl?.disabledKeys?.some(dk => String(dk) === key) ?? false;
+      props.columnControl?.disabledKeys?.some(dk => String(dk) === key) ??
+      false;
     // labels 优先；title 为字符串时直接使用；vnode 等其他类型降级为 key，避免渲染异常
     const label =
-      (columnControl?.labels?.[key] as string) ??
+      (props.columnControl?.labels?.[key] as string) ??
       (typeof item.title === 'string' ? item.title : key);
     return {
       label,
@@ -77,7 +78,7 @@ const checkedColumnKeys = computed({
   set(val) {
     checkedColumnsOptions.value.forEach(item => {
       if (item.disabled) return;
-      table?.setColumn?.(item.value, {
+      props.table?.setColumn?.(item.value, {
         hidden: !val.includes(item.value),
       });
     });
@@ -122,16 +123,16 @@ watch(
 
 // 强制 disabledKeys 列始终展示
 onMounted(() => {
-  columnControl?.disabledKeys?.forEach(key => {
-    table?.setColumn?.(String(key), { hidden: false });
+  props.columnControl?.disabledKeys?.forEach(key => {
+    props.table?.setColumn?.(String(key), { hidden: false });
   });
 });
 
 watch(
-  () => columnControl?.disabledKeys,
+  () => props.columnControl?.disabledKeys,
   keys => {
     keys?.forEach(key => {
-      table?.setColumn?.(String(key), { hidden: false });
+      props.table?.setColumn?.(String(key), { hidden: false });
     });
   },
   { deep: true }
@@ -149,7 +150,7 @@ watch(
         :selectable="false"
       >
         <MenuItem
-          v-if="!columnControl?.disableCheckAll"
+          v-if="!props.columnControl?.disableCheckAll"
           :key="0"
           @click="onCheckAllChange"
         >

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

@@ -45,6 +45,7 @@ import {
   useAttrs,
   onMounted,
   inject,
+  toValue,
   type Slot,
 } from 'vue';
 import { INJECT_CONFIG } from '../../component-provider/constants';
@@ -55,9 +56,11 @@ import { SearchFormProps } from './SearchForm.vue';
 import type { Table } from '../hooks/useTable';
 import { useLocale } from '../../../locale';
 import {
-  camelizeProperties,
   getObject,
+  isPlainObject,
   pick,
+  isPromise,
+  camelizeProperties,
   Path,
 } from '../../../shared/core';
 import { ComponentSlots } from 'vue-component-type-helpers';
@@ -100,61 +103,64 @@ type Props = {
   tableContainer?: ContainerComponent | false;
 } & /* @vue-ignore */ TableProps;
 
-const {
-  table = undefined,
-  search = undefined,
-  addIndexColumn = undefined,
-  control = undefined,
-  tableContainer = undefined,
-  immediateSearch = undefined,
-  searchFormConfig = undefined,
-} = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  table: undefined,
+  search: undefined,
+  addIndexColumn: undefined,
+  immediateSearch: undefined,
+  control: undefined,
+  searchFormConfig: undefined,
+  tableContainer: undefined,
+});
 
 const { t } = useLocale();
 
 const config = INJECT_CONFIG['pro-table'];
-const injectProps = inject(config.injectionKey, config.default);
+const injectPropsRaw = inject(config.injectionKey, config.default);
+const injectProps = computed(() => toValue(injectPropsRaw) || {});
 
 const tableProperties = Object.keys(tableProps());
 
-const injectAttrs = pick(injectProps, tableProperties) as TableProps;
+const injectAttrs = computed<TableProps>(
+  () => pick(injectProps.value, tableProperties) as TableProps
+);
 
 const computedSearchFormConfig = computed(() => {
   const container =
-    searchFormConfig?.container ??
-    injectProps.searchFormConfig?.container ??
+    props.searchFormConfig?.container ??
+    injectProps.value.searchFormConfig?.container ??
     DefaultSearchFormContainer;
   return {
-    ...injectProps.searchFormConfig,
-    ...getObject(searchFormConfig),
+    ...injectProps.value.searchFormConfig,
+    ...getObject(props.searchFormConfig),
     container: container ? container : undefined,
   };
 });
 
 const attrs: Record<string, any> = useAttrs();
 const tableAttrs = computed<TableProps>(() => {
-  return pick(camelizeProperties(attrs), tableProperties);
+  return pick(camelizeProperties(attrs), tableProperties) as TableProps;
 });
 
-const { columns, dataSource, searchForm, pageParam, setPageParam } =
-  table || {};
-
 const size = defineModel<TableProps['size']>('size');
-const loading = defineModel<boolean>('loading');
+const loading = defineModel<boolean>('loading', { default: false });
 
 // 核心搜索方法：设置 loading 状态，调用外部 search 函数
 const _search = async () => {
-  try {
+  const searchPromise = (props.search || attrs.onSearch)?.();
+  if (isPromise(searchPromise)) {
     loading.value = true;
-    await search?.();
-  } finally {
-    loading.value = false;
+    try {
+      await searchPromise;
+    } finally {
+      loading.value = false;
+    }
   }
 };
 
 // 重置：恢复查询参数到初始值，重新搜索
 const reset = () => {
-  table?.resetQueryParams();
+  props.table?.resetQueryParams?.();
   nextTick(() => {
     _search();
   });
@@ -167,7 +173,6 @@ type TableSlots = Omit<ComponentSlots<typeof ATable>, 'bodyCell'> &
   Readonly<{
     bodyCell?: (props: {
       text: any;
-      value: any;
       record: RecordType;
       index: number;
       column: Column<RecordType>;
@@ -186,13 +191,13 @@ const {
 } = slots;
 
 const searchPage1st = () => {
-  setPageParam?.({ current: 1 });
+  props.table?.setPageParam?.({ current: 1 });
   _search();
 };
 
 const computedTableProps = computed<TableProps>(() => {
   return {
-    ...injectAttrs,
+    ...injectAttrs.value,
     ...tableAttrs.value,
     pagination: undefined,
     onChange: undefined,
@@ -201,65 +206,84 @@ const computedTableProps = computed<TableProps>(() => {
 
 const computedTableContainer = computed(() => {
   const container =
-    tableContainer ?? injectProps.tableContainer ?? DefaultTableContainer;
+    props.tableContainer ??
+    injectProps.value.tableContainer ??
+    DefaultTableContainer;
   return container ? container : undefined;
 });
 
 type ReturnGenericParameterTypes<V> = V extends Table<any, infer R> ? R : never;
 type RecordType = ReturnGenericParameterTypes<T>;
 
-const indexColumn = (): ColumnType => ({
+const renderIndex: ColumnType['customRender'] = ({ index }) => index + 1;
+
+const indexColumn = computed<ColumnType>(() => ({
   title: t('table.index'),
   dataIndex: '_index',
+  key: '_index',
   width: 80,
-  customRender: ({ index }) => index + 1,
+  customRender: renderIndex,
+}));
+
+const computedColumns = computed<Columns<RecordType>>(() => {
+  const cols = (tableAttrs.value.columns ??
+    toValue(props.table?.columns) ??
+    []) as any;
+  const needIndex = props.addIndexColumn ?? injectProps.value.addIndexColumn;
+  return needIndex ? [indexColumn.value, ...cols] : cols;
 });
 
-const computedColumns = computed(
-  () =>
-    [
-      ...((addIndexColumn ?? injectProps.addIndexColumn)
-        ? [indexColumn()]
-        : []),
-      ...(tableAttrs.value.columns ?? columns?.value ?? []),
-    ] as Columns<RecordType>
-);
-
 const visibleComputedColumns = computed(() => {
   return computedColumns.value.filter(item => !(item as Column).hidden);
 });
 
 const computedDataSource = computed<RecordType[]>(() => {
-  return (tableAttrs.value.dataSource as any[]) ?? dataSource?.value;
+  return tableAttrs.value.dataSource ?? toValue(props.table?.dataSource) ?? [];
 });
 
+// 分页优先级：tableAttrs 显式配置 > provider 全局配置 > 默认合成
 const computedPagination = computed<PaginationProps | false>(() => {
   if (tableAttrs.value.pagination === false) return false;
+  if (isPlainObject(tableAttrs.value.pagination)) {
+    const globalPagination =
+      injectAttrs.value.pagination === false
+        ? {}
+        : injectAttrs.value.pagination;
+    return {
+      ...globalPagination,
+      ...props.table?.pageParam,
+      ...tableAttrs.value.pagination,
+      showTotal:
+        tableAttrs.value.pagination?.showTotal ??
+        globalPagination?.showTotal ??
+        ((total: number) => t('pagination.total', { total })),
+    };
+  }
+  if (injectAttrs.value.pagination === false) return false;
   return {
-    ...injectAttrs.pagination,
-    ...pageParam,
-    ...tableAttrs.value.pagination,
+    ...injectAttrs.value.pagination,
+    ...props.table?.pageParam,
     showTotal:
-      tableAttrs.value.pagination?.showTotal ??
-      (injectAttrs.pagination === false
-        ? undefined
-        : injectAttrs.pagination?.showTotal) ??
+      injectAttrs.value.pagination?.showTotal ??
       ((total: number) => t('pagination.total', { total })),
   };
 });
 
 const onTableChange: TableProps['onChange'] = (...args) => {
-  setPageParam?.(args[0]);
+  props.table?.setPageParam?.(args[0]);
   attrs.onChange?.(...args);
   _search();
 };
 
 const showSearch = computed(() => {
+  const searchFields = props.table?.searchForm?.fields;
+  const fieldList =
+    (Array.isArray(searchFields) ? searchFields : searchFields?.value) ?? [];
   return !!(
     searchFormSlot ||
     (computedSearchFormConfig.value?.hidden !== true &&
-      searchForm &&
-      searchForm.fields.value.filter(item => !item.hidden)?.length > 0)
+      props.table?.searchForm &&
+      fieldList.filter(item => !item.hidden).length > 0)
   );
 });
 
@@ -267,14 +291,17 @@ const computedControl = computed<{
   sizeControl: boolean;
   columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
 }>(() => {
-  const mergedControl = control ?? injectProps.control;
-  if (typeof mergedControl === 'boolean') {
-    return { sizeControl: mergedControl, columnControl: mergedControl };
+  const controlConfig = props.control ?? injectProps.value.control;
+  if (controlConfig === true) {
+    return { sizeControl: true, columnControl: true };
   }
-  const c = mergedControl as Control;
-  const sizeControl = c.sizeControl ?? true;
-  const columnControl = c.columnControl ?? true;
-  return { sizeControl: !!sizeControl, columnControl };
+  if (controlConfig === false) {
+    return { sizeControl: false, columnControl: false };
+  }
+  return {
+    sizeControl: !!controlConfig?.sizeControl,
+    columnControl: controlConfig?.columnControl ?? false,
+  };
 });
 
 const columnControlConfig = computed(() => {
@@ -283,7 +310,7 @@ const columnControlConfig = computed(() => {
 });
 
 onMounted(() => {
-  if (immediateSearch ?? injectProps.immediateSearch) {
+  if (props.immediateSearch ?? injectProps.value.immediateSearch) {
     _search();
   }
 });
@@ -297,8 +324,8 @@ onMounted(() => {
     >
       <slot name="search-form">
         <SearchForm
-          v-if="searchForm"
-          :form="searchForm"
+          v-if="props.table?.searchForm"
+          :form="props.table.searchForm"
           v-bind="computedSearchFormConfig"
           @search="searchPage1st"
           @reset="reset"
@@ -325,8 +352,8 @@ onMounted(() => {
           class="pro-table_header_column-control"
         >
           <ColumnControl
-            :columns="computedColumns as any"
-            :table="table"
+            :columns="computedColumns"
+            :table="props.table"
             :column-control="columnControlConfig"
           />
         </div>