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

'use client'
import React, {useEffect, useState} from 'react';
import {Button, ColorPicker, Dropdown, MenuProps, Space, Switch, 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 {DownOutlined} from "@ant-design/icons";
import {useSearchParams, usePathname, useRouter} from 'next/navigation';
import OperationButton from "@/app/ui/task/project/OperationButton";

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: '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
}

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.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>(10);
    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();
    }, []);
    return (
        <>
            {/*<Space align="center" style={{ marginBottom: 16 }}>*/}
            {/*    CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />*/}
            {/*</Space>*/}
            {/*<ColorPicker defaultValue="#1677ff" showText/>*/}
            <Table
                columns={columns}
                // rowSelection={{ ...rowSelection, checkStrictly}}
                dataSource={data}
            />
        </>
    );
};

export default TreeTable;