<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 = { 
 | 
      id: item.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> 
 |