estateagents-admin-manager/src/pages/channel/recommendClients.jsx

import React, { useState, useEffect } from 'react';
import { Input, Menu, Dropdown, Button, Icon, message, Table, Divider, Tag, Select } from 'antd';
import { FormattedMessage } from 'umi-plugin-react/locale';
import channels from './channelList.less';
import router from 'umi/router';
import apis from '../../services/apis';
import request from '../../utils/request'

const { Option } = Select;
function handleChange(value) {
  console.log(`selected ${value}`);
}


const menu = (
  <Menu onClick={handleMenuClick}>
    <Menu.Item key="1">
      <Icon type="user" />
      1st menu item
    </Menu.Item>
    <Menu.Item key="2">
      <Icon type="user" />
      2nd menu item
    </Menu.Item>
    <Menu.Item key="3">
      <Icon type="user" />
      3rd item
    </Menu.Item>
  </Menu>
);
const dataSource = [
  {
    key: '1',
    img: 'http://img0.imgtn.bdimg.com/it/u=4246326797,2657995307&fm=26&gp=0.jpg',
    name: '123',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    img: '',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '头像',
    // dataIndex: 'img',
    // key: 'img',
    align: 'center',

    render: (text, record) => <img src={record.picture} className={channels.touxiang} />,
  },
  {
    title: '用户姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
    render: text => <a>{text}</a>,
  },
  {
    title: '电话',
    dataIndex: 'recommendTel',
    key: 'recommendTel',
    align: 'center',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    render: (text, record) => <a style={ { color: '#66B3FF' } } >{ record.sex === 1 ? '男' : '女' }</a>,
  },
  {
    title: '意向项目',
    dataIndex: 'intention',
    key: 'intention',
    align: 'center',
  },
  {
    title: '推荐时间',
    dataIndex: 'createDate',
    key: 'createDate',
    align: 'center',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
  },
];

const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({})
//   const [page, changePage] = useState({})
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getListRecommend({ pageNumber: 1, pageSize: 10 })
  }, [])

  // function getListRecommend(params) {
  //   request({
  //     url: `/api/admin/customer/recommend/${props.location.query.id}`,
  //     method: 'GET',
  //     params: { ...params },
  // // eslint-disable-next-line no-shadow
  // }).then(data => {
  //     console.log(data)
  //     setData(data)
  // })
  // }

  function getListRecommend(params) {
    request({ ...apis.channelList.getListRecommend, urlData: { id: props.location.query.id }, params: { ...params } }).then((data) => {
      setData(data)
  }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
  })
  }


   // 分页
 function onChange(pageNum) {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      getListRecommend({ pageNumber: pageNum, pageSize: 9 })
    }
return (
  <>
  <Table dataSource={data.records} rowKey="recommendClist" columns={columns} pagination={{ pageSize: 10, total: data.total, onChange }} />
  </>
)
}

function handleMenuClick(e) {
  message.info('Click on menu item.');
  console.log('click', e);
}
export default header