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 apis from '../../services/apis';
import request from '../../utils/request';
import AuthButton from '@/components/AuthButton';

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',
      render: (text, record) => <a style={ { color: '#66B3FF' } } onClick= {() => toBroker(record)} >{ record.recommendCount }</a>,
  },
  {
    title: '推荐客户有效',
    dataIndex: 'recommendCount',
    key: 'recommendCount',
    align: 'center',
  },
  {
    title: '邀请经济人',
    dataIndex: 'inviteCount',
    key: 'inviteCount',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: '',
    key: '',
    align: 'center',
    render: (text, record) => (
      <AuthButton name="admin.channel.id.put" noRight={null}>
        <a style={{ color: '#66B3FF' }} onClick={() => toedit(record.channelId)} >编辑</a>
      </AuthButton>
    ),
  },
];

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

// 经纪人页面
function toBroker(record) {
  if (record.brokerCount === 0) {
    return
  }
  router.push({
    pathname: '/channel/brokerList',
    query: {
      id: record.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(() => {
    localStorage.removeItem('value');
    getList({ pageNum: 1, pageSize: 10 })
  }, [])
 
  function getList(params) {
    request({ ...apis.channelList.getList, params: { ...params } }).then((data) => {
      setData(data)
  }).catch((err) => {
      console.log(err)
      message.info(err.msg || err.message)
  })
  }
  // 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}>
        <div>
          <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>
        </div>
        <div >
          <Button type="primary" onClick={() => queryList()}>查询</Button>
          {/* <Button onClick={() => reset() }>重置</Button> */}
        </div>
      </div>
      <AuthButton name="admin.channel.post" noRight={null}>
        <Button type="danger" onClick={toAdd} className={channels.about} >新增</Button>
      </AuthButton>
      <Table dataSource={data.result.records} columns={columns} pagination={{ pageSize: 10, total: data.result.total, onChange }} />
    </>
  )
}


export default header