estateagents-admin-manager/src/pages/channel/brokerList.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 columns = [
  {
    title: '头像',
    dataIndex: 'avatarurl',
    key: 'avatarurl',
    align: 'center',

    // eslint-disable-next-line jsx-a11y/alt-text
    render: (text, list) => <img src={list.avatarurl }/>,
  },
  {
    title: '用户姓名',
    dataIndex: 'name',
    key: 'name',
    align: 'center',
  },
  {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center',
  },
  {
    title: '性别',
    dataIndex: 'sex',
    key: 'sex',
    align: 'center',
    render: (text, list) => <a>{ list.sex === 1 ? '男' : '女' }</a>,
  },
  {
    title: '推荐客户',
    dataIndex: 'recommendCount',
    key: 'recommendCount',
    align: 'center',
    render: (text, list) => <a style={ { color: '#66B3FF' } } onClick= {() => torecommend(list.personId)} >{ list.recommendCount }</a>,
  },
  {
    title: '邀请经纪人',
    dataIndex: 'inviteCount',
    key: 'inviteCount',
    align: 'center',
    render: (text, list) => <a style={ { color: '#66B3FF' } } onClick= {() => toinvite(list.personId)} >{ list.inviteCount }</a>,
  },
];

// 跳转到推荐客户
function torecommend(personId) {
  router.push({
    pathname: '/channel/recommendClients',
    query: {
      id: personId,
    },
  });
}

// 跳转到邀请经纪人
function toinvite(personId) {
  router.push({
    pathname: '/channel/InviteClients',
    query: {
      id: personId,
    },
  });
}


const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({ list: [] })

  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [queryData, setQueryData] = useState({})
//   const [page, changePage] = useState({})
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getListBroker({ channelId: props.location.query.id, pageNum: 1, pageSize: 10 })
  }, [])

    function getListBroker(params) {
      request({ ...apis.channelList.getListBroker, params: { ...params } }).then((data) => {
        setData(data)
    }).catch((err) => {
        console.log(err)
        message.info(err.msg || err.message)
    })
    }


 // 查询
 function queryList() {
  getListBroker({ ...queryData, pageNum: 1, pageSize: 10, channelId: props.location.query.id })
}
    // 分页
    function onChange(pageNumber) {
      // eslint-disable-next-line react-hooks/rules-of-hooks
      getListBroker({ pageNum: pageNumber, pageSize: 10 })
    }
    // 获取input的值
    function onInputChangePhone (e) {
      // const InputValue = e.target.name.x.value;
      setQueryData({ ...queryData, name: e.target.value })
   }

   function onInputChangeName (e) {
    // const InputValue = e.target.name.x.value;
    setQueryData({ ...queryData, phone: e.target.value })
  }
  function refurbishList () {
    getListBroker({ pageNum: 1, pageSize: 10 })
  }
  // eslint-disable-next-line no-undef
  function handleClick() {
    alert('11', this)
    console.log('this is:', this);
  }
return (
  <>
    <div className={ channels.searchBox }>
      <div style = {{ marginLeft: '-5px' }}>
        <span className={ channels.selectName }>姓名</span>
        <Input onChange = { onInputChangePhone } style ={{ width: 150 }} />
        <span className={ channels.selectName }>电话</span>
        <Input onChange = { onInputChangeName } style ={{ width: 150 }} />
      </div>
      <div>
      <Button type="primary" onClick={() => queryList() }>查询</Button>
      {/* <Button onClick={() => refurbishList() }>重置</Button> */}
    </div>
    </div>
    <Table style={{marginTop:'40px'}} dataSource={data.list} 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