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

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

const { Option } = Select;

// 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.img} className={channels.touxiang} />,
  // },
  {
    title: '渠道代码',
    dataIndex: 'channelCode',
    key: 'channelCode',
    align: 'center',
    render: text => <a>{text}</a>,
  },
  {
    title: '渠道名称',
    dataIndex: 'channelName',
    key: 'channelName',
    align: 'center',
  },
  {
    title: '联系人',
    dataIndex: 'channelContact',
    key: 'channelContact',
    align: 'center',
  },
  {
    title: '联系电话',
    dataIndex: 'contactTel',
    key: 'contactTel',
    align: 'center',
  },
  {
    title: '经纪人数',
    dataIndex: 'brokerCount',
    key: 'brokerCount',
    align: 'center',
  },
  {
    title: '推荐客户有效',
    dataIndex: 'recommendCount',
    key: 'recommendCount',
    align: 'center',
  },
  {
    title: '邀请经济人',
    dataIndex: 'inviteCount',
    key: 'inviteCount',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: '',
    key: '',
    align: 'center',
    render: (text, record) => <a style={ { color: '#66B3FF' } } onClick= {() => toedit(record.channelId)} >编辑</a>,
  },
];

// 跳转到添加页面
function toAdd() {
  router.push({
    pathname: '/channel/addChannel',
    query: {
      a: 'b',
    },
  });
}
  // 跳编辑页面
  function toedit(channelId) {
    // alert(channelId)
    router.push({
      pathname: '/channel/editChannel',
      query: {
        id: channelId,
      },
    });
  }

const header = props => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [data, setData] = useState({ channelNmae: [], result: [] })
  // eslint-disable-next-line react-hooks/rules-of-hooks
  useEffect(() => {
    getList({ pageNum: 1, pageSize: 10 })
  }, [])

  function getList(params) {
    request({
      url: '/api/admin/channel',
      method: 'GET',
      params: { ...params },
  // eslint-disable-next-line no-shadow
  }).then(data => {
      console.log(data)
      setData(data)
  })
  }
  // value 的值
  function handleChange(value) {
    // setQueryData({ ...queryData, channelId: value });
    localStorage.setItem('value', value);
  }
  // 查询
  function queryList() {
    getList({ pageNum: 1, pageSize: 10, channelId: localStorage.getItem('value') })
  }
 // 重置
 function reset() {
  getList({ pageNum: 1, pageSize: 10 })
 }

 // 跳编辑页
 function toEdit() {
  router.push({
    pathname: '/integralMall/editGoods',
    query: {
      a: 'b',
    },
  });
}

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

  return (
    <>
      <div className={channels.searchBox}>
        <dvi>
          <span className={channels.selectName}>渠道名称</span>
          <Select defaultValue="请选择" style={{ width: 180 }} onChange={handleChange}>
          <option value="">全部</option>
              {data.channelNmae.map(Item =>
                <Option value={ Item.channelId }> { Item.channelName } </Option>,
              )}
              {/* {listItems} */}
          </Select>
        </dvi>
        <div >
        <Button type="primary" onClick={() => queryList() }>查询</Button>
        {/* <Button onClick={() => reset() }>重置</Button> */}
        </div>
      </div>
      <Button type="danger" onClick={toAdd} className={channels.about} >新增</Button>
      <Table dataSource={data.result.records} columns={columns} pagination={{ pageSize: 10, total: data.result.total, onChange }} />
  </>
  )
}


export default header