| <template> | 
|   <LoadingLayout :loading="isLoading"> | 
|     <AppContainer> | 
|       <ProTableV2 | 
|         :columns="InsurePayDetailColumns" | 
|         :operationBtns="operationBtns" | 
|         :showPagination="false" | 
|         :tableData="insurancePolicyPayList" | 
|         :columnRenderMap="InsurancePolicyPayRenderProps" | 
|       > | 
|       </ProTableV2> | 
|     </AppContainer> | 
|   </LoadingLayout> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { | 
|   OperationBtnType, | 
|   ProTableV2, | 
|   LoadingLayout, | 
|   AppContainer, | 
|   useTable, | 
|   ProTableV2Props, | 
|   defineOperationBtns, | 
| } from '@bole-core/components'; | 
| import { useAccess, useInsurancePolicyPay } from '@/hooks'; | 
| import * as insuranceOrderServices from '@/services/api/InsuranceOrder'; | 
| import { InsurancePolicyPayStatusEnumText, InsurancePolicyPayStatusEnum } from '@/constants'; | 
| import { useQuery } from '@tanstack/vue-query'; | 
| import { InsurePayDetailColumns } from './constants'; | 
|   | 
| defineOptions({ | 
|   name: 'InsurePayDetail', | 
| }); | 
|   | 
| const operationBtns = defineOperationBtns([ | 
|   { | 
|     data: { | 
|       enCode: 'payBtn', | 
|       name: '支付', | 
|     }, | 
|     emits: { onClick: (role) => handlePay(role) }, | 
|     extraProps: { | 
|       hide: (row: API.InsurancePolicyPayDto) => row.status !== InsurancePolicyPayStatusEnum.WaitPay, | 
|     }, | 
|   }, | 
| ]); | 
|   | 
| const route = useRoute(); | 
| const id = route.params.id as string; | 
|   | 
| const { insurancePolicyPayList, isLoading } = useInsurancePolicyPay({ id: id }); | 
|   | 
| const InsurancePolicyPayRenderProps: ProTableV2Props['columnRenderMap'] = { | 
|   sumSignPremium: { type: 'money' }, | 
|   status: { type: 'enum', valueEnum: InsurancePolicyPayStatusEnumText }, | 
| }; | 
|   | 
| function handlePay(row: API.InsurancePolicyPayDto) { | 
|   window.open(row.payUrl, '_blank'); | 
| } | 
| </script> |