|
|
@ -1,21 +1,47 @@ |
|
|
|
import { NavBar } from 'antd-mobile'; |
|
|
|
import { NavBar, Toast } from 'antd-mobile'; |
|
|
|
import { useNavigate } from 'react-router-dom'; |
|
|
|
import MeasureGroups from '../components/MeasureGroups'; |
|
|
|
import { useState } from 'react'; |
|
|
|
import { useCallback, useEffect, useState } from 'react'; |
|
|
|
import { Measurement } from '../services/apiTypes'; |
|
|
|
import * as R from 'ramda'; |
|
|
|
import { MoreOutline, SearchOutline } from 'antd-mobile-icons'; |
|
|
|
|
|
|
|
import { dataList } from '../utils/constant'; |
|
|
|
import Bridge from '../utils/bridge'; |
|
|
|
|
|
|
|
const PAGE_SIZE = 10; |
|
|
|
|
|
|
|
export default function MeasurementList() { |
|
|
|
const navigate = useNavigate(); |
|
|
|
|
|
|
|
const [dataList, setDataList] = useState<{ date: string; records: Measurement[] }[]>([]); |
|
|
|
const [noMore, setNoMore] = useState(false); |
|
|
|
const [editMode, setEditMode] = useState(false); |
|
|
|
const [selectedIds, setSelectedIds] = useState<number[]>([]); |
|
|
|
async function loadMoreRecords() {} |
|
|
|
|
|
|
|
const loadData = useCallback(() => { |
|
|
|
Bridge.getRecordList({ pageNum: 1, size: PAGE_SIZE }).then((res) => { |
|
|
|
if (res.success) { |
|
|
|
setDataList(res.data.list); |
|
|
|
setNoMore(res.data.list.length < PAGE_SIZE); |
|
|
|
} else { |
|
|
|
Toast.show(res.message); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, []); |
|
|
|
|
|
|
|
async function loadMoreData() { |
|
|
|
const pageNum = Math.floor(dataList.length / PAGE_SIZE); |
|
|
|
const res = await Bridge.getRecordList({ pageNum: pageNum + 1, size: PAGE_SIZE }); |
|
|
|
if (res.success) { |
|
|
|
setDataList((list) => list.concat(res.data.list)); |
|
|
|
setNoMore(res.data.list.length < PAGE_SIZE); |
|
|
|
} else { |
|
|
|
Toast.show(res.message); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
loadData(); |
|
|
|
}, [loadData]); |
|
|
|
|
|
|
|
const onItemSelect = (groupIdx: number, id: number) => { |
|
|
|
if (selectedIds.includes(id)) { |
|
|
@ -26,7 +52,7 @@ export default function MeasurementList() { |
|
|
|
}; |
|
|
|
|
|
|
|
const onGroupSelect = (groupIdx: number) => { |
|
|
|
const ids = dataList[groupIdx].list.map((item) => item.id); |
|
|
|
const ids = dataList[groupIdx].records.map((item) => item.id); |
|
|
|
if (R.intersection(selectedIds, ids).length === ids.length) { |
|
|
|
setSelectedIds(R.difference(selectedIds, ids)); |
|
|
|
} else { |
|
|
@ -34,16 +60,29 @@ export default function MeasurementList() { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const onUploadClick = () => { |
|
|
|
navigate("/measure/upload") |
|
|
|
const onUploadClick = async () => { |
|
|
|
const res = await Bridge.uploadRecords({ ids: selectedIds }); |
|
|
|
if (res.success) { |
|
|
|
navigate('/measure/upload'); |
|
|
|
} else { |
|
|
|
Toast.show(res.message); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const onDeleteClick = async () => { |
|
|
|
const res = await Bridge.deleteRecords({ ids: selectedIds }); |
|
|
|
if (res.success) { |
|
|
|
setSelectedIds([]); |
|
|
|
setEditMode(false); |
|
|
|
loadData(); |
|
|
|
} else { |
|
|
|
Toast.show(res.message); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
const right = ( |
|
|
|
<div |
|
|
|
className="flex justify-end gap-x-2" |
|
|
|
style={{ fontSize: 24 }} |
|
|
|
> |
|
|
|
<SearchOutline onClick={() => navigate("/measure/search")} /> |
|
|
|
<div className="flex justify-end gap-x-2" style={{ fontSize: 24 }}> |
|
|
|
<SearchOutline onClick={() => navigate('/measure/search')} /> |
|
|
|
<MoreOutline onClick={() => setEditMode(!editMode)} /> |
|
|
|
</div> |
|
|
|
); |
|
|
@ -61,8 +100,8 @@ export default function MeasurementList() { |
|
|
|
<MeasureGroups |
|
|
|
dataList={dataList} |
|
|
|
editMode={editMode} |
|
|
|
hasMore={false} |
|
|
|
loadMore={loadMoreRecords} |
|
|
|
hasMore={!noMore} |
|
|
|
loadMore={loadMoreData} |
|
|
|
onItemSelect={onItemSelect} |
|
|
|
onGroupSelect={onGroupSelect} |
|
|
|
selectedIds={selectedIds} |
|
|
@ -71,10 +110,18 @@ export default function MeasurementList() { |
|
|
|
className="fixed -bottom-12 w-full h-12 bg-white flex px-5 py-2 gap-x-4" |
|
|
|
style={{ bottom: editMode ? 0 : '-48px', transition: 'bottom 300ms' }} |
|
|
|
> |
|
|
|
<button disabled={selectedIds.length === 0} className="btn-contained rounded-md flex-1" onClick={onUploadClick}> |
|
|
|
<button |
|
|
|
disabled={selectedIds.length === 0} |
|
|
|
className="btn-contained rounded-md flex-1" |
|
|
|
onClick={onUploadClick} |
|
|
|
> |
|
|
|
上传 |
|
|
|
</button> |
|
|
|
<button disabled={selectedIds.length === 0} className="btn-contained rounded-md flex-1"> |
|
|
|
<button |
|
|
|
disabled={selectedIds.length === 0} |
|
|
|
className="btn-contained rounded-md flex-1" |
|
|
|
onClick={onDeleteClick} |
|
|
|
> |
|
|
|
删除 |
|
|
|
</button> |
|
|
|
</footer> |
|
|
|