| <template> | 
|   <div class="searchbar-container" v-if="showQueryState"> | 
|     <BlSearchbar | 
|       v-model.trim="searchValue" | 
|       placeholder="搜索姓名/身份证号" | 
|       @search="handleSearch" | 
|       @change="handleSearch" | 
|     ></BlSearchbar> | 
|   </div> | 
|   <InfiniteLoading scrollViewClassName="common-infinite-scroll-list" v-bind="infiniteLoadingProps"> | 
|     <template #renderItem="{ item }"> | 
|       <FlexJobCard | 
|         :name="item.name" | 
|         :gender="item.gender" | 
|         :age="item.age" | 
|         :avatar="item.avatar" | 
|         :isReal="item.isReal" | 
|         :educationalBackgroundContent="item.educationalBackgroundContent" | 
|         :personalIdentityContent="item.personalIdentityContent" | 
|         :workExperience="item.workExperience" | 
|         :workSeniority="item.workSeniority" | 
|         :taskCount="item.taskCount" | 
|         :showFooterLeft="false" | 
|       > | 
|         <template #footerRight> | 
|           <nut-button v-if="showQueryState" type="primary" @click.stop="handleArrange(item)" | 
|             >安排</nut-button | 
|           > | 
|           <div v-else class="batch-task-card-status">已安排</div> | 
|         </template> | 
|       </FlexJobCard> | 
|     </template> | 
|   </InfiniteLoading> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import Taro from '@tarojs/taro'; | 
| import { useInfiniteLoading } from '@12333/hooks'; | 
| import { EnumTaskUserArrangeStatus, EnumPagedListOrder } from '@12333/constants'; | 
| import * as taskUserServices from '@12333/services/apiV2/taskUser'; | 
| import _ from 'lodash'; | 
| import { Message, trim } from '@12333/utils'; | 
| import { FlexJobCard } from '@12333/components'; | 
|   | 
| defineOptions({ | 
|   name: 'InnerPage', | 
| }); | 
|   | 
| const searchValue = ref(''); | 
| const router = Taro.useRouter(); | 
| const id = router.params?.id ?? ''; | 
| const status = Number(router.params?.status); | 
| const queryState = reactive({ | 
|   keywords: '', | 
| }); | 
|   | 
| const showQueryState = computed(() => { | 
|   return status === EnumTaskUserArrangeStatus.Wait; | 
| }); | 
|   | 
| const handleSearch = _.debounce(function () { | 
|   queryState.keywords = trim(searchValue.value); | 
| }, 300); | 
|   | 
| const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading( | 
|   ({ pageParam }) => { | 
|     let params: API.GetArrangeTaskUsersQuery = { | 
|       keywords: queryState.keywords, | 
|       arrangeStatus: status, | 
|       id: id, | 
|       pageModel: { | 
|         rows: 20, | 
|         page: pageParam, | 
|         orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], | 
|       }, | 
|     }; | 
|   | 
|     return taskUserServices.getArrangeTaskUsers(params, { | 
|       showLoading: false, | 
|     }); | 
|   }, | 
|   { | 
|     queryKey: ['taskUserServices/getArrangeTaskUsers', queryState], | 
|   } | 
| ); | 
|   | 
| async function handleArrange(item: API.GetArrangeTaskUsersQueryResultItem) { | 
|   try { | 
|     let params: API.SetTaskUserArrangeCommand = { | 
|       enterpriseEmployeeId: item.id, | 
|       taskInfoId: id, | 
|       arrangeStatus: EnumTaskUserArrangeStatus.Complete, | 
|     }; | 
|     let res = await taskUserServices.setTaskUserArrange(params); | 
|     if (res) { | 
|       Message.success('已安排'); | 
|       invalidateQueries(); | 
|     } | 
|   } catch (error) {} | 
| } | 
| </script> | 
|   | 
| <style lang="scss"> | 
| @import '@/styles/common.scss'; | 
|   | 
| .searchbar-container { | 
|   padding: boleGetCssVar('size', 'body-padding-h'); | 
|   padding-top: 0; | 
| } | 
|   | 
| .batchTaskList-page-wrapper { | 
|   .batch-task-card-status { | 
|     line-height: 52px; | 
|     color: boleGetCssVar('text-color', 'primary'); | 
|     font-size: 24px; | 
|   } | 
| } | 
| </style> |