commit

src/components/uploadImage/Upload.jsx

 import React from 'react';
-import { Upload, Icon, message, Modal } from 'antd';
+import { Upload, Icon, Modal } from 'antd';
 import './style.less';
 import { uploaderProps } from '../../utils/upload';
 
-
-
-class ImageUpload extends React.Component {
-
+/**
+ * unlimited  属性表示上传图片无限制
+ * 例子： <ImageListUpload unlimited/>
+ */
+class ImageListUpload extends React.Component {
   state = {
-    loading: false,
     previewVisible: false,
     previewImage: '',
-    fileList: this.getPropsFileList(),
+    loadding: false,
   };
 
-  componentDidUpdate(prevProps) {
-    // 直接 setState 会死循环
-    if (prevProps.value !== this.props.value) {
-      this.setState({ fileList: this.getPropsFileList() })
-    }
-  }
-
-  getPropsFileList() {
-    return !this.props.value ? [] : [{
-      uid: '-1',
-      name: 'image.png',
-      status: 'done',
-      url: this.props.value,
-    }]
+  getFileList = () => {
+    return (this.props.value || []).map((img, inx) => ({ uid: inx, url: img, status: 'done' }))
   }
 
-
-  handleChange = ({ file, fileList }) => {
-    const { status, response } = file
-    this.setState({ fileList, loading: status === "uploading" })
-
-    if (typeof this.props.onChange === 'function' && status != "uploading") {
-      const image = status === 'done' ? response : undefined
-      this.props.onChange(image);
-    }
-  };
-
   handleCancel = () => this.setState({ previewVisible: false });
 
   handlePreview = async file => {
-    console.log(file)
     this.setState({
-      previewImage: file.url,
+      previewImage: file.url ,
       previewVisible: true,
     });
   };
 
+  handleChange = (e) => {
+    if (e.file.status === "uploading") {
+      this.setState({ loading: true });
+      return;
+    }
+
+    const fileList = (this.props.value || []).filter(x => x != e.file.url);
+    this.props.onChange(fileList);
+
+  };
+
+  handleUploadSucess = (url) => {
+    this.setState({ loading: false });
+    if (typeof this.props.onChange === 'function') {
+      const fileList = this.props.value || [];
+      this.props.onChange([...fileList, url]);
+    }
+  }
+
   render() {
+    const { previewVisible, previewImage } = this.state;
+    const fileList = this.getFileList();
+
     const uploadButton = (
       <div>
-        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"} />
+        <Icon style={{ fontSize: '2em', color: '#aaa' }} type={this.state.loading ? "loading" : "plus"}  />
       </div>
     );
-
     return (
-      <>
-      <Upload
-        {...uploaderProps}
-        listType="picture-card"
-        className="avatar-uploader"
-        onChange={this.handleChange}
-        fileList={this.state.fileList}
-        onPreview={this.handlePreview}
-      >
-        {this.state.fileList.length >= 6 ? null : uploadButton}  
-      </Upload>
-      <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
-      <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
-      </Modal>
-      </>
+      <div className="clearfix">
+        <Upload
+          listType="picture-card"
+          multiple={true}
+          fileList={fileList}
+          onPreview={this.handlePreview}
+          onChange={this.handleChange}
+          { ...uploaderProps }
+          onSuccess={this.handleUploadSucess}
+        >
+          {/* unlimited 表示上传无限制数量 */}
+          {(this.props.unlimited && uploadButton) || ((fileList || images).length >= 6 ? null : uploadButton)}
+        </Upload>
+        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
+          <img alt="example" style={{ width: '100%' }} src={previewImage} />
+        </Modal>
+      </div>
     );
   }
 }
 
-export default ImageUpload;
+export default ImageListUpload;

src/pages/fundManagement/AccountManagement.jsx

 import request from '../../utils/request';
 import AuthButton from '@/components/AuthButton';
 import Recharge from './components/Recharge'
+import Refund from './components/Refund'
 
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
             render: (x, row) => (
                 <>
                     <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px', display: 'inline-block' }}><Recharge orgId={row.orgId} accountId={row.accountId} /></span>
-                    <span style={{ color: '#FF925C', cursor: 'pointer' }} >
-                        退款
+                    <span style={{ color: '#FF925C', cursor: 'pointer', display: 'inline-block' }} >
+                        <Refund orgId={row.orgId} accountId={row.accountId} realBalance={row.realBalance || '0'} />
                     </span>
                 </>
             ),

src/pages/fundManagement/RechargeOrder.jsx

         props.form.resetFields();
         getList({ pageNum: 1, pageSize: 10, orderType: 'recharge' })
     }
+    // 导出
+    const exportList = () => {
 
+        request({ ...apis.fund.orderExport, params: { orderType: 'recharge', ...props.form.getFieldsValue() } }).then(data => {
+            if (!data) {
+                return
+            }
+            const url = window.URL.createObjectURL(new Blob([data]))
+            const link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', '充值订单表.xlsx')
+            document.body.append(link)
+            link.click()
+        }).catch()
+    }
     const { getFieldDecorator } = props.form
     return (
 
           </Button>
                 </Form.Item>
             </Form>
+            <div>
+                <Button type="danger" style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} onClick={() => exportList()} >导出</Button>
+            </div>
             <Table rowKey={r => r.tradeNo} dataSource={data.records} columns={columns} pagination={false} />
             <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                 <Pagination showQuickJumper defaultCurrent={1} total={data.total} onChange={changePageNum} current={data.current} />

src/pages/fundManagement/components/Recharge.jsx

 
 
 
-
-    const handleSubmit = (e) => {
-
-
-    }
     const handleOk = (e) => {
         props.form.validateFieldsAndScroll((err, values) => {
             console.log(values, "valuesvaluesvaluesvaluesvaluesvaluesvalues")
             >
                 <div>
                     <p style={{ color: 'red' }}>请先进行线下实际充值操作后再执行线上充值存档</p>
-                    <Form {...formItemLayout} onSubmit={handleSubmit}>
+                    <Form {...formItemLayout} >
 
                         <Form.Item label="充值金额" >
                             {getFieldDecorator('rechargeAmount', {

src/pages/fundManagement/components/Refund.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Button, Table, message, Input, Icon, Pagination } from 'antd';
+import XForm, { FieldTypes } from '../../../components/XForm';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import router from 'umi/router';
+import Upload from '../../../components/uploadImage/Upload'
+
+const { Column, ColumnGroup } = Table;
+
+const formItemLayout = {
+    labelCol: {
+        xs: { span: 6 },
+        sm: { span: 6 },
+    },
+    wrapperCol: {
+        xs: { span: 18 },
+        sm: { span: 18 },
+    },
+};
+
+const SelectContact = props => {
+
+    const [data, setData] = useState([]);
+    const [visible, setVisible] = useState(false);
+    const [group, setGroup] = useState({ groupId: undefined, groupName: '退款' })
+
+    useEffect(() => {
+
+    }, [props.value])
+
+
+    const handleOk = (e) => {
+        props.form.validateFieldsAndScroll((err, values) => {
+            console.log(values, "valuesvaluesvaluesvaluesvaluesvaluesvalues")
+            if (!err) {
+                request({ ...apis.fund.recharge, urlData: { id: props.accountId || '' }, data: { ...values, orgId: props.orgId } }).then((data) => {
+                    message.info("操作成功")
+                    setVisible(false)
+                })
+            }
+        });
+
+
+    }
+
+    const { getFieldDecorator } = props.form;
+    return (
+        <div>
+            <span onClick={() => setVisible(true)}>{group.groupName}</span>
+
+            <Modal
+                visible={visible}
+                title="确认退款"
+                onOk={() => handleOk()}
+                onCancel={() => setVisible(false)}
+                footer={[
+                    <Button key="back" size="large" onClick={() => setVisible(false)}>取消</Button>,
+                    <Button key="submit" type="primary" size="large" onClick={() => handleOk()}>确认</Button>,
+                ]}
+            >
+                <div>
+                    <p style={{ color: 'red' }}>请先进行线下实际退款操作后再执行线上退款存档</p>
+                    <Form {...formItemLayout} >
+
+                        <Form.Item label="充值金额" >
+                            {getFieldDecorator('rechargeAmount', {
+                                rules: [{ required: true, message: '退款金额不能为空' },
+                                { max: 20 }],
+                            })(<Input type='number' placeholder="支持2位小数" addonAfter="元" />)}
+                        </Form.Item>
+                        <div style={{marginBottom:'25px'}}><span style={{ width: '25%', display: 'inline-block', textAlign: 'right' }}>余额：</span>{props.realBalance}元</div>
+                        <Form.Item label="退款凭证" help="可上传银行转账截图、微信退款订单等截图作为查账线索">
+                            {getFieldDecorator('certificateList', {
+                                rules: [{ required: false }],
+                            })(
+                                <Upload />,
+                            )}
+                        </Form.Item>
+                    </Form>
+                </div>
+
+            </Modal>
+        </div>
+    )
+}
+
+const WrappedRegistrationForm = Form.create()(SelectContact);
+export default WrappedRegistrationForm;

src/services/apis.js

       method: 'GET',
       action: 'channel',
     },
+    orderExport: {
+      url: `${prefix}/taOrgOrder/orgOrderExport`,
+      method: 'GET',
+      action: 'channel',
+    },
 
   },
   relatedOrganization: {