<template> 
 | 
  <div class="searchbar-container"> 
 | 
    <BlSearchbar 
 | 
      v-model.trim="searchValue" 
 | 
      placeholder="搜索合同名/编号" 
 | 
      @search="handleSearch" 
 | 
      @change="handleSearch" 
 | 
    ></BlSearchbar> 
 | 
    <ChunkTitle title="合同列表" /> 
 | 
  </div> 
 | 
  
 | 
  <InfiniteLoading 
 | 
    scrollViewClassName="common-infinite-scroll-list flexJobSign-list" 
 | 
    v-bind="infiniteLoadingProps" 
 | 
  > 
 | 
    <template #renderItem="{ item }"> 
 | 
      <SignCard 
 | 
        :templateId="item.templateId" 
 | 
        :name="item.name" 
 | 
        @click="handleCheck(item)" 
 | 
        v-model:checked-id="checkedId" 
 | 
        :id="item.id" 
 | 
      ></SignCard> 
 | 
    </template> 
 | 
  </InfiniteLoading> 
 | 
  
 | 
  <PageFooter> 
 | 
    <PageFooterBtn type="primary" @click="handleInvite">邀请签约</PageFooterBtn> 
 | 
  </PageFooter> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { useInfiniteLoading } from '@12333/hooks'; 
 | 
import { EnumContractTemplateStatus, EnumPagedListOrder } from '@12333/constants'; 
 | 
import * as electronSignServices from '@12333/services/apiV2/electronSign'; 
 | 
import * as enterpriseEmployeeServices from '@12333/services/apiV2/enterpriseEmployee'; 
 | 
import _ from 'lodash'; 
 | 
import { Message, trim } from '@12333/utils'; 
 | 
import { SignCard } from '@12333/components'; 
 | 
import Taro from '@tarojs/taro'; 
 | 
import { goBack } from '@/utils'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'InnerPage', 
 | 
}); 
 | 
  
 | 
const router = Taro.useRouter(); 
 | 
const enterpriseEmployeeId = router.params?.enterpriseEmployeeId ?? ''; 
 | 
  
 | 
const searchValue = ref(''); 
 | 
const queryState = reactive({ 
 | 
  keywords: '', 
 | 
}); 
 | 
  
 | 
const checkedId = ref(''); 
 | 
  
 | 
const handleSearch = _.debounce(function () { 
 | 
  queryState.keywords = trim(searchValue.value); 
 | 
}, 300); 
 | 
  
 | 
const { infiniteLoadingProps } = useInfiniteLoading( 
 | 
  ({ pageParam }) => { 
 | 
    let params: API.GetEnterpriseContractTemplatesQuery = { 
 | 
      pageModel: { 
 | 
        rows: 20, 
 | 
        page: pageParam, 
 | 
        orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], 
 | 
      }, 
 | 
      keywords: queryState.keywords, 
 | 
      status: EnumContractTemplateStatus.Completed, 
 | 
    }; 
 | 
  
 | 
    return electronSignServices.getEnterpriseContractTemplates(params, { 
 | 
      showLoading: false, 
 | 
    }); 
 | 
  }, 
 | 
  { 
 | 
    queryKey: ['electronSignServices/getEnterpriseContractTemplates', queryState], 
 | 
  } 
 | 
); 
 | 
  
 | 
function handleCheck(item: API.GetEnterpriseContractTemplatesQueryResultItem) { 
 | 
  checkedId.value = item.id; 
 | 
} 
 | 
  
 | 
async function handleInvite() { 
 | 
  try { 
 | 
    let params: API.InviteElectronSignCommand = { 
 | 
      ids: [enterpriseEmployeeId], 
 | 
      contractTemplateId: checkedId.value, 
 | 
    }; 
 | 
    let res = await enterpriseEmployeeServices.inviteElectronSign(params); 
 | 
    if (res) { 
 | 
      Message.success('签约成功', { 
 | 
        onClosed() { 
 | 
          goBack(); 
 | 
        }, 
 | 
      }); 
 | 
    } 
 | 
  } catch (error) {} 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.flexJobSign-page-wrapper { 
 | 
  .searchbar-container { 
 | 
    padding: 30px 60px; 
 | 
  } 
 | 
  
 | 
  .chunk-title-wrapper { 
 | 
    padding: 30px 10px 0; 
 | 
  } 
 | 
  
 | 
  .flexJobSign-list { 
 | 
    .infinite-list-inner { 
 | 
      background-color: #ffffff; 
 | 
      padding: 0 30px; 
 | 
      border-radius: 12px; 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</style> 
 |