feat: 添加表字段行操作，包括复制、删除、上/下移

src/components/Table/src/components/TableAction.vue

@@ -61,7 +61,7 @@
                     .map((action) => {
                         const { popConfirm } = action
                         return {
-                            getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+                            getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
                             type: 'link',
                             size: 'small',
                             ...action,
@@ -93,12 +93,12 @@
             const getAlign = computed(() => {
                 const columns = (table as TableActionType)?.getColumns?.() || []
                 const actionColumn = columns.find((item) => item.flag === ACTION_COLUMN_FLAG)
-                return actionColumn?.align ?? 'left'
+                return actionColumn?.align ?? 'center'
             })
 
             function getTooltip(data: string | TooltipProps): TooltipProps {
                 return {
-                    getPopupContainer: () => unref((table as any)?.wrapRef.value) ?? document.body,
+                    getPopupContainer: () => unref((table as any)?.wrapRef) ?? document.body,
                     placement: 'bottom',
                     ...(isString(data) ? { title: data } : data),
                 }

src/views/demo/tools/online/form/data.tsx

@@ -268,7 +268,8 @@ export const fieldTypeOptions: SelectProps['options'] = [
     },
 ]
 
-export interface DataSourceSchema {
+export interface DatabaseSchema {
+    id?: string
     field?: string
     comment?: string
     type?: FieldType
@@ -286,7 +287,7 @@ export interface DataSourceSchema {
  * 获取数据源字段列表
  * @returns Column[]
  */
-export function getDataSourceSchemaColumns(): VxeGridPropTypes.Columns {
+export function getDatabaseSchemaColumns(): VxeGridPropTypes.Columns {
     return [
         {
             type: 'html',
@@ -380,10 +381,17 @@ export function getDataSourceSchemaColumns(): VxeGridPropTypes.Columns {
                 },
             },
         },
+        {
+            title: '操作',
+            align: 'center',
+            fixed: 'right',
+            width: 150,
+            slots: { default: 'action' },
+        },
     ]
 }
 
-export function getDefaultSchemaFieldDataSourcesByType(type: string): DataSourceSchema[] {
+export function getDefaultSchemaFieldDataSourcesByType(type: string): DatabaseSchema[] {
     if (type === 'SingleGeneral') {
         return [
             {

src/views/demo/tools/online/form/edit.vue

 <script lang="ts" setup>
+    import type { ActionItem } from '/@/components/Table'
+    import type { BasicTableProps, VxeGridInstance } from '/@/components/VxeTable'
     import { nanoid } from 'nanoid'
     import { TabPane, Tabs } from 'ant-design-vue'
-    import { databaseTypeOptions, getDataSourceSchemaColumns, getDefaultSchemaFieldDataSourcesByType } from './data'
+    import type { DatabaseSchema } from './data'
+    import { databaseTypeOptions, getDatabaseSchemaColumns, getDefaultSchemaFieldDataSourcesByType } from './data'
     import { Icon } from '@/components/Icon'
     import { BasicForm, useForm } from '/@/components/Form'
-    import type { BasicTableProps, VxeGridInstance } from '/@/components/VxeTable'
+    import { TableAction } from '/@/components/Table'
     import { VxeBasicTable } from '/@/components/VxeTable'
     import { BasicModal, useModalInner } from '/@/components/Modal'
     import { useSortable } from '/@/hooks/web/useSortable'
@@ -75,13 +78,15 @@
     const databaseSchemaTable = ref<VxeGridInstance>()
     const databaseSchemaTableOptions = reactive<BasicTableProps>({
         id: nanoid(),
+        // FIXME: 修复表格高度自适应问题
+        // height: 'auto',
         autoResize: true,
         stripe: false,
         keepSource: true,
         showOverflow: true,
         rowConfig: { useKey: true, keyField: 'id' },
         checkboxConfig: { checkMethod: ({ row }) => !row.disabled },
-        columns: getDataSourceSchemaColumns(),
+        columns: getDatabaseSchemaColumns(),
         data: getDefaultSchemaFieldDataSourcesByType(defaultTableType),
         editConfig: { trigger: 'click', mode: 'cell', showStatus: false, beforeEditMethod: ({ row }) => !row.disabled },
         editRules: {
@@ -147,7 +152,7 @@
 
                                 await table?.removeCheckboxRow()
                                 await table?.updateData()
-                                onCheckboxChange()
+                                onDatabaseSchemaCheckboxChange()
                             },
                         },
                     },
@@ -156,10 +161,72 @@
         },
     })
 
-    const onCheckboxChange = () => {
+    const onDatabaseSchemaCheckboxChange = () => {
         const checkedRecords = databaseSchemaTable.value?.getCheckboxRecords()
         databaseSchemaTableOptions.toolbarConfig.buttons[1].buttonRender.props.disabled = !checkedRecords?.length
     }
+
+    const createDatabaseSchemaTableActions = (record: DatabaseSchema) => {
+        const actions: ActionItem[] = [
+            {
+                icon: 'carbon:arrow-up',
+                onClick: async () => {
+                    const table = databaseSchemaTable.value
+                    const source = table?.getRowById(record.id)
+                    const oldIndex = table?.getRowIndex(source)
+                    const newIndex = oldIndex - 1 < 0 ? 0 : oldIndex - 1
+                    const currRow = table.data.splice(oldIndex, 1)[0]
+                    table.data.splice(newIndex, 0, currRow)
+                    databaseSchemaTableOptions.data = [...table.data]
+                    await table?.updateData()
+                },
+            },
+            {
+                icon: 'carbon:arrow-down',
+                onClick: async () => {
+                    const table = databaseSchemaTable.value
+                    const source = table?.getRowById(record.id)
+                    const oldIndex = table?.getRowIndex(source)
+                    const newIndex = oldIndex + 1 > table.data.length - 1 ? table.data.length - 1 : oldIndex + 1
+                    const currRow = table.data.splice(oldIndex, 1)[0]
+                    table.data.splice(newIndex, 0, currRow)
+                    databaseSchemaTableOptions.data = [...table.data]
+                    await table?.updateData()
+                },
+            },
+            {
+                icon: 'carbon:copy',
+                tooltip: '复制',
+                onClick: async () => {
+                    const table = databaseSchemaTable.value
+                    const source = table?.getRowById(record.id)
+                    const index = table?.getRowIndex(source)
+                    const { row } = await table?.insertAt({ ...record, id: nanoid() }, source)
+                    databaseSchemaTableOptions.data.splice(index + 1, 0, row)
+                    await table?.updateData()
+                    await table?.setEditCell(row, 'field')
+                },
+            },
+            {
+                icon: 'carbon:trash-can',
+                tooltip: '删除',
+                color: 'error',
+                popConfirm: {
+                    title: '是否确认删除',
+                    confirm: async () => {
+                        const table = databaseSchemaTable.value
+                        // 更新数据
+                        databaseSchemaTableOptions.data = databaseSchemaTableOptions.data.filter(
+                            (item) => record.id !== item.id,
+                        )
+                        await table?.updateData()
+                    },
+                },
+            },
+        ]
+
+        return record.field === 'id' ? [] : actions
+    }
 </script>
 
 <template>
@@ -179,9 +246,13 @@
                     <VxeBasicTable
                         ref="databaseSchemaTable"
                         v-bind="databaseSchemaTableOptions"
-                        @checkbox-change="onCheckboxChange"
-                        @checkbox-all="onCheckboxChange"
-                    />
+                        @checkbox-change="onDatabaseSchemaCheckboxChange"
+                        @checkbox-all="onDatabaseSchemaCheckboxChange"
+                    >
+                        <template #action="{ row }">
+                            <TableAction outside :actions="createDatabaseSchemaTableActions(row)" />
+                        </template>
+                    </VxeBasicTable>
                 </TabPane>
 
                 <TabPane key="db-foreign-key">