feat(pro:transfer): add layoutTool support to table transfer (#1579)

IDuxFE · Jul 6, 2023 · 6c6d41b · 6c6d41b
1 parent 90a1a8a
commit 6c6d41b
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 26 deletions.
diff --git 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`] = `
         >
           
           <div
-            class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-transfer-table-content"
+            class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-table ix-pro-transfer-table-content"
           >
             
+            
             <!---->
+            
             <div
               class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
             >
               
+              <!---->
               <div
                 class="ix-table-fixed-holder"
                 style="overflow: hidden;"
@@ -1212,14 +1215,17 @@ exports[`ProTransfer > table transfer render work 1`] = `
         >
           
           <div
-            class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-transfer-table-content"
+            class="ix-table ix-table-auto-height ix-table-borderless ix-table-md ix-pro-table ix-pro-transfer-table-content"
           >
             
+            
             <!---->
+            
             <div
               class="ix-table-container ix-table-fixed-layout ix-table-scroll-vertical"
             >
               
+              <!---->
               <div
                 class="ix-table-fixed-holder"
                 style="overflow: hidden;"

diff --git a/packages/pro/transfer/demo/TableLayoutTool.md b/packages/pro/transfer/demo/TableLayoutTool.md
@@ -0,0 +1,14 @@
+---
+order: 111
+title:
+  zh: 表格穿梭框布局工具
+  en: Table transfer layoutTool
+---
+
+## zh
+
+通过 `tableProps.sourceLayoutTool` 和 `tableProps.targetLayoutTool` 指定待选框和已选框的布局工具配置
+
+## en
+
+Set layoutTool config via `tableProps.sourceLayoutTool` and `tableProps.targetLayoutTool`.
diff --git a/packages/pro/transfer/demo/TableLayoutTool.vue b/packages/pro/transfer/demo/TableLayoutTool.vue
@@ -0,0 +1,64 @@
+<template>
+  <IxProTransfer
+    v-model:value="targetKeys"
+    type="table"
+    :scroll="{ width: { source: 500 } }"
+    :data-source="dataSource"
+    :table-props="tableProps"
+  />
+</template>
+
+<script setup lang="ts">
+import type { TransferData } from '@idux/pro/transfer'
+
+import { ref } from 'vue'
+
+import { TableColumn } from '@idux/components/table'
+
+interface Data extends TransferData {
+  key: number
+  disabled: boolean
+  name: string
+  age: number
+  address: string
+}
+
+const sourceColumns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+]
+
+const targetColumns: TableColumn<Data>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+  },
+]
+
+const tableProps = {
+  sourceColumns,
+  targetColumns,
+  sourceLayoutTool: true,
+  targetLayoutTool: false,
+}
+
+const targetKeys = ref<number[]>(Array.from(new Array(10)).map((_, idx) => idx))
+
+const dataSource: Data[] = Array.from(new Array(20)).map((_, idx) => ({
+  key: idx,
+  disabled: [1, 6, 12, 16].includes(idx),
+  name: 'Candidate' + idx,
+  age: idx,
+  address: 'London No.1 Lake Park',
+}))
+</script>
diff --git 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<T = any, K = VKey> = {
-  sourceColumns: TableColumn<T, K>[]
-  targetColumns: TableColumn<T, K>[]
-} & Pick<TableProps, 'tableLayout' | 'ellipsis' | 'borderless'>
+  sourceColumns: ProTableColumn<T, K>[]
+  targetColumns: ProTableColumn<T, K>[]
+  sourceLayoutTool?: boolean | Omit<ProTableLayoutToolProps, 'changeSize'>
+  targetLayoutTool?: boolean | Omit<ProTableLayoutToolProps, 'changeSize'>
+  onColumnsChange?: (isSource: boolean, columns: ProTableColumn<T, K>[]) => void 
+} & Pick<ProTableProps, 'tableLayout' | 'ellipsis' | 'borderless'>
 
 export type ProTransferTreeProps = Pick<
   TreeProps,

diff --git 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<string>,
   isSource: boolean,
-): ComputedRef<TableProps> {
+): ComputedRef<ProTableProps> {
   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<TableProps>(() => {
+  return computed<ProTableProps>(() => {
     /* 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<string>,
   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
@@ -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 <IxTable ref={contentRef} v-slots={slots} class={prefixCls} {...tableProps.value} />
+        return <IxProTable ref={contentRef} v-slots={slots} class={prefixCls} {...tableProps.value} />
       }
 
       return (

diff --git 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<V extends object = Record<VKey, unknown>, C extends
   TreeTypeData<V, C>
 
 export type ProTransferTableProps<T = any, K = VKey> = {
-  sourceColumns: TableColumn<T, K>[]
-  targetColumns: TableColumn<T, K>[]
-} & Pick<TableProps, 'tableLayout' | 'ellipsis' | 'borderless'>
+  sourceColumns: ProTableColumn<T, K>[]
+  targetColumns: ProTableColumn<T, K>[]
+  sourceLayoutTool?: boolean | Omit<ProTableLayoutToolProps, 'changeSize'>
+  targetLayoutTool?: boolean | Omit<ProTableLayoutToolProps, 'changeSize'>
+  onColumnsChange?: (isSource: boolean, columns: ProTableColumn<T, K>[]) => void
+} & Pick<ProTableProps, 'tableLayout' | 'ellipsis' | 'borderless'>
 
 export type ProTransferTreeProps = Pick<
   TreeProps,