feat:父任务使用hook
This commit is contained in:
1708-huayu
parent
f0e81181eb
commit
0f7dd9095f
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -1,101 +1,32 @@
|
|||
import {Cascader, Input, SearchBar, Toast} from "antd-mobile";
|
||||
import React, {useEffect, useMemo, useState} from "react";
|
||||
import {Cascader, SearchBar} from "antd-mobile";
|
||||
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} = 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={<SearchBar placeholder='搜索当前层相关标题' onChange={
|
||||
// 获取当前选卡，过滤当前选项
|
||||
(value) => {
|
||||
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) => {
|
|||
}}
|
||||
</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;
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -43,20 +43,20 @@ export function PersonalCenter() {
|
|||
}, [])
|
||||
return <div>
|
||||
<List header={webUrl}>
|
||||
<List.Item extra={<Switch checked={parentCheck} onChange={
|
||||
(checked) => {
|
||||
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);
|
||||
}
|
||||
}/>}>新建任务时父任务只展示未完成任务</List.Item>
|
||||
{/*<List.Item extra={<Switch checked={parentCheck} onChange={*/}
|
||||
{/* (checked) => {*/}
|
||||
{/* 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);*/}
|
||||
{/* }*/}
|
||||
{/*}/>}>新建任务时父任务只展示未完成任务</List.Item>*/}
|
||||
<Picker
|
||||
columns={columnSortConstant}
|
||||
value={columnSort}
|
||||
|
|
|
|||
Loading…
Reference in New Issue