New file |
| | |
| | | <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="EnumEnterpriseWalletAccessText" |
| | | 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 { EnumEnterpriseWalletAccessText } 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> |