pc-channel/src/pages/sample/h5/components/SelectContact.jsx

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 })
  }

  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,
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
    render: text => <span>{text == 1 ? '男' : text == 2 ? '女' : '' }</span>,
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
      render: text => <img src={text} width="40px" height="40px"/>,
    },
    {
      title: '固话',
      dataIndex: 'telephone',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
      render: text => <a>{text}</a>,
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
      render: text => <a>{text}</a>,
    },
    {
      title: '内部岗位',
      dataIndex: 'job',
      key: 'drainageId',
      align: 'center',
      ellipsis: true,
      render: text => <a>{text}</a>,
    },
    {
      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)}>
            <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" 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;