|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <Calendar v-model="queryState.date"></Calendar> | 
|---|
|  |  |  | <Calendar key="calendar" v-model="queryState.date"></Calendar> | 
|---|
|  |  |  | <ProTabs | 
|---|
|  |  |  | v-model="queryState.checkReceiveStatus" | 
|---|
|  |  |  | name="task-tab" | 
|---|
|  |  |  | 
|---|
|  |  |  | ></ProTabPane> | 
|---|
|  |  |  | <ProTabPane :title="`已验收`" :pane-key="EnumTaskCheckReceiveStatus.Completed"></ProTabPane> | 
|---|
|  |  |  | </ProTabs> | 
|---|
|  |  |  | <InfiniteLoading | 
|---|
|  |  |  | scrollViewClassName="common-infinite-scroll-list" | 
|---|
|  |  |  | v-bind="infiniteLoadingProps" | 
|---|
|  |  |  | :key="queryState.checkReceiveStatus" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #renderItem="{ item }"> | 
|---|
|  |  |  | <MyTaskCard | 
|---|
|  |  |  | :name="item.name" | 
|---|
|  |  |  | :beginTime="item.beginTime" | 
|---|
|  |  |  | :endTime="item.endTime" | 
|---|
|  |  |  | :addressName="item.addressName" | 
|---|
|  |  |  | @click="goSubmitTaskDetail(item)" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </InfiniteLoading> | 
|---|
|  |  |  | <div class="task-list-container"> | 
|---|
|  |  |  | <InfiniteLoading | 
|---|
|  |  |  | scrollViewClassName="common-infinite-scroll-list" | 
|---|
|  |  |  | v-bind="infiniteLoadingProps" | 
|---|
|  |  |  | :key="queryState.checkReceiveStatus" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <template #renderItem="{ item }"> | 
|---|
|  |  |  | <MyTaskCard | 
|---|
|  |  |  | :name="item.name" | 
|---|
|  |  |  | :beginTime="item.beginTime" | 
|---|
|  |  |  | :endTime="item.endTime" | 
|---|
|  |  |  | :addressName="item.addressName" | 
|---|
|  |  |  | @click="goSubmitTaskDetail(item)" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | </InfiniteLoading> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { MyTaskCard, ProTabs, ProTabPane, Calendar } from '@12333/components'; | 
|---|
|  |  |  | import Taro from '@tarojs/taro'; | 
|---|
|  |  |  | import { EnumTaskCheckReceiveStatus } from '@12333/constants'; | 
|---|
|  |  |  | import { useInfiniteLoading, useTaskList } from '@12333/hooks'; | 
|---|
|  |  |  | import * as taskCheckReceiveServices from '@12333/services/apiV2/taskCheckReceive'; | 
|---|
|  |  |  | import { EnumTaskCheckReceiveStatus, EnumTaskCheckReceiveMethod } from '@12333/constants'; | 
|---|
|  |  |  | import { useCheckReceiveTasks } from '@12333/hooks'; | 
|---|
|  |  |  | import dayjs from 'dayjs'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | defineOptions({ | 
|---|
|  |  |  | name: 'InnerPage', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const queryState = reactive({ | 
|---|
|  |  |  | date: dayjs().toDate(), | 
|---|
|  |  |  | checkReceiveStatus: EnumTaskCheckReceiveStatus.WaitSubmit, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { infiniteLoadingProps } = useInfiniteLoading( | 
|---|
|  |  |  | ({ pageParam }) => { | 
|---|
|  |  |  | let params: API.GetCheckReceiveTasksQuery = { | 
|---|
|  |  |  | pageModel: { | 
|---|
|  |  |  | rows: 20, | 
|---|
|  |  |  | page: pageParam, | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | date: dayjs(queryState.date).format('YYYY-MM-DD'), | 
|---|
|  |  |  | checkReceiveStatus: queryState.checkReceiveStatus, | 
|---|
|  |  |  | }; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | return taskCheckReceiveServices.getCheckReceiveTasks(params, { | 
|---|
|  |  |  | showLoading: false, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | { | 
|---|
|  |  |  | queryKey: ['taskCheckReceiveServices/getCheckReceiveTasks', queryState], | 
|---|
|  |  |  | } | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | const { queryState, infiniteLoadingProps } = useCheckReceiveTasks(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function goSubmitTaskDetail(item: API.GetCheckReceiveTasksQueryResultItem) { | 
|---|
|  |  |  | Taro.navigateTo({ | 
|---|
|  |  |  | url: `${RouterPath.taskCheckDetail}?taskId=${item.id}`, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | if ( | 
|---|
|  |  |  | item.checkReceiveMethod === EnumTaskCheckReceiveMethod.CheckIn && | 
|---|
|  |  |  | dayjs(queryState.date).isBefore(dayjs(), 'day') | 
|---|
|  |  |  | ) { | 
|---|
|  |  |  | Taro.navigateTo({ | 
|---|
|  |  |  | url: `${RouterPath.taskUserSubmitCheckHistories}?id=${item.id}&date=${dayjs( | 
|---|
|  |  |  | queryState.date | 
|---|
|  |  |  | ).format('YYYY-MM-DD')}`, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } else { | 
|---|
|  |  |  | Taro.navigateTo({ | 
|---|
|  |  |  | url: `${RouterPath.taskCheckDetail}?id=${item.id}&date=${dayjs(queryState.date).format( | 
|---|
|  |  |  | 'YYYY-MM-DD' | 
|---|
|  |  |  | )}&checkReceiveStatus=${queryState.checkReceiveStatus}`, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style lang="scss"> | 
|---|
|  |  |  | @import '@/styles/common.scss'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .taskCheck-page-wrapper { | 
|---|
|  |  |  | .task-list-container { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | min-height: 0; | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|