assistant-todo-mobile/src/components/ParentTask/index.js

import {Cascader,Input, Toast} from "antd-mobile";
import React, {useEffect, useMemo, useState} from "react";
import {
    Form,
} from 'antd-mobile'
import {getTaskByPid} from "../../utils";


const ParentTask = (props)=>{
    const [valueToOptions, setValueToOptions] = useState([])
    const [parentValue, setParentValue] = useState("")
    const [visible, setVisible] = useState(false)
    const {form} = props;
    const options = useMemo(() => {
        function generate(v) {
            const options = valueToOptions[v]
            if (options === null) {
                return undefined
            }
            if (options === undefined) {
                return Cascader.optionSkeleton
            }
            return options.map(option => ({
                ...option,
                children: generate(option.value),
            }))
        }
        return generate('0') ?? []
    }, [valueToOptions])

    async function fetchOptionsForValue(v, level) {
        if (v in valueToOptions) return
        // if (level >= 3) {
        //     setValueToOptions(prev => ({
        //         ...prev,
        //         [v]: null,
        //     }))
        //     return
        // }
        const data = await getTaskByPid(v)
        console.log("await getTaskByPid(v)",data.content)
        const options =
            data.content.length === 0
                ? null
                : data.content.map(task => ({
                    value: task.id,
                    label: task.name,
                }))
        console.log("await getTaskByPid(v) options",options)
        setValueToOptions(prev => ({
            ...prev,
            [v]: options,
        }))
    }

    useEffect(() => {
        fetchOptionsForValue('0', 0)
    }, [])

    return <Form.Item
        name='pidArray'
        label='主线任务'
        onClick={() => {
            setVisible(true)
        }}
        value={parentValue}
    >
        <Cascader
            options={options}
            visible={visible}
            onClose={() => {
                setVisible(false)
            }}
            value={parentValue}
            onConfirm={(val)=>{
                console.log(val)
                setParentValue(val[val.length-1])
                form.setFieldValue('pidArray',val)
            }}
            // onSelect={(val, extend) => {
            //     console.log('onSelect', val, extend.items)
            // }}
            onSelect={value => {
                console.log("value",value)
                value.forEach((v, index) => {
                    fetchOptionsForValue(v, index + 1)
                })
            }}
        >
            {items => {
                if (items.every(item => item === null)) {
                    return <span style={{color:"#cccccc"}}>主线任务选填</span>
                } else {
                    return items[items.length-1].label
                }
            }}
        </Cascader>
    </Form.Item>
    // const [parentValue, setParentValue] = useState("")
    // return <Form.Item
    //     name='name'
    //     label='主线任务'
    //     onClick={async () => {
    //         const value = await Cascader.prompt({
    //             options: options,
    //             placeholder: '请选择',
    //         })
    //         Toast.show(
    //             value ? `你选择了 ${value.join(' - ')}` : '你没有进行选择'
    //         )
    //         if (value){
    //             setParentValue(value.join(' - '))
    //         }
    //     }}
    // >
    //     <Input
    //         defaultValue={parentValue}
    //            value={parentValue}
    //            readOnly={true}
    //            placeholder='主线任务名称选填'>
    //         {parentValue}
    //     </Input>
    // </Form.Item>
}
export default ParentTask;