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

'use client'
import React, {useEffect, useState} from 'react';
import '@/app/ui/task/project/detailForm.modules.css'
import {PlusOutlined} from '@ant-design/icons';
import {
    Button,
    Cascader,
    Checkbox,
    ColorPicker,
    DatePicker,
    Form,
    Input,
    InputNumber, message,
    Radio,
    Select,
    Slider, Space,
    Switch,
    TreeSelect,
    Upload,
} from 'antd';
import {RangePickerProps} from "antd/es/date-picker";
import dayjs from "dayjs";
import {
    addTask,
    getTask,
    OPERATION_BUTTON_TYPE,
    taskPriorityList,
    taskStateList,
    updateTask
} from "@/app/lib/task/project/data";
import {DataType, DictType} from "@/app/lib/definitions";
import {DATE_TIME} from "@/app/lib/constants";

export interface DetailFormProps {
    itemId: number,
    pPid:number,
    operationId: number|undefined,
    handleCancel: () => void
}

export const DetailForm: React.FC<DetailFormProps> = (props) => {
    const [form] = Form.useForm();
    const [componentDisabled, setComponentDisabled] =
        useState<boolean>(props.operationId === OPERATION_BUTTON_TYPE.DETAIL);
    const {RangePicker} = DatePicker;
    const {TextArea} = Input;
    // const [taskMessage,setTaskMessage]=useState<any>({name:"useState没效果吗,是这样的"});
    // let taskMessage;
    useEffect(() => {
        if (props.operationId === OPERATION_BUTTON_TYPE.DETAIL||props.operationId === OPERATION_BUTTON_TYPE.UPDATE) {
            getTask(props.itemId).then(task => {
                console.log('getTask(props.itemId)',props.itemId,task);
                if(task.status.success){
                    // setTaskMessage(task.data)
                    task.data.state=taskStateList.find(taskState=>taskState.code===task.data.state?.toString())?.name;
                    task.data.priority=taskPriorityList.find(taskPriority=>taskPriority.code===task.data.priority?.toString())?.name;
                    task.data.actualTimeRange = [task.data.expectedStartTime?dayjs(task.data.expectedStartTime,DATE_TIME):'',
                        task.data.expectedEndTime?dayjs(task.data.expectedEndTime,DATE_TIME):''];
                    task.data.expectedTimeRange = [task.data.actualStartTime?dayjs(task.data.actualStartTime,DATE_TIME):'',
                        task.data.actualEndTime?dayjs(task.data.actualEndTime,DATE_TIME):''];
                    form.setFieldsValue(task.data)
                }else{
                    message.error(task.status.message);
                    props.handleCancel()
                }
            })
        }
    },[])
    const normFile = (e: any) => {
        if (Array.isArray(e)) {
            return e;
        }
        return e?.fileList;
    };
    const range = (start: number, end: number) => {
        const result = [];
        for (let i = start; i < end; i++) {
            result.push(i);
        }
        return result;
    };
    const disabledDate: RangePickerProps['disabledDate'] = (current) => {
        // return current && current < dayjs().endOf('day');
        console.log('current', current, current && current < dayjs().endOf('day'), current < dayjs().endOf('day'))
        return current < dayjs().startOf('day');
    };
    const disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {
        console.log('current', _)
        if (type === 'start') {
            return {
                disabledHours: () => range(0, 60).splice(4, 20),
                disabledMinutes: () => range(30, 60),
                disabledSeconds: () => [55, 56],
            };
        }
        return {
            disabledHours: () => range(0, 60).splice(20, 4),
            disabledMinutes: () => range(0, 31),
            disabledSeconds: () => [55, 56],
        };
    };
    const onFinish = (values: any) => {
        console.log(values);
        let request: DataType = {
            key: values.id,
            id: values.id,
            pPid: props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD?props.pPid:values.pPid,
            pid: props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD?props.itemId:props.operationId===OPERATION_BUTTON_TYPE.UPDATE?values.pid:0,
            code: values.code,
            name: values.name,
            description: values.description,
            state: values.state,
            priority: values.priority,
            type: values.type,
            children: []
        }
        if (values.expectedTimeRange) {
            if (values.expectedTimeRange[0]) {
                request.expectedStartTime = values.expectedTimeRange[0]
            }
            if (values.expectedTimeRange[1]) {
                request.expectedEndTime = values.expectedTimeRange[1]
            }
        }
        if (values.actualTimeRange) {
            if (values.actualTimeRange[0]) {
                request.actualStartTime = values.actualTimeRange[0]
            }
            if (values.actualTimeRange[1]) {
                request.actualEndTime = values.actualTimeRange[1]
            }
        }
        if (props.operationId===OPERATION_BUTTON_TYPE.ADD_CHILD){
            addTask(request).then(response => {
                    console.log('response',response)
                    if (response.status.success) {
                        message.success("添加任务成功："+response.data)
                        props.handleCancel()
                    }
                }
            )
        }else if(props.operationId===OPERATION_BUTTON_TYPE.UPDATE){
            var stateFind = taskStateList.find(taskState=>taskState.name===request.state?.toString());
            if (stateFind){
                request.state=stateFind.code;
            }
            var priorityFind =taskPriorityList.find(taskPriority=>taskPriority.name===request.priority?.toString());
            if(priorityFind){
                request.priority=priorityFind.code;
            }
            updateTask(request).then(response => {
                    console.log('response',response)
                    if (response.status.success) {
                        message.success("修改任务成功："+response.data)
                        props.handleCancel()
                    }
                }
            )
        }


    };
    return (
        <>
            {/*<Checkbox*/}
            {/*    checked={componentDisabled}*/}
            {/*    onChange={(e) => setComponentDisabled(e.target.checked)}*/}
            {/*>*/}
            {/*    Form disabled*/}
            {/*</Checkbox>*/}
            <Form
                labelCol={{span: 4}}
                wrapperCol={{span: 18}}
                layout="horizontal"
                disabled={componentDisabled}
                size='large'
                onFinish={onFinish}
                // initialValues={taskMessage}
                form={form}
                // style={{maxWidth: '70%'}}
            >
                <Form.Item<DataType> name='id' label="id" hidden={true}>
                    <Input name='id'/>
                </Form.Item>
                <Form.Item<DataType> name='pid' label="pid" hidden={true}>
                    <Input name='pid'/>
                </Form.Item>
                <Form.Item<DataType> name='code' label="code" hidden={true}>
                    <Input name='code'/>
                </Form.Item>
                <Form.Item<DataType> name='pPid' label="pPid" hidden={true}>
                    <Input name='pPid'/>
                </Form.Item>

                <Form.Item<DataType> name='name' label="任务名称" rules={[{ required: true, message: '任务名称不能为空' }]}>
                    <Input name='name'/>
                </Form.Item>
                <Form.Item<DataType> name='description' label="任务描述">
                    <TextArea name='description' rows={4}/>
                </Form.Item>
                <Form.Item<DataType> name='priority' label="任务优先级">
                    <Select options={
                        taskPriorityList.map(taskState => {
                            return {
                                'label': taskState.name,
                                'value': taskState.code
                            }
                        })
                    }>
                    </Select>
                </Form.Item>
                <Form.Item<DataType> name='state' label="任务状态">
                    <Select options={
                        taskStateList.map(taskState => {
                            return {
                                'label': taskState.name,
                                'value': taskState.code
                            }
                        })
                    }>
                    </Select>
                </Form.Item>

                <Form.Item<DataType> name={['expectedTimeRange']} label="期望">
                    <RangePicker
                        disabledDate={disabledDate}
                        disabledTime={disabledRangeTime}
                        placeholder={['开始时间', '结束时间']}
                        allowEmpty={[true, true]}
                        showTime={{
                            hideDisabledOptions: true,
                            defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
                        }}
                        // format="YYYY-MM-DD HH:mm:ss"
                    />
                </Form.Item>
                <Form.Item<DataType> name='actualTimeRange' label="实际">
                    <RangePicker
                        disabledDate={disabledDate}
                        disabledTime={disabledRangeTime}
                        placeholder={['开始时间', '结束时间']}
                        allowEmpty={[true, true]}
                        showTime={{
                            hideDisabledOptions: true,
                            defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
                        }}
                        // format="YYYY-MM-DD HH:mm:ss"
                    />
                </Form.Item>
                {/*<Form.Item label="InputNumber">*/}
                {/*    <InputNumber/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Checkbox" name="disabled" valuePropName="checked">*/}
                {/*    <Checkbox>Checkbox</Checkbox>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Radio">*/}
                {/*    <Radio.Group>*/}
                {/*        <Radio value="apple"> Apple </Radio>*/}
                {/*        <Radio value="pear"> Pear </Radio>*/}
                {/*    </Radio.Group>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="TreeSelect">*/}
                {/*    <TreeSelect*/}
                {/*        treeData={[*/}
                {/*            {title: 'Light', value: 'light', children: [{title: 'Bamboo', value: 'bamboo'}]},*/}
                {/*        ]}*/}
                {/*    />*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Cascader">*/}
                {/*    <Cascader*/}
                {/*        options={[*/}
                {/*            {*/}
                {/*                value: 'zhejiang',*/}
                {/*                label: 'Zhejiang',*/}
                {/*                children: [*/}
                {/*                    {*/}
                {/*                        value: 'hangzhou',*/}
                {/*                        label: 'Hangzhou',*/}
                {/*                    },*/}
                {/*                ],*/}
                {/*            },*/}
                {/*        ]}*/}
                {/*    />*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="DateTimePicker">*/}
                {/*    <DatePicker/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Switch" valuePropName="checked">*/}
                {/*    <Switch/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>*/}
                {/*    <Upload action="/upload.do" listType="picture-card">*/}
                {/*        <button style={{border: 0, background: 'none'}} type="button">*/}
                {/*            <PlusOutlined/>*/}
                {/*            <div style={{marginTop: 8}}>Upload</div>*/}
                {/*        </button>*/}
                {/*    </Upload>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Button">*/}
                {/*    <Button>Button</Button>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="Slider">*/}
                {/*    <Slider/>*/}
                {/*</Form.Item>*/}
                {/*<Form.Item label="ColorPicker">*/}
                {/*    <ColorPicker/>*/}
                {/*</Form.Item>*/}
                <Form.Item>
                    <Space>
                        {props.operationId === OPERATION_BUTTON_TYPE.DETAIL ? (
                            // <Button htmlType="button">关闭</Button>
                            <>
                            </>
                        ) : (<>
                                <Button type="primary" htmlType="submit">确认</Button>
                                <Button htmlType="button">取消</Button>
                            </>
                        )
                        }
                    </Space>
                </Form.Item>
            </Form>
        </>
    );

}