修改规范

src/pages/Recharge/Wallet/components/AddWalletModal.tsx

@@ -0,0 +1,97 @@
+// 创建弹窗
+import React, { useRef } from 'react';
+import { createForm, onFieldReact, FormPathPattern, Field } from '@formily/core';
+import { FormProvider, createSchemaField } from '@formily/react';
+import { getCoinTypeList } from '@/services/recharge/coinType';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+import { action } from '@formily/reactive';
+
+interface AddWalletModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const useAsyncDataSource = (
+  pattern: FormPathPattern,
+  service: (field: Field) => Promise<{ label: string; value: any }[]>,
+) => {
+  onFieldReact(pattern, (field) => {
+    service(field).then(
+      action.bound((data) => {
+        field.dataSource = data;
+      }),
+    );
+  });
+};
+
+const form = createForm({
+  effects: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useAsyncDataSource('name', async (field) => {
+      const list = await getCoinTypeList({ page: 1, page_size: 10 });
+      const option = [];
+      for (let index = 0; index < list.items.length; index++) {
+        const element = list.items[index];
+        const item = {
+          label: element.name,
+          value: element.name,
+        };
+        option.push(item);
+      }
+      return option;
+    });
+  },
+});
+
+const AddWalletModal = ({ onOk, onCancel, ...rest }: AddWalletModalPropsType) => {
+  const handleOk = () => {
+    const formState = form.getFormState();
+    onOk(formState.values);
+  };
+
+  const handleCancel = () => {
+    onCancel();
+  };
+
+  return (
+    <Modal title="创建收款地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+      <FormProvider form={form}>
+        <SchemaField>
+          <SchemaField.String
+            name="name"
+            title="游戏币名称"
+            required
+            x-decorator="FormItem"
+            x-component="Select"
+            x-component-props={{
+              placeholder: '',
+            }}
+          />
+          <SchemaField.String
+            name="address"
+            title="收款地址"
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '不传则后台生成',
+            }}
+          />
+        </SchemaField>
+      </FormProvider>
+      {/* <Form form={form} labelCol={4} wrapperCol={18}> */}
+
+      {/* </Form> */}
+    </Modal>
+  );
+};
+
+export default AddWalletModal;

src/pages/Recharge/Wallet/components/EditWalletModal.tsx

@@ -0,0 +1,101 @@
+// 修改弹窗
+import React, { useRef, useEffect } from 'react';
+import { createForm, onFieldReact, FormPathPattern, Field } from '@formily/core';
+import { getCoinTypeList } from '@/services/recharge/coinType';
+import { FormProvider, createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+import { action } from '@formily/reactive';
+
+interface EditWalletModalPropsType extends ModalProps {
+  editModalData: any;
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const EditWalletModal = ({ onOk, onCancel, editModalData, ...rest }: EditWalletModalPropsType) => {
+  const useAsyncDataSource = (
+    pattern: FormPathPattern,
+    service: (field: Field) => Promise<{ label: string; value: any }[]>,
+  ) => {
+    onFieldReact(pattern, (field) => {
+      service(field).then(
+        action.bound((data) => {
+          field.dataSource = data;
+        }),
+      );
+    });
+  };
+
+  const form = createForm({
+    effects: () => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useAsyncDataSource('name', async (field) => {
+        const list = await getCoinTypeList({ page: 1, page_size: 10 });
+        const option = [];
+        for (let index = 0; index < list.items.length; index++) {
+          const element = list.items[index];
+          const item = {
+            label: element.name,
+            value: element.name,
+          };
+          option.push(item);
+        }
+        return option;
+      });
+    },
+  });
+
+  useEffect(() => {
+    form.setInitialValues(editModalData);
+  });
+
+  const handleOk = () => {
+    const formState = form.getFormState();
+    onOk(formState.values);
+  };
+
+  const handleCancel = () => {
+    onCancel();
+  };
+
+  return (
+    <Modal title="修改收款地址" onOk={handleOk} onCancel={handleCancel} width={800} {...rest}>
+      <Form form={form} labelCol={4} wrapperCol={18}>
+        <SchemaField>
+          <SchemaField.String
+            name="address"
+            title="旧收款地址"
+            x-disabled
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="name"
+            title="游戏币名称"
+            required
+            x-decorator="FormItem"
+            x-component="Select"
+          />
+          <SchemaField.String
+            name="new_address"
+            title="新收款地址"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditWalletModal;