From 0f7dd9095f41158ee129e54116a79d4e46786967 Mon Sep 17 00:00:00 2001
From: 1708-huayu <57060237+1708-huayu@users.noreply.github.com>
Date: Mon, 27 Jan 2025 22:47:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E7=88=B6=E4=BB=BB=E5=8A=A1=E4=BD=BF?=
=?UTF-8?q?=E7=94=A8hook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/DetailForm/index.js | 4 +
src/components/ParentTask/index.js | 136 +++++------------------------
src/hooks/useChildList.js | 10 ++-
src/pages/PersonalCenter/index.js | 28 +++---
4 files changed, 47 insertions(+), 131 deletions(-)
diff --git a/src/components/DetailForm/index.js b/src/components/DetailForm/index.js
index a49b68b..ab401e7 100644
--- a/src/components/DetailForm/index.js
+++ b/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 = () => {
{
- const [valueToOptions, setValueToOptions] = useState([])
- const {form, disabled, pName, pidArray, addEditPName} = props;
+ const {form, disabled, pName, pidArray, addEditPName, removePid} = props;
const [parentValue, setParentValue] = useState(pidArray ?? [])
const [visible, setVisible] = useState(false)
- const [searchValue, setSearchValue] = useState("");
- const [currentLab, setCurrentLab] = useState(0);
- const [selectValue, setSelectValue] = useState([]);
- // 当前标签
- // 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,
- }))
- }
+ const {
+ options, removeTaskId, changeInitPidArray, changeSearchValue,
+ changeSelectValue, changeCurrentLab, changeTaskId
+ } = useChildList();
useEffect(() => {
initDate()
}, [props])
- async function initDate() {
- await fetchOptionsForValue('0', 0)
+ function initDate() {
+ if (removePid) {
+ removeTaskId(removePid)
+ }
if (pidArray && pidArray.length > 0) {
setParentValue(pidArray)
- for (const taskId of pidArray) {
- await fetchOptionsForValue(taskId, 0)
- }
+ changeInitPidArray(pidArray)
}
}
@@ -130,8 +61,7 @@ const ParentTask = (props) => {
title={ {
- console.log("搜索" + value)
- setSearchValue(value);
+ changeSearchValue(value);
}
}/>}
options={options}
@@ -147,15 +77,14 @@ const ParentTask = (props) => {
form.setFieldValue('pidArray', val)
}}
onTabsChange={index => {
- console.log(index);
- setCurrentLab(index)
+ changeCurrentLab(index)
}}
onSelect={value => {
- console.log("value", value, currentLab)
- setSelectValue(value)
- value.forEach((v, index) => {
- fetchOptionsForValue(v, index + 1)
- })
+ console.log({value})
+ if (value && value.length > 0) {
+ changeSelectValue(value)
+ changeTaskId(value[value.length - 1])
+ }
}}
>
{items => {
@@ -173,30 +102,5 @@ const ParentTask = (props) => {
}}
- // const [parentValue, setParentValue] = useState("")
- // return {
- // const value = await Cascader.prompt({
- // options: options,
- // placeholder: '请选择',
- // })
- // Toast.show(
- // value ? `你选择了 ${value.join(' - ')}` : '你没有进行选择'
- // )
- // if (value){
- // setParentValue(value.join(' - '))
- // }
- // }}
- // >
- //
- // {parentValue}
- //
- //
}
export default ParentTask;
\ No newline at end of file
diff --git a/src/hooks/useChildList.js b/src/hooks/useChildList.js
index f23c60f..ec4f3a1 100644
--- a/src/hooks/useChildList.js
+++ b/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,
diff --git a/src/pages/PersonalCenter/index.js b/src/pages/PersonalCenter/index.js
index 3e4610b..77f4cba 100644
--- a/src/pages/PersonalCenter/index.js
+++ b/src/pages/PersonalCenter/index.js
@@ -43,20 +43,20 @@ export function PersonalCenter() {
}, [])
return
- {
- let setting = localStorage.getItem('huayu-todo-setting');
- if (setting) {
- let parseObj = JSON.parse(setting);
- parseObj.parentCheck = checked
- setting = JSON.stringify(parseObj)
- setParentCheck(checked);
- } else {
- setting = JSON.stringify({parentCheck: checked})
- }
- localStorage.setItem('huayu-todo-setting', setting);
- }
- }/>}>新建任务时父任务只展示未完成任务
+ {/* {*/}
+ {/* let setting = localStorage.getItem('huayu-todo-setting');*/}
+ {/* if (setting) {*/}
+ {/* let parseObj = JSON.parse(setting);*/}
+ {/* parseObj.parentCheck = checked*/}
+ {/* setting = JSON.stringify(parseObj)*/}
+ {/* setParentCheck(checked);*/}
+ {/* } else {*/}
+ {/* setting = JSON.stringify({parentCheck: checked})*/}
+ {/* }*/}
+ {/* localStorage.setItem('huayu-todo-setting', setting);*/}
+ {/* }*/}
+ {/*}/>}>新建任务时父任务只展示未完成任务*/}