pc-admin/src/pages/broker/list/index.jsx

import React, { useMemo, useRef, useCallback, useState } from 'react'
import { Button, notification, Spin, Badge, Select } from 'antd'
import { router } from 'umi'
import Link from 'umi/link';
import moment from 'moment'
import QueryTable from '@/components/QueryTable'
import { fetch, apis } from '@/utils/request';

const searchFields = [
  {
    name: 'name',
    label: '姓名',
    placeholder: '请输入经纪人姓名',
  },
  {
    name: 'phone',
    label: '手机号',
    placeholder: '请输入经纪人手机号',
  },
  {
    name: 'recommendPersonName',
    label: '推荐人',
    placeholder: '请输入推荐人姓名',
  },
  {
    name: 'sortOrder',
    label: '排序规则',
    render: () => (
      <Select style={{ width: '160px' }} placeholder="请选择排序规则">
        <Select.Option value="ASC">升序</Select.Option>
        <Select.Option value="DESC">降序</Select.Option>
      </Select>
    )
  },
  {
    name: 'sortField',
    label: '排序字段',
    render: () => (
      <Select style={{ width: '160px' }} placeholder="请选择排序字段">
        <Select.Option value="create_date">时间</Select.Option>
        <Select.Option value="customer_num">客户数</Select.Option>
        <Select.Option value="total_commission">佣金总数</Select.Option>
        <Select.Option value="settled_commission">已结佣金</Select.Option>
        <Select.Option value="unsettled_commission">待结佣金</Select.Option>
      </Select>
    )
  },
]

export default (props) => {
  const ref = useRef()

  const tableColumns = [
    {
      title: '图片',
      dataIndex: 'avatarurl',
      key: 'avatarurl',
      align: 'center',
      render: (t) => {
        return <img src={t} width={64} height={64} style={{borderRadius: '4px'}} alt="" />
      }
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (t, row) => row.name || row.nickname
    },
    {
      title: '推荐人',
      dataIndex: 'recommendPersonName',
      key: 'recommendPersonName',
    },
    {
      title: '客户数',
      dataIndex: 'customerNum',
      key: 'customerNum',
      align: 'right',
      width: 120,
      render: (t, row) => <Link to={`/broker/customer/list?recommendPerson=${row.personId}`}>{ !t ? 0 : t }</Link>
    },
    {
      title: '佣金总数',
      dataIndex: 'totalCommission',
      key: 'totalCommission',
      align: 'right',
      width: 120,
      render: t => t && t > 0 ? `￥${Number(t / 100).toFixed(2)}元` : '-'
    },
    {
      title: '已结佣金',
      dataIndex: 'settledCommission',
      key: 'settledCommission',
      align: 'right',
      width: 120,
      render: t => t && t > 0 ? `￥${Number(t / 100).toFixed(2)}元` : '-'
    },
    {
      title: '待结佣金',
      dataIndex: 'unsettledCommission',
      key: 'unsettledCommission',
      align: 'right',
      width: 120,
      render: (_, row) => {
        if (!row.totalCommission) return '-';
        const settledCommission = row.settledCommission || 0;
        const unsettledCommission = row.totalCommission - settledCommission;
        return `￥${Number(unsettledCommission / 100).toFixed(2)}元`
      }
    },
    {
      title: '时间',
      dataIndex: 'createDate',
      key: 'createDate',
      align: 'center',
      render: (t) => moment(t).format('YYYY-MM-DD HH:mm')
    },
    // {
    //   title: '操作',
    //   key: 'options',
    //   align: 'center',
    //   render: (_, row) => (
    //     <>
    //       <OperButton onClick={() => router.push(`/broker/announcement/edit?id=${row.screenId}`)}>详情</OperButton>
    //       <OperButton.Confirm title="确认进行操作?" color="#1890ff" onClick={() => onPublish(row)}>{row.status === 1 ? '取消发布' : '发布'}</OperButton.Confirm>
    //     </>
    //   )
    // },
  ]

  return (
    <QueryTable
      ref={ref}
      rowKey="personId"
      api={apis.broker.getBrokerList}
      searchFields={searchFields}
      columns={tableColumns}
    />
  )
}