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

import { PlusOutlined } from '@ant-design/icons';
import {
    ModalForm,
    ProForm,
    ProFormDateRangePicker,
    ProFormSelect,
    ProFormText, ProFormTextArea, ProFormTreeSelect,
} from '@ant-design/pro-components';
import { Button, Form, message } from 'antd';
import React from "react";
import {getTaskTreeResult, OPERATION_BUTTON_TYPE, taskPriorityList, taskStateList} from "@/app/lib/task/project/data";
import {DataType} from "@/app/lib/definitions";
import {string} from "prop-types";

const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(true);
        }, time);
    });
};
export type DetailModelFormProps={
    itemId?: number,
    pPid?:number,
    operationId: number,
    description:string,
    handleCancel?: () => void
}
export type PidSelectTree= { label: string; value: number; children?: PidSelectTree[] }
export const DetailModelForm: React.FC<DetailModelFormProps> = (props) => {
    const [form] = Form.useForm<DataType>();
    function childReduce(child:DataType[]):PidSelectTree[]{
        const result:PidSelectTree[] = [];
        child.map(data=>  {
            const resultData:PidSelectTree = {label:data.name,value:data.id};
            if (data.children){
                resultData.children=childReduce(data.children);
            }
            result.push(resultData);
        })
        return result;
    }
    return (
        <ModalForm<DataType>
            title={
                props.operationId === OPERATION_BUTTON_TYPE.DETAIL ? "任务详情":
                    props.operationId === OPERATION_BUTTON_TYPE.ADD?"添加任务":
                    props.operationId === OPERATION_BUTTON_TYPE.ADD?"修改任务":''
            }
            trigger={
                <Button type="primary">
                    <PlusOutlined />
                    {props.description}
                </Button>
            }
            form={form}
            autoFocusFirstInput
            modalProps={{
                destroyOnClose: true,
                onCancel: () => console.log('run'),
            }}
            // submitTimeout={2000}
            onFinish={async (values) => {
                await waitTime(2000);
                console.log(values.name);
                message.success('提交成功');
                return true;
            }}
        >
            <ProFormText width="sm" name="id" hidden={true} label="主键" />
            <ProFormText width="sm" name="code" hidden={true} label="任务编码" />
            <ProFormText width="sm" name="pPid" hidden={true} label="祖宗id" />
            <ProForm.Group>
                <ProFormTreeSelect
                    width="md"
                    request={() =>{
                        return getTaskTreeResult(JSON.stringify(
                            {pageSize:1000,pageNumber:1,data:[{code:'pid',value:'0',operateType:'='},{code:'',value:true,operateType: "TREE"}]}
                        )).then(result=> childReduce(result.data.content))
                    }}
                    name="pid"
                    label="父级任务"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
                <ProFormText
                    width="md"
                    name="name"
                    label="任务名称"
                    tooltip="最长为 24 位"
                    placeholder="请输入任务名称"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
            </ProForm.Group>
            <ProFormTextArea
                // width="md"
                name="description"
                label="任务描述"
                // tooltip="最长为 24 位"
                placeholder="请输入任务描述"
                disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
            />

            <ProForm.Group>
                <ProFormSelect
                    request={async () => taskPriorityList.map(taskState => {
                        return {
                            'label': taskState.name,
                            'value': taskState.code
                        }
                    })}
                    width="sm"
                    name="priority"
                    label="任务优先级"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
                <ProFormSelect
                    width="sm"
                    options={taskStateList.map(taskState => {
                        return {
                            'label': taskState.name,
                            'value': taskState.code
                        }
                    })}
                    name="state"
                    label="任务状态"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
            </ProForm.Group>

            <ProForm.Group>
                <ProFormDateRangePicker
                    name="expectedTimeRange"
                    label="期望时间"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
                <ProFormDateRangePicker
                    name="actualTimeRange"
                    label="实际时间"
                    disabled ={props.operationId === OPERATION_BUTTON_TYPE.DETAIL}
                />
            </ProForm.Group>

        </ModalForm>
    );
};