commit

config/config.js

@@ -133,7 +133,8 @@ export default {
 
   proxy: {
     '/api': {
-      target: 'http://127.0.0.1:8080/',
+      target: 'https://dev.fangdeal.cn',
+      // target: 'http://192.168.0.195:8080/',
       changeOrigin: true,
       // pathRewrite: { '^/server': '' },
     },

config/routes.js

@@ -66,6 +66,49 @@ export default [
                 hideInMenu: true,
                 component: './sample/demand/edit',
               },
+              {
+                path: '/sample/h5/h5Sample',
+                name: 'H5模板',
+                component: './sample/h5/h5Sample',
+              },
+            ],
+          },
+          {
+            path: '/fundManagement',
+            name: '资金管理',
+            component: '../layouts/BlankLayout',
+            routes: [
+              {
+                path: '/fundManagement/RechargeOrder',
+                name: '充值订单',
+                component: './fundManagement/RechargeOrder',
+              },
+              {
+                path: '/fundManagement/ConsumeOrder',
+                name: '消费订单',
+                component: './fundManagement/ConsumeOrder',
+              },
+              {
+                path: '/fundManagement/RefundOrder',
+                name: '退款订单',
+                component: './fundManagement/RefundOrder',
+              },
+              {
+                path: '/fundManagement/AccountManagement',
+                name: '账户管理',
+                component: './fundManagement/AccountManagement',
+              },
+              {
+                path: '/fundManagement/AccountDetail',
+                name: '账户详情',
+                hideInMenu: true,
+                component: './fundManagement/AccountDetail',
+              },
+              {
+                path: '/fundManagement/Finance',
+                name: '财务联系人',
+                component: './fundManagement/Finance',
+              },
             ],
           },
           {
@@ -167,7 +210,7 @@ export default [
               },
             ],
           },
-          
+
           {
             component: './404',
           },

src/components/XForm/WrapperForm.jsx

@@ -60,15 +60,15 @@ class WrapperForm extends React.Component {
     return FieldSubmit || FieldCancel ? <WrapperItem action render={<>{FieldSubmit}{FieldCancel}</>} /> : null
   }
 
-  render () {
-    const {fields, form, children, submitBtn, cancelBtn, ...formProps} = this.props;
+  render() {
+    const { fields, form, buttonVisible = true, children, submitBtn, cancelBtn, ...formProps } = this.props;
 
     const FeildItems = (fields || []).map((props, inx) => (<WrapperItem key={inx} {...props} form={form} />))
-    
+
     return (
       <Form {...formItemLayout} {...formProps} onSubmit={this.handleSubmit}>
         {FeildItems}
-        {this.renderDefaultAction(submitBtn, cancelBtn)}
+        {buttonVisible && this.renderDefaultAction(submitBtn, cancelBtn)}
         {children}
       </Form>
     );

src/components/XForm/WrapperItem.jsx

@@ -17,6 +17,7 @@ const { MonthPicker, RangePicker } = DatePicker
 
 const FieldTypes = {
   Text: 'Text',
+  Message: 'Message',
   Password: 'Password',
   Number: 'Number',
   Switch: 'Switch',
@@ -70,7 +71,7 @@ const WrapperItem = (props, ref) => {
       valuePropName: 'checked',
     };
   }
-  
+
   if (type === FieldTypes.ImageUploader) {
     config = {
       ...config,
@@ -92,34 +93,37 @@ const WrapperItem = (props, ref) => {
   } else {
     switch (type) {
       case FieldTypes.Text:
-        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        Field = <Input placeholder={placeholder} style={{ width: '100%' }} {...fieldProps} />;
+        break;
+      case FieldTypes.Message:
+        Field = <span>{value}</span>;
         break;
       case FieldTypes.Password:
-        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        Field = <Input.Password placeholder={placeholder} style={{ width: '100%' }} {...fieldProps} />;
         break;
       case FieldTypes.Number:
-        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}/>;
+        Field = <InputNumber placeholder={placeholder} style={{ width: '100%' }} {...fieldProps} />;
         break;
       case FieldTypes.Switch:
         Field = <Switch {...fieldProps} />;
         break;
       case FieldTypes.TimePicker:
-        Field = <TimePicker {...fieldProps} style={{ width: '100%' }}/>;
+        Field = <TimePicker {...fieldProps} style={{ width: '100%' }} />;
         break;
       case FieldTypes.DatePicker:
-        Field = <DatePicker {...fieldProps} style={{ width: '100%' }}/>;
+        Field = <DatePicker {...fieldProps} style={{ width: '100%' }} />;
         break;
       case FieldTypes.RangePicker:
-        Field = <RangePicker {...fieldProps} style={{ width: '100%' }}/>;
+        Field = <RangePicker {...fieldProps} style={{ width: '100%' }} />;
         break;
       case FieldTypes.MonthPicker:
-        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }}/>;
+        Field = <MonthPicker {...fieldProps} style={{ width: '100%' }} />;
         break;
       case FieldTypes.Select:
         Field = <Select placeholder={placeholder} style={{ width: '100%' }} {...fieldProps}>{SelectOpts}</Select>
         break;
       case FieldTypes.ImageUploader:
-        Field = <ImageUploader {...fieldProps}/>
+        Field = <ImageUploader {...fieldProps} />
         break;
       default:
         throw new Error(`暂时不支持的组件类型: ${type}`)
@@ -127,7 +131,7 @@ const WrapperItem = (props, ref) => {
   }
 
   if (!label && !name && !action) return <Field ref={ref} />;
-  
+
   const itemProps = action ? { ...restProps, ...tailFormItemLayout } : restProps
 
   return (

src/pages/fundManagement/AccountDetail.jsx

@@ -0,0 +1,108 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Button, Icon, message, Modal, Radio } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import XForm, { FieldTypes } from '../../components/XForm';
+import RechargeOrder from './RechargeOrder';
+import ConsumeOrder from './ConsumeOrder';
+import RefundOrder from './RefundOrder';
+
+
+function header(props) {
+
+    const [tab, changeTab] = useState('basic')
+
+    const fields = [
+        {
+            label: '小程序名',
+            name: 'orgName',
+            type: FieldTypes.Message,
+            value: '444444444444444',
+        },
+        {
+            label: '公司/组织名称',
+            name: 'company',
+            type: FieldTypes.Message,
+            value: '444444444444444',
+        },
+        {
+            label: '代理商',
+            name: 'agent',
+            type: FieldTypes.Message,
+            value: '444444444444444',
+        },
+        {
+            label: '总充值金额',
+            name: 'recharge',
+            type: FieldTypes.Message,
+            value: '444444444444444元',
+            help: '对账请在充值订单中查看充值状态为“已支付”的充值记录',
+        },
+        {
+            label: '已消费金额',
+            name: 'consume',
+            type: FieldTypes.Message,
+            value: '444444444444444元',
+            help: '对账请在充值订单中查看充值状态为“成功”的充值记录',
+        },
+        {
+            label: '已退款金额',
+            name: 'refund',
+            type: FieldTypes.Message,
+            value: '444444444444444元',
+            help: '对账请在充值订单中查看充值状态为“已退款”的退款记录',
+        },
+        {
+            label: '退款冻结金额',
+            name: 'consume',
+            type: FieldTypes.Message,
+            value: '444444444444444元',
+            help: '对账请在充值订单中查看充值状态为“已申请”的退款记录',
+        },
+        {
+            label: '账户余额',
+            name: 'consume',
+            type: FieldTypes.Message,
+            value: '444444444444444元',
+            help: '对账户余额=总充值金额-已消费金额-已退款额-退款冻结额',
+        },
+    ]
+
+
+
+
+    return (
+
+        <>
+            <div style={{ marginBottom: '16px' }}>
+                <Radio.Group value={tab} buttonStyle="solid" onChange={e => changeTab(e.target.value)}>
+                    <Radio.Button value="basic">基本信息</Radio.Button>
+                    <Radio.Button value="recharge">充值订单</Radio.Button>
+                    <Radio.Button value="consume">消费订单</Radio.Button>
+                    <Radio.Button value="refund">退款订单</Radio.Button>
+                </Radio.Group>
+            </div>
+            <div>
+                {tab === 'basic' &&
+                    <div>
+                        <XForm buttonVisible={false} fields={fields}></XForm>
+                        <div style={{ paddingLeft: '30%', marginTop: '30px' }}>
+                            <Button htmlType="submit" type="primary" style={{ marginRight: '10%' }}>充值</Button>
+                            <Button >返回</Button>
+                        </div>
+                    </div>
+                }
+                {tab === 'recharge' && <RechargeOrder />}
+                {tab === 'consume' && <ConsumeOrder />}
+                {tab === 'refund' && <RefundOrder />}
+            </div>
+        </>
+    )
+}
+
+export default header

src/pages/fundManagement/AccountManagement.jsx

@@ -0,0 +1,171 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Card, Button, Icon, Tooltip, message, notification, Modal, Table, Select, Input, DatePicker } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [demandIdList, setDemandIdList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '账户',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+            render: (x, row) => (
+                <>
+                    <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px' }} onClick={() => toDeatil()} >
+                        {row.sampleName}
+                    </span>
+                </>
+            ),
+        },
+        {
+            title: '总充值金额',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '已消费金额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+        {
+            title: '已退款金额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+        {
+            title: '余额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            width: '120px',
+            render: (x, row) => (
+                <>
+                    <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px' }} >
+                        充值
+                    </span>
+                    <span style={{ color: '#FF925C', cursor: 'pointer' }} >
+                        退款
+                    </span>
+                </>
+            ),
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const toDeatil = () => {
+        router.push({
+            pathname: '/fundManagement/AccountDetail',
+        });
+    }
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
+                <Form.Item>
+                    {getFieldDecorator('orgName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="输入小程序名"
+                        />,
+                    )}
+                </Form.Item>
+
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+                    </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+                    </Button>
+                </Form.Item>
+            </Form>
+            <Table rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/fundManagement/ConsumeOrder.jsx

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Card, Button, Icon, Tooltip, message, notification, Modal, Table, Select, Input, DatePicker } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [demandIdList, setDemandIdList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '订单编号',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+        },
+        {
+            title: '消费组织',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '消费金额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+
+        },
+        {
+            title: '消费方式',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '活动名称',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '消费下单时间',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
+        },
+        {
+            title: '接收人手机号',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '消费状态',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
+                <Form.Item>
+                    {getFieldDecorator('sampleName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="订单编号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('orgName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="消费组织"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <span style={{ marginRight: '10px' }}>消费时间段：</span>
+                    {getFieldDecorator('createDate')(
+                        <RangePicker placeholder={['开始时间', '结束时间']} />
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('payType')(
+                        <Select style={{ width: '180px' }} placeholder="消费方式">
+                            <Select.Option value="1">全部</Select.Option>
+                            <Select.Option value="2">红包</Select.Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('payStatus')(
+                        <Select style={{ width: '180px' }} placeholder="消费状态">
+                            <Select.Option value="1">全部</Select.Option>
+                            <Select.Option value="2">成功</Select.Option>
+                            <Select.Option value="3">失败</Select.Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('phone')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="接收人手机号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+          </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+          </Button>
+                </Form.Item>
+            </Form>
+            <Table rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/fundManagement/Finance.jsx

@@ -0,0 +1,221 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Card, Button, Icon, Tooltip, message, notification, Modal, Table, Select, Input, DatePicker } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+import SelectContact from './components/SelectContact';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [contactList, setContactList] = useState([])
+    const [contactVisible, setContactVisible] = useState(false)
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+        },
+        {
+            title: '性别',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            render: (text, record) => <img src={record.avatar} className={styles.touxiang} />,
+        },
+        {
+            title: '固话',
+            dataIndex: 'orderer',
+            key: 'orderer4',
+            align: 'center',
+        },
+        {
+            title: '手机号',
+            dataIndex: 'orderer',
+            key: 'orderer3',
+            align: 'center',
+        },
+        {
+            title: '对外头衔',
+            dataIndex: 'orderer',
+            key: 'orderer2',
+            align: 'center',
+        },
+        {
+            title: '权重',
+            dataIndex: 'orderer',
+            key: 'orderer1',
+            align: 'center',
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const toDeatil = () => {
+        router.push({
+            pathname: '/fundManagement/AccountDetail',
+        });
+    }
+
+    const rowSelection = {
+        onChange: (selectedRowKeys, selectedRows) => {
+            console.log('selectedRowKeys:', selectedRowKeys, 'selectedRows: ', selectedRows);
+            setContactList(selectedRows)
+        },
+    };
+    const toAdd = (id) => () => {
+        console.log('hhhhhhhhhhhhhhh')
+        setContactVisible(true)
+    }
+    const toDel = rowData => () => {
+        if (contactList.length < 1) {
+            message.info('请至少选择一条数据')
+            return
+        }
+
+        Modal.confirm({
+            title: '确定删除联系人信息吗',
+            okText: '确定',
+            cancelText: '取消',
+            onOk() {
+                request({ ...apis.contact.batchDeleteContact, data: contactList, }).then((data) => {
+                    message.info("操作成功")
+                    getList({ pageNum: 1, pageSize: 10 });
+                }).catch((err) => {
+
+                })
+            },
+            onCancel() { },
+        });
+    }
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            {/* {contactVisible && <SelectContact />} */}
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} >
+                <Form.Item>
+                    {getFieldDecorator('name')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="姓名"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('Telephone')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="固话"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('phone')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="手机号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('title')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="对外头衔"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+                    </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+                    </Button>
+                </Form.Item>
+            </Form>
+            <div style={{ margin: '10px 0 16px 0' }}>
+                <Button type="danger" className={styles.addBtn} onClick={toAdd()}><SelectContact /></Button>
+                <Button type="primary" className={styles.addBtn} onClick={toDel()} style={{ marginLeft: '30px' }} >删除</Button>
+            </div>
+            <Table rowSelection={rowSelection} rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/fundManagement/RechargeOrder.jsx

@@ -0,0 +1,194 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Button, Icon, message,  Modal, Table, Select, Input, DatePicker } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [demandIdList, setDemandIdList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '订单编号',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+        },
+        {
+            title: '充值组织',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '充值金额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+
+        },
+        {
+            title: '充值方式',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+        },
+        {
+            title: '下单时间',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
+        },
+        {
+            title: '充值凭证',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '充值状态',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+        {
+            title: '支付时间',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{marginBottom:'16px'}}>
+                <Form.Item>
+                    {getFieldDecorator('sampleName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="订单编号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('orgName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="充值组织"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <span style={{ marginRight: '10px' }}>支付时间段：</span>
+                    {getFieldDecorator('createDate')(
+                        <RangePicker placeholder={['开始时间', '结束时间']} />
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('payType')(
+                        <Select style={{ width: '180px' }} placeholder="充值方式">
+                            <Select.Option value="1">全部</Select.Option>
+                            <Select.Option value="2">业务线上充值</Select.Option>
+                            <Select.Option value="3">运营手动充值</Select.Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('payStatus')(
+                        <Select style={{ width: '180px' }} placeholder="充值状态">
+                            <Select.Option value="1">全部</Select.Option>
+                            <Select.Option value="2">待支付</Select.Option>
+                            <Select.Option value="3">已交付</Select.Option>
+                            <Select.Option value="4">已超时</Select.Option>
+                        </Select>,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+          </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+          </Button>
+                </Form.Item>
+            </Form>
+            <Table rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/fundManagement/RefundOrder.jsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Button, Icon, message, Modal, Table, Select, Input, DatePicker } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../utils/request';
+import request from '../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [demandIdList, setDemandIdList] = useState([])
+    const [visible, setVisible] = useState(false)
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '订单编号',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+        },
+        {
+            title: '退款组织',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '退款金额',
+            dataIndex: 'orderer',
+            key: 'orderer',
+            align: 'center',
+        },
+        {
+            title: '退款创建时间',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
+        },
+        {
+            title: '退款状态',
+            dataIndex: 'orderer',
+            key: 'orderer1',
+            align: 'center',
+        },
+        {
+            title: '驳回原因',
+            dataIndex: 'orderer',
+            key: 'ordere2r',
+            align: 'center',
+        },
+        {
+            title: '退款凭证',
+            dataIndex: 'orderer',
+            key: 'o2rderer',
+            align: 'center',
+        },
+        {
+            title: '操作',
+            dataIndex: 'createDate',
+            key: 'crea2teDate',
+            align: 'center',
+            width: '120px',
+            render: (x, row) => (
+                <>
+                    <span style={{ color: '#FF925C', cursor: 'pointer', marginRight: '16px' }} >
+                        退款
+                    </span>
+                    <span style={{ color: '#FF925C', cursor: 'pointer' }} onClick={() => setVisible(true)}>
+                        驳回
+                    </span>
+                </>
+            ),
+        },
+
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+    const handleOk = () => {
+
+        setVisible(false)
+
+    }
+    const handleCancel = () => {
+        setVisible(false)
+    }
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Modal
+                visible={visible}
+                title="驳回退款"
+                onOk={() => handleOk()}
+                onCancel={() => handleCancel()}
+                footer={[
+                    <Button key="back" size="large" onClick={() => handleCancel()}>取消</Button>,
+                    <Button key="submit" type="primary" size="large" onClick={() => handleOk()}>确认</Button>,
+                ]}
+            >
+                <div style={{ display: 'flex', alignItems: 'center', margin: '30px 0' }}>驳回原因
+                <span style={{ color: 'red' }}>*</span><Input style={{ marginLeft: '10px', width: '80%' }} placeholder="请输入驳回原因" />
+                </div>
+            </Modal>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
+                <Form.Item>
+                    {getFieldDecorator('sampleName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="订单编号"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    {getFieldDecorator('orgName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="退款组织"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <span style={{ marginRight: '10px' }}>退款时间段：</span>
+                    {getFieldDecorator('createDate')(
+                        <RangePicker placeholder={['开始时间', '结束时间']} />
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+                    </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+                    </Button>
+                </Form.Item>
+            </Form>
+            <Table rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/fundManagement/components/SelectContact.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Select, Modal, Button, Table, Divider, Tag, Input, Row, Col, Icon, Pagination } from 'antd';
+import request from '../../../utils/request';
+import apis from '../../../services/apis';
+import router from 'umi/router';
+
+const { Column, ColumnGroup } = Table;
+const SelectContact = props => {
+
+    const [data, setData] = useState([]);
+    const [visible, setVisible] = useState(false);
+    const [group, setGroup] = useState({ groupId: undefined, groupName: '新增' })
+
+    useEffect(() => {
+
+    }, [props.value])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.contact.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10, })
+    }, []);
+
+
+
+    const handleChange = val => {
+    }
+
+
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                getList({ pageNum: 1, pageSize: 10, ...values })
+            }
+        });
+    }
+
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const changePageNum = (pageNumber) => {
+        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+    }
+
+    const toAdd = () => {
+        router.push({
+            pathname: '/contact/contact/add',
+        });
+    }
+
+
+
+    const columns = [
+        {
+            title: '姓名',
+            dataIndex: 'contactName',
+            key: 'contactName',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '性别',
+            dataIndex: 'sex',
+            key: 'sex',
+            align: 'center',
+            ellipsis: true,
+            render: text => <span>{text == 1 ? '男' : text == 2 ? '女' : ''}</span>,
+        },
+        {
+            title: '头像',
+            dataIndex: 'avatar',
+            key: 'avatar',
+            align: 'center',
+            ellipsis: true,
+            render: text => <img src={text} width="40px" height="40px" />,
+        },
+        {
+            title: '固话',
+            dataIndex: 'telephone',
+            key: 'telephone',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '手机号',
+            dataIndex: 'phone',
+            key: 'phone',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '对外头衔',
+            dataIndex: 'job',
+            key: 'job',
+            align: 'center',
+            ellipsis: true,
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '20%',
+            render: (text, record) => (
+                <span>
+                    <a onClick={() => selectData(record)} style={{ color: 'blue' }}>选择</a>
+                </span>
+            ),
+        },
+    ];
+
+    const { getFieldDecorator } = props.form
+
+    return (
+        <div>
+            <span style={{ color: '#fff' }} onClick={() => setVisible(true)}>{group.groupName}</span>
+
+            <Modal
+                title="选择联系人"
+                width="1200px"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                footer={[]}
+            >
+
+                <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{ marginBottom: '16px' }}>
+                    <Form.Item>
+                        {getFieldDecorator('contactName')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="姓名"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('telephone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="固话"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('phone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="手机号"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('job')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="对外头衔"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" >
+                            搜索
+              </Button>
+                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                            重置
+              </Button>
+                    </Form.Item>
+                </Form>
+                <div style={{ marginBottom: '20px', textAlign: 'right' }}>没有想要的联系人? <a onClick={() => toAdd()}>去新增</a> </div>
+                <Table 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} />
+                </div>
+            </Modal>
+        </div>
+    )
+}
+
+const WrappedRegistrationForm = Form.create()(SelectContact);
+export default WrappedRegistrationForm;

src/pages/fundManagement/style.less

@@ -0,0 +1,26 @@
+.flex-box {
+    display: flex;
+    flex-wrap: wrap;
+  
+    .flex-item {
+      flex: none;
+    }
+  
+    .flex-auto {
+      flex: auto;
+    }
+  }
+  
+  .member {
+    margin-bottom: 36px;
+    margin-right: 24px;
+  }
+  
+  .square {
+    height: 0;
+    padding-bottom : 80%;
+  }
+  .touxiang {
+    width: 93px;
+    height: 93px;
+  }

src/pages/sample/h5/components/H5Sample.jsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import { Form, Select, Modal, Button, Table, Divider, Tag, Input, Row, Col, Icon, Pagination } from 'antd';
+import request from '../../../../utils/request';
+import apis from '../../../../services/apis';
+import styles from '../style.less';
+
+const { Column, ColumnGroup } = Table;
+const SelectContact = props => {
+
+    const [data, setData] = useState([]);
+    const [visible, setVisible] = useState(false);
+    const [group, setGroup] = useState({ groupId: undefined, groupName: '请选择' })
+    const [selectedData, setSelectedData] = useState([]);
+
+    useEffect(() => {
+        if (props.value && props.value != selectedData) {
+            setSelectedData(props.value)
+        }
+    }, [props.value])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.contact.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10, })
+    }, []);
+
+
+
+    const handleChange = val => {
+    }
+
+    const selectData = val => {
+        const list = selectedData.filter(x => x.contactId !== val.contactId).concat(val)
+        setSelectedData(list)
+        props.onSelected(list)
+        setVisible(false)
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        e.stopPropagation();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                getList({ pageNum: 1, pageSize: 10, ...values })
+            }
+        });
+    }
+
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const changePageNum = (pageNumber) => {
+        getList({ pageNum: pageNumber, pageSize: 10, ...props.form.getFieldsValue() })
+    }
+
+    const removeSelected = (val) => {
+        const list = selectedData.filter(x => x.contactId !== val.contactId)
+        setSelectedData(list)
+        props.onSelected(list)
+    }
+
+    const columns = [
+        {
+            title: '模板编号',
+            dataIndex: 'contactName',
+            key: 'drainageId',
+            align: 'center',
+            ellipsis: true,
+            width: '20%',
+        },
+        {
+            title: '模板名称',
+            dataIndex: 'sex',
+            key: 'drainageId',
+            align: 'center',
+            ellipsis: true,
+            width: '60%',
+            render: text => <span>{text == 1 ? '男' : text == 2 ? '女' : ''}</span>,
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '20%',
+            render: (text, record) => (
+                <span>
+                    <a onClick={() => selectData(record)} style={{ color: 'blue' }}>选择</a>
+                </span>
+            ),
+        },
+    ];
+
+    const { getFieldDecorator } = props.form
+
+    return (
+        <div>
+            <Row gutter={24}>
+                <Col span={2}><div onClick={() => setVisible(true)}><a>{group.groupName}</a></div></Col>
+                <Col span={16}><div>
+                    {selectedData.map(x => {
+                        return <Tag size="large" key={x.contactId} closable onClose={() => removeSelected(x)}>{x.contactName}</Tag>
+                    })}
+                </div></Col>
+            </Row>
+
+            <Modal
+                title="请选择"
+                width="1200px"
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                footer={[]}
+            >
+
+                <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{marginBottom:'16px'}}>
+                    <Form.Item>
+                        {getFieldDecorator('telephone')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="模板编号"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        {getFieldDecorator('contactName')(
+                            <Input
+                                prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                                placeholder="模板名称"
+                            />,
+                        )}
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                            搜索
+                        </Button>
+                        <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                            重置
+                        </Button>
+                    </Form.Item>
+                </Form>
+
+                <Table 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} />
+                </div>
+
+            </Modal>
+        </div>
+    )
+}
+
+const WrappedRegistrationForm = Form.create()(SelectContact);
+export default WrappedRegistrationForm;

src/pages/sample/h5/components/SelectContact.jsx

@@ -73,14 +73,14 @@ const SelectContact = props => {
     {
       title: '姓名',
       dataIndex: 'contactName',
-      key: 'drainageId',
+      key: 'contactName',
       align: 'center',
       ellipsis: true,
     },
     {
       title: '性别',
       dataIndex: 'sex',
-      key: 'drainageId',
+      key: 'sex',
       align: 'center',
       ellipsis: true,
     render: text => <span>{text == 1 ? '男' : text == 2 ? '女' : '' }</span>,
@@ -88,7 +88,7 @@ const SelectContact = props => {
     {
       title: '头像',
       dataIndex: 'avatar',
-      key: 'drainageId',
+      key: 'avatar',
       align: 'center',
       ellipsis: true,
       render: text => <img src={text} width="40px" height="40px"/>,
@@ -96,21 +96,21 @@ const SelectContact = props => {
     {
       title: '固话',
       dataIndex: 'telephone',
-      key: 'drainageId',
+      key: 'telephone',
       align: 'center',
       ellipsis: true,
     },
     {
       title: '手机号',
       dataIndex: 'phone',
-      key: 'drainageId',
+      key: 'phone',
       align: 'center',
       ellipsis: true,
     },
     {
       title: '内部岗位',
       dataIndex: 'job',
-      key: 'drainageId',
+      key: 'job',
       align: 'center',
       ellipsis: true,
     },
@@ -147,7 +147,7 @@ const SelectContact = props => {
         footer={[]}
       >
       
-        <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
+        <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{marginBottom:'16px'}}>
             <Form.Item>
               {getFieldDecorator('contactName')(
                 <Input

src/pages/sample/h5/edit.jsx

@@ -8,6 +8,7 @@ import request from '../../../utils/request';
 import Wangedit from '../../../components/Wangedit/Wangedit'
 import ImageUpload from '../../../components/uploadImage/ImageUpload'
 import SelectContact from './components/SelectContact';
+import H5Sample from './components/H5Sample';
 import moment from 'moment';
 
 const formItemLayout = {
@@ -97,6 +98,11 @@ const header = props => {
               rules: [{ max: 300, message: '样例体验链接不超过300个字符' }],
             })(<Input placeholder="若样例暂未发布到小程序，可直接粘贴网页链接"/>)}
           </Form.Item>
+          <Form.Item label="H5模板" >
+            {getFieldDecorator('taContactList',{
+              trigger: 'onSelected'
+            })(<H5Sample />)}
+          </Form.Item>
           <Form.Item label="样例体验二维码/小程序码" >
             {getFieldDecorator('sampleTryCode')(
               <ImageUpload />,

src/pages/sample/h5/h5Sample.jsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from 'react';
+import { PageHeaderWrapper } from '@ant-design/pro-layout';
+import { Form, Pagination, Button, Icon, message, Modal, Table, Input, } from 'antd';
+import router from 'umi/router';
+import moment from 'moment';
+import className from 'classnames';
+import Cell from '../../../components/Cell';
+import styles from './style.less';
+import { fetch, apis } from '../../../utils/request';
+import request from '../../../utils/request';
+import AuthButton from '@/components/AuthButton';
+
+
+function header(props) {
+    // 获取初始化数据
+    const [data, setData] = useState({})
+    const [demandIdList, setDemandIdList] = useState([])
+
+    useEffect(() => {
+        getList({ pageNum: 1, pageSize: 10 });
+    }, [])
+
+    // 查询列表
+    const getList = (params) => {
+        request({ ...apis.sample.list, params: { ...params } }).then((data) => {
+            console.log(data)
+            setData(data)
+        })
+    }
+
+
+    // 提交事件
+    const handleSubmit = (e, props) => {
+        e.preventDefault();
+        props.form.validateFields((err, values) => {
+            if (!err) {
+                let { createDate, ...submitValue } = values
+                if (null != createDate && createDate.length > 0) {
+                    const [startCreateDate, endCreateDate] = createDate
+                    submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+                    submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+                } else {
+                    submitValue.startCreateDate = null
+                    submitValue.endCreateDate = null
+                }
+                getList({ pageNum: 1, pageSize: 10, ...submitValue })
+            }
+        });
+    }
+
+    const changePageNum = (pageNumber) => {
+        let { createDate, ...submitValue } = props.form.getFieldsValue()
+        if (null != createDate && createDate.length > 0) {
+            const [startCreateDate, endCreateDate] = createDate
+            submitValue.startCreateDate = moment(startCreateDate).format('YYYY-MM-DD');
+            submitValue.endCreateDate = moment(endCreateDate).format('YYYY-MM-DD');
+        } else {
+            submitValue.startCreateDate = null
+            submitValue.endCreateDate = null
+        }
+        getList({ pageNum: pageNumber, pageSize: 10, ...submitValue })
+    }
+
+
+
+    /**
+     *
+     *
+     * @param {*} props
+     * @returns
+     */
+    const columns = [
+        {
+            title: '模板编号',
+            dataIndex: 'sampleName',
+            key: 'sampleName',
+            align: 'center',
+        },
+        {
+            title: '模板名称',
+            dataIndex: 'orgName',
+            key: 'orgName',
+            align: 'center',
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createDate',
+            key: 'createDate',
+            align: 'center',
+            render: (x, row) => <><span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
+        },
+    ];
+    function handleReset() {
+        props.form.resetFields();
+        getList({ pageNum: 1, pageSize: 10 })
+    }
+
+    const { getFieldDecorator } = props.form
+    return (
+
+        <>
+            <Form layout="inline" onSubmit={e => handleSubmit(e, props)} style={{marginBottom:'16px'}}>
+                <Form.Item>
+                    {getFieldDecorator('sampleName')(
+                        <Input
+                            prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                            placeholder="样例名"
+                        />,
+                    )}
+                </Form.Item>
+                <Form.Item>
+                    <Button type="primary" htmlType="submit" className={styles.searchBtn}>
+                        搜索
+          </Button>
+                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>
+                        重置
+          </Button>
+                </Form.Item>
+            </Form>
+            <Table rowKey="newsType" 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} />
+            </div>
+        </>
+    )
+}
+const WrappedHeader = Form.create({ name: 'header' })(header);
+
+export default WrappedHeader

src/pages/sample/h5/style.less

@@ -10,7 +10,9 @@
     flex: auto;
   }
 }
-
+.addBtn{
+  margin: 10px 0 12px 0;
+}
 .member {
   margin-bottom: 36px;
   margin-right: 24px;