src/pages/Recharge/Address/Components/AddAddressModal.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 AddAddressModalPropsType 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('bc_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.bc_name,
+          value: element.bc_name,
+        };
+        option.push(item);
+      }
+      return option;
+    });
+  },
+});
+
+const AddAddressModal = ({ onOk, onCancel, ...rest }: AddAddressModalPropsType) => {
+  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="bc_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 AddAddressModal;

src/pages/Recharge/Address/Components/EditAddressModal.tsx

@@ -0,0 +1,106 @@
+// 修改弹窗
+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 EditAddressModalPropsType extends ModalProps {
+  editModalData: any;
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const EditAddressModal = ({
+  onOk,
+  onCancel,
+  editModalData,
+  ...rest
+}: EditAddressModalPropsType) => {
+  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('bc_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.bc_name,
+            value: element.bc_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="bc_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 EditAddressModal;

src/pages/Recharge/CoinType/Components/AddCoinTypeModal.tsx

@@ -0,0 +1,71 @@
+// 添加代币类型弹窗
+import React, { useRef } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, NumberPicker } from '@formily/antd';
+
+interface AddCoinTypeModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    NumberPicker,
+  },
+});
+
+const form = createForm({});
+
+const AddCoinTypeModal = ({ onOk, onCancel, ...rest }: AddCoinTypeModalPropsType) => {
+  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="bc_name"
+            title="代币名称"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="usdt_price"
+            title="usdt比例"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="eth_price"
+            title="eth比例"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Number
+            name="num"
+            title="数量"
+            required
+            x-decorator="FormItem"
+            x-component="NumberPicker"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddCoinTypeModal;

src/pages/Recharge/CoinType/Components/EditCoinTypeModal.tsx

@@ -0,0 +1,72 @@
+// 修改弹窗
+import React, { useRef, useEffect } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+
+interface EditCoinTypeModalPropsType extends ModalProps {
+  editModalData: any;
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const form = createForm({});
+
+const EditCoinTypeModal = ({
+  onOk,
+  onCancel,
+  editModalData,
+  ...rest
+}: EditCoinTypeModalPropsType) => {
+  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="bc_name"
+            title="游戏币名称"
+            x-disabled
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="usdt_price"
+            title="usdt比例"
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="eth_price"
+            title="eth比例"
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditCoinTypeModal;

src/pages/System/Account/Components/AddAccountModal.tsx

@@ -0,0 +1,84 @@
+// 创建弹窗
+import React, { useRef } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+import { addUser } from '@/services/system/accountManage';
+
+interface AddAccountModalPropsType extends ModalProps {
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const form = createForm({});
+
+const AddAccountModal = ({ onOk, onCancel, ...rest }: AddAccountModalPropsType) => {
+  const handleOk = async () => {
+    form.submit(async () => {
+      onOk();
+      const formState = form.getFormState();
+      formState.values.role = parseInt(formState.values.role);
+      await addUser(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="name"
+            title="账号名"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入账号名',
+            }}
+          />
+          <SchemaField.String
+            name="password"
+            title="密码"
+            required
+            x-validator={{
+              required: true,
+            }}
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入密码',
+            }}
+          />
+          <SchemaField.String
+            name="role"
+            title="角色"
+            required
+            x-validator={{
+              required: true,
+            }}
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请选择角色',
+            }}
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddAccountModal;

src/pages/System/Account/Components/EditAccountModal.tsx

@@ -0,0 +1,82 @@
+// 创建弹窗
+import React, { useRef, useEffect } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+import { addUser, updateUser } from '@/services/system/accountManage';
+
+interface AddUserModalPropsType extends ModalProps {
+  editModalData: any;
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const form = createForm({});
+
+const AddUserModal = ({ onOk, onCancel, editModalData, ...rest }: AddUserModalPropsType) => {
+  useEffect(() => {
+    form.setInitialValues(editModalData);
+  });
+
+  const handleOk = async () => {
+    onOk();
+    const formState = form.getFormState();
+    formState.values.role = parseInt(formState.values.role);
+    await updateUser(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="name"
+            title="账号名"
+            required
+            x-disabled
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入账号名',
+            }}
+          />
+          <SchemaField.String
+            name="password"
+            title="密码"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请输入密码',
+            }}
+          />
+          <SchemaField.String
+            name="role"
+            title="角色"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+            x-component-props={{
+              placeholder: '请选择角色',
+            }}
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddUserModal;

src/pages/System/Notice/Components/AddNoticeModal.tsx

@@ -0,0 +1,69 @@
+// 添加代币类型弹窗
+import React, { useRef } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+
+interface AddNoticeModalPropsType extends ModalProps {
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const form = createForm({});
+
+const AddNoticeModal = ({ onOk, onCancel, ...rest }: AddNoticeModalPropsType) => {
+  const handleOk = () => {
+    const formState = form.getFormState();
+    formState.values.code = parseInt(formState.values.code);
+    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="code"
+            title="通知码"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="addr"
+            title="通知地址"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.Boolean
+            name="status"
+            title="状态"
+            required
+            x-decorator="FormItem"
+            x-component="Select"
+            enum={[
+              { label: '启用', value: true },
+              { label: '禁用', value: false },
+            ]}
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AddNoticeModal;

src/pages/System/Notice/Components/EditNoticeModal.tsx

@@ -0,0 +1,63 @@
+// 修改弹窗
+import React, { useRef, useEffect } from 'react';
+import { createForm } from '@formily/core';
+import { createSchemaField } from '@formily/react';
+import Modal, { ModalProps } from '@/components/Modal';
+import { Form, FormItem, Input, Select } from '@formily/antd';
+
+interface EditNoticeModalPropsType extends ModalProps {
+  editModalData: any;
+  onOk: (val: any) => void;
+  onCancel: () => void;
+}
+
+const SchemaField = createSchemaField({
+  components: {
+    FormItem,
+    Input,
+    Select,
+  },
+});
+
+const form = createForm({});
+
+const EditNoticeModal = ({ onOk, onCancel, editModalData, ...rest }: EditNoticeModalPropsType) => {
+  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="code"
+            title="通知码"
+            x-disabled
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+          <SchemaField.String
+            name="addr"
+            title="通知地址"
+            required
+            x-decorator="FormItem"
+            x-component="Input"
+          />
+        </SchemaField>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditNoticeModal;