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 2025-01-20 19:12:50 +08:00
parent 6982280de2
commit fd2d4a7b54
15 changed files with 615 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/iconfont.js Normal file
View File

File diff suppressed because one or more lines are too long

6
public/index.html
View File

@ -16,9 +16,6 @@
-->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<!-- <script src="http://localhost:8097"></script> -->
<script type="text/javascript"
src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=FrkiO8MEXi5umzVgTYTZAYhhnr2cpAhc">
</script>
<!-- Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@ -27,7 +24,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>华宇平台</title>
<script src="./iconfont.js"></script>
<title>想做的事情</title>
</head>
<body>

2
src/App.js
View File

@ -9,6 +9,7 @@ import ToDoCal from "./pages/ToDoCal";
import ToDoTree from "./pages/ToDoTree";
import {PersonalCenter} from "./pages/PersonalCenter";
import {MyRootProvider} from "./components/MyRootContext";
import ToDoTest from "./pages/ToDoTest";
function App() {
return (
@ -25,6 +26,7 @@ function App() {
<Route path='listTask' element={<ToDoList/>}></Route>
<Route path='calTask' element={<ToDoCal/>}/>
<Route path='me' element={<PersonalCenter/>}></Route>
<Route path='test' element={<ToDoTest />} />
</Route>
<Route path='/detail' element={<DetailNavBar/>}>
<Route path='addTask' element={<DetailForm/>}></Route>

1
src/assets/icon/tree.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737364829196" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5642" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M554.666667 682.666667h85.333333v128h-213.333333v-128h85.333333v-128H256v128h85.333333v128H128v-128h85.333333v-170.666667h298.666667V384h-85.333333V256h213.333333v128h-85.333333v128h298.666666v170.666667h85.333334v128h-213.333334v-128h85.333334v-128h-256v128z m42.666666-384h-128v42.666666h128V298.666667zM298.666667 725.333333H170.666667v42.666667h128v-42.666667z m597.333333 0h-128v42.666667h128v-42.666667z m-298.666667 0h-128v42.666667h128v-42.666667z" fill="#444444" p-id="5643"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 830 B

91
src/components/DataPickItemPopup/constant.js Normal file
View File

@ -0,0 +1,91 @@
export const basicColumns =[
[
{ label: '00', value: '00' },
{ label: '01', value: '01' },
{ label: '02', value: '02' },
{ label: '03', value: '03' },
{ label: '04', value: '04' },
{ label: '05', value: '05' },
{ label: '06', value: '06' },
{ label: '07', value: '07' },
{ label: '08', value: '08' },
{ label: '09', value: '09' },
{ label: '10', value: '10' },
{ label: '11', value: '11' },
{ label: '12', value: '12' },
{ label: '13', value: '13' },
{ label: '14', value: '14' },
{ label: '15', value: '15' },
{ label: '16', value: '16' },
{ label: '17', value: '17' },
{ label: '18', value: '18' },
{ label: '19', value: '19' },
{ label: '20', value: '20' },
{ label: '21', value: '21' },
{ label: '22', value: '22' },
{ label: '23', value: '23' },
],
[
{ label: '00', value: '00' },
{ label: '01', value: '01' },
{ label: '02', value: '02' },
{ label: '03', value: '03' },
{ label: '04', value: '04' },
{ label: '05', value: '05' },
{ label: '06', value: '06' },
{ label: '07', value: '07' },
{ label: '08', value: '08' },
{ label: '09', value: '09' },
{ label: '10', value: '10' },
{ label: '11', value: '11' },
{ label: '12', value: '12' },
{ label: '13', value: '13' },
{ label: '14', value: '14' },
{ label: '15', value: '15' },
{ label: '16', value: '16' },
{ label: '17', value: '17' },
{ label: '18', value: '18' },
{ label: '19', value: '19' },
{ label: '20', value: '20' },
{ label: '21', value: '21' },
{ label: '22', value: '22' },
{ label: '23', value: '23' },
{ label: '24', value: '24' },
{ label: '25', value: '25' },
{ label: '26', value: '26' },
{ label: '27', value: '27' },
{ label: '28', value: '28' },
{ label: '29', value: '29' },
{ label: '30', value: '30' },
{ label: '31', value: '31' },
{ label: '32', value: '32' },
{ label: '33', value: '33' },
{ label: '34', value: '34' },
{ label: '35', value: '35' },
{ label: '36', value: '36' },
{ label: '37', value: '37' },
{ label: '38', value: '38' },
{ label: '39', value: '39' },
{ label: '40', value: '40' },
{ label: '41', value: '41' },
{ label: '42', value: '42' },
{ label: '43', value: '43' },
{ label: '44', value: '44' },
{ label: '45', value: '45' },
{ label: '46', value: '46' },
{ label: '47', value: '47' },
{ label: '48', value: '48' },
{ label: '49', value: '49' },
{ label: '50', value: '50' },
{ label: '51', value: '51' },
{ label: '52', value: '52' },
{ label: '53', value: '53' },
{ label: '54', value: '54' },
{ label: '55', value: '55' },
{ label: '56', value: '56' },
{ label: '57', value: '57' },
{ label: '58', value: '58' },
{ label: '59', value: '59' },
],
]

0
src/components/DataPickItemPopup/index.css Normal file
View File

123
src/components/DataPickItemPopup/index.js Normal file
View File

@ -0,0 +1,123 @@
import React, {useState} from "react";
import {Form, Calendar, CapsuleTabs, JumboTabs, Picker, PickerView, Popup} from "antd-mobile";
import {basicColumns} from "./constant";
import "./index.css"
import {CloseCircleFill} from "antd-mobile-icons";
import dayjs from "dayjs";
export default function DataPickItemPopup(props) {
const {fieldName, labelName, disabled} = props
const [visiblePopup, setVisiblePopup] = useState(false);
const [dateShowValue, setDateShowValue] = useState('日期');
const [timeValue, setTimeValue] = useState(['时间']);
const [activeKey, setActiveKey] = useState("date");
const [dataPick, setDataPick] = useState();
return (
<Form.Item noStyle
shouldUpdate={(prevValues, curValues) => {
return prevValues.fieldName !== curValues.fieldName
}}
>
{({getFieldValue, setFieldsValue}) => (
<Form.Item
name={fieldName}
label={labelName}
disabled={disabled}
trigger='onConfirm'
arrow={
getFieldValue(fieldName) ? (
<CloseCircleFill
style={{
color: 'var(--adm-color-light)',
fontSize: 14,
}}
onClick={e => {
// 计算属性名:允许你在对象字面量中使用表达式来动态确定属性名。
setFieldsValue({[fieldName]: null})
e.stopPropagation()
}}/>) : true
}
onClick={() => {
setVisiblePopup(true)
let fieldValue = getFieldValue(fieldName);
console.log({fieldValue})
if (fieldValue) {
let dayjs1 = dayjs(fieldValue);
setDateShowValue(dayjs1.format('YYYY-MM-DD'));
setTimeValue([dayjs1.hour().toString(), dayjs1.minute().toString()])
setDataPick(dayjs1.toDate())
} else {
let dayjs1 = dayjs(new Date());
setDateShowValue(dayjs1.format('YYYY-MM-DD'));
setTimeValue([dayjs1.hour().toString(), dayjs1.minute().toString()])
setDataPick(new Date())
}
}}
>
{getFieldValue(fieldName) ? dayjs(getFieldValue(fieldName)).format('YYYY-MM-DD HH:mm') : '请选择日期'}
<Popup
visible={visiblePopup}
onMaskClick={() => {
setVisiblePopup(false)
}}
bodyStyle={{
borderTopLeftRadius: '8px',
borderTopRightRadius: '8px',
minHeight: '40vh',
}}
>
<CapsuleTabs className="tabs-container"
onChange={(key) => {
if (key === 'ok') {
setVisiblePopup(false)
if (dateShowValue && timeValue) {
setFieldsValue({
[fieldName]: (dateShowValue + ' ' + timeValue.join(":"))
})
} else {
setActiveKey(key)
}
}
}}
activeKey={activeKey}
>
<CapsuleTabs.Tab title={dateShowValue}
key='date' className="tab-content"
>
<Calendar
selectionMode='single'
defaultValue={dataPick}
onChange={val => {
if (val) {
setDateShowValue(dayjs(val).format('YYYY-MM-DD'))
} else {
setDateShowValue(undefined)
}
}}
/>
</CapsuleTabs.Tab>
<CapsuleTabs.Tab title={timeValue.join(":")} key='time'
className="tab-content"
>
<PickerView
columns={basicColumns}
onClose={() => {
}}
value={timeValue}
onChange={(val, extend) => {
setTimeValue(val)
console.log('onChange', val, extend.items)
}}
/>
</CapsuleTabs.Tab>
<CapsuleTabs.Tab title="确认" key="ok" destroyOnClose={true}>
</CapsuleTabs.Tab>
</CapsuleTabs>
</Popup>
</Form.Item>
)}
</Form.Item>)
}

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

@ -13,6 +13,7 @@ import "./index.css"
import {addTask, getPTask, getTaskById, updateTask} from "../../utils";
import {useLocation, useNavigate, useOutletContext, useSearchParams} from "react-router-dom";
import dayjs from "dayjs";
import DataPickItemPopup from "../DataPickItemPopup";
export default () => {
// 进入此页面的操作：添加，修改，详情（按钮为添加任务日志）
@ -29,8 +30,7 @@ export default () => {
// 获取form引用
const [form] = Form.useForm();
useEffect(() => {
window.scrollTo(0, 0);
if (location.pathname.endsWith("addTask")) {
setTitle("添加任务");
setCurrentPath("addTask");
@ -48,7 +48,6 @@ export default () => {
} else {
// todo 异常处理
}
}, [])
function editParentTask(id) {
@ -208,13 +207,13 @@ export default () => {
</Space>
</Radio.Group>
</Form.Item>
<DatePickerItem disabled={updateFiledDisabled} fieldName={"expectedStartTime"}
<DataPickItemPopup disabled={updateFiledDisabled} fieldName={"expectedStartTime"}
labelName={"预计开始时间"}/>
<DatePickerItem disabled={updateFiledDisabled} fieldName={"expectedEndTime"}
<DataPickItemPopup disabled={updateFiledDisabled} fieldName={"expectedEndTime"}
labelName={"预计结束时间"}/>
<DatePickerItem disabled={updateFiledDisabled} fieldName={"actualStartTime"}
<DataPickItemPopup disabled={updateFiledDisabled} fieldName={"actualStartTime"}
labelName={"实际开始时间"}/>
<DatePickerItem disabled={updateFiledDisabled} fieldName={"actualEndTime"} labelName={"实际结束时间"}/>
<DataPickItemPopup disabled={updateFiledDisabled} fieldName={"actualEndTime"} labelName={"实际结束时间"}/>
</Form>
</>
)

226
src/components/MyCalendarOutline/iconfont.json Normal file
View File

@ -0,0 +1,226 @@
{
"id": "4815459",
"name": "日历",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "1718319",
"name": "日历1",
"font_class": "rili",
"unicode": "e600",
"unicode_decimal": 58880
},
{
"icon_id": "1718322",
"name": "日历2",
"font_class": "rili1",
"unicode": "e601",
"unicode_decimal": 58881
},
{
"icon_id": "1718324",
"name": "日历4",
"font_class": "rili2",
"unicode": "e602",
"unicode_decimal": 58882
},
{
"icon_id": "1718325",
"name": "日历3",
"font_class": "rili3",
"unicode": "e603",
"unicode_decimal": 58883
},
{
"icon_id": "1718326",
"name": "日历5",
"font_class": "rili4",
"unicode": "e604",
"unicode_decimal": 58884
},
{
"icon_id": "1718327",
"name": "日历7",
"font_class": "rili5",
"unicode": "e605",
"unicode_decimal": 58885
},
{
"icon_id": "1718328",
"name": "日历8",
"font_class": "rili6",
"unicode": "e606",
"unicode_decimal": 58886
},
{
"icon_id": "1718329",
"name": "日历11",
"font_class": "rili7",
"unicode": "e607",
"unicode_decimal": 58887
},
{
"icon_id": "1718330",
"name": "日历9",
"font_class": "rili8",
"unicode": "e608",
"unicode_decimal": 58888
},
{
"icon_id": "1718331",
"name": "日历12",
"font_class": "rili9",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "1718332",
"name": "日历10",
"font_class": "rili10",
"unicode": "e60a",
"unicode_decimal": 58890
},
{
"icon_id": "1718333",
"name": "日历13",
"font_class": "rili11",
"unicode": "e60b",
"unicode_decimal": 58891
},
{
"icon_id": "1718334",
"name": "日历14",
"font_class": "rili12",
"unicode": "e60c",
"unicode_decimal": 58892
},
{
"icon_id": "1718335",
"name": "日历6",
"font_class": "rili13",
"unicode": "e60d",
"unicode_decimal": 58893
},
{
"icon_id": "1718336",
"name": "日历15",
"font_class": "rili14",
"unicode": "e60e",
"unicode_decimal": 58894
},
{
"icon_id": "1718337",
"name": "日历17",
"font_class": "rili15",
"unicode": "e60f",
"unicode_decimal": 58895
},
{
"icon_id": "1718338",
"name": "日历16",
"font_class": "rili16",
"unicode": "e610",
"unicode_decimal": 58896
},
{
"icon_id": "1718339",
"name": "日历18",
"font_class": "rili17",
"unicode": "e611",
"unicode_decimal": 58897
},
{
"icon_id": "1718340",
"name": "日历19",
"font_class": "rili18",
"unicode": "e612",
"unicode_decimal": 58898
},
{
"icon_id": "1718341",
"name": "日历21",
"font_class": "rili19",
"unicode": "e613",
"unicode_decimal": 58899
},
{
"icon_id": "1718342",
"name": "日历20",
"font_class": "rili20",
"unicode": "e614",
"unicode_decimal": 58900
},
{
"icon_id": "1718343",
"name": "日历24",
"font_class": "rili21",
"unicode": "e615",
"unicode_decimal": 58901
},
{
"icon_id": "1718344",
"name": "日历22",
"font_class": "rili22",
"unicode": "e616",
"unicode_decimal": 58902
},
{
"icon_id": "1718345",
"name": "日历25",
"font_class": "rili23",
"unicode": "e617",
"unicode_decimal": 58903
},
{
"icon_id": "1718346",
"name": "日历23",
"font_class": "rili24",
"unicode": "e618",
"unicode_decimal": 58904
},
{
"icon_id": "1718347",
"name": "日历27",
"font_class": "rili25",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "1718348",
"name": "日历26",
"font_class": "rili26",
"unicode": "e61a",
"unicode_decimal": 58906
},
{
"icon_id": "1718349",
"name": "日历29",
"font_class": "rili27",
"unicode": "e61b",
"unicode_decimal": 58907
},
{
"icon_id": "1718350",
"name": "日历28",
"font_class": "rili28",
"unicode": "e61c",
"unicode_decimal": 58908
},
{
"icon_id": "1718352",
"name": "日历31",
"font_class": "rili29",
"unicode": "e61d",
"unicode_decimal": 58909
},
{
"icon_id": "1718354",
"name": "日历30",
"font_class": "rili30",
"unicode": "e61e",
"unicode_decimal": 58910
}
]
}

5
src/components/MyCalendarOutline/index.css Normal file
View File

@ -0,0 +1,5 @@
.icon {
height: 24px;
width: 24px;
fill: currentColor;
}

50
src/components/MyCalendarOutline/index.js Normal file
View File

@ -0,0 +1,50 @@
import React, {useEffect, useState} from 'react';
import "./index.css"
import dayjs from "dayjs";
import calendarList from "./iconfont.json"
const My1CalendarOutline = (props) => {
return (
<svg t="1737363407413" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4639" width="200" height="200">
<path
d="M956.85474 839.600223V245.164722c0-65.448618-53.200666-118.755708-118.828362-118.755707h-59.445904V79.237669c0-6.723122-5.64251-12.254092-12.603039-12.254092h-34.219359c-7.118118 0-12.602016 5.485945-12.602016 12.254092v47.171346h-415.973969V79.237669c0-6.723122-5.64251-12.254092-12.602016-12.254092h-34.220383c-7.118118 0-12.602016 5.485945-12.602016 12.254092v47.171346H184.311773c-65.738213 0-118.828362 53.168943-118.828363 118.755707v594.434478c0 65.448618 53.200666 118.755708 118.828363 118.755707h653.715628c65.73719 0.001023 118.827339-53.16792 118.827339-118.754684zM124.907824 245.164722c0-32.806173 26.523073-59.331293 59.402925-59.331293h59.445904v47.171346c0 6.723122 5.64251 12.254092 12.602016 12.254091h34.220382c7.118118 0 12.602016-5.485945 12.602016-12.254091v-47.171346h415.972947v47.171346c0 6.723122 5.64251 12.254092 12.602015 12.254091h34.21936c7.119141 0 12.603039-5.485945 12.603039-12.254091v-47.171346h59.445904c32.757055 0 59.402925 26.65201 59.402924 59.331293v59.518559H124.907824v-59.518559z m713.118554 653.765771H184.310749c-32.757055 0-59.402925-26.65201-59.402925-59.331293V364.107695h772.521479v475.491505c0 32.807197-26.523073 59.331293-59.402925 59.331293z"
p-id="4640"></path>
<path
d="M481.444077 813.546847h61.398372v-343.830882h-45.680389c-1.964748 10.483772-6.14086 19.325138-12.526291 26.524096-6.385431 7.206122-14.083763 13.101389-23.085788 17.682731-9.010211 4.589528-19.079544 7.858992-30.207999 9.82374-11.135618 1.964748-22.594601 2.947122-34.383088 2.947122v44.205804h84.48416v242.647389z"
p-id="4641"></path>
</svg>
);
};
const My20CalendarOutline = (props) => {
return (
<svg t="1737363080584" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
p-id="4492" width="200" height="200">
<path
d="M401.987421 625.542986c-10.154267 8.842389-21.290909 17.115819-33.401738 24.804942a620.87364 620.87364 0 0 0-34.874275 23.822568c-23.254633 15.717983-41.590234 34.221406-55.012942 55.504129-13.430894 21.289885-20.307512 46.171576-20.629853 74.66042h234.787375v-50.101072h-167.494759c2.287089-7.528464 6.54609-14.650675 12.770861-21.366633 6.216585-6.707772 13.507642-13.178137 21.856798-19.401886 8.351202-6.216585 17.438161-12.440333 27.2619-18.665105 9.82374-6.216585 19.647479-12.770861 29.471218-19.647479a368.43935 368.43935 0 0 0 28.488845-22.103414c9.163707-7.860015 17.353227-16.454764 24.559349-25.787316 7.198959-9.332553 12.932544-19.563568 17.192567-30.699186 4.250814-11.128455 6.384407-23.576975 6.384408-37.33021 0-11.128455-1.803066-22.839171-5.402034-35.118845-3.607154-12.279674-9.746992-23.653723-18.419511-34.137495-8.679683-10.475586-20.061918-19.156292-34.137495-26.03291-14.083763-6.876618-31.604812-10.314926-52.557007-10.314926-19.325138 0-36.271088 3.361561-50.837851 10.069333-14.57495 6.714935-26.938536 15.963577-37.084617 27.752064-10.154267 11.788487-17.767666 25.787316-22.840194 41.995463-5.080715 16.210193-7.613398 33.816177-7.613399 52.803623h55.995316c0.322341-12.110829 1.550309-23.408129 3.683902-33.891901 2.12643-10.475586 5.403057-19.562545 9.823739-27.260877 4.420683-7.690146 10.314926-13.753235 17.682732-18.173918 7.367805-4.420683 16.615423-6.631024 27.752064-6.631025 12.110829 0 21.934568 2.048659 29.471218 6.139838 7.528464 4.098341 13.422707 9.17087 17.682731 15.226796 4.250814 6.063089 7.122211 12.609179 8.594749 19.647479 1.473561 7.045463 2.210341 13.676487 2.210341 19.892049-0.329505 13.430894-3.768837 25.297153-10.314926 35.612079-6.554276 10.313903-14.903431 19.892049-25.049512 28.733415zM552.045041 751.042281c8.67252 17.522072 20.790512 31.927153 36.347837 43.224454 15.549138 11.2973 35.612079 16.945951 60.171427 16.945951s44.61308-5.64865 60.170405-16.945951c15.548114-11.2973 27.66713-25.702382 36.347836-43.224454 8.673543-17.513886 14.566764-36.754089 17.682731-57.714469 3.107781-20.952194 4.666276-41.258683 4.666276-60.907185s-1.557472-39.947827-4.666276-60.908208c-3.115967-20.952194-9.010211-40.192398-17.682731-57.713447-8.679683-17.513886-20.798698-31.927153-36.347836-43.224454-15.557324-11.2973-35.611056-16.945951-60.170405-16.94595s-44.621267 5.64865-60.171427 16.94595c-15.556301 11.2973-27.675316 25.710568-36.347837 43.224454-8.679683 17.521049-14.573927 36.762275-17.682731 57.713447-3.115967 20.959358-4.666276 41.259706-4.666276 60.908208s1.550309 39.954991 4.666276 60.907185c3.107781 20.960381 9.002025 40.200584 17.682731 57.714469z m36.592407-169.460529c1.964748-15.878642 5.318122-29.877471 10.069333-41.996487 4.744048-12.109806 11.128455-21.687952 19.157315-28.733415 8.019651-7.0383 18.250666-10.56052 30.699186-10.56052 12.110829 0 22.264073 3.52222 30.453593 10.56052 8.181333 7.045463 14.650675 16.623609 19.401885 28.733415 4.743024 12.119015 8.104585 26.117844 10.069333 41.996487 1.964748 15.886829 2.947122 32.832779 2.947122 50.838875 0 18.013259-0.982374 35.043121-2.947122 51.083445-1.964748 16.048511-5.326309 30.046317-10.069333 41.996487-4.751211 11.957333-11.220552 21.451568-19.401885 28.488844-8.18952 7.045463-18.342764 10.56052-30.453593 10.56052-12.44852 0-22.679535-3.51608-30.699186-10.56052-8.02886-7.037277-14.413268-16.531512-19.157315-28.488844-4.751211-11.95017-8.104585-25.947975-10.069333-41.996487-1.964748-16.040325-2.947122-33.070186-2.947122-51.083445 0-18.006096 0.982374-34.951023 2.947122-50.838875z"
p-id="4493"></path>
<path
d="M838.026378 126.409015h-59.445904V79.237669c0-6.723122-5.64251-12.254092-12.603039-12.254092h-34.219359c-7.118118 0-12.602016 5.485945-12.602016 12.254092v47.171346h-415.973969V79.237669c0-6.723122-5.64251-12.254092-12.602016-12.254092h-34.220383c-7.118118 0-12.602016 5.485945-12.602016 12.254092v47.171346H184.311773c-65.738213 0-118.828362 53.168943-118.828363 118.755707v594.434478c0 65.448618 53.200666 118.755708 118.828363 118.755707h653.715628c65.738213 0 118.828362-53.168943 118.828363-118.755707V245.164722c-0.001023-65.448618-53.202713-118.755708-118.829386-118.755707z m59.402925 713.191208c0 32.806173-26.523073 59.331293-59.402925 59.331293H184.310749c-32.757055 0-59.402925-26.65201-59.402925-59.331293V364.107695h772.521479v475.492528z m0-534.916942H124.907824v-59.518559c0-32.806173 26.523073-59.331293 59.402925-59.331293h59.445904v47.171346c0 6.723122 5.64251 12.254092 12.602016 12.254091h34.220382c7.118118 0 12.602016-5.485945 12.602016-12.254091v-47.171346h415.972947v47.171346c0 6.723122 5.64251 12.254092 12.602015 12.254091h34.21936c7.119141 0 12.603039-5.485945 12.603039-12.254091v-47.171346h59.445904c32.757055 0 59.402925 26.65201 59.402924 59.331293v59.518559z"
p-id="4494"></path>
</svg>
);
};
const CurrentDayOutline = ()=>{
const [currentDay, setCurrentDay] = useState(null);
useEffect(()=>{
setCurrentDay(calendarList.glyphs.find(obj=>obj.name===('日历'+(dayjs(new Date()).date()))).font_class)
console.log(calendarList.glyphs.find(obj=>obj.name===('日历'+(dayjs(new Date()).date()))).font_class)
},[dayjs(new Date()).date()])
return (
<svg className="icon" aria-hidden="true">
<use href={`#icon-${currentDay}`}></use>
</svg>
)
}
export {
My1CalendarOutline,
CurrentDayOutline,
My20CalendarOutline
};

2
src/components/MyRootContext/index.js
View File

@ -7,7 +7,7 @@ export const MyRootContext = createContext();
export const UPDATE_SEARCH = "UPDATE_SEARCH";
// 定义初始状态和 reducer 函数
const initialState = {"search":{
"pageSize": 12,
"pageSize": 20,
"pageNumber": 1,
"data": {
"orSearchModel": {

42
src/pages/Bottom/index.css
View File

@ -2,28 +2,40 @@
touch-action:pan-y
} */
.app {
height: 100vh;
display: flex;
flex-direction: column;
height: 100vh;
display: flex;
flex-direction: column;
}
.top {
flex: 0;
border-bottom: solid 1px var(--adm-color-border);
flex: 0;
border-bottom: solid 1px var(--adm-color-border);
}
.body {
flex: 1;
display: flex;
justify-content: center;
align-items: top;
flex: 1;
display: flex;
justify-content: center;
align-items: top;
}
.adm-tab-bar {
flex: 0;
background: white;
border-top: solid 1px var(--adm-color-border);
width:100%;
position: fixed;
bottom:0;
flex: 0;
background: white;
border-top: solid 1px var(--adm-color-border);
width: 100%;
position: fixed;
bottom: 0;
}
.icon {
height: 24px;
width: 24px;
fill: currentColor;
}
.icon path {
height: 24px;
width: 24px;
fill: currentColor;
}

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

@ -9,12 +9,13 @@ import {
AddOutline,
} from 'antd-mobile-icons'
import "./index.css"
import {CurrentDayOutline, My20CalendarOutline} from "../../components/MyCalendarOutline";
import { ReactComponent as TreeIcon } from '../../assets/icon/tree.svg';
const tabs = [
{
key: '/home/treeTask',
title: '主子任务',
icon: <AppOutline/>,
icon: <TreeIcon/>,
// badge: '1',
},
{
@ -26,7 +27,7 @@ const tabs = [
{
key: '/home/calTask',
title: '日历任务',
icon: <CalendarOutline />,
icon: <CurrentDayOutline/>,
// badge: '3',
},
{

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

@ -1,12 +1,11 @@
import {Dialog, InfiniteScroll, List, PullToRefresh, SwipeAction} from 'antd-mobile'
import React, {Fragment, useContext, useEffect, useRef, useState} from 'react'
import React, {Fragment, useCallback, useContext, useEffect, useRef, useState} from 'react'
import {deleteTaskById, getTaskList, updateTaskStateById} from "../../utils";
import "./index.css"
import {useLocation, useNavigate, useOutletContext} from "react-router-dom";
import { useNavigate, useOutletContext} from "react-router-dom";
import dayjs from "dayjs";
import {DATE_TIME_FORMAT, DATE_TIME_FORMAT_SIMPLE} from "../../utils/timeFormatUtil";
import { DATE_TIME_FORMAT_SIMPLE} from "../../utils/timeFormatUtil";
import {getDictionary} from "../../utils/dictUtil";
import {List as VirtualizedList,AutoSizer} from "react-virtualized";
import {MyRootContext} from "../../components/MyRootContext";
const reorder = (
@ -29,11 +28,11 @@ const ToDoList = () => {
const [stateMap, setStateMap] = useState([])
const navigate = useNavigate();
let loading = false;
const { state } = useContext(MyRootContext);
const {state} = useContext(MyRootContext);
const search = state.search
console.log("从全局取出的search：" ,{search})
console.log("从全局取出的search：", {search})
const loadMore = async () => {
console.log("loading:",pageNumber,loading)
console.log("loading:", pageNumber, loading)
if (loading) {
return
}
@ -41,12 +40,12 @@ const ToDoList = () => {
console.log("loadMore", loading)
const taskRes = await getTaskList({...search, "pageNumber": pageNumber});
console.log({taskRes})
setTaskList( [...taskList, ...taskRes.content])
setTaskList([...taskList, ...taskRes.content])
if (taskRes.page.number < taskRes.page.totalPages){
if (taskRes.page.number < taskRes.page.totalPages) {
setHasMore(true)
setPageNumber(pageNumber + 1)
}else {
} else {
setHasMore(false)
setPageNumber(1)
}
@ -55,8 +54,24 @@ const ToDoList = () => {
/**
* 根据查询条件筛选本地列表，不触发接口
*/
const localRefresh = () =>{
const localRefresh = () => {
console.log("refresh")
const refreshSearch = {...search, "pageNumber": 1};
if (pageNumber>1){
refreshSearch.pageSize = 20*pageNumber;
}
loading = true;
getTaskList({...search, "pageNumber": 1}).then(result => {
setTaskList(result.content)
if (result.page.number < result.page.totalPages) {
setHasMore(true)
setPageNumber(pageNumber + 1)
} else {
setHasMore(false)
setPageNumber(1)
}
})
loading = false;
}
useEffect(() => {
@ -79,26 +94,29 @@ const ToDoList = () => {
// })
}, [useOutletContext()])
const ref = useRef(null)
// 创建一个用于存储当前激活的 SwipeAction ref 的变量
const activeSwipeActionRef = useRef(null);
// 定义一个回调函数来更新当前激活的 SwipeAction ref
const setActiveSwipeAction = useCallback((ref) => {
if (activeSwipeActionRef.current && ref !== activeSwipeActionRef.current) {
activeSwipeActionRef.current.close();
}else {
activeSwipeActionRef.current = ref;
}
}, []);
// 定义一个函数来关闭当前激活的 SwipeAction
const closeActiveSwipeAction = useCallback(() => {
console.log({activeSwipeActionRef})
if (activeSwipeActionRef.current) {
activeSwipeActionRef.current.close();
}
}, []);
return (
<Fragment>
{/* 下拉刷新 */}
<PullToRefresh
onRefresh={() => {
console.log("refresh")
loading = true;
getTaskList({...search, "pageNumber": 1}).then(result => {
setTaskList(result.content)
if (result.page.number < result.page.totalPages){
setHasMore(true)
setPageNumber(pageNumber + 1)
}else {
setHasMore(false)
setPageNumber(1)
}
})
loading= false;
}}
onRefresh={localRefresh}
>
<List>
{/*<AutoSizer disableHeight>*/}
@ -113,28 +131,37 @@ const ToDoList = () => {
{/*</AutoSizer>*/}
{taskList.map((item, index) => (
<SwipeAction
ref={ref}
closeOnAction={false}
ref={(ref) => setActiveSwipeAction(ref)}
closeOnAction={true}
closeOnTouchOutside={false}
rightActions={[
{
key: `delete${item.id}`,
text: '删除',
color: 'danger',
onClick: () => {
Dialog.confirm({
onClick: async () => {
await Dialog.confirm({
content: '确定要删除吗？',
onConfirm: () => {
deleteTaskById(item.id).then(() => {
ref.current?.close()
})
},
onClose: () => {
console.log(ref)
ref.current?.close()
}
})
// 关闭当前激活的 SwipeAction
closeActiveSwipeAction();
},
// onClick: async () => {
// const result = await Dialog.confirm({
// content: '确定要删除吗？',
// onConfirm: () => {
// deleteTaskById(item.id).then(() => {
// ref.current?.close()
// })
// },
// onClose: () => {
// // console.log(ref)
// }
// })
// console.log({result})
// ref.current.close()
// localRefresh()
// },
},
{
key: `close${item.id}`,
@ -145,10 +172,12 @@ const ToDoList = () => {
content: '确定要关闭吗？',
onConfirm: () => {
updateTaskStateById('6', item.id).then(res => {
ref.current?.close()
// 关闭当前激活的 SwipeAction
closeActiveSwipeAction();
})
},
})
localRefresh()
},
},
{
@ -156,7 +185,8 @@ const ToDoList = () => {
text: '修改',
color: 'primary',
onClick: () => {
ref.current?.close()
// 关闭当前激活的 SwipeAction
closeActiveSwipeAction();
// 跳转
navigate(`/detail/updateTask?id=${item.id}`)
},
@ -170,12 +200,12 @@ const ToDoList = () => {
content: '确定要完成吗？',
onConfirm: () => {
updateTaskStateById('7', item.id).then(res => {
ref.current?.close()
console.log({ref})
// 关闭当前激活的 SwipeAction
closeActiveSwipeAction();
})
},
})
localRefresh()
},
},
]}