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 {form, disabled, pName, pidArray, addEditPName} = props;
    const [parentValue, setParentValue] = useState(pidArray ?? [])
    const [visible, setVisible] = useState(false)

    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(() => {
        initDate()
    }, [props])

    async function initDate() {
        await fetchOptionsForValue('0', 0)
        if (pidArray && pidArray.length > 0) {
            setParentValue(pidArray)
            for (const taskId of pidArray) {
                await fetchOptionsForValue(taskId, 0)
            }
        }
    }

    return <Form.Item
        name='pidArray'
        label='主线任务'
        onClick={() => {
            setVisible(true)
        }}
        value={parentValue}
        disabled={disabled}
    >
        <Cascader
            options={options}
            visible={visible}
            defaultValue={pidArray}
            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 pName ? (<span>{pName}</span>) : disabled ?
                        (<span>主线任务选填</span>) :
                        (<span style={{color: "#cccccc"}}>主线任务选填</span>)
                } else {
                    if (addEditPName) {
                        addEditPName(items[items.length - 1].label)
                    }
                    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;