<template> 
 | 
  <ProDialog title="申请详情" v-model="visible" width="1200px" destroy-on-close> 
 | 
    <ProTabs v-model="form.tabType" hasBorder> 
 | 
      <ProTabPane lazy label="人员详情" name="user"> 
 | 
        <ProForm :model="form" ref="dialogForm" label-width="120px" is-read> 
 | 
          <ProFormItemV2 label="姓名:" prop="name"> 
 | 
            <ProFormText v-model.trim="form.name" /> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="身份证号:" prop="identity"> 
 | 
            <ProFormText v-model.trim="form.identity" /> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="手机号:" prop="contactPhoneNumber"> 
 | 
            <ProFormText v-model.trim="form.contactPhoneNumber" /> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="性别:" prop="gender"> 
 | 
            <ProFormRadio 
 | 
              v-model="form.gender" 
 | 
              :value-enum="EnumUserGenderTextForPerson" 
 | 
            ></ProFormRadio> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="年龄:" prop="age"> 
 | 
            <ProFormInputNumber v-model="form.age" unit="岁"></ProFormInputNumber> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="身份证正面:" prop="identityImg"> 
 | 
            <ProFormImageUpload v-model:file-url="form.identityImg" /> 
 | 
          </ProFormItemV2> 
 | 
          <ProFormItemV2 label="身份证反面:" prop="identityBackImg"> 
 | 
            <ProFormImageUpload v-model:file-url="form.identityBackImg" /> 
 | 
          </ProFormItemV2> 
 | 
        </ProForm> 
 | 
      </ProTabPane> 
 | 
      <ProTabPane lazy label="签约详情" name="sign"> 
 | 
        <ProDialogTableWrapper :height="400"> 
 | 
          <ProTableV2 v-bind="proTableProps" :columns="column" :show-operation-column="false"> 
 | 
            <template #contractUrl="{ row }"> 
 | 
              <PreviewBtn 
 | 
                v-if=" 
 | 
                  row.userSignContractStatus === EnumTaskUserSignContractStatus.Pass && 
 | 
                  row.contractUrl 
 | 
                " 
 | 
                :show-download-btn="false" 
 | 
                :url="setOSSLink(row.contractUrl)" 
 | 
              > 
 | 
              </PreviewBtn> 
 | 
            </template> 
 | 
          </ProTableV2> 
 | 
        </ProDialogTableWrapper> 
 | 
      </ProTabPane> 
 | 
    </ProTabs> 
 | 
    <template #footer> 
 | 
      <span class="dialog-footer"> 
 | 
        <el-button @click="emit('onCancel')">关闭</el-button> 
 | 
      </span> 
 | 
    </template> 
 | 
  </ProDialog> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { 
 | 
  ProDialog, 
 | 
  ProTableV2, 
 | 
  ProDialogTableWrapper, 
 | 
  ProTabs, 
 | 
  ProTabPane, 
 | 
  useTable, 
 | 
  ProForm, 
 | 
  ProFormItemV2, 
 | 
  ProFormText, 
 | 
  UploadUserFile, 
 | 
  ProFormImageUpload, 
 | 
  ProFormRadio, 
 | 
  ProFormInputNumber, 
 | 
  defineColumns, 
 | 
  PreviewBtn, 
 | 
} from '@bole-core/components'; 
 | 
import _ from 'lodash'; 
 | 
import * as userServices from '@/services/api/user'; 
 | 
import { 
 | 
  EnumUserGender, 
 | 
  EnumUserGenderTextForPerson, 
 | 
  EnumTaskUserHireStatusText, 
 | 
  EnumTaskUserSignContractStatusText, 
 | 
  EnumTaskUserSignContractStatus, 
 | 
} from '@/constants'; 
 | 
import { setOSSLink } from '@/utils'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'CPersonDetailDialog', 
 | 
}); 
 | 
  
 | 
type Form = { 
 | 
  tabType: string; 
 | 
  id: string; 
 | 
  name: string; 
 | 
  identity: string; 
 | 
  contactPhoneNumber: string; 
 | 
  age: number; 
 | 
  gender: EnumUserGender; 
 | 
  identityImg: UploadUserFile[]; 
 | 
  identityBackImg: UploadUserFile[]; 
 | 
}; 
 | 
  
 | 
const form = defineModel<Form>('form'); 
 | 
const visible = defineModel<boolean>('modelValue'); 
 | 
  
 | 
const emit = defineEmits<{ 
 | 
  (e: 'onCancel'): void; 
 | 
}>(); 
 | 
  
 | 
const column = defineColumns([ 
 | 
  { 
 | 
    id: '1', 
 | 
    enCode: 'enterpriseName', 
 | 
    name: '所属客户', 
 | 
  }, 
 | 
  { 
 | 
    id: '2', 
 | 
    enCode: 'applyTime', 
 | 
    name: '报名时间', 
 | 
  }, 
 | 
  { 
 | 
    id: '3', 
 | 
    enCode: 'hireStatus', 
 | 
    name: '录用状态', 
 | 
  }, 
 | 
  { 
 | 
    id: '4', 
 | 
    enCode: 'hireTime', 
 | 
    name: '录用时间', 
 | 
  }, 
 | 
  { 
 | 
    id: '5', 
 | 
    enCode: 'userSignContractStatus', 
 | 
    name: '签约状态', 
 | 
  }, 
 | 
  { 
 | 
    id: '6', 
 | 
    enCode: 'enterpriseSignContractStatus', 
 | 
    name: '企业签约状态', 
 | 
  }, 
 | 
  { 
 | 
    id: '7', 
 | 
    enCode: 'enterpriseSignContractTime', 
 | 
    name: '企业签约时间', 
 | 
  }, 
 | 
  { 
 | 
    id: '8', 
 | 
    enCode: 'contractUrl', 
 | 
    name: '电子合同', 
 | 
  }, 
 | 
]); 
 | 
  
 | 
watch( 
 | 
  visible, 
 | 
  (val) => { 
 | 
    console.log('val: ', val); 
 | 
    if (val) { 
 | 
      getList(); 
 | 
    } 
 | 
  }, 
 | 
  { 
 | 
    immediate: true, 
 | 
  } 
 | 
); 
 | 
  
 | 
const { 
 | 
  getDataSource: getList, 
 | 
  proTableProps, 
 | 
  paginationState, 
 | 
  extraParamState, 
 | 
} = useTable( 
 | 
  async ({ pageIndex, pageSize }, extraParamState) => { 
 | 
    try { 
 | 
      let params: API.GetPersonalUserInfoSignContractsQuery = { 
 | 
        pageModel: { 
 | 
          rows: pageSize, 
 | 
          page: pageIndex, 
 | 
          orderInput: extraParamState.orderInput, 
 | 
        }, 
 | 
        id: form.value.id, 
 | 
      }; 
 | 
      let res = await userServices.getPersonalUserInfoSignContracts(params); 
 | 
      return res; 
 | 
    } catch (error) {} 
 | 
  }, 
 | 
  { 
 | 
    defaultExtraParams: { 
 | 
      orderInput: [{ property: 'id', order: EnumPagedListOrder.Desc }], 
 | 
    }, 
 | 
    columnsRenderProps: { 
 | 
      applyTime: { type: 'date' }, 
 | 
      hireTime: { type: 'date' }, 
 | 
      enterpriseSignContractTime: { type: 'date' }, 
 | 
      hireStatus: { type: 'enum', valueEnum: EnumTaskUserHireStatusText }, 
 | 
      userSignContractStatus: { type: 'enum', valueEnum: EnumTaskUserSignContractStatusText }, 
 | 
      enterpriseSignContractStatus: { type: 'enum', valueEnum: EnumTaskUserSignContractStatusText }, 
 | 
      // contractUrl: { 
 | 
      //   type: 'url', 
 | 
      //   showDownloadBtn: false, 
 | 
      //   formatter: (row: API.GetPersonalUserInfoSignContractsQueryResultItem) => 
 | 
      //     setOSSLink(row.contractUrl), 
 | 
      // }, 
 | 
    }, 
 | 
  } 
 | 
); 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
@use '@/style/common.scss' as *; 
 | 
</style> 
 |