| <template> | 
|   <ProDialog | 
|     title="钱包充值" | 
|     v-model="visible" | 
|     @close="onDialogClose" | 
|     destroy-on-close | 
|     draggable | 
|     :width="700" | 
|   > | 
|     <ProForm :model="form" ref="dialogForm" label-width="120px"> | 
|       <ProFormItemV2 label="钱包通道:" prop="access" :check-rules="[{ message: '请选择钱包通道' }]"> | 
|         <ProFormSelect | 
|           v-model="form.access" | 
|           :valueEnum="EnumEnterpriseWalletAccessTextOnlyAlipay" | 
|           placeholder="请选择钱包通道" | 
|         > | 
|         </ProFormSelect> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 | 
|         label="充值金额:" | 
|         prop="amount" | 
|         :check-rules="[{ message: '请输入充值金额' }]" | 
|       > | 
|         <ProFormInputNumber | 
|           placeholder="请输入充值金额" | 
|           v-model.trim="form.amount" | 
|           :controls="false" | 
|           :min="0" | 
|         ></ProFormInputNumber> | 
|       </ProFormItemV2> | 
|       <ProFormItemV2 label="备注" prop="remark"> | 
|         <ProFormTextArea placeholder="请输入备注" v-model="form.remark"></ProFormTextArea> | 
|       </ProFormItemV2> | 
|     </ProForm> | 
|     <template #footer> | 
|       <span class="dialog-footer"> | 
|         <el-button @click="emit('onCancel')">取消</el-button> | 
|         <el-button type="primary" @click="handleConfirm">确认</el-button> | 
|       </span> | 
|     </template> | 
|   </ProDialog> | 
|   <AlipayWalletRecharge v-bind="dialogAlipayWalletProps" /> | 
| </template> | 
|   | 
| <script setup lang="ts"> | 
| import { FormInstance } from 'element-plus'; | 
| import { | 
|   ProDialog, | 
|   ProForm, | 
|   ProFormInputNumber, | 
|   ProFormItemV2, | 
|   ProFormTextArea, | 
|   useFormDialog, | 
|   ProFormSelect, | 
| } from '@bole-core/components'; | 
| import * as enterpriseWalletServices from '@/services/api/enterpriseWallet'; | 
| import AlipayWalletRecharge from './AlipayWalletRecharge.vue'; | 
| import { EnumEnterpriseWalletAccessTextOnlyAlipay } from '@/constants'; | 
|   | 
| defineOptions({ | 
|   name: 'RechargeEnterpriseWalletDialog', | 
| }); | 
|   | 
| type Form = { | 
|   title?: string; | 
|   amount: number; | 
|   remark: string; | 
|   access: EnumEnterpriseWalletAccess; | 
| }; | 
|   | 
| const visible = defineModel({ type: Boolean }); | 
|   | 
| const form = defineModel<Form>('form'); | 
|   | 
| const emit = defineEmits<{ | 
|   (e: 'onConfirm'): void; | 
|   (e: 'onCancel'): void; | 
| }>(); | 
|   | 
| const dialogForm = ref<FormInstance>(); | 
|   | 
| const { dialogProps: dialogAlipayWalletProps, handleAdd: handleAlipayWalletAdd } = useFormDialog({ | 
|   defaultFormParams: { | 
|     alipayUrl: '', | 
|   }, | 
| }); | 
|   | 
| async function rechargeEnterpriseWallet() { | 
|   try { | 
|     let params: API.RechargeEnterpriseWalletCommand = { | 
|       access: form.value.access, | 
|       amount: form.value.amount, | 
|       remark: form.value.remark, | 
|     }; | 
|     let res = await enterpriseWalletServices.rechargeEnterpriseWallet(params); | 
|     if (res) { | 
|       handleAlipayWalletAdd({ | 
|         alipayUrl: res.payUrl, | 
|       }); | 
|     } | 
|   } catch (error) {} | 
| } | 
|   | 
| function onDialogClose() { | 
|   if (!dialogForm.value) return; | 
|   dialogForm.value.resetFields(); | 
| } | 
|   | 
| function handleConfirm() { | 
|   if (!dialogForm.value) return; | 
|   dialogForm.value.validate((valid) => { | 
|     if (valid) { | 
|       rechargeEnterpriseWallet(); | 
|       emit('onConfirm'); | 
|     } else { | 
|       return; | 
|     } | 
|   }); | 
| } | 
| </script> |