xs-manage/src/pages/property/bill/order/index.jsx

import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Divider, Icon } from 'antd'
import NavLink from 'umi/navlink'
import { fetchList, apis, fetch } from '@/utils/request'
import Search from '../../components/Search'
import List from '../../components/List'

const exportStatementExcel = fetch(apis.bill.exportStatementExcel)
const getBillStatementAll = fetch(apis.bill.getBillStatementAll)

const StatusDict = {
  '0': '未支付',
  '1': '已支付',
  '2': '支付中',
  '3': '已关闭',
}

const PayTypeDict = {
  '0': '微信缴费',
  '1': '线下缴费',
  '2': '支付宝缴费',
}

const Condition = props => {
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator, setFieldsValue } = form
        
        return (
          <>
            <Form.Item label="订单号">
            {
              getFieldDecorator('orderBumber')(<Input placeholder="订单号" />)
            }
            </Form.Item>
            <Form.Item label="缴费项目编号">
            {
              getFieldDecorator('billId')(<Input placeholder="缴费项目编号" />)
            }
            </Form.Item>
            <Form.Item label="缴费项目名">
            {
              getFieldDecorator('billName')(<Input placeholder="缴费项目名" />)
            }
            </Form.Item>
            <Form.Item label="收费单号">
            {
              getFieldDecorator('billInvoiceId')(<Input placeholder="收费单号" />)
            }
            </Form.Item>
            <Form.Item label="缴费人手机号">
            {
              getFieldDecorator('payPhone')(<Input placeholder="缴费人手机号" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

export default props => {
  const [loading, setLoading] = useState(false)
  const [listData, setListData] = useState([])
  const [pagination, setPagination] = useState({})
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })

  const handleSearch = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1,
    })
  }

  const handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

  const exportExcel = () => {
    exportStatementExcel().then(res => {
      const link = document.createElement('a')
      link.href = window.URL.createObjectURL(new Blob([res]))
      link.setAttribute('download', '流水信息.xls')
      link.click()
    })
  }

  useEffect(() => {
    setLoading(true)
    getBillStatementAll({ data: queryParams }).then(res => {
      const {list, ...pagi} = res || {}
      setListData(list)
      setPagination(pagi)
      setLoading(false)
    }).catch(err => setLoading(false))
  }, [queryParams])

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{ margin: '24px 0' }}>
        <Button type="link" onClick={exportExcel}><Icon type="download"/>导出数据</Button>
      </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="id">
        <Table.Column
          title="订单号"
          dataIndex="id"
          key="id"
          render={(_, row) => {
            return (
              <NavLink to={`/property/bill/order/info?id=${row.orderBumber}`}>
                <Button type="link">{row.orderBumber}</Button>
              </NavLink>
            )
          }}
        />
        <Table.Column
          title="收费组编号"
          dataIndex="billId"
          key="billId"
          render={(_, row) => {
            return (row.billIdList || []).map(item => (
              <NavLink key={item} to={`/property/bill/management/info?id=${item}`}>
                <Button type="link">{item}</Button>
              </NavLink>
            ))
          }}
        />
        <Table.Column
          title="收费单号"
          dataIndex="billInvoiceId"
          key="billInvoiceId"
          render={(_, row) => {
            return (row.billInvoiceIdList || []).map(item => (
              <span key={item}>{item}</span>
            ))
          }}
        />
        <Table.Column title="总费用金额" dataIndex="sumPrice" key="sumPrice" render={sumPrice => (sumPrice === null || sumPrice === undefined ? '' : sumPrice/100)} />
        <Table.Column
          title="订单状态"
          dataIndex="orderStatus"
          key="orderStatus"
          render={(_, row) => StatusDict[row.orderStatus]}
        />
        <Table.Column title="缴费人手机号" dataIndex="payPhone" key="payPhone" />
        <Table.Column title="缴费备注" dataIndex="payRemark" key="payRemark" />
        <Table.Column title="缴费方式" dataIndex="payType" key="payType" render={payType => PayTypeDict[payType]}/>
        <Table.Column title="订单生成时间" dataIndex="createTime" key="createTime" />
        <Table.Column title="缴费完成时间" dataIndex="updateDate" key="updateDate" />
      </List>

    </div>
  )
}