huayu-web
/
assistant-todo-mobile
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:搜索框设置

This commit is contained in:
1708-huayu 2024-12-30 19:24:34 +08:00
parent 854fe821d4
commit 7c0b6d2474
12 changed files with 284 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
.idea/workspace.xml
View File

@ -4,28 +4,19 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="c22c6a78-950d-4bff-ac7a-ed800fcbb7de" name="Changes" comment="">
<change afterPath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/DetailForm/index.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/DetailForm/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/ParentTask/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/utils/requestUtil.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
<list default="true" id="c22c6a78-950d-4bff-ac7a-ed800fcbb7de" name="Changes" comment="feat:flex,左右对齐">
<change afterPath="$PROJECT_DIR$/src/components/DetailSearchBar/index.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/components/DetailSearchBar/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/DetailSearchContext/index.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/pages/ToDoTree/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Bottom/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Bottom/index.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DataPickerItem/index.jsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/DetailForm/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DetailForm/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DetailNavBar/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Bottom/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Bottom/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Home/index.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Home/index.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Home/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Home/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/Map/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/Map/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/WidthUseNavigate/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/WidthUseNavigate/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/utils/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/utils/index.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/ToDoList/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/ToDoList/index.js" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -100,8 +91,44 @@
<option name="presentableId" value="Default" />
<updated>1674086393783</updated>
<workItem from="1735199009773" duration="4532000" />
<workItem from="1735203621890" duration="33395000" />
<workItem from="1735203621890" duration="34598000" />
<workItem from="1735389721633" duration="18791000" />
<workItem from="1735474579369" duration="4701000" />
<workItem from="1735522393453" duration="23975000" />
</task>
<task id="LOCAL-00001" summary="feat:backup">
<option name="closed" value="true" />
<created>1735297580874</created>
<option name="number" value="00001" />
<option name="presentableId" value="LOCAL-00001" />
<option name="project" value="LOCAL" />
<updated>1735297580874</updated>
</task>
<task id="LOCAL-00002" summary="feat:添加任务">
<option name="closed" value="true" />
<created>1735462441515</created>
<option name="number" value="00002" />
<option name="presentableId" value="LOCAL-00002" />
<option name="project" value="LOCAL" />
<updated>1735462441515</updated>
</task>
<task id="LOCAL-00003" summary="feat:上滑更多下拉更新">
<option name="closed" value="true" />
<created>1735465716214</created>
<option name="number" value="00003" />
<option name="presentableId" value="LOCAL-00003" />
<option name="project" value="LOCAL" />
<updated>1735465716214</updated>
</task>
<task id="LOCAL-00004" summary="feat:flex,左右对齐">
<option name="closed" value="true" />
<created>1735478048560</created>
<option name="number" value="00004" />
<option name="presentableId" value="LOCAL-00004" />
<option name="project" value="LOCAL" />
<updated>1735478048560</updated>
</task>
<option name="localTasksCounter" value="5" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -118,4 +145,22 @@
</map>
</option>
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="feat:backup" />
<MESSAGE value="feat:添加任务" />
<MESSAGE value="feat:上滑更多下拉更新" />
<MESSAGE value="feat:flex,左右对齐" />
<option name="LAST_COMMIT_MESSAGE" value="feat:flex,左右对齐" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager>
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/src/components/ParentTask/index.js</url>
<line>84</line>
<option name="timeStamp" value="1" />
</line-breakpoint>
</breakpoints>
</breakpoint-manager>
</component>
</project>

5
src/App.js
View File

@ -4,11 +4,12 @@ import Map from './pages/Map';
import Index from './pages/Index'
import './pages/Bottom/index.css'
import CityList from './pages/CityList';
import {Todo, Message, PersonalCenter} from './pages/Bottom'
import { PersonalCenter} from './pages/Bottom'
import ToDoList from "./pages/ToDoList";
import DetailForm from "./components/DetailForm";
import {NavBar} from "antd-mobile";
import DetailNavBar from "./components/DetailNavBar";
import DetailSearchContext from "./pages/DetailSearchContext";
function App() {
return (
@ -24,11 +25,11 @@ function App() {
<Route path='/' element={<Home/>}>
<Route index path='/home' element={<Index/>}/>
<Route path='/home/todo' element={<ToDoList/>}></Route>
<Route path='/home/message' element={<Message/>}></Route>
<Route path='/home/me' element={<PersonalCenter/>}></Route>
</Route>
<Route path='/detail' element={<DetailNavBar/>}>
<Route path='addTask' element={<DetailForm/>}></Route>
<Route path='searchTask' element={<DetailSearchContext/>}></Route>
</Route>
{/* <Route path='/home' element={<Home />}>

6
src/components/DataPickerItem/index.jsx
View File

@ -49,11 +49,7 @@ const DatePickerItem = (props) => {
onClick={e => {
e.stopPropagation()
setFieldsValue({fieldName: null})
}}
/>
) : (
true
)
}}/>) : true
}
onClick={() => {
setPickerVisible(true)

8
src/components/DetailForm/index.js
View File

@ -12,7 +12,10 @@ import ParentTask from "../ParentTask";
import DatePickerItem from "../DataPickerItem"
import "./index.css"
import {addTask} from "../../utils";
import {useNavigate, useOutletContext} from "react-router-dom";
export default () => {
const {setTitle} = useOutletContext();
setTitle("添加任务")
const [form] = Form.useForm();
const onFinish = (values) => {
// Dialog.alert({
@ -51,7 +54,7 @@ export default () => {
>
<Input onChange={console.log} placeholder='任务名称'/>
</Form.Item>
<Form.Item name='address' label='任务描述' help='详情地址'>
<Form.Item name='address' label='任务描述'>
<TextArea
placeholder='请输入地址'
maxLength={100}
@ -65,7 +68,8 @@ export default () => {
<Radio value='8'><Tag color='danger'>未开始</Tag></Radio>
<Radio value='9'><Tag color='warning'>进行中</Tag></Radio>
<Radio value='7'><Tag color='success'>已完成</Tag></Radio>
<Radio value='4'><Tag>已关闭</Tag></Radio>
<Radio value='10'><Tag color='success'>未完成</Tag></Radio>
<Radio value='6'><Tag>已关闭</Tag></Radio>
</Space>
</Radio.Group>
</Form.Item>

7
src/components/DetailNavBar/index.js
View File

@ -10,10 +10,13 @@ const DetailNavBar = () => {
console.log("click",navigate.length);
navigate(-1)
}
const [title,setTitle] = React.useState("");
const updateTitle=(value)=>{
setTitle(value)
}
return (
<div className='detail'>
<NavBar back='返回' onBack={handleClick}>标题</NavBar><Outlet/>
<NavBar back='返回' onBack={handleClick}>{title}</NavBar><Outlet context={{"setTitle":updateTitle}}/>
</div>
)

39
src/components/DetailSearchBar/index.css Normal file
View File

@ -0,0 +1,39 @@
.detailSearchBar {
/*头部固定剧中*/
position: fixed;
top: 0;
left: 0;
/*高度，宽度，层级*/
height: 40px;
width: 100%;
z-index: 100;
/*边框处理*/
border: solid 1px #eeeeee;
background: white;
border-radius: 20px;
/* 左右两边对齐*/
display: flex;
align-items: center;
justify-content: space-between
}
.onSearchItem .adm-tag {
margin-right: 10px;
}
.onSearchItem .antd-mobile-icon {
margin: 0 10px;;
}
.CloseOutline-CloseOutline {
width: 40px;
margin-right: 20px;
}
.onSearchItemOnlyWidth {
width: 100vh
}
.onSearchItemWidth {
width: calc(100vh - 60px)
}

37
src/components/DetailSearchBar/index.js Normal file
View File

@ -0,0 +1,37 @@
import {Tag,} from "antd-mobile";
import React from "react";
import {useLocation, useNavigate} from 'react-router-dom';
import {CloseOutline, SearchOutline} from "antd-mobile-icons";
import "./index.css"
const DetailSearchBar = () => {
const navigate = useNavigate();
const location = useLocation();
const search = location.state?.search;
console.log("DetailSearchBar.search", search)
return (
<div className="detailSearchBar">
<div className={"onSearchItem " + (search ? "onSearchItemWidth" : "onSearchItemOnlyWidth")} onClick={() => {
navigate("/detail/searchTask")
}}>
<SearchOutline/><Tag color={"danger"}>紧急重要</Tag>
</div>
{search && <div className="CloseOutline-CloseOutline" onClick={() => {
console.log("CloseOutline-Close");
}}>
<CloseOutline style={{float: "right"}}/>
</div>
}
{/*<SearchBar placeholder='请输入内容' onFocus={() => {*/}
{/* navigate("/detail/searchTask")*/}
{/*}}*/}
{/*>*/}
{/* */}
{/*</SearchBar>*/}
</div>
)
}
export default DetailSearchBar;

9
src/pages/Bottom/index.js
View File

@ -91,15 +91,6 @@ class BottomInner extends React.Component {
}
}
export function Todo() {
return <div>待办</div>
}
export function Message() {
return <div>消息</div>
}
export function PersonalCenter() {
return <div>pc端可访问:http://www.hauruyu.com</div>
}

110
src/pages/DetailSearchContext/index.js Normal file
View File

@ -0,0 +1,110 @@
import {Button, Checkbox, DatePicker, Form, Input, Space, Switch, Tag} from "antd-mobile";
import ParentTask from "../../components/ParentTask";
import React from "react";
import dayjs from "dayjs";
import {CloseCircleFill} from "antd-mobile-icons";
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
const now = new Date()
const DetailSearchContext = () => {
const {setTitle} = useOutletContext();
setTitle("搜索查询")
const navigate = useNavigate();
const [form] = Form.useForm();
const [visible, setVisible] = React.useState(false);
const location = useLocation();
const search = location.state?.search;
console.log("DetailSearchContext.search",search)
return (
<Form
form={form}
layout='horizontal'
onFinish={(values)=>{
navigate("/home/todo", { state: { search: values } })
}}
footer={
<Button block type='submit' color='primary' size='large'>
搜索
</Button>
}
>
<ParentTask form={form}/>
<Form.Item
name='name'
label='任务信息'
>
<Input onChange={console.log} placeholder='任务信息'/>
</Form.Item>
<Form.Item name='state' label='任务状态' required>
<Checkbox.Group>
<Space direction='vertical'>
<Checkbox value='8'><Tag color='danger'>未开始</Tag></Checkbox>
<Checkbox value='9'><Tag color='warning'>进行中</Tag></Checkbox>
<Checkbox value='7'><Tag color='success'>已完成</Tag></Checkbox>
<Checkbox value='10'><Tag color='success'>未完成</Tag></Checkbox>
<Checkbox value='6'><Tag>已关闭</Tag></Checkbox>
</Space>
</Checkbox.Group>
</Form.Item>
<Form.Item name='priority' label='任务优先级'>
<Checkbox.Group>
<Space direction='vertical'>
<Checkbox value='3'><Tag color='danger'>紧急重要</Tag></Checkbox>
<Checkbox value='2'><Tag color='warning'>不紧急重要</Tag></Checkbox>
<Checkbox value='1'><Tag>紧急不重要</Tag></Checkbox>
<Checkbox value='0'><Tag color='success'>不紧急不重要</Tag></Checkbox>
</Space>
</Checkbox.Group>
</Form.Item>
<Form.Item noStyle
shouldUpdate={(prevValues, curValues) =>
prevValues.todoDay !== curValues.todoDay
}
>
{({ getFieldValue, setFieldsValue }) => (
<Form.Item
name='todoDay'
trigger='onConfirm'
label='TODO日'
help='期望开始时间和期望结束时间包含当日时间段'
arrow={
getFieldValue('todoDay') ? (
<CloseCircleFill
style={{
color: 'var(--adm-color-light)',
fontSize: 14,
}}
onClick={e => {
e.stopPropagation()
setFieldsValue({ todoDay: null })
}}
/>) : true
}
onClick={() => {
setVisible(true)
}}
>
<DatePicker
visible={visible}
onClose={() => {
setVisible(false)
}}
>
{value =>
value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
}
</DatePicker>
</Form.Item>
)}
</Form.Item>
<Form.Item
name='delivery'
label='延期任务'
childElementPosition='right'
>
<Switch defaultChecked={true}/>
</Form.Item>
</Form>)
}
export default DetailSearchContext;

19
src/pages/Home/index.js
View File

@ -2,19 +2,28 @@ import React from 'react'
import Bottom from './../Bottom/index'
import './index.css'
import {Outlet} from 'react-router-dom'
import {SearchBar} from "antd-mobile";
import DetailSearchBar from "../../components/DetailSearchBar";
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
search:{
"pageSize":10,
"pageNumber":1,
"data":[
{"name":"state","value":"8,9","operateType":"IN"},
{"name":"expectedStartTime","value":"2024-12-29T16:00:00.000Z","operateType":">="},
{"name":"expectedStartTime","value":"2024-12-29T16:00:00.000Z","operateType":"<="}]}
};
}
render() {
return (
<div className='body'>
<div style={{"position": "fixed","top":"0","left":"0","width":"100%","zIndex":100}}>
<SearchBar placeholder='请输入内容'/>
</div>
<DetailSearchBar/>
<div style={{marginTop:"40px",marginBottom:"49px",width:"100%"}}>
<Outlet/>
</div>
<Bottom/>
</div>
)

5
src/pages/ToDoList/index.js
View File

@ -8,6 +8,7 @@ import {
} from 'react-beautiful-dnd'
import {getTaskList} from "../../utils";
import "./index.css"
import {useLocation} from "react-router-dom";
const reorder = (
list,
@ -25,7 +26,9 @@ const ToDoList = () => {
const [taskList, setTaskList] = useState([])
const [hasMore, setHasMore] = useState(true)
const [pageNumber, setPageNumber] = useState(1)
const location = useLocation();
const search = location.state?.search;
console.log("ToDoList.search",search)
async function loadMore() {
getTaskList(pageNumber+1).then(result => {
setTaskList(val => [...val, ...result.data.data.content])

1
src/pages/ToDoTree/index.js Normal file
View File

@ -0,0 +1 @@
上面用文本下面用联动视图