assistant-todo/src/app/ui/task/project/TreeTablePro.tsx

'use client'
import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { ProTable, TableDropdown } from '@ant-design/pro-components';
import { Button, Dropdown, Space, Tag } from 'antd';
import React, { useRef } from 'react';
import {DataType} from "@/app/lib/definitions";
import {taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data";
const columns: ProColumns<DataType>[] = [
    {
        title: '任务编码',
        dataIndex: 'code',
        // valueType: 'indexBorder',
        width: '10%',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        width: '15%',
        copyable: true,
        ellipsis: true,
        tooltip: '标题过长会自动收缩',
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: '此项为必填项',
                },
            ],
        },
    },
    {
        title: '任务描述',
        dataIndex: 'description',
    },
    {
        disable: true,
        title: '任务状态',
        dataIndex: 'state',
        filters: true,
        onFilter: true,
        ellipsis: true,
        valueType: 'select',
        fieldProps:{options:taskStateList.map(item => {return {label: item.name,value: item.code}})},
    },
    {
        disable: true,
        title: '优先级',
        dataIndex: 'priority',
        valueType: 'select',
        fieldProps:{options:taskPriorityList.map(item => {return {label: item.name,value: item.code}})},
        render: (_, record) => (
            <Space>
                {
                    <Tag color={taskPriorityList.find(item=> item.code===record.priority?.toString())?.color}
                         key={taskPriorityList.find(item=> item.code===record.priority?.toString())?.code}>
                        {taskPriorityList.find(item=> item.code===record.priority?.toString())?.name}
                    </Tag>
                }
            </Space>
        ),
    },
    {
        title: '期望开始时间',
        dataIndex: 'expectedStartTime',
        valueType: 'date',
        hideInTable: true,
        search: {
            transform: (value) => {
                return {
                    startTime: value,
                };
            },
        },
    },

    // {
    //     title: '创建时间',
    //     dataIndex: 'created_at',
    //     valueType: 'dateRange',
    //     hideInTable: true,
    //     search: {
    //         transform: (value) => {
    //             return {
    //                 startTime: value[0],
    //                 endTime: value[1],
    //             };
    //         },
    //     },
    // },
    // {
    //     title: '操作',
    //     valueType: 'option',
    //     key: 'option',
    //     render: (text, record, _, action) => [
    //         <a
    //             key="editable"
    //             onClick={() => {
    //                 action?.startEditable?.(record.id);
    //             }}
    //         >
    //             编辑
    //         </a>,
    //         <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
    //             查看
    //         </a>,
    //         <TableDropdown
    //             key="actionGroup"
    //             onSelect={() => action?.reload()}
    //             menus={[
    //                 { key: 'copy', name: '复制' },
    //                 { key: 'delete', name: '删除' },
    //             ]}
    //         />,
    //     ],
    // },
];

const TreeTablePro: React.FC  = () => {
    const actionRef = useRef<ActionType>();
    return (
        <ProTable<DataType>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params, sort, filter) => {
                console.log(sort, filter);
                // await waitTime(2000);
                // return axios.post<{
                //     data: GithubIssueItem[];
                // }>('https://proapi.azurewebsites.net/github/issues', {
                //     params,
                // });
                const response = await taskTreeResult()
                // axios.post('https://proapi.azurewebsites.net/github/issues', {
                //     params,
                // });
                return {
                    data:response.data.content,
                    success: response.status.success,
                }
                // return response.data;
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                defaultValue: {
                    option: { fixed: 'right', disable: true },
                },
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="任务管理"
            toolBarRender={() => [
                <Button
                    key="button"
                    icon={<PlusOutlined />}
                    onClick={() => {
                        actionRef.current?.reload();
                    }}
                    type="primary"
                >
                    新建
                </Button>,
                // <Dropdown
                //     key="menu"
                //     menu={{
                //         items: [
                //             {
                //                 label: '1st item',
                //                 key: '1',
                //             },
                //             {
                //                 label: '2nd item',
                //                 key: '1',
                //             },
                //             {
                //                 label: '3rd item',
                //                 key: '1',
                //             },
                //         ],
                //     }}
                // >
                //     <Button>
                //         <EllipsisOutlined />
                //     </Button>
                // </Dropdown>,
            ]}></ProTable>
    );
};
export default TreeTablePro