@qin-ui/antd-vue-pro 2.3.4 → 2.4.1

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

@@ -7,7 +7,7 @@ import {
   MenuItem,
   Checkbox,
 } from '../../../shared/ui';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { Columns, ColumnControlConfig } from '../types';
 import { type Table } from '../hooks/useTable';
 import FilterOutlined from './icons/FilterOutlined.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),
       });
     });
@@ -120,21 +121,15 @@ 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>
 
@@ -149,7 +144,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';
@@ -71,6 +74,8 @@ import { Column, Columns, ColumnControlConfig } from '../types';
 
 defineOptions({ name: 'ProTable', inheritAttrs: false });
 
+const tableProperties = Object.keys(tableProps());
+
 type Control = {
   sizeControl: boolean;
   columnControl: boolean | ColumnControlConfig<Path<RecordType>>;
@@ -100,74 +105,84 @@ 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 tableProperties = Object.keys(tableProps());
+const injectPropsRaw = inject(config.injectionKey, config.default);
+const injectProps = computed(() => toValue(injectPropsRaw) || {});
 
-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 函数
+// 递增序号做请求竞态守卫，仅最新一次请求可变更 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 TableSlots = Omit<ComponentSlots<typeof ATable>, 'bodyCell'> &
   Readonly<{
     bodyCell?: (props: {
       text: any;
-      value: any;
       record: RecordType;
       index: number;
       column: Column<RecordType>;
@@ -176,23 +191,19 @@ type TableSlots = Omit<ComponentSlots<typeof ATable>, 'bodyCell'> &
 type Slots = Omit<TableSlots & CustomSlots, 'default'>;
 
 const slots = defineSlots<Slots>();
-const {
-  'search-form': searchFormSlot,
-  'button-bar': buttonBarSlot,
-  toolbar: toolbarSlot,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  table: tableSlot,
-  ...tableSlots
-} = slots;
+const forwardedSlotNames = () =>
+  (Object.keys(slots) as Array<Extract<keyof Slots, string>>).filter(
+    name => !customSlotNames.includes(name as any)
+  );
 
 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 +212,92 @@ 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 => ({
+// 序号列随分页偏移：第 n 页首行序号 = (n-1)*pageSize + i + 1（无分页时退化为 index+1）
+const getIndex = (i: number) => {
+  const pageParam = props.table?.pageParam;
+  if (pageParam && computedPagination.value !== false) {
+    const current = pageParam.current ?? 1;
+    const pageSize = pageParam.pageSize ?? 10;
+    return (current - 1) * pageSize + i + 1;
+  }
+  return i + 1;
+};
+
+const indexColumn = computed<ColumnType>(() => ({
   title: t('table.index'),
   dataIndex: '_index',
+  key: '_index',
   width: 80,
-  customRender: ({ index }) => index + 1,
+  customRender: ({ index }) => getIndex(index),
+}));
+
+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 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?.hidden !== true &&
+    props.table?.searchForm &&
+    fieldList.filter(item => !toValue(item.hidden)).length > 0
   );
 });
 
@@ -267,14 +305,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,22 +324,27 @@ const columnControlConfig = 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"
@@ -308,10 +354,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
@@ -325,8 +371,8 @@ onMounted(() => {
           class="pro-table_header_column-control"
         >
           <ColumnControl
-            :columns="computedColumns as any"
-            :table="table"
+            :columns="computedColumns"
+            :table="props.table"
             :column-control="columnControlConfig"
           />
         </div>
@@ -344,7 +390,7 @@ onMounted(() => {
           @change="onTableChange"
         >
           <template
-            v-for="(_, name) of tableSlots"
+            v-for="name of forwardedSlotNames()"
             :key="name"
             #[name]="scoped"
           >