增加信息

src/pages/user/user/components/MoneyFormModal.tsx

@@ -0,0 +1,119 @@
+/*
+ * @Note:
+ * @Author: 2058827620@qq.com
+ * @Date: 2022-04-03 17:02:15
+ */
+
+import { ProForm, ModalForm, ProFormRadio, ProFormText, ProFormTextArea, ProFormMoney, ProFormCaptcha, ProFormInstance } from '@ant-design/pro-components';
+import { Button } from 'antd';
+import { useEffect, useRef } from 'react';
+import { smsCode } from '@/services/user/user'
+
+
+
+export default ({ modalOpenState, onModalOpenState, onSubmit }) => {
+  const restFormRef = useRef<ProFormInstance>();
+
+
+
+  const handleFinish = async (formValues) => {
+    await onSubmit(formValues);
+    restFormRef.current?.resetFields();
+  };
+
+  return (
+    <>
+      <ModalForm
+        title="用户-余额"
+        formRef={restFormRef}
+        submitter={{
+          searchConfig: {
+            resetText: '重置',
+          },
+          resetButtonProps: {
+            onClick: () => {
+              restFormRef.current?.resetFields();
+            },
+          },
+        }}
+        onFinish={handleFinish}
+        open={modalOpenState}
+        onOpenChange={onModalOpenState}
+      >
+        <ProFormText hidden={true} width="md" name="id" />
+        <ProForm.Group>
+        <ProFormText
+            rules={[{ required: true, message: '请输入!' }]}
+            width="md"
+            name="userName"
+            label="用户名"
+            placeholder="请输入"
+          />
+          <ProFormText
+            rules={[{ required: true, message: '请输入!' }]}
+            width="md"
+            name="phone"
+            label="手机号"
+            placeholder="请输入"
+          />
+        </ProForm.Group>
+
+        <ProForm.Group>
+          <ProFormCaptcha
+            placeholder={'请输入验证码'}
+            captchaTextRender={(timing, count) => {
+              if (timing) {
+                return `${count} ${'获取验证码'}`;
+              }
+              return '获取验证码';
+            }}
+            label="验证码"
+            name="smsCode"
+            rules={[
+              {
+                required: true,
+                message: '请输入验证码！',
+              },
+            ]}
+            onGetCaptcha={async () => {
+              const { data } = await smsCode();
+            }}
+          />
+        </ProForm.Group>
+        <ProForm.Group>
+          {/* <ProFormRadio.Group
+            rules={[{ required: true, message: '请输入!' }]}
+            name="type"
+            label="类型"
+            radioType="button"
+            options={[
+              {
+                label: '线下充值',
+                value: '51',
+              },
+              {
+                label: '余额划扣',
+                value: '52',
+              },
+            ]}
+          /> */}
+          <ProFormMoney
+            rules={[{ required: true, message: '请输入!' }]}
+            label="金额"
+            name="rechargeAmount"
+            customSymbol="￥"
+          />
+
+        </ProForm.Group>
+        <ProFormTextArea
+          rules={[{ required: true, message: '请输入' }]}
+          width="md"
+          name="remark"
+          label="备注"
+          placeholder="请输入"
+        />
+      </ModalForm>
+    </>
+  );
+};
+

src/pages/user/user/components/ShopModal.tsx

@@ -0,0 +1,98 @@
+/*
+ * @Note:
+ * @Author: 2058827620@qq.com
+ * @Date: 2022-04-03 10:53:25
+ */
+import React, { useState, useEffect } from 'react';
+import {
+    Modal,
+    Table
+} from 'antd';
+
+
+import { pageUpAndDownLevel } from '@/services/user/user';
+
+export default ({ values, modalOpenState, onModalOpenState }) => {
+
+    const [items2, setitems2] = useState(null);
+    const [items, setItems] = useState(null);
+
+
+    useEffect(() => {
+        if (!values?.id) {
+            return
+        }
+        pageUpAndDownLevel(values?.id).then(({ data, success }) => {
+            if (success) {
+                setItems(data?.upLevel || []);
+                setitems2(data?.downLevel)
+            }
+        }).catch(() => {
+
+        });
+    }, [values]);
+
+    const columns = [
+        {
+            title: 'ID',
+            dataIndex: 'id',
+            search: false,
+        },
+        {
+            title: '用户',
+            dataIndex: 'shop',
+            search: false,
+            render: (_, record) => {
+                return <>
+                    <div>用户名：{record?.userName}</div>
+                    <div>手机号：{record?.phone}</div>
+                    <div>等级：{record?.level}</div>
+                </>
+            },
+        },
+        {
+            title: '余额',
+            dataIndex: 'points2',
+            search: false,
+        },
+        {
+            title: '收益',
+            dataIndex: 'points1',
+            search: false,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            search: false,
+        },
+    ];
+
+    return (
+        <>
+            <Modal width="800px" title="" open={modalOpenState} onOk={() => {
+                onModalOpenState(false);
+            }} onCancel={() => {
+                onModalOpenState(false)
+            }}>
+                <>
+                    <div style={{ margin: '15px 0' }}>上级</div>
+                    <Table
+                        rowKey="id"
+                        columns={columns}
+                        dataSource={items}
+                        pagination={false}
+                    />
+                    <div style={{ margin: '15px 0' }}>
+                        下级
+                    </div>
+                    <Table
+                        rowKey="id"
+                        columns={columns}
+                        dataSource={items2}
+                        pagination={false}
+                    />
+                </>
+            </Modal >
+        </>
+    );
+};

src/pages/user/user/components/TempFormModal.tsx

@@ -9,7 +9,7 @@ import { Divider } from 'antd';
 import { useEffect, useRef } from 'react';
 import FilesManager from '@/components/FilesManage/index';
 
-export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
+export default ({ modalOpenState, onModalOpenState, onSubmit }) => {
   const restFormRef = useRef<ProFormInstance>();
 
   return (
@@ -27,7 +27,6 @@ export default ({ values, modalOpenState, onModalOpenState, onSubmit }) => {
             },
           },
         }}
-        initialValues={values}
         onFinish={async (e) => {
           await onSubmit(e)
           restFormRef.current?.resetFields();

src/pages/user/user/index.tsx

@@ -1,4 +1,4 @@
-import { usersPage, usersAdd, usersDelete, usersUpdate, updateUserLevel, userTransferHanging, exportUser } from '@/services/user/user';
+import { usersPage, usersAdd, usersDelete, usersUpdate, updateUserLevel, userTransferHanging, exportUser, userRecharge } from '@/services/user/user';
 
 
 import React, { useRef, useEffect, useState } from 'react';
@@ -10,6 +10,12 @@ import { PlusOutlined, LineChartOutlined } from '@ant-design/icons';
 import { exportData } from '@/utils/func';
 import LevelFormModal from './components/LevelFormModal';
 import TempFormModal from './components/TempFormModal';
+import ShopModal from './components/ShopModal';
+import MoneyFormModal from './components/MoneyFormModal';
+
+
+
+
 /**
  * 添加节点
  *
@@ -76,6 +82,10 @@ const LogTableList: React.FC = () => {
     const [levelFormModal, setLevelFormModal] = useState(false);
     const [tempFormModal, setTempFormModal] = useState(false);
     const [searchParams, setSearchParams] = useState(null);
+    const [shopModal, setBonusFormModal] = useState(false);
+    const [row, setRow] = useState();
+    const [moneyFormModal, setMoneyFormModal] = useState(false);
+
 
 
     // 更改等级
@@ -97,12 +107,30 @@ const LogTableList: React.FC = () => {
         }
     };
 
+    const handleMoney = async (fields) => {
+        const { success } = await userRecharge(fields);
+        if (success) {
+            message.success('余额变更成功');
+            actionRef.current?.reload();
+            setMoneyFormModal(false);
+        }
+    }
+
     const columns = [
         {
             title: 'ID',
             dataIndex: 'id',
             valueType: 'text',
             search: false,
+            render: (_: any, record: any) => {
+                return <div className={'flex items-center'}>
+                    {record.id}
+                    <Button type="link" onClick={() => {
+                        setRow(record);
+                        setBonusFormModal(true);
+                    }}>查看</Button>
+                </div>
+            }
         },
         {
             title: '头像',
@@ -136,7 +164,7 @@ const LogTableList: React.FC = () => {
         },
         {
             title: '收益',
-            dataIndex: 'points2',
+            dataIndex: 'points1',
             valueType: 'text',
             search: false,
         },
@@ -224,6 +252,11 @@ const LogTableList: React.FC = () => {
     return (
         <PageContainer>
             <div style={{ width: '100%', float: 'right' }}>
+                <ShopModal
+                    values={row}
+                    modalOpenState={shopModal}
+                    onModalOpenState={setBonusFormModal}
+                />
                 <LevelFormModal
                     modalOpenState={levelFormModal}
                     onModalOpenState={setLevelFormModal}
@@ -234,6 +267,11 @@ const LogTableList: React.FC = () => {
                     onModalOpenState={setTempFormModal}
                     onSubmit={handleTemp}
                 />
+                <MoneyFormModal
+                    modalOpenState={moneyFormModal}
+                    onModalOpenState={setMoneyFormModal}
+                    onSubmit={handleMoney}
+                />
 
                 <ProTable
                     actionRef={actionRef}
@@ -246,7 +284,7 @@ const LogTableList: React.FC = () => {
                         <Button
                             danger
                             onClick={() => {
-                                setTradeFormModal(true)
+                                setMoneyFormModal(true)
                             }}
                         >
                             余额变更