- 首先是要添加依赖,如果已经有了可以不用理会
"@ant-design/pro-table": "^2.30.8",
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/modifiers": "^7.0.0",
"@dnd-kit/sortable": "^8.0.0",
- 直接上代码
注意事项代码中都注明了
import type { ProColumns } from '@ant-design/pro-table';
import {
EditableProTable
} from '@ant-design/pro-table';
import React, {useContext, useMemo, useState} from 'react';
import { HolderOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, notification, Drawer, Tag, Popconfirm, message, Divider, Form, Space, Spin, Select } from 'antd';
import { history, Link, useIntl } from 'umi';
import { addFlowEntry, deleteFlowEntry, flowPublish, queryFlowEntryList } from '@/services/flowEntry-service';
import { SelectModel, TableFetchRequest } from '@/components/table/model';
import { FlowEntryDto, FlowEntryModel, FlowEntryRequest } from '@/types/flowEntry-type';
import { loadFlowCategoryData } from '@/services/flowCategory-service';
import PublishFlowForm from './components/formPublishedFlowEntry';
import NodeSetPage from './components/nodeSet';
import styles from './index.less';
import { DndContext, DragEndEvent } from '@dnd-kit/core';
import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
import { CSS } from '@dnd-kit/utilities';
import { Result } from '@/utils/request';
const waitTime = (time: number = 100) => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(true);
}, time);
});
};
type DataSourceType = {
id: React.Key;
title?: string;
readonly?: string;
decs?: string;
state?: string;
created_at?: number;
update_at?: number;
children?: DataSourceType[];
};
interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
'data-row-key': string;
}
interface RowContextProps {
setActivatorNodeRef?: (element: HTMLElement | null) => void;
listeners?: SyntheticListenerMap;
}
const DragHandle: React.FC = () => {
const { setActivatorNodeRef, listeners } = useContext(RowContext);
return (
<Button
type="text"
size="small"
icon={<HolderOutlined />}
style={{ cursor: 'move' }}
ref={setActivatorNodeRef}
{...listeners}
/>
);
};
const RowContext = React.createContext<RowContextProps>({});
const CusRow: React.FC<RowProps> = (props) => {
const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
id: props['data-row-key'],
});
const style: React.CSSProperties = {
...props.style,
transform: CSS.Translate.toString(transform),
transition,
...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),
};
const contextValue = useMemo<RowContextProps>(() => ({ setActivatorNodeRef, listeners }), [
setActivatorNodeRef,
listeners,
]);
return (
<RowContext.Provider value={contextValue}>
<tr {...props} ref={setNodeRef} style={style} {...attributes} />
</RowContext.Provider>
);
};
export default () => {
const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
const [dataSource, setDataSource] = useState<readonly DataSourceType[]>([]);
const [columnNames, setColumnNames] = useState<any[]>([{label:'test',value:'test'}]);
const [tableName, setTableName] = useState<string>('');
const FormColumns: ProColumns[] = [
{
key: 'sort',
dataIndex: 'key',
editable: false,
width: 30,
render: () => <DragHandle />,
},
{
title: '列名',
dataIndex: 'columnName',
key: 'columnName',
valueType: 'select',
renderFormItem: (_, config, formInstance) => (
<Select
options={columnNames}
onChange={(event: any) => {
let temp = dataSource;
for (let item of temp) {
if (item.id == config.record.id) {
item.columnName = event;
break;
}
}
setDataSource(temp);
}}
/>
),
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '字段名',
dataIndex: 'objectFieldName',
key: 'objectFieldName',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: 'Label名',
dataIndex: 'labelName',
key: 'labelName',
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '组件类别',
dataIndex: 'objectFieldType',
key: 'objectFieldType',
valueType: 'select',
valueEnum: {
select: {
text: 'Select',
},
input: {
text: 'Input',
},
description: {
text: 'Description',
},
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '超链接',
dataIndex: 'linkUrl',
key: 'linkUrl',
},
{
title: 'Cell数量',
dataIndex: 'cellCount',
key: 'cellCount',
valueType: 'select',
width: 100,
valueEnum: {
'1': {
text: '1',
},
'2': {
text: '2',
},
'3': {
text: '3',
},
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '编辑',
dataIndex: 'isEdit',
key: 'isEdit',
valueType: 'select',
width: 100,
valueEnum: {
Y: {
text: 'True',
},
N: {
text: 'False',
},
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '必填',
dataIndex: 'isRequire',
key: 'isRequire',
valueType: 'select',
width: 100,
valueEnum: {
Y: {
text: 'True',
},
N: {
text: 'False',
},
},
formItemProps: {
rules: [
{
required: true,
message: '此项为必填项',
},
],
},
},
{
title: '操作',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
<a
key="editable"
onClick={() => {
action?.startEditable?.(record.id);
}}
>
编辑
</a>,
<a
key="delete"
onClick={() => {
setDataSource(dataSource.filter((item) => item.id !== record.id));
}}
>
删除
</a>,
],
},
];
const onDragEnd = ({ active, over }: DragEndEvent) => {
if (active.id !== over?.id) {
if (editableKeys.length > 0) {
message.warning('编辑中不允许调整排序');
return;
}
const tableDataSource = dataSource;
const activeIndex = tableDataSource.findIndex((i) => i.id === active.id);
const overIndex = tableDataSource.findIndex((i) => i.id === over?.id);
const dagEndList = arrayMove(tableDataSource, activeIndex, overIndex);
setDataSource([...dagEndList]);
}
};
return (
<>
<DndContext onDragEnd={onDragEnd} modifiers={[restrictToVerticalAxis]}>
<SortableContext items={dataSource.map((i) => i.id)} strategy={verticalListSortingStrategy}>
<EditableProTable
rowKey="id"
headerTitle="可编辑表格"
maxLength={5}
scroll={{
x: 960,
}}
recordCreatorProps={{
position: 'bottom',
record: () => {
return {
id: dataSource.length + 1,
objectFieldType: 'description',
cellCount: '1',
isEdit: 'N',
isRequire: 'N',
};
},}}
loading={false}
columns={FormColumns}
value={dataSource}
onChange={setDataSource}
editable={{
type: 'multiple',
editableKeys,
onSave: async (rowKey, data, row) => {
console.log(rowKey, data, row);
await waitTime(2000);
},
onChange: setEditableRowKeys,
}}
components={{
body: {
row: CusRow,
},
}}
/>
</SortableContext>
</DndContext>
</>
);
};