|  |  | 
 |  |  | <template> | 
 |  |  |   <ProTabs | 
 |  |  |     v-model="queryState.flexTaskReleaseStatus" | 
 |  |  |     v-model="queryMenuState.releaseStatus" | 
 |  |  |     name="home-tab" | 
 |  |  |     :showPaneContent="false" | 
 |  |  |     class="home-tabs" | 
 |  |  |     isTransparent | 
 |  |  |     title-gutter="12" | 
 |  |  |     title-scroll | 
 |  |  |     @change="invalidateQueries" | 
 |  |  |   > | 
 |  |  |     <ProTabPane | 
 |  |  |       :title="`${ | 
 |  |  |         FlexTaskReleaseStatusEnumText[FlexTaskReleaseStatusEnum.Releasing] | 
 |  |  |       }(${releaseing})`" | 
 |  |  |       :pane-key="FlexTaskReleaseStatusEnum.Releasing" | 
 |  |  |       :title="`发布中(${releaseing})`" | 
 |  |  |       :pane-key="EnumTaskReleaseStatus.InProcess" | 
 |  |  |     ></ProTabPane> | 
 |  |  |     <ProTabPane | 
 |  |  |       :title="`${FlexTaskReleaseStatusEnumText[FlexTaskReleaseStatusEnum.Stoping]}(${stoping})`" | 
 |  |  |       :pane-key="FlexTaskReleaseStatusEnum.Stoping" | 
 |  |  |       :title="`已停止(${stoping})`" | 
 |  |  |       :pane-key="EnumTaskReleaseStatus.Stopped" | 
 |  |  |     ></ProTabPane> | 
 |  |  |   </ProTabs> | 
 |  |  |   <InfiniteLoading | 
 |  |  |     scrollViewClassName="common-infinite-scroll-list home-list" | 
 |  |  |     v-bind="infiniteLoadingProps" | 
 |  |  |     :key="queryState.flexTaskReleaseStatus" | 
 |  |  |     :key="queryMenuState.releaseStatus" | 
 |  |  |   > | 
 |  |  |     <template #renderItem="{ item }"> | 
 |  |  |       <JobApplicationCard | 
 |  |  |         :taskName="item.taskName" | 
 |  |  |         :startDate="item.startDate" | 
 |  |  |         :endDate="item.endDate" | 
 |  |  |         :creationTime="item.creationTime" | 
 |  |  |         :address="item.address" | 
 |  |  |         :fee="item.fee" | 
 |  |  |         :applyWorkerCount="item.applyWorkerCount" | 
 |  |  |         :unit="SalaryTimeTypeEnumUnit[item.feeType]" | 
 |  |  |         :name="item.name" | 
 |  |  |         :beginTime="item.beginTime" | 
 |  |  |         :endTime="item.endTime" | 
 |  |  |         :createdTime="item.createdTime" | 
 |  |  |         :addressName="item.addressName" | 
 |  |  |         :serviceFee="item.serviceFee" | 
 |  |  |         :userCount="item.userCount" | 
 |  |  |         :status="item.status" | 
 |  |  |         :unit="BillingMethodEnumUnit[item.billingMethod]" | 
 |  |  |         :releaseStatus="item.releaseStatus" | 
 |  |  |         @edit="goEdit(item)" | 
 |  |  |         @copy="goEdit(item, true)" | 
 |  |  |         @detail="goDetail(item)" | 
 |  |  |         @publish="handleChangeStatus(item, FlexTaskReleaseStatusEnum.Releasing)" | 
 |  |  |         @stop="handleChangeStatus(item, FlexTaskReleaseStatusEnum.Stoping)" | 
 |  |  |         @click="goDetail(item)" | 
 |  |  |         @publish="handleChangeStatus(item, EnumTaskReleaseStatus.InProcess)" | 
 |  |  |         @stop="handleChangeStatus(item, EnumTaskReleaseStatus.Stopped)" | 
 |  |  |         @delete="handleDelete(item)" | 
 |  |  |       > | 
 |  |  |       </JobApplicationCard> | 
 |  |  | 
 |  |  | <script setup lang="ts"> | 
 |  |  | import { JobApplicationCard, ProTabs, ProTabPane } from '@12333/components'; | 
 |  |  | import { RouterPath } from '@/constants'; | 
 |  |  | import { useInfiniteLoading } from '@12333/hooks'; | 
 |  |  | import { OrderInputType } from '@12333/constants'; | 
 |  |  | import { | 
 |  |  |   FlexTaskReleaseStatusEnum, | 
 |  |  |   FlexTaskReleaseStatusEnumText, | 
 |  |  |   SalaryTimeTypeEnumUnit, | 
 |  |  | } from '@/constants/task'; | 
 |  |  | import * as flexWorkerServices from '@12333/services/api/FlexWorker'; | 
 |  |  | import { EnumTaskReleaseStatus, BillingMethodEnumUnit } from '@12333/constants'; | 
 |  |  | import Taro from '@tarojs/taro'; | 
 |  |  | import { Message } from '@12333/utils'; | 
 |  |  | import * as taskServices from '@12333/services/apiV2/task'; | 
 |  |  | import { useTaskList } from '@12333/hooks'; | 
 |  |  |  | 
 |  |  | defineOptions({ | 
 |  |  |   name: 'InnerPage', | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const queryState = reactive({ | 
 |  |  |   flexTaskReleaseStatus: FlexTaskReleaseStatusEnum.Releasing, | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading( | 
 |  |  |   ({ pageParam }) => { | 
 |  |  |     let params: API.GetFlexTaskListByStatusInput = { | 
 |  |  |       releaseStatus: queryState.flexTaskReleaseStatus, | 
 |  |  |       pageModel: { | 
 |  |  |         rows: 20, | 
 |  |  |         page: pageParam, | 
 |  |  |         orderInput: [{ property: 'creationTime', order: OrderInputType.Desc }], | 
 |  |  |       }, | 
 |  |  |     }; | 
 |  |  |  | 
 |  |  |     return flexWorkerServices.getFlexTaskList(params, { | 
 |  |  |       showLoading: false, | 
 |  |  |     }); | 
 |  |  | const { queryMenuState, infiniteLoadingProps, invalidateQueries } = useTaskList({ | 
 |  |  |   defaultQueryMenuState: { | 
 |  |  |     releaseStatus: EnumTaskReleaseStatus.InProcess, | 
 |  |  |   }, | 
 |  |  |   { | 
 |  |  |     queryKey: ['flexWorkerServices/getFlexTaskList'], | 
 |  |  |   } | 
 |  |  | ); | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | const releaseing = computed(() => { | 
 |  |  |   return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.releaseing ?? 0; | 
 |  |  |   return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.inProcessReleaseCount ?? 0; | 
 |  |  | }); | 
 |  |  | const stoping = computed(() => { | 
 |  |  |   return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.stoping ?? 0; | 
 |  |  |   return infiniteLoadingProps.value?.listData?.pages?.[0]?.objectData?.stoppedReleaseCount ?? 0; | 
 |  |  | }); | 
 |  |  |  | 
 |  |  | async function handleChangeStatus( | 
 |  |  |   item: API.GetFlexTaskListOutput, | 
 |  |  |   releaseStatus: FlexTaskReleaseStatusEnum | 
 |  |  |   item: API.GetTaskInfosQueryResultItem, | 
 |  |  |   releaseStatus: EnumTaskReleaseStatus | 
 |  |  | ) { | 
 |  |  |   try { | 
 |  |  |     let params: API.UpdateTaskReleaseStatusInput = { | 
 |  |  |       taskId: item.taskId, | 
 |  |  |     let params: API.SetTaskInfoReleaseStatusCommand = { | 
 |  |  |       ids: [item.id], | 
 |  |  |       releaseStatus: releaseStatus, | 
 |  |  |     }; | 
 |  |  |     let res = await flexWorkerServices.updateFlexTaskReleaseStatus(params); | 
 |  |  |     let res = await taskServices.setTaskInfoReleaseStatus(params); | 
 |  |  |     if (res) { | 
 |  |  |       Message.success('操作成功'); | 
 |  |  |       invalidateQueries(); | 
 |  |  | 
 |  |  |   } catch (error) {} | 
 |  |  | } | 
 |  |  |  | 
 |  |  | async function handleDelete(item: API.GetFlexTaskListOutput) { | 
 |  |  | async function handleDelete(item: API.GetTaskInfosQueryResultItem) { | 
 |  |  |   try { | 
 |  |  |     await Message.confirm({ | 
 |  |  |       message: '确定要删除吗?', | 
 |  |  |     }); | 
 |  |  |     let params: API.APIdeleteFlexTaskParams = { | 
 |  |  |       id: item.taskId, | 
 |  |  |     let params: API.DeleteTaskInfoCommand = { | 
 |  |  |       ids: [item.id], | 
 |  |  |     }; | 
 |  |  |     let res = await flexWorkerServices.deleteFlexTask(params); | 
 |  |  |     let res = await taskServices.deleteTaskInfo(params); | 
 |  |  |     if (res) { | 
 |  |  |       Message.success('删除成功'); | 
 |  |  |       invalidateQueries(); | 
 |  |  | 
 |  |  |   } catch (error) {} | 
 |  |  | } | 
 |  |  |  | 
 |  |  | function goEdit(item: API.GetFlexTaskListOutput, isCopy = false) { | 
 |  |  | function goEdit(item: API.GetTaskInfosQueryResultItem, isCopy = false) { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.publishTask}?taskId=${item.taskId}&isCopy=${isCopy}`, | 
 |  |  |     url: `${RouterPath.publishTask}?id=${item.id}&isCopy=${isCopy}`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | function goDetail(item: API.GetFlexTaskListOutput) { | 
 |  |  | function goDetail(item: API.GetTaskInfosQueryResultItem) { | 
 |  |  |   Taro.navigateTo({ | 
 |  |  |     url: `${RouterPath.jobApplicationDetail}?taskId=${item.taskId}`, | 
 |  |  |     url: `${RouterPath.jobApplicationDetail}?id=${item.id}`, | 
 |  |  |   }); | 
 |  |  | } | 
 |  |  | </script> |