@qin-ui/element-plus-pro 1.2.4 → 1.3.1

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

@@ -10,8 +10,13 @@ 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());
+const formItemPropKeys = Object.keys(formItemProps()).filter(
+  k => k !== 'disabled'
+);
 const gridItemPropKeys = Object.keys(gridItemProps());
+// 模块级 Set：字段循环内 O(1) 命中，替代数组 includes 线性扫描
+const gridItemPropKeySet = new Set<string>(gridItemPropKeys);
+const formItemPropKeySet = new Set<string>(formItemPropKeys);
 
 export interface GroupedField {
   path: string;
@@ -31,6 +36,7 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
   const injectFormItemProps = inject(config.injectionKey, config.default);
 
   return computed<GroupedField[]>(() => {
+    const rawInjectProps = toValue(injectFormItemProps) || {};
     return validFields.value.map(field => {
       let gridItemProps: Record<string, any> = {};
       let formItemProps: Record<string, any> = {};
@@ -54,8 +60,9 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
           lg,
           xl,
           ...injectRest
-        } = injectFormItemProps;
+        } = rawInjectProps;
 
+        // 字段显式 span 优先，否则回退注入配置的响应式断点
         const initGridItemProps =
           span || span === 0
             ? { span }
@@ -71,9 +78,9 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
         const container = formItemContainer ?? injectFormItemContainer;
 
         Object.keys(rest).forEach(k => {
-          if (gridItemPropKeys.includes(k)) {
+          if (gridItemPropKeySet.has(k)) {
             gridItemProps[k] = rest[k];
-          } else if (formItemPropKeys.includes(k)) {
+          } else if (formItemPropKeySet.has(k)) {
             (formItemProps as any)[k] = rest[k];
           } else {
             componentProps[k] = rest[k];
@@ -89,7 +96,7 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
           }
         });
 
-        const raw = (toValue(path) ?? toValue(name)) as
+        const raw = (toValue(name) ?? toValue(path)) as
           | string
           | number[]
           | undefined;
@@ -105,7 +112,7 @@ export function useGroupFieldAttrs(validFields: ComputedRef<Field[]>) {
       }
 
       const raw =
-        toValue((field as any)?.path) ?? toValue((field as any)?.name);
+        toValue((field as any)?.name) ?? toValue((field as any)?.path);
       return {
         path: Array.isArray(raw) ? raw.join('.') : (raw as string) || '',
         gridItemProps: gridItemProps as GridItemProps,

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

@@ -30,9 +30,33 @@ export type VModelProps<T = any> = {
   'onUpdate:modelValue'?: (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

@@ -6,33 +6,32 @@ import {
   DropdownItem,
   Checkbox,
 } from '../../../shared/ui';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { Column, Columns, ColumnControlConfig } from '../types';
 import { type Table } from '../useTable';
 import FilterOutlined from './icons/FilterOutlined.vue';
 import { useLocale } from '../../../locale';
+import { normalizePathKey } from '../../../shared/core';
 
 type Props = {
   columns: Columns;
   table?: Table;
   columnControl?: ColumnControlConfig;
 };
-const {
-  columns,
-  table = undefined,
-  columnControl = undefined,
-} = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  table: undefined,
+  columnControl: undefined,
+});
 
 const { t } = useLocale();
 
-const open = ref(false);
 const checkAll = ref(false);
 const indeterminate = ref(false);
 
 const getColumnKey = (column: Column, index: number) => {
-  const key = column.key ?? column.prop;
-  if (key === undefined || key === null) return `__col_${index}`;
-  return Array.isArray(key) ? key.join('.') : String(key);
+  const rawKey = column.key ?? column.prop;
+  if (rawKey === undefined || rawKey === null) return `__col_${index}`;
+  return normalizePathKey(rawKey);
 };
 
 const checkedColumnsOptions = computed<
@@ -44,21 +43,27 @@ const checkedColumnsOptions = computed<
     column: Column;
   }>
 >(() =>
-  columns
+  props.columns
     .map((item, index) => {
       const key = getColumnKey(item, index);
-      const excluded = columnControl?.excludedKeys?.some(
+      const excluded = props.columnControl?.excludedKeys?.some(
         ek => String(ek) === key
       );
-      const disabled = columnControl?.disabledKeys?.some(
+      const disabled = props.columnControl?.disabledKeys?.some(
         dk => String(dk) === key
       );
-      const label = String(
-        item.label ??
-          (item as any).title ??
-          item.prop ??
-          t('table.columnFallback', { index: index + 1 })
-      );
+      const rawTitle = item.label ?? (item as any).title;
+      const titleLabel = typeof rawTitle === 'string' ? rawTitle : undefined;
+      const propLabel =
+        item.prop !== undefined && item.prop !== null
+          ? String(item.prop)
+          : undefined;
+      const label =
+        (props.columnControl?.labels?.[key] as string) ??
+        titleLabel ??
+        propLabel ??
+        key ??
+        t('table.columnFallback', { index: index + 1 });
       return {
         label,
         value: key,
@@ -85,7 +90,7 @@ const checkedColumnKeys = computed({
   set(val: string[]) {
     checkedColumnsOptions.value.forEach(item => {
       if (item.disabled) return;
-      table?.setColumn(item.value as any, {
+      props.table?.setColumn(item.value as any, {
         hidden: !val.includes(item.value),
       });
     });
@@ -97,7 +102,6 @@ const onCheckAllChange = (value: any) => {
   checkedColumnKeys.value = checked
     ? controllableOptions.value.map(item => item.value)
     : [];
-  indeterminate.value = false;
 };
 
 const toggleColumnsItem = (val: string) => {
@@ -128,38 +132,27 @@ watch(
   { immediate: true }
 );
 
-// 强制 disabledKeys 列始终展示
-onMounted(() => {
-  columnControl?.disabledKeys?.forEach(key => {
-    table?.setColumn(String(key), { hidden: false });
-  });
-});
-
+// disabledKeys 指定的列始终强制展示
 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 }
+  { immediate: true, deep: true }
 );
 </script>
 
 <template>
-  <Dropdown
-    trigger="click"
-    :hide-on-click="false"
-    :visible="open"
-    @visible-change="val => (open = val)"
-  >
+  <Dropdown trigger="click" :hide-on-click="false">
     <Button text class="pro-table_column-control_button">
       <FilterOutlined />
     </Button>
     <template #dropdown>
       <DropdownMenu>
         <DropdownItem
-          v-if="!columnControl?.disableCheckAll"
+          v-if="!props.columnControl?.disableCheckAll"
           :disabled="true"
           :divided="false"
         >

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

@@ -40,12 +40,14 @@ import {
   tableProps,
   paginationProps,
 } from '../../../shared/ui';
+import { ElLoading } from 'element-plus';
 import {
   computed,
   nextTick,
   useAttrs,
   onMounted,
   inject,
+  toValue,
   type Slot,
   useSlots,
 } from 'vue';
@@ -60,6 +62,8 @@ import {
   camelizeProperties,
   getObject,
   pick,
+  isPromise,
+  isPlainObject,
   Path,
 } from '../../../shared/core';
 import {
@@ -71,7 +75,16 @@ import {
 import type { Columns, ColumnControlConfig } from '../types';
 import TableColumnRenderer from './TableColumnRenderer.vue';
 
-defineOptions({ name: 'ProTable', inheritAttrs: false });
+defineOptions({
+  name: 'ProTable',
+  directives: {
+    loading: ElLoading.directive,
+  },
+  inheritAttrs: false,
+});
+
+const tableProperties = Object.keys(tableProps());
+const paginationProperties = Object.keys(paginationProps());
 
 type Control = {
   sizeControl: boolean;
@@ -108,31 +121,29 @@ type Props = {
   pagination?: false | Partial<PaginationProps>;
 } & Omit<TableProps, 'data'>;
 
-const {
-  table = undefined,
-  search = undefined,
-  addIndexColumn = undefined,
-  control = undefined,
-  tableContainer = undefined,
-  immediateSearch = undefined,
-  searchFormConfig = undefined,
-  columns = undefined,
-  data = undefined,
-  pagination = undefined,
-} = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+  table: undefined,
+  search: undefined,
+  addIndexColumn: undefined,
+  immediateSearch: undefined,
+  control: undefined,
+  searchFormConfig: undefined,
+  tableContainer: undefined,
+  columns: undefined,
+  data: undefined,
+  pagination: undefined,
+});
 
 const { t } = useLocale();
 
 const config = INJECT_CONFIG['pro-table'];
-const injectProps = inject(config.injectionKey, config.default) as any;
-
-const tableProperties = Object.keys(tableProps());
-const paginationProperties = Object.keys(paginationProps());
+const injectPropsRaw = inject(config.injectionKey, config.default);
+const injectProps = computed(() => toValue(injectPropsRaw) || {});
 
 const attrs = useAttrs() as Record<string, any>;
 
 const injectTableAttrs = computed(() => {
-  return pick(injectProps, tableProperties) as Partial<TableProps>;
+  return pick(injectProps.value, tableProperties) as Partial<TableProps>;
 });
 
 const attrsTableProps = computed(() => {
@@ -142,91 +153,95 @@ const attrsTableProps = computed(() => {
   ) as Partial<TableProps>;
 });
 
-const {
-  columns: tableColumns,
-  data: tableData,
-  searchForm,
-  pageParam,
-  setPageParam,
-} = table || {};
-
 const size = defineModel<TableProps['size']>('size');
-const loading = defineModel<boolean>('loading');
+const loading = defineModel<boolean>('loading', { default: false });
 
-// 核心搜索方法：设置 loading 状态，调用外部 search 函数
+// 递增序号做请求竞态守卫，仅最新一次请求可变更 loading
+let searchSequence = 0;
 const _search = async () => {
+  const seq = ++searchSequence;
+  const searchPromise = (props.search || attrs.onSearch)?.();
+  if (!isPromise(searchPromise)) return;
+  loading.value = true;
   try {
-    loading.value = true;
-    await search?.();
+    await searchPromise;
   } finally {
-    loading.value = false;
+    if (seq === searchSequence) {
+      loading.value = false;
+    }
   }
 };
 
 // 重置：恢复查询参数到初始值，重新搜索
 const reset = () => {
-  table?.resetQueryParams();
+  props.table?.resetQueryParams?.();
   nextTick(() => {
     _search();
   });
 };
 
+const customSlotNames = [
+  'search-form',
+  'button-bar',
+  'toolbar',
+  'table',
+] as const;
+
 type CustomSlots = Readonly<
-  Partial<Record<'search-form' | 'button-bar' | 'toolbar' | 'table', Slot>>
+  Partial<Record<(typeof customSlotNames)[number], Slot>>
 >;
-
 type Slots = CustomSlots & Readonly<Record<string, Slot>>;
 
 const slots = useSlots() as Slots;
-const searchFormSlot = slots['search-form'];
-const buttonBarSlot = slots['button-bar'];
-const toolbarSlot = slots['toolbar'];
-
-const tableSlots = computed(() => {
-  const customNames = new Set([
-    'search-form',
-    'button-bar',
-    'toolbar',
-    'table',
-  ]);
-  return Object.fromEntries(
-    Object.entries(slots).filter(([name]) => !customNames.has(name))
-  ) as Record<string, Slot>;
-});
-const tableSlotNames = computed(() => Object.keys(tableSlots.value));
+const forwardedSlotNames = () =>
+  Object.keys(slots).filter(name => !customSlotNames.includes(name as any));
 
 const searchPage1st = () => {
-  setPageParam?.({ current: 1 });
+  props.table?.setPageParam?.({ current: 1 });
   _search();
 };
 
 const computedSearchFormConfig = computed(() => {
   const container =
-    searchFormConfig?.container ??
-    injectProps.searchFormConfig?.container ??
+    props.searchFormConfig?.container ??
+    (injectProps.value.searchFormConfig as any)?.container ??
     DefaultSearchFormContainer;
   return {
-    ...injectProps.searchFormConfig,
-    ...getObject(searchFormConfig),
+    ...injectProps.value.searchFormConfig,
+    ...getObject(props.searchFormConfig),
     container: container ? container : undefined,
   };
 });
 
 const computedTableContainer = computed(() => {
   const container =
-    tableContainer ?? injectProps.tableContainer ?? DefaultTableContainer;
+    props.tableContainer ??
+    injectProps.value.tableContainer ??
+    DefaultTableContainer;
   return container ? container : undefined;
 });
 
+const getIndex = (i: number) => {
+  if (props.table?.pageParam && computedPagination.value !== false) {
+    const current = props.table.pageParam.current ?? 1;
+    const pageSize = props.table.pageParam.pageSize ?? 10;
+    return (current - 1) * pageSize + i + 1;
+  }
+  return i + 1;
+};
+
 const normalizedRawColumns = computed(() => {
-  const source = (columns ?? tableColumns?.value ?? []) as any[];
-  if (addIndexColumn ?? injectProps.addIndexColumn) {
+  const source = (props.columns ??
+    toValue(props.table?.columns) ??
+    []) as any[];
+  if (props.addIndexColumn ?? injectProps.value.addIndexColumn) {
     return [
       {
         key: '_index',
         type: 'index',
         label: t('table.index'),
         width: 80,
+        index: getIndex,
       },
       ...source,
     ];
@@ -236,7 +251,13 @@ const normalizedRawColumns = computed(() => {
 
 const computedDataSource = computed<any[]>(() => {
   const attrsData = attrsTableProps.value.data as any[] | undefined;
-  return data ?? attrsData ?? tableData?.value ?? [];
+  return (
+    props.data ??
+    attrsData ??
+    toValue((props.table as any)?.dataSource) ??
+    toValue(props.table?.data) ??
+    []
+  );
 });
 
 const computedTableProps = computed<TableProps>(() => {
@@ -248,40 +269,68 @@ const computedTableProps = computed<TableProps>(() => {
   return merged;
 });
 
+// 分页优先级：tableAttrs 显式配置 > provider 全局配置 > 默认合成
 const computedPagination = computed<false | Partial<PaginationProps>>(() => {
-  if (pagination === false) return false;
-  const pageConfig = pagination ?? {};
+  const attrsPagination = (attrsTableProps.value as any).pagination;
+  if (props.pagination === false || attrsPagination === false) {
+    return false;
+  }
+  const hasUserPagination =
+    isPlainObject(props.pagination) || isPlainObject(attrsPagination);
+  if (hasUserPagination) {
+    const pageConfig = (props.pagination ??
+      attrsPagination ??
+      {}) as Partial<PaginationProps>;
+    const globalPagination =
+      (injectProps.value.pagination as any) === false
+        ? {}
+        : (injectProps.value.pagination as Partial<PaginationProps>) || {};
+    const pageParam = props.table?.pageParam;
+    return {
+      ...globalPagination,
+      ...pick(pageConfig as Record<string, any>, paginationProperties),
+      currentPage: pageParam?.current ?? (pageConfig as any).currentPage ?? 1,
+      pageSize: pageParam?.pageSize ?? (pageConfig as any).pageSize ?? 10,
+      total: pageParam?.total ?? (pageConfig as any).total ?? 0,
+    };
+  }
+
+  if ((injectProps.value.pagination as any) === false) return false;
+
+  const pageParam = props.table?.pageParam;
   return {
-    ...injectProps.pagination,
-    ...pick(pageConfig as Record<string, any>, paginationProperties),
-    currentPage: (pageConfig as any).currentPage ?? pageParam?.current ?? 1,
-    pageSize: (pageConfig as any).pageSize ?? pageParam?.pageSize ?? 10,
-    total: (pageConfig as any).total ?? pageParam?.total ?? 0,
+    ...(injectProps.value.pagination as Partial<PaginationProps>),
+    currentPage: pageParam?.current ?? 1,
+    pageSize: pageParam?.pageSize ?? 10,
+    total: pageParam?.total ?? 0,
   };
 });
 
 const showPagination = computed(() => computedPagination.value !== false);
 
 const onCurrentChange = (current: number) => {
-  setPageParam?.({ current });
+  props.table?.setPageParam?.({ current });
   _search();
 };
 
 const onSizeChange = (pageSize: number) => {
-  setPageParam?.({ pageSize, current: 1 });
+  props.table?.setPageParam?.({ pageSize, current: 1 });
   _search();
 };
 
 const onPaginationChange = (currentPage: number, pageSize: number) => {
+  // 透传 el-pagination change 回调
   attrs.onChange?.(currentPage, pageSize);
 };
 
-const showSearch = computed(() => {
+const searchFormVisible = 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)
+    (computedSearchFormConfig.value as any)?.hidden !== true &&
+    props.table?.searchForm &&
+    fieldList.filter((item: any) => !toValue(item.hidden))?.length > 0
   );
 });
 
@@ -289,13 +338,13 @@ const computedControl = computed<{
   sizeControl: boolean;
   columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
 }>(() => {
-  const mergedControl = control ?? injectProps.control;
+  const mergedControl = props.control ?? injectProps.value.control;
   if (typeof mergedControl === 'boolean') {
     return { sizeControl: mergedControl, columnControl: mergedControl };
   }
   const c = mergedControl as Control;
-  const sizeControl = c.sizeControl ?? true;
-  const columnControl = c.columnControl ?? true;
+  const sizeControl = c?.sizeControl ?? false;
+  const columnControl = c?.columnControl ?? false;
   return { sizeControl: !!sizeControl, columnControl };
 });
 
@@ -313,22 +362,27 @@ const resolvedSize = computed(() => {
 });
 
 onMounted(() => {
-  if (immediateSearch ?? injectProps.immediateSearch) {
+  if (props.immediateSearch ?? injectProps.value.immediateSearch) {
     _search();
   }
 });
+
+defineExpose({
+  /** 手动触发一次查询（与内部搜索共用 loading 竞态守卫），便于外部刷新列表 */
+  search: _search,
+});
 </script>
 
 <template>
   <div class="pro-table" :class="attrs.class" :style="attrs.style">
     <ContainerFragment
-      v-if="showSearch"
+      v-if="searchFormVisible || $slots['search-form']"
       :component="computedSearchFormConfig.container"
     >
       <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"
@@ -338,10 +392,10 @@ onMounted(() => {
 
     <ContainerFragment :component="computedTableContainer">
       <div class="pro-table_header">
-        <div v-if="buttonBarSlot" class="pro-table_header_button-bar">
+        <div v-if="$slots['button-bar']" class="pro-table_header_button-bar">
           <slot name="button-bar" />
         </div>
-        <div v-if="toolbarSlot" class="pro-table_header_toolbar">
+        <div v-if="$slots['toolbar']" class="pro-table_header_toolbar">
           <slot name="toolbar" />
         </div>
         <div
@@ -358,7 +412,7 @@ onMounted(() => {
             :columns="
               normalizedRawColumns.filter(item => item.key !== '_index')
             "
-            :table="table"
+            :table="props.table"
             :column-control="columnControlConfig"
           />
         </div>
@@ -373,7 +427,11 @@ onMounted(() => {
           :data="computedDataSource"
         >
           <TableColumnRenderer :columns="normalizedRawColumns" />
-          <template v-for="name in tableSlotNames" :key="name" #[name]="scoped">
+          <template
+            v-for="name in forwardedSlotNames()"
+            :key="name"
+            #[name]="scoped"
+          >
             <slot :name="name" v-bind="scoped" />
           </template>
         </ElTable>