assistant-todo/src/ui/task/OperationButton.tsx

import React, {Fragment} from "react";
import {Button, Dropdown, MenuProps, message, Modal, Popconfirm, Radio, Space} from "antd";
import {DownOutlined, QuestionCircleOutlined} from "@ant-design/icons";
import {
    commonUpdate,
    deleteTask,
    OPERATION_BUTTON_TYPE,
    taskPriorityList,
} from "@/lib/task/project/data";
import Link from "next/link";
import {DetailModelForm} from "@/ui/task/project/DetailModelForm";

export interface OperationButtonProps {
    itemId: string,
    priority?:string,
    pid: string,
    pPid: string,
    operationId?: string,
    refreshDate?: () => void,
}

interface OperationModelProps {
    operationId: number,
    pPid: string,
    pid: string,
    openModal: boolean,
    updatePriority:boolean,
    priority?:string,
    updatePriorityValue?:string,
}

class OperationButton extends React.Component<OperationButtonProps, OperationModelProps> {

    constructor(props: OperationButtonProps) {
        super(props);
        this.state = {
            pid: props.pid,
            pPid: props.pPid,
            operationId: 0,
            openModal: false,
            updatePriority:false,
            priority: props.priority,
        };
    }

    render() {
        const handleCancel = () => {
            this.setState({...this.state, openModal: false})
            if (this.state.operationId !== OPERATION_BUTTON_TYPE.DETAIL) {
                this.props.refreshDate?.()
            }
        }
        const onClick: MenuProps['onClick'] = ({key}) => {
            console.log(key)
        };
        const priorityHandleOk =async ()=>{
            console.log(this.props.itemId,this.state.priority,this.state.updatePriorityValue)
            if (this.state.priority==this.state.updatePriorityValue){
                return
            }
            // 修改任务优先级
            const res = await commonUpdate({
                updateColumnList:[{
                    name:'priority',
                    code:'priority',
                    value:this.state.updatePriorityValue
                }],
                conditionColumnList:[{
                    name:'id',
                    code:'id',
                    operateType:'=',
                    value:this.props.itemId
                }]
            })
            // 关闭弹窗
            this.setState({updatePriority:false})
            if (res.status.success) {
                // 全局提示
                message.success("完成任务成功")
                // 更新任务
                this.props.refreshDate?.()
            }else {
                message.error(res.status.message)
            }
        }
        const items: MenuProps['items'] = [
            {
                key: OPERATION_BUTTON_TYPE.DETAIL,
                label: <a onClick={(e) => {
                    this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.DETAIL})
                }}>任务详情</a>,
            },
            {
                key: OPERATION_BUTTON_TYPE.ADD_CHILD,
                label: <a onClick={(e) => {
                    this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.ADD_CHILD})
                }}>添加支线任务</a>,
            },
            {
                key: OPERATION_BUTTON_TYPE.UPDATE,
                label: <a onClick={(e) => {
                    this.setState({openModal: true, operationId: OPERATION_BUTTON_TYPE.UPDATE})
                }}>修改任务</a>,
            },
            {
                key: OPERATION_BUTTON_TYPE.DELETE,
                label: <Popconfirm
                    title="删除任务"
                    description="确认要删除任务?"
                    icon={<QuestionCircleOutlined style={{color: 'red'}}/>}
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                        deleteTask(this.props.itemId).then((response => {
                            console.log('response', response)
                            if (response.status.success) {
                                message.success("删除任务成功：" + response.data)
                                this.props.refreshDate?.()
                            }
                        }));
                    }}
                ><a>删除任务</a></Popconfirm>,
            },
            {
                key: OPERATION_BUTTON_TYPE.COMPLETE,
                label: <Popconfirm
                    title="完成任务"
                    description="确认要完成任务?"
                    okText="确认"
                    cancelText="取消"
                    onConfirm={() => {
                        commonUpdate({
                            updateColumnList:[{
                                name:'state',
                                code:'state',
                                value:'7'
                            }],
                            conditionColumnList:[{
                                name:'id',
                                code:'id',
                                operateType:'=',
                                value:this.props.itemId
                            }]
                        }).then((response => {
                            console.log('response', response)
                            if (response.status.success) {
                                message.success("完成任务成功")
                                this.props.refreshDate?.()
                            }
                        }));
                    }}
                ><a>完成任务</a></Popconfirm>,
            },
            {
                key: OPERATION_BUTTON_TYPE.UPDATE_PRIORITY,
                label: <a onClick={(e) => {
                    this.setState({updatePriority: true})
                }}>修改优先级</a>,
            },
            {
                key: OPERATION_BUTTON_TYPE.SHOW_TREE,
                label: <Link href={"/task/project?pid=" + this.props.itemId}>树任务显示子任务</Link>,
            },
            {
                key: OPERATION_BUTTON_TYPE.SHOW_FOUR,
                label: <Link href={"/task/four?pid=" + this.props.itemId}>四象限显示子任务</Link>,
            },
            {
                key: OPERATION_BUTTON_TYPE.SHOW_CALENDAR,
                label: <Link href={"/task/calendar?pid=" + this.props.itemId}>日历显示子任务</Link>,
            }
        ];
        return <Fragment>
            <Dropdown menu={{items, onClick}}>
                <a onClick={(e) => {
                    e.preventDefault()
                }}>
                    <Space>
                        操作<DownOutlined/>
                    </Space>
                </a>
            </Dropdown>
            <Modal
                title="修改任务优先级"
                open={this.state.updatePriority}
                onOk={priorityHandleOk}
                onCancel={()=>{this.setState({updatePriority:false})}}
                destroyOnClose={true}
                okText='确认'
                cancelText='取消'
            >
                <Radio.Group
                    options={taskPriorityList.map(taskPriority=>  {return {
                        label:taskPriority.name,value:taskPriority.code
                    }})}
                    defaultValue={this.state.priority}
                    optionType="button"
                    buttonStyle="solid"
                    onChange={e=>{
                        console.log({e})
                        this.setState({updatePriorityValue:e.target.value})
                    }}
                />
            </Modal>
            {this.state.openModal&&<DetailModelForm
                haveButton={false}
                itemId={this.state.operationId === OPERATION_BUTTON_TYPE.UPDATE||this.state.operationId === OPERATION_BUTTON_TYPE.DETAIL?this.props.itemId:undefined}
                pPid={this.props.pPid}
                pid={this.state.operationId === OPERATION_BUTTON_TYPE.ADD_CHILD ?this.props.itemId:undefined}
                operationId={this.state.operationId}
                description={this.state.operationId === OPERATION_BUTTON_TYPE.DETAIL ? '任务详情' :
                    this.state.operationId === OPERATION_BUTTON_TYPE.ADD_CHILD ? '添加支线任务' :
                        this.state.operationId === OPERATION_BUTTON_TYPE.UPDATE ? '修改任务' : '未知操作'}
                open={this.state.openModal}
                reloadData={handleCancel}/>}
        </Fragment>
    }
}

export default OperationButton;