| 1 | /* |
| 2 | * @Author: nevin |
| 3 | * @Date: 2025-02-27 20:44:31 |
| 4 | * @LastEditTime: 2025-03-01 21:12:53 |
| 5 | * @LastEditors: nevin |
| 6 | * @Description: 添加账户 addWalletAccount |
| 7 | */ |
| 8 | import { Button, Form, Input, Modal, Select } from 'antd'; |
| 9 | import { forwardRef, useImperativeHandle, useState } from 'react'; |
| 10 | |
| 11 | export interface AddWalletAccountRef { |
| 12 | init: () => Promise<void>; |
| 13 | } |
| 14 | |
| 15 | interface AddWalletAccountProps { |
| 16 | onSuccess?: (res: any) => void; |
| 17 | } |
| 18 | |
| 19 | import { |
| 20 | CreateUserWalletAccountParams, |
| 21 | WalletAccountType, |
| 22 | } from '@/api/types/userWalletAccount'; |
| 23 | import { financeApi } from '@/api/finance'; |
| 24 | |
| 25 | const Com = forwardRef<AddWalletAccountRef, AddWalletAccountProps>( |
| 26 | (props, ref) => { |
| 27 | const [isModalOpen, setIsModalOpen] = useState(false); |
| 28 | const [form] = Form.useForm<CreateUserWalletAccountParams>(); |
| 29 | |
| 30 | async function init() { |
| 31 | // form表单重置 |
| 32 | form.resetFields(); |
| 33 | |
| 34 | setIsModalOpen(true); |
| 35 | } |
| 36 | |
| 37 | useImperativeHandle(ref, () => ({ init: init })); |
| 38 | |
| 39 | /** |
| 40 | * 提交 |
| 41 | */ |
| 42 | async function submit() { |
| 43 | const values = await form.validateFields(); |
| 44 | |
| 45 | // 创建 |
| 46 | const res = await financeApi.createUserWalletAccount(values); |
| 47 | console.log('----- rres', res); |
| 48 | |
| 49 | // 创建成功后向父组件发送成功事件 |
| 50 | props.onSuccess?.(res); |
| 51 | |
| 52 | setIsModalOpen(false); |
| 53 | } |
| 54 | |
| 55 | const handleCancel = () => { |
| 56 | setIsModalOpen(false); |
| 57 | }; |
| 58 | |
| 59 | const onFinish = (values: CreateUserWalletAccountParams) => { |
| 60 | console.log('Success:', values); |
| 61 | }; |
| 62 | |
| 63 | const onFinishFailed = (errorInfo: any) => { |
| 64 | console.log('Failed:', errorInfo); |
| 65 | }; |
| 66 | |
| 67 | return ( |
| 68 | <> |
| 69 | <Modal |
| 70 | title="新建账户" |
| 71 | open={isModalOpen} |
| 72 | onCancel={handleCancel} |
| 73 | footer={[ |
| 74 | <Button key="back" onClick={handleCancel}> |
| 75 | 取消 |
| 76 | </Button>, |
| 77 | <Button key="submit" type="primary" onClick={submit}> |
| 78 | 提交 |
| 79 | </Button>, |
| 80 | ]} |
| 81 | > |
| 82 | <Form |
| 83 | name="basic" |
| 84 | form={form} |
| 85 | labelCol={{ span: 8 }} |
| 86 | wrapperCol={{ span: 16 }} |
| 87 | initialValues={{ remember: true }} |
| 88 | onFinish={onFinish} |
| 89 | onFinishFailed={onFinishFailed} |
| 90 | autoComplete="off" |
| 91 | > |
| 92 | <Form.Item |
| 93 | label="备注名" |
| 94 | name="account" |
| 95 | rules={[{ required: false, message: '请输入备注名!' }]} |
| 96 | > |
| 97 | <Input /> |
| 98 | </Form.Item> |
| 99 | |
| 100 | <Form.Item |
| 101 | label="真实姓名" |
| 102 | name="userName" |
| 103 | rules={[{ required: true, message: '请输入真实姓名!' }]} |
| 104 | > |
| 105 | <Input /> |
| 106 | </Form.Item> |
| 107 | |
| 108 | <Form.Item |
| 109 | label="身份证号" |
| 110 | name="cardNum" |
| 111 | rules={[{ required: true, message: '请输入身份证号!' }]} |
| 112 | > |
| 113 | <Input /> |
| 114 | </Form.Item> |
| 115 | |
| 116 | <Form.Item |
| 117 | label="绑定的手机号" |
| 118 | name="phone" |
| 119 | rules={[{ required: true, message: '请输入绑定的手机号!' }]} |
| 120 | > |
| 121 | <Input /> |
| 122 | </Form.Item> |
| 123 | |
| 124 | <Form.Item |
| 125 | label="类型" |
| 126 | name="type" |
| 127 | initialValue={WalletAccountType.ZFB} |
| 128 | rules={[{ required: true, message: '请选择类型!' }]} |
| 129 | > |
| 130 | <Select> |
| 131 | <Select.Option value={WalletAccountType.ZFB}> |
| 132 | 支付宝 |
| 133 | </Select.Option> |
| 134 | {/* <Select.Option value={WalletAccountType.WX_PAY}> |
| 135 | 微信支付 |
| 136 | </Select.Option> */} |
| 137 | </Select> |
| 138 | </Form.Item> |
| 139 | </Form> |
| 140 | </Modal> |
| 141 | </> |
| 142 | ); |
| 143 | }, |
| 144 | ); |
| 145 | |
| 146 | export default Com; |
| 147 |