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

'use client'
import {
    CheckSquareFilled, CopyOutlined,
    QuestionCircleOutlined
} from '@ant-design/icons';
import type {ActionType, FormInstance, ProColumns, ProFormInstance} from '@ant-design/pro-components';
import {ProTable, TableDropdown} from '@ant-design/pro-components';
import {DatePicker, Dropdown, Space, Switch, Tag, Tooltip} from 'antd';
import React, {Fragment, useContext, useEffect, useRef} from 'react';
import {DataType} from "@/lib/definitions";
import {
    getTaskTreeResultAPI,
    OPERATION_BUTTON_TYPE,
    taskPriorityList,
    taskStateList,
} from "@/lib/task/project/data";
import {DetailModelForm} from "@/ui/task/project/DetailModelForm";
import OperationButton from "@/ui/task/OperationButton";
import dayjs from "dayjs";
import '@/ui/task/project/TreeTablePro.modules.css'
import {useSearchParams} from "next/navigation";
import {TaskWebSelectVO} from "@/lib/task/project/definitions";
import TaskNameAndIcon from "@/components/TaskNameAndIcon";
import {copyToClipboard} from "@/lib/copyToClipboard";
import LocalContext from "@/ui/LocalContent";

const TreeTablePro: React.FC = (props: { joinId?: string }) => {
    // 刷新表格
    const actionRef = useRef<ActionType>();
    // 列表和树切换
    const [switchChecked, setSwitchChecked] = React.useState(true);
    // 树子集是否参与过滤
    const [filterChecked, setFilterChecked] = React.useState(true);
    // 页码信息
    const [currentPage, setCurrentPage] = React.useState(1);
    const [pageSize, setPageSize] = React.useState(10);
    const {taskState: state} = useContext(LocalContext);
    // 获取路径参数pid
    const pathPid = useSearchParams().get('pid');
    const pid = pathPid ? pathPid : '0';
    // 时间范围选择
    const {RangePicker} = DatePicker;
    // 列字段定义
    const columns: ProColumns<DataType>[] = [
        {
            key: 'name',
            title: '任务名称',
            dataIndex: 'name',
            width: '15%',
            copyable: true,
            ellipsis: true,
            tooltip: '标题过长会自动收缩',
            formItemProps: {
                rules: [
                    {
                        required: true,
                        message: '此项为必填项',
                    },
                ],
            },
            render: (_, record) => {
                return <TaskNameAndIcon task={record}/>
            }
        },
        {
            key: 'description',
            title: '任务描述',
            dataIndex: 'description',
            render: (_, record) => {
                return <Fragment>

                    <Tooltip placement="topLeft" title={record.description}>
                        <div className='text-ellipsis'>{record.description && <CopyOutlined onClick={(e) => {
                            e.preventDefault();
                            copyToClipboard(record.description)
                        }}/>}{record.description}</div>
                    </Tooltip>
                </Fragment>
            }
        },
        {
            key: 'priority',
            title: '任务优先级',
            dataIndex: 'priority',
            order: 2,
            valueType: 'select',
            // 字段对应的组件的属性
            fieldProps: {
                mode: "tags",
                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>
                        <div>
                            {/*< HeartFilled/>*/}
                            <CheckSquareFilled
                                style={{color: taskPriorityList.find(item => item.code === record.priority?.toString())?.color}}/>
                            {taskPriorityList.find(item => item.code === record.priority?.toString())?.name}
                        </div>
                    }
                </Space>
            ),
        }, {
            key: 'state',
            title: '任务状态',
            dataIndex: 'state',
            valueType: 'select',
            order: 3,
            initialValue: state =="" ?undefined:state!.split(','),
            fieldProps: {
                defaultValue:  state =="" ?undefined:state!.split(','),
                mode: "tags",
                options: taskStateList.map(item => {
                    return {label: item.name, value: item.code}
                }),
            },
        }, {
            key: 'expectedStartTime',
            title: '期望时间',
            dataIndex: 'expectedStartTime',
            valueType: 'date',
            order: 1,
            render: (_, record) => {
                return <Fragment>
                    <div>
                        <div>
                            <text>开始:</text>
                            {record.expectedStartTime ? dayjs(record.expectedStartTime).format("YYYY-MM-DD HH:mm") : "-"}
                        </div>
                        <div>
                            <text>结束:</text>
                            {record.expectedEndTime ? dayjs(record.expectedEndTime).format("YYYY-MM-DD HH:mm") : "-"}
                        </div>
                    </div>
                </Fragment>
            },
            renderFormItem: () => <RangePicker allowEmpty={[true, true]}/>
        }, {
            key: 'actualStartTime',
            title: '实际时间',
            dataIndex: 'actualStartTime',
            valueType: 'date',
            render: (_, record) => {
                return <Fragment>
                    <div>
                        <div>
                            <text>开始:</text>
                            {record.actualStartTime ? dayjs(record.actualStartTime).format("YYYY-MM-DD HH:mm") : "-"}
                        </div>
                        <div>
                            <text>结束:</text>
                            {record.actualEndTime ? dayjs(record.actualEndTime).format("YYYY-MM-DD HH:mm") : "-"}
                        </div>
                    </div>
                </Fragment>
            },
        }, {
            key: 'option',
            title: '操作',
            valueType: 'option',
            render: (_, record) => <OperationButton itemId={record.id} itemName={record.name}
                                                    fId={record.fId} fName={record.fName}
                                                    pid={record.pid} pPid={record.pPid}
                                                    priority={record.priority}
                                                    refreshDate={() => {
                                                        actionRef.current?.reload(false);
                                                    }}/>,
        }
    ];
    let toolBarRenderList = [
        <DetailModelForm open={false} haveButton={true} key={1} operationId={OPERATION_BUTTON_TYPE.ADD}
                         description='添加主线任务' reloadData={() => {
            actionRef.current?.reload(false);
        }}/>,
        <Switch key={2} checkedChildren="树" unCheckedChildren="列表" checked={switchChecked}
                onChange={(checked, event) => {
                    setSwitchChecked(checked);
                    actionRef.current?.reload?.();
                }}/>,
    ];
    if (switchChecked) {
        toolBarRenderList.push(<><span>树子集是否参与过滤</span> <Tooltip
            title="开启树子集过滤后儿子不满足条件，孙子满足条件，儿子和孙子都不会显示。"><QuestionCircleOutlined/></Tooltip>
            <Switch checkedChildren="是" unCheckedChildren="否" checked={filterChecked}
                    onChange={(checked, event) => {
                        setFilterChecked(checked);
                        actionRef.current?.reload(false);
                    }}/></>)
    }

    useEffect(() => {
        if (props.joinId) {

        }
    }, []);

    useEffect(() => {
        actionRef.current?.reload(false)
    }, [useSearchParams()])
    return (
        <ProTable<DataType>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params, sort, filter) => {
                // console.log('request',params,params.keyword,sort, filter);
                // const searchList=[]
                // if (switchChecked) {
                //     searchList.push({name:'tree',value:'TRUE',operateType:"TREE"})
                // }
                // searchList.push({name:"pid",value:pid,operateType:"="})
                // if (filterChecked) {
                //     searchList.push({name:'tree',value:'TRUE',operateType:"TREE-FILTER"})
                // }
                // if (params.state instanceof Array&&params.state.length>0){
                //     searchList.push({name:'state',value:params.state.join(','),operateType:"IN"})
                // }
                // if (params.priority instanceof Array&&params.state.length>0){
                //     searchList.push({name:'priority',value:params.priority.join(','),operateType:"IN"})
                // }
                // if (params.expectedStartTime instanceof Array&&params.expectedStartTime.length>0){
                //     if (params.expectedStartTime[0]){
                //         searchList.push({name:'expectedStartTime',value:dayjs(params.expectedStartTime[0]),operateType:">="})
                //     }
                //     if (params.expectedStartTime[1]){
                //         searchList.push({name:'expectedStartTime',value:dayjs(params.expectedStartTime[1]),operateType:"<="})
                //     }
                // }
                // if (params.name){
                //     searchList.push({name:'name',value:params.name,operateType:"LIKE"})
                // }
                // if (params.description){
                //     searchList.push({name:'description',value:params.description,operateType:"LIKE"})
                // }
                // if (params.code){
                //     searchList.push({name:'code',value:params.code,operateType:"="})
                // }
                // let request = JSON.stringify({
                //     pageSize:params.pageSize,
                //     pageNumber:params.current,
                //     data: searchList
                // })
                // // const response = await getTaskTreeResult(request)
                console.log({params})
                const search: TaskWebSelectVO =
                    {
                        pid: pid,
                        name: params.name,
                        description: params.description,
                    }
                // 列表展示
                if (!switchChecked) {
                    search.treeOrList = false;
                    search.treeList = true;
                    search.treeFilter = true;
                } else {
                    // 树展示
                    search.treeOrList = true;
                    search.treeList = true;
                    search.treeFilter = filterChecked;
                }
                if (params.state) {
                    search.state = params.state.join(',');
                }
                if (params.priority) {
                    search.priority = params.priority.join(',');
                }
                if (params.expectedStartTime instanceof Array && params.expectedStartTime.length > 0) {
                    if (params.expectedStartTime[0]) {
                        search.expectedStartTimeStart = dayjs(params.expectedStartTime[0])
                    }
                    if (params.expectedStartTime[1]) {
                        search.expectedStartTimeEnd = dayjs(params.expectedStartTime[1])
                    }
                }

                const response1 = await getTaskTreeResultAPI({
                    pageSize: params.pageSize ? params.pageSize : pageSize,
                    pageNumber: params.current ? params.current : currentPage,
                    data: search
                })

                return {
                    data: response1.data.content,
                    success: response1.status.success,
                    total: response1.data.totalElements,
                }
            }}
            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"
            rowClassName={(record, i) => (i % 2 === 1 ? "even" : "odd")}
            pagination={{
                current: currentPage,
                pageSize: pageSize,
                onChange: (current, pageSize) => {
                    console.log('onChange', current, pageSize)
                    setCurrentPage(current)
                    setPageSize(pageSize)
                }
            }}
            dateFormatter="string"
            // scroll={{y: 580}}
            // headerTitle="任务管理"
            toolBarRender={() => toolBarRenderList}>
        </ProTable>
    );
};
export default TreeTablePro