pc-channel/src/pages/fundManagement/components/SelectContact.jsx

import React, { useState, useEffect } from 'react';
import { Form, Modal, Button, Table, message, Input, 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 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 selectData = (record) => {
        request({ ...apis.fund.addContact, urlData: { id: record.contactId } }).then((data) => {
            message.success('新增成功!');
            props.onClick()
            setVisible(false)
        })
    }


    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: 'appellation',
            key: 'appellation',
            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 >
            <div style={{ color: '#fff', padding: '0 15px', height: '32px', lineHeight: '32px' }} onClick={() => setVisible(true)}>{group.groupName}</div>

            <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('appellation')(
                            <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;