assistant-todo/src/app/ui/task/four/TreeTable.tsx

'use client'
import React, {useEffect, useState} from 'react';
import {ConfigProvider, Table} from 'antd';
import type {TableColumnsType, TableProps} from 'antd';
import {getTaskTreeResult, taskPriorityList, taskStateList, taskTreeResult} from "@/app/lib/task/project/data";
import {DataType, ResponseVO, ResultPage} from "@/app/lib/definitions";
import OperationButton from "@/app/ui/task/OperationButton";
import dayjs from "dayjs";
import "@/app/ui/task/four/detailForm.modules.css"
type TableRowSelection<T> = TableProps<T>['rowSelection'];


const columns: TableColumnsType<DataType> = [
    {
        title: '任务编码',
        dataIndex: 'code',
        key: 'code',
        width: '10%',
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        key: 'name',
        width: '20%',
    },
    // {
    //     title: '任务描述',
    //     dataIndex: 'description',
    //     // width: '30%',
    //     key: 'description',
    // },
    {
        title: '任务状态',
        dataIndex: 'state',
        width: '10%',
        key: 'state',
    },
    // {
    //     title: '优先级',
    //     dataIndex: 'priority',
    //     width: '10%',
    //     key: 'priority',
    // },
    {
        title: '期望开始时间',
        dataIndex: 'expectedStartTime',
        width: '10%',
        key: 'expectedStartTime',
    },
    {
        title: '操作',
        dataIndex: 'action',
        width: '10%',
        key: 'action',
    },
];


// rowSelection objects indicates the need for row selection
const rowSelection: TableRowSelection<DataType> = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
        console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
        console.log(selected, selectedRows, changeRows);
    },
};

interface TableSearchType {
    search?: any
    priority:string
}

const TreeTable: React.FC<TableSearchType> = (props) => {
    function recursionActionChild(children: DataType[]) {
        if (children.length === 0) {
            return;
        }
        for (let item of children) {
            item.key = item.id;
            item.action = (
                <OperationButton itemId={item.id} pid={item.pid} pPid={item.pPid} refreshDate={refreshDate}/>)
            item.state = taskStateList.find(taskState => taskState.code === item.state?.toString())?.name;
            item.priority = taskPriorityList.find(taskPriority => taskPriority.code === item.priority?.toString())?.name;
            if (item.expectedStartTime) {
                item.expectedStartTime = dayjs(item.expectedStartTime).format('YYYY-MM-DD HH:mm:ss')
            }
            if (item.children && item.children.length > 0) {
                if (item.children && item.children.length > 0) {
                    recursionActionChild(item.children)
                } else {
                    item.children = undefined
                }
            }
        }
    }
    // const [checkStrictly, setCheckStrictly] = useState(false);
    const [data, setData] = useState<DataType[]>([]);
    const [pageNumber, setPageNumber] = useState<number>(1);
    const [pageSize, setPageSize] = useState<number>(100);
    const refreshDate = (): void => {
        getTaskTreeResult(JSON.stringify({
            pageSize,
            pageNumber,
            data: props.search
        })).then((result: ResponseVO<ResultPage<DataType>>) => {
            if (result.status.success) {
                recursionActionChild(result.data.content);
                setData(result.data.content)
            }
        })
    }
    useEffect(() => {
        refreshDate();
    }, [props.search]);
    return (
        <>
            <ConfigProvider
                theme={{
                    components: {
                        Table: {
                            headerBg:taskPriorityList.find((item)=>item.code===props.priority)?.color
                            /* 这里是你的组件 token */
                        },
                    },
                }}
            >
                <Table
                    columns={columns}
                    // rowSelection={{ ...rowSelection, checkStrictly}}
                    dataSource={data}
                    pagination={{ pageSize: 5 }}
                    scroll={{ y: 280 }}
                />
            </ConfigProvider>
            {/*<Space align="center" style={{ marginBottom: 16 }}>*/}
            {/*    CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
            {/*</Space>*/}
            {/*<ColorPicker defaultValue="#1677ff" showText/>*/}
        </>
    );
};

export default TreeTable;