estateagents-admin-manager/src/pages/customer/report/index.jsx

import React, { useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar } from 'antd';
import moment from 'moment';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import Styles from './style.less';
import BuildSelect from '../../../components/SelectButton/BuildSelect'
import AuthButton from '@/components/AuthButton';


const { Option } = Select;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { Meta } = Card;

const tempDate = [{ code: 's101' }]

/**
 *
 *
 * @param {*} props
 * @returns
 */
function body(props) {
  const { getFieldDecorator } = props.form

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSource, setDataSource] = useState({ records: [] })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList({ pageNumber: 1, pageSize: 9 })
  }, [])

  function getList(params) {
    // 网路请求
    request({ ...apis.customer.report, params: { ...params } }).then(res => {
      setDataSource(res)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions
      <Alert
        style={{
          marginBottom: 24,
        }}
        message={err}
        type="error"
        showIcon
      />
    })
  }

  // 提交事件
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        getList({ pageNum: 1, pageSize: 10, ...values })
      }
    });
  }

  // Change 事件
  function handleSelectChange(e) {
    // eslint-disable-next-line no-console
    console.log(e)
  }

  // 分页
  function onChange(pageNum) {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    getList({ pageNumber: pageNum, pageSize: 9 })
  }

  /**
    * 重置搜索
    */
  function handleReset() {
    props.form.resetFields();
    getList({ pageNumber: 1, pageSize: 9 })
  }

  function exportReport() {
    request({ ...apis.customer.customerRecommendReportExport, params: { ...props.form.getFieldsValue() }, responseType: 'blob' })
      .then(response => {
        download(response)
      })
  }

  function download(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()
  }

  const columns = [
    {
      title: '头像',
      dataIndex: 'picture',
      key: 'picture',
      render: (_, record) => <Avatar shape="square" src={record.picture} size={64} icon="user" />,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      // eslint-disable-next-line no-nested-ternary
      render: (_, record) => <><span>{record.sex === 1 ? '男' : record.sex === 2 ? '女' : '未知'}</span></>,
    },
    {
      title: '意向项目',
      dataIndex: 'intentionName',
      key: 'intentionName',
    },
    {
      title: '置业顾问',
      dataIndex: 'consultantName',
      key: 'consultantName',
    },
    {
      title: '置业顾问手机号',
      dataIndex: 'consultTel',
      key: 'consultTel',
    },
  ]

  return (
    <>
      <Form layout="inline" onSubmit={e => handleSubmit(e, props)} >
        <Row>
          <Col span={21}>
            <Form.Item>
              {getFieldDecorator('name')(
                <Input
                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="姓名"
                />,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('tel')(
                <Input
                  prefix={<Icon type="text" style={{ color: 'rgba(0,0,0,.25)' }} />}
                  placeholder="电话"
                />,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('consultName')(
                <Input placeholder="置业顾问" />,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('consultTel')(
                <Input placeholder="置业顾问电话" />,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('sex')(
                <Select style={{ width: '180px' }} placeholder="性别" onChange={handleSelectChange}>
                  <Option value="1">男</Option>
                  <Option value="0">女</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator('buildingId')(
                <BuildSelect />,
              )}
            </Form.Item>
          </Col>
          <div style={{minWidth:'150px',position: 'absolute', right: '-12px', }}>
            <Form.Item >
              <Button type="primary" htmlType="submit">
                搜索
            </Button>
              <Button style={{ marginLeft: 8 }} onClick={handleReset}>
                重置
            </Button>
            </Form.Item>
          </div>
        </Row>
        <div >
        </div>
      </Form>
      <Button type="primary" onClick={() => exportReport()} style={{ float: 'right', margin: '20px 0', zIndex: 1 }}>
        导出
      </Button>
      <Table rowKey="report" style={{ marginTop: '40px' }} dataSource={dataSource.records} columns={columns} pagination={{ total: dataSource.total, onChange }} />
    </>
  );
}
const WrappedBody = Form.create({ name: 'body' })(body);

export default WrappedBody