<template> 
 | 
  <ProTabs 
 | 
    v-model="queryState.userSignContractStatus" 
 | 
    name="home-tab" 
 | 
    :showPaneContent="false" 
 | 
    class="home-tabs" 
 | 
    isTransparent 
 | 
    title-gutter="12" 
 | 
    title-scroll 
 | 
  > 
 | 
    <ProTabPane :title="`已签约`" :pane-key="EnumTaskUserSignContractStatus.Pass"></ProTabPane> 
 | 
    <ProTabPane :title="`待签约`" :pane-key="EnumTaskUserSignContractStatus.Wait"></ProTabPane> 
 | 
    <ProTabPane :title="`已解约`" :pane-key="EnumTaskUserSignContractStatus.Stop"></ProTabPane> 
 | 
  </ProTabs> 
 | 
  <InfiniteLoading 
 | 
    scrollViewClassName="common-infinite-scroll-list home-list" 
 | 
    v-bind="infiniteLoadingProps" 
 | 
    :key="queryState.userSignContractStatus" 
 | 
  > 
 | 
    <template #renderItem="{ item }"> 
 | 
      <FlexJobCard 
 | 
        :show-done-detail="false" 
 | 
        :show-footer-left="false" 
 | 
        :name="item.name" 
 | 
        :gender="item.gender" 
 | 
        :age="item.age" 
 | 
        :isReal="item.userIsReal" 
 | 
        :personalIdentityContent="item.personalIdentityContent" 
 | 
        :educationalBackgroundContent="item.educationalBackgroundContent" 
 | 
        :taskCount="item.taskCount" 
 | 
        :avatar="item.avatar" 
 | 
        :workExperience="item.workExperience" 
 | 
        :workSeniority="item.workSeniority" 
 | 
        @click="goDetail(item)" 
 | 
      > 
 | 
        <template #footerRight> 
 | 
          <template 
 | 
            v-if="Number(queryState.userSignContractStatus) === EnumTaskUserSignContractStatus.Pass" 
 | 
          > 
 | 
            <nut-button 
 | 
              class="flexJobManage-card-plain-button" 
 | 
              type="default" 
 | 
              plain 
 | 
              @click.stop="handleUnsign(item)" 
 | 
              >解约</nut-button 
 | 
            > 
 | 
            <nut-button type="primary" @click.stop="checkContract(item)">查看合约</nut-button> 
 | 
          </template> 
 | 
          <nut-button 
 | 
            v-else-if=" 
 | 
              Number(queryState.userSignContractStatus) === EnumTaskUserSignContractStatus.Wait || 
 | 
              Number(queryState.userSignContractStatus) === EnumTaskUserSignContractStatus.Stop 
 | 
            " 
 | 
            type="primary" 
 | 
            @click.stop="goFlexJobSign(item)" 
 | 
            >签约</nut-button 
 | 
          > 
 | 
        </template> 
 | 
      </FlexJobCard> 
 | 
    </template> 
 | 
  </InfiniteLoading> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { FlexJobCard, ProTabs, ProTabPane } from '@12333/components'; 
 | 
import { RouterPath } from '@/constants'; 
 | 
import { useInfiniteLoading } from '@12333/hooks'; 
 | 
import { 
 | 
  EnumTaskUserHireStatus, 
 | 
  EnumTaskUserSignContractStatus, 
 | 
  EnumPagedListOrder, 
 | 
} from '@12333/constants'; 
 | 
import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import { Message, openDocument, setOSSLink } from '@12333/utils'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const queryState = reactive({ 
 | 
  userSignContractStatus: EnumTaskUserSignContractStatus.Pass, 
 | 
}); 
 | 
  
 | 
const { infiniteLoadingProps, invalidateQueries } = useInfiniteLoading( 
 | 
  ({ pageParam }) => { 
 | 
    let params: API.GetEnterpriseEmployeesQuery = { 
 | 
      pageModel: { 
 | 
        rows: 20, 
 | 
        page: pageParam, 
 | 
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], 
 | 
      }, 
 | 
      hireStatus: EnumTaskUserHireStatus.Pass, 
 | 
      userSignContractStatus: queryState.userSignContractStatus, 
 | 
    }; 
 | 
  
 | 
    return enterpriseEmployeeServices.getEnterpriseEmployees(params, { 
 | 
      showLoading: false, 
 | 
    }); 
 | 
  }, 
 | 
  { 
 | 
    queryKey: ['enterpriseEmployeeServices/getEnterpriseEmployees', queryState], 
 | 
  } 
 | 
); 
 | 
  
 | 
function checkContract(item: API.GetEnterpriseEmployeesQueryResultItem) { 
 | 
  if (!item.contractUrl) { 
 | 
    Message.warning('协议无法查看,请稍后再试'); 
 | 
    return; 
 | 
  } 
 | 
  openDocument(setOSSLink(item.contractUrl)); 
 | 
} 
 | 
  
 | 
function goDetail(item: API.GetEnterpriseEmployeesQueryResultItem) { 
 | 
  Taro.navigateTo({ 
 | 
    url: `${RouterPath.flexJobDetailFromManage}?enterpriseEmployeeId=${item.id}`, 
 | 
  }); 
 | 
} 
 | 
  
 | 
async function handleUnsign(item: API.GetEnterpriseEmployeesQueryResultItem) { 
 | 
  try { 
 | 
    await Message.confirm({ message: '确定要解约吗?' }); 
 | 
    let params: API.StopElectronSignCommand = { 
 | 
      ids: [item.id], 
 | 
    }; 
 | 
    let res = await enterpriseEmployeeServices.stopElectronSign(params); 
 | 
    if (res) { 
 | 
      Message.success('解约成功'); 
 | 
      invalidateQueries(); 
 | 
    } 
 | 
  } catch (error) {} 
 | 
} 
 | 
function goFlexJobSign(item: API.GetEnterpriseEmployeesQueryResultItem) { 
 | 
  Taro.navigateTo({ 
 | 
    url: `${RouterPath.flexJobSign}?enterpriseEmployeeId=${item.id}`, 
 | 
  }); 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.flexJobManage-page-wrapper { 
 | 
  .flexJobManage-card-plain-button { 
 | 
    margin-right: 30px; 
 | 
  
 | 
    &.nut-button--plain { 
 | 
      border-width: 1px; 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</style> 
 |