feat:父任务使用hook

src/components/DetailForm/index.js

@@ -25,6 +25,7 @@ const DetailForm = () => {
     const [updateFiledDisabled, setUpdateFiledDisabled] = React.useState(true);
     const [pName, setPName] = React.useState("");
     const [pidArray, setPidArray] = React.useState([]);
+    const [removePid,setRemovePid] = React.useState('');
     const [stateList, setStateList] = React.useState([]);
     const [priorityList, setPriorityList] = React.useState([]);
     // 路由
@@ -164,11 +165,13 @@ const DetailForm = () => {
                                     form.setFieldValue("pidArray", values.pidArray);
                                     setPidArray(values.pidArray)
                                     window.scrollTo(0, 0);
+                                    setRemovePid(values.pid);
                                 }
                             },
                         ],
                     ],
                 })
+
             })
             return;
         }
@@ -224,6 +227,7 @@ const DetailForm = () => {
                 <ParentTask pName={pName} pidArray={pidArray}
                             disabled={updateFiledDisabled} form={form}
                             addEditPName={setPName}
+                            removePid={removePid}
                 />
                 <Form.Item
                     name='name'

src/components/ParentTask/index.js

@@ -1,101 +1,32 @@
-import {Cascader, Input, SearchBar, Toast} from "antd-mobile";
+import {Cascader, SearchBar} from "antd-mobile";
-import React, {useEffect, useMemo, useState} from "react";
+import React, {useEffect, useState} from "react";
 import {
     Form,
 } from 'antd-mobile'
-import {getTaskByPid} from "../../utils";
 import "./index.css"
 import {CloseCircleFill} from "antd-mobile-icons";
+import {useChildList} from "../../hooks/useChildList";
 
 const ParentTask = (props) => {
-    const [valueToOptions, setValueToOptions] = useState([])
+    const {form, disabled, pName, pidArray, addEditPName, removePid} = props;
-    const {form, disabled, pName, pidArray, addEditPName} = props;
     const [parentValue, setParentValue] = useState(pidArray ?? [])
     const [visible, setVisible] = useState(false)
-    const [searchValue, setSearchValue] = useState("");
+    const {
-    const [currentLab, setCurrentLab] = useState(0);
+        options, removeTaskId, changeInitPidArray, changeSearchValue,
-    const [selectValue, setSelectValue] = useState([]);
+        changeSelectValue, changeCurrentLab, changeTaskId
-    // 当前标签
+    } = useChildList();
-    // let currentLab=0;
-    // let selectValue=[];
-
-    const options = useMemo(() => {
-        console.log("useMemo")
-
-        function generate(v) {
-            const options = valueToOptions[v]
-            if (options === null) {
-                return undefined
-            }
-            if (options === undefined) {
-                return Cascader.optionSkeleton
-            }
-            // 如果有搜索有值，需要过滤，
-            // 根据currentLab查看需要过滤第几层，当前层可能没有值就会停留在上一层
-            if (searchValue && searchValue.length > 0) {
-                if (selectValue.length <= currentLab + 1) {
-                    // 可能展示最新的，或没有停留在当前页面，正常是没有选择的时候搜索
-                    console.log({searchValue}, {currentLab}, {selectValue})
-                    if (currentLab === 0 && v === '0') {
-                        return options.filter(option => option.label.includes(searchValue)).map(option => ({
-                            ...option,
-                            children: generate(option.value),
-                        }))
-                    } else if (v === selectValue[currentLab - 1]) {
-                        return options.filter(option => option.label.includes(searchValue)).map(option => ({
-                            ...option,
-                            children: generate(option.value),
-                        }))
-                    }
-                } else {
-                    // 用户切换回之前的标签，暂不处理
-                }
-            }
-            return options.map(option => ({
-                ...option,
-                children: generate(option.value),
-            }))
-        }
-
-        return generate('0') ?? []
-    }, [valueToOptions, searchValue])
-
-    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() {
+    function initDate() {
-        await fetchOptionsForValue('0', 0)
+        if (removePid) {
+            removeTaskId(removePid)
+        }
         if (pidArray && pidArray.length > 0) {
             setParentValue(pidArray)
-            for (const taskId of pidArray) {
+            changeInitPidArray(pidArray)
-                await fetchOptionsForValue(taskId, 0)
-            }
         }
     }
 
@@ -130,8 +61,7 @@ const ParentTask = (props) => {
             title={<SearchBar placeholder='搜索当前层相关标题' onChange={
                 // 获取当前选卡，过滤当前选项
                 (value) => {
-                    console.log("搜索" + value)
+                    changeSearchValue(value);
-                    setSearchValue(value);
                 }
             }/>}
             options={options}
@@ -147,15 +77,14 @@ const ParentTask = (props) => {
                 form.setFieldValue('pidArray', val)
             }}
             onTabsChange={index => {
-                console.log(index);
+                changeCurrentLab(index)
-                setCurrentLab(index)
             }}
             onSelect={value => {
-                console.log("value", value, currentLab)
+                console.log({value})
-                setSelectValue(value)
+                if (value && value.length > 0) {
-                value.forEach((v, index) => {
+                    changeSelectValue(value)
-                    fetchOptionsForValue(v, index + 1)
+                    changeTaskId(value[value.length - 1])
-                })
+                }
             }}
         >
             {items => {
@@ -173,30 +102,5 @@ const ParentTask = (props) => {
             }}
         </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;

src/hooks/useChildList.js

@@ -19,11 +19,18 @@ export function useChildList() {
     // 当前选中的值，使用值过滤其子孙。
     const [selectValue, setSelectValue] = useState([]);
     const [currentLab, setCurrentLab] = useState(0);
+    const [initPidArray, setInitPidArray] = useState([]);
 
+    function changeInitPidArray(){
+        setInitPidArray([...initPidArray]);
+    }
 
     useEffect(() => {
         fetchOptionsForValue('0', 0)
-    }, [])
+        initPidArray.forEach(id => {
+            fetchOptionsForValue(id,0)
+        })
+    }, [initPidArray])
 
     // list嵌套选中项的list
     const options = useMemo(() => {
@@ -117,6 +124,7 @@ export function useChildList() {
     return {
         changeTaskId,
         removeTaskId,
+        changeInitPidArray,
         changeCurrentLab,
         changeSearchValue,
         changeSelectValue,

src/pages/PersonalCenter/index.js

@@ -43,20 +43,20 @@ export function PersonalCenter() {
     }, [])
     return <div>
         <List header={webUrl}>
-            <List.Item extra={<Switch checked={parentCheck} onChange={
+            {/*<List.Item extra={<Switch checked={parentCheck} onChange={*/}
-                (checked) => {
+            {/*    (checked) => {*/}
-                    let setting = localStorage.getItem('huayu-todo-setting');
+            {/*        let setting = localStorage.getItem('huayu-todo-setting');*/}
-                    if (setting) {
+            {/*        if (setting) {*/}
-                        let parseObj = JSON.parse(setting);
+            {/*            let parseObj = JSON.parse(setting);*/}
-                        parseObj.parentCheck = checked
+            {/*            parseObj.parentCheck = checked*/}
-                        setting = JSON.stringify(parseObj)
+            {/*            setting = JSON.stringify(parseObj)*/}
-                        setParentCheck(checked);
+            {/*            setParentCheck(checked);*/}
-                    } else {
+            {/*        } else {*/}
-                        setting = JSON.stringify({parentCheck: checked})
+            {/*            setting = JSON.stringify({parentCheck: checked})*/}
-                    }
+            {/*        }*/}
-                    localStorage.setItem('huayu-todo-setting', setting);
+            {/*        localStorage.setItem('huayu-todo-setting', setting);*/}
-                }
+            {/*    }*/}
-            }/>}>新建任务时父任务只展示未完成任务</List.Item>
+            {/*}/>}>新建任务时父任务只展示未完成任务</List.Item>*/}
             <Picker
                 columns={columnSortConstant}
                 value={columnSort}