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 {OPERATION_BUTTON_TYPE, taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data";
import {DetailModelForm} from "@/app/ui/task/project/DetailModelForm";

const columns: ProColumns<DataType>[] = [
    {
        title: '任务编码',
        dataIndex: 'code',
        width: '10%',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        width: '15%',
        copyable: true,
        ellipsis: true,
        tooltip: '标题过长会自动收缩',
        formItemProps: {
            rules: [
                {
                    required: true,
                    message: '此项为必填项',
                },
            ],
        },
    },
    {
        title: '任务描述',
        dataIndex: 'description',
    },
    {
        title: '任务优先级',
        dataIndex: 'priority',
        valueType: 'select',
        fieldProps: {
            options: taskPriorityList.map(item => {
                return {label: item.name, value: item.code}
            })
        },
        // renderFormItem: (_, { defaultRender }) => {
        //     return defaultRender(_);
        // },
        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: 'state',
        valueType: 'select',
        fieldProps: {
            options: taskStateList.map(item => {
                return {label: item.name, value: item.code}
            })
        },
        // renderFormItem: (_, { defaultRender }) => {
        //     return defaultRender(_);
        // },
        render: (_, record) => (
            <Space>
                {
                    <Tag color={taskStateList.find(item => item.code === record.state?.toString())?.color}
                         key={taskStateList.find(item => item.code === record.state?.toString())?.code}>
                        {taskStateList.find(item => item.code === record.state?.toString())?.name}
                    </Tag>
                }
            </Space>
        ),
    },
    {
        title: '期望开始时间',
        dataIndex: 'expectedStartTime',
        valueType: 'date',
    },
    {
        title: '期望结束时间',
        dataIndex: 'expectedEndTime',
        valueType: 'date',
    },
    {
        title: '实际开始时间',
        dataIndex: 'actualStartTime',
        valueType: 'date',
    },
    {
        title: '期望结束时间',
        dataIndex: 'actualEndTime',
        valueType: 'date',
    },

];

const TreeTablePro: React.FC = () => {
    // const actionRef = useRef<ActionType>();
    return (
        <ProTable<DataType>
            columns={columns}
            // actionRef={actionRef}
            cardBordered
            request={async (params, sort, filter) => {
                console.log('request',params,sort, filter);
                const response = await taskTreeResult()
                return {
                    data: response.data.content,
                    success: response.status.success,
                }
            }}
            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"
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="任务管理"
            toolBarRender={() => [
                <DetailModelForm operationId={OPERATION_BUTTON_TYPE.ADD} description='添加主线任务'/>,
            ]}></ProTable>
    );
};
export default TreeTablePro