wupengfei
23 小时以前 b331f884097a2dc5086c8cf043c8c8f52e7640fe
src/views/ServiceChargeManage/components/RechargeEnterpriseWalletDialog.vue
New file
@@ -0,0 +1,120 @@
<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>