diff --git a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap index 8b52dd30b..87e08e4b4 100644 --- a/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap +++ b/packages/pro/transfer/__tests__/__snapshots__/proTransfer.spec.ts.snap @@ -38,14 +38,17 @@ exports[`ProTransfer > table transfer render work 1`] = ` >
+ +
+
table transfer render work 1`] = ` >
+ +
+
+ + + + diff --git a/packages/pro/transfer/docs/Api.zh.md b/packages/pro/transfer/docs/Api.zh.md index f3635ff40..13ecc0efa 100644 --- a/packages/pro/transfer/docs/Api.zh.md +++ b/packages/pro/transfer/docs/Api.zh.md @@ -26,7 +26,7 @@ |`spin` | 数据列表的加载状态 | `boolean \| { source: boolean, target: boolean }` | `false` | - | - | | `type` | 穿梭框类型 | `'table' \| 'tree'` | `'table'` | - | - | | `tableProps` | 表格自定义参数 | `ProTransferTableProps` | - | - | 仅在 `type` 为 `'table'` 下生效 | -| `treeProps` | 树自定义参数 | `ProTransferTableProps` | - | - | 仅在 `type` 为 `'tree'` 下生效 | +| `treeProps` | 树自定义参数 | `ProTransferTreeProps` | - | - | 仅在 `type` 为 `'tree'` 下生效 | | `virtual` | 是否开启虚拟滚动 | `boolean` | `false` | - | 需要设置 `scroll.height` | | `onChange` | 已选数据改变回调函数 | `(keys: VKey[], oldKeys: Vkey[]) => void` | - | - | - | | `onScroll` | 数据列表滚动事件 | `(isSource: boolean, evt: Event) => void` | - | - | 仅使用默认列表并开启 `virtual` 下可用 | @@ -62,9 +62,12 @@ export interface TransferPaginationProps { } export type ProTransferTableProps = { - sourceColumns: TableColumn[] - targetColumns: TableColumn[] -} & Pick + sourceColumns: ProTableColumn[] + targetColumns: ProTableColumn[] + sourceLayoutTool?: boolean | Omit + targetLayoutTool?: boolean | Omit + onColumnsChange?: (isSource: boolean, columns: ProTableColumn[]) => void +} & Pick export type ProTransferTreeProps = Pick< TreeProps, diff --git a/packages/pro/transfer/src/composables/useTransferTableProps.ts b/packages/pro/transfer/src/composables/useTransferTableProps.ts index ceceecab0..c66a4f827 100644 --- a/packages/pro/transfer/src/composables/useTransferTableProps.ts +++ b/packages/pro/transfer/src/composables/useTransferTableProps.ts @@ -6,12 +6,12 @@ */ import type { ProTransferProps, TransferData } from '../types' -import type { TableColumn, TableColumnSelectable, TableProps } from '@idux/components/table' import type { TransferBindings } from '@idux/components/transfer' +import type { ProTableColumn, ProTableColumnSelectable, ProTableProps } from '@idux/pro/table' import { type ComputedRef, type Slots, computed } from 'vue' -import { isString } from 'lodash-es' +import { isString, omit } from 'lodash-es' import { callEmit } from '@idux/cdk/utils' @@ -23,7 +23,7 @@ export function useTransferTableProps( transferBindings: TransferBindings, mergedPrefixCls: ComputedRef, isSource: boolean, -): ComputedRef { +): ComputedRef { const { paginatedData, paginatedDataSource, selectedKeys, getKey } = transferBindings const convertedColumns = computed(() => @@ -37,12 +37,14 @@ export function useTransferTableProps( ), ) - const onScroll: TableProps['onScroll'] = evt => callEmit(props.onScroll, isSource, evt) - const onScrolledChange: TableProps['onScrolledChange'] = (startIndex, endIndex, visibleData) => + const onScroll: ProTableProps['onScroll'] = evt => callEmit(props.onScroll, isSource, evt) + const onScrolledChange: ProTableProps['onScrolledChange'] = (startIndex, endIndex, visibleData) => callEmit(props.onScrolledChange, isSource, startIndex, endIndex, visibleData) - const onScrolledBottom: TableProps['onScrolledBottom'] = () => callEmit(props.onScrolledBottom, isSource) + const onScrolledBottom: ProTableProps['onScrolledBottom'] = () => callEmit(props.onScrolledBottom, isSource) + const onColumnsChange: ProTableProps['onColumnsChange'] = columns => + callEmit(props.tableProps?.onColumnsChange, isSource, columns) - return computed(() => { + return computed(() => { /* eslint-disable indent */ const scroll = props.scroll?.height ? { @@ -52,20 +54,34 @@ export function useTransferTableProps( : undefined /* eslint-disable indent */ - const customTableProps = { ...(props.tableProps ?? {}) } - delete customTableProps.sourceColumns - delete customTableProps.targetColumns + const customTableProps = omit( + props.tableProps, + 'sourceColumns', + 'targetColumns', + 'targetLayoutTool', + 'sourceLayoutTool', + 'onColumnsChange', + ) + + const layoutTool = isSource ? props.tableProps?.sourceLayoutTool : props.tableProps?.targetLayoutTool + const mergedLayoutTool = !layoutTool + ? false + : layoutTool === true + ? { changeSize: false } + : { ...layoutTool, changeSize: false } return { autoHeight: !scroll, ...customTableProps, dataSource: isSource && props.mode === 'immediate' ? paginatedDataSource.value : paginatedData.value, columns: convertedColumns.value, + layoutTool: mergedLayoutTool, scroll, pagination: false, selectedRowKeys: selectedKeys.value, virtual: props.virtual, getKey: getKey.value as (record: unknown) => number | string, + onColumnsChange, onScroll, onScrolledChange, onScrolledBottom, @@ -74,20 +90,29 @@ export function useTransferTableProps( } function convertTableColumns( - columns: TableColumn[] | undefined, + columns: ProTableColumn[] | undefined, mergedPrefixCls: ComputedRef, transferBindings: TransferBindings, props: ProTransferProps, slots: Slots, isSource: boolean, -): TableColumn[] { +): ProTableColumn[] { const { handleSelectChange, getKey, triggerRemove, disabledDataSourceKeys, disabledKeys } = transferBindings const convertedColumns = (columns && [...columns]) ?? [] const selectableColumnIdx = convertedColumns.findIndex(col => 'type' in col && col.type === 'selectable') const cellDisabledKeys = isSource && props.mode === 'immediate' ? disabledDataSourceKeys : disabledKeys - const defaultSelectableColumn: TableColumnSelectable = { + const layoutDisabledColumnConfig = { + layoutable: false, + changeFixed: false, + changeIndex: false, + changeVisible: false, + visible: true, + } + + const defaultSelectableColumn: ProTableColumnSelectable = { + ...layoutDisabledColumnConfig, type: 'selectable', disabled: record => cellDisabledKeys.value.has(getKey.value(record)) || !!props.disabled, multiple: true, @@ -100,7 +125,7 @@ function convertTableColumns( convertedColumns.unshift(defaultSelectableColumn) } else { convertedColumns[selectableColumnIdx] = { - ...(convertedColumns[selectableColumnIdx] as TableColumnSelectable), + ...(convertedColumns[selectableColumnIdx] as ProTableColumnSelectable), ...defaultSelectableColumn, } } @@ -112,6 +137,7 @@ function convertTableColumns( const lastCol = convertedColumns[convertedColumns.length - 1] if ('type' in lastCol) { convertedColumns.push({ + ...layoutDisabledColumnConfig, customCell: ({ record }: { record: TransferData }) => { const key = getKey.value(record) return renderRemovableLabel( @@ -141,6 +167,7 @@ function convertTableColumns( convertedColumns.splice(convertedColumns.length - 1, 1, { ...lastCol, + ...layoutDisabledColumnConfig, //eslint-disable-next-line @typescript-eslint/no-explicit-any customCell: (data: { value: any; record: any; rowIndex: number }) => { const key = getKey.value(data.record) diff --git a/packages/pro/transfer/src/content/ProTransferTable.tsx b/packages/pro/transfer/src/content/ProTransferTable.tsx index a7990199f..0a0af98f5 100644 --- a/packages/pro/transfer/src/content/ProTransferTable.tsx +++ b/packages/pro/transfer/src/content/ProTransferTable.tsx @@ -8,8 +8,8 @@ import { computed, defineComponent, inject } from 'vue' import { ɵEmpty } from '@idux/components/_private/empty' -import { IxTable } from '@idux/components/table' import { TRANSFER_SOURCE_TOKEN, TRANSFER_TARGET_TOKEN } from '@idux/components/transfer' +import { IxProTable } from '@idux/pro/table' import { useTransferTableProps } from '../composables/useTransferTableProps' import { proTransferContext } from '../token' @@ -43,7 +43,7 @@ export default defineComponent({ if (dataSource && dataSource.length > 0) { const contentRef = props.isSource ? sourceContentRef : targetContentRef - return + return } return ( diff --git a/packages/pro/transfer/src/types.ts b/packages/pro/transfer/src/types.ts index d0d0a0bc7..33630f4ee 100644 --- a/packages/pro/transfer/src/types.ts +++ b/packages/pro/transfer/src/types.ts @@ -11,7 +11,6 @@ import type { VirtualScrollToFn } from '@idux/cdk/scroll' import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray, TreeTypeData, VKey } from '@idux/cdk/utils' import type { CascaderStrategy } from '@idux/components/cascader' import type { EmptyProps } from '@idux/components/empty' -import type { TableColumn, TableProps } from '@idux/components/table' import type { SearchFn, TransferData, @@ -20,6 +19,7 @@ import type { TransferScroll, } from '@idux/components/transfer' import type { TreeProps } from '@idux/components/tree' +import type { ProTableColumn, ProTableLayoutToolProps, ProTableProps } from '@idux/pro/table' import type { DefineComponent, HTMLAttributes, PropType } from 'vue' export type ProTransferTypes = 'table' | 'tree' @@ -29,9 +29,12 @@ export type TreeTransferData, C extends TreeTypeData export type ProTransferTableProps = { - sourceColumns: TableColumn[] - targetColumns: TableColumn[] -} & Pick + sourceColumns: ProTableColumn[] + targetColumns: ProTableColumn[] + sourceLayoutTool?: boolean | Omit + targetLayoutTool?: boolean | Omit + onColumnsChange?: (isSource: boolean, columns: ProTableColumn[]) => void +} & Pick export type ProTransferTreeProps = Pick< TreeProps,