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

import {Cascader, SearchBar} from "antd-mobile";
import React, {useEffect, useState} from "react";
import {
    Form,
} from 'antd-mobile'
import "./index.css"
import {CloseCircleFill} from "antd-mobile-icons";
import {useChildList} from "../../hooks/useChildList";

const ParentTask = (props) => {
    const {form, disabled, pName, pidArray, addEditPName, removePid} = props;
    const [parentValue, setParentValue] = useState(pidArray ?? [])
    const [visible, setVisible] = useState(false)
    const {
        options, removeTaskId, changeInitPidArray, changeSearchValue,
        changeSelectValue, changeCurrentLab, changeTaskId
    } = useChildList();

    useEffect(() => {
        initDate()
    }, [props])

    function initDate() {
        if (removePid) {
            removeTaskId(removePid)
        }
        if (pidArray && pidArray.length > 0) {
            setParentValue(pidArray)
            changeInitPidArray(pidArray)
        }
    }

    return <Form.Item
        name='pidArray'
        label='主线任务'
        value={parentValue}
        disabled={disabled}
        arrow={
            (form.getFieldValue('pidArray') && form.getFieldValue('pidArray').length > 0) ? (
                <CloseCircleFill
                    style={{
                        color: 'var(--adm-color-light)',
                        fontSize: 14,
                    }}
                    onClick={e => {
                        form.setFieldsValue({pidArray: []})
                        setParentValue([])
                        // 阻止冒泡
                        e.stopPropagation()
                        // 阻止所有后续事件处理程序
                        // e.nativeEvent.stopImmediatePropagation();
                    }}
                />) : true

        }
        onClick={() => {
            setVisible(true)
        }}
    >
        <Cascader
            title={<SearchBar placeholder='搜索当前层相关标题' onChange={
                // 获取当前选卡，过滤当前选项
                (value) => {
                    changeSearchValue(value);
                }
            }/>}
            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)
            }}
            onTabsChange={index => {
                changeCurrentLab(index)
            }}
            onSelect={value => {
                console.log({value})
                if (value && value.length > 0) {
                    changeSelectValue(value)
                    changeTaskId(value)
                }
            }}
        >
            {items => {
                if (items.every(item => item === null)) {
                    return (pName && form.getFieldValue('pidArray') && form.getFieldValue('pidArray').length > 0) ? (
                        <span>{pName}</span>) : disabled ?
                        (<span>主线任务选填</span>) :
                        (<span style={{color: "#cccccc"}}>主线任务选填</span>)
                } else if (items) {
                    if (addEditPName) {
                        addEditPName(items[items.length - 1].label)
                    }
                    return items[items.length - 1].label
                }
            }}
        </Cascader>
    </Form.Item>
}
export default ParentTask;