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

import React, { useRef, useState, useEffect } from 'react'
import { Spin, Form, Input, Divider, Button, Row, Col, Popconfirm } from 'antd'
import router from 'umi/router'
import NavLink from 'umi/navlink'
import { fetch, fetchList, apis } from '@/utils/request'
import Search from '../../components/Search'
import List from '../../components/List'


const Condition = props => {
  return (    
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator } = form

        return (
          <>
            <Form.Item label="收费组编号">
            {
              getFieldDecorator('billId')(<Input />)
            }
            </Form.Item>
            <Form.Item label="收费组名">
            {
              getFieldDecorator('billName')(<Input />)
            }
            </Form.Item>
            <Form.Item label="收费组说明">
            {
              getFieldDecorator('billExplain')(<Input />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

const TableList = props => {
  const columns = [
    {
      title: '收费组编号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
    },
    {
      title: '收费组名称',
      dataIndex: 'billName',
      key: 'billName',
    },
    {
      title: '收费组说明',
      dataIndex: 'billExplain',
      key: 'billExplain',
    },
    {
      title: '应缴户数',
      dataIndex: 'payTotalNum',
      key: 'payTotalNum',
    },
    {
      title: '已缴户数',
      dataIndex: 'payedNum',
      key: 'payedNum',
    },
    {
      title: '未缴户数',
      dataIndex: 'unpayedNum',
      key: 'unpayedNum',
    },
    {
      title: '收费组状态',
      key: 'billStatus',
      render: (t, row) => {
        switch (row.billStatus) {
          case '0':
            return '正在收费'
          case '1':
            return '收费完成'
          case '2':
            return '草稿'
          default:
            return '异常'
        }
      }
    },
    {
      title: '发布时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: dt => (dt || '').substr(0, 16)
    },
    {
      title: '截止时间',
      dataIndex: 'endDate',
      key: 'endDate',
      render: dt => (dt || '').substr(0, 16)
    },
    {
      title: '操作',
      key: 'action',
      render: (_, row) => {
        return (
          <span>
            <Button type="link" size="small" onClick={() => props.onDetail(row)}>详情</Button>
            <Divider type="vertical" />
            <Popconfirm
              title="确认删除当前记录?"
              onConfirm={() => props.onDeleteRow(row)}
              okText="Yes"
              cancelText="No"
            >
              <Button type="link" size="small">删除</Button>
            </Popconfirm>
          </span>
        )
      }
    },
  ]

  return (
    <List
      {...props}
      columns={columns}
      rowKey="id"
    />
  )
}

const FetchBillList = fetchList(apis.bill.fetchBillList)
const deleteBillBeach = fetch(apis.bill.deleteBillBeach)

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 handleQuery = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1
    })
  }

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

  const handleDetail = row => {
    if (row.billStatus === '2') {
      router.push(`/bill/management/edi?id=${row.billId}`)
    } else {
      router.push(`/bill/management/info?id=${row.billId}`);
    }
  }

  const handleDeleteRow = row => {
    setLoading(true)
    deleteBillBeach({ data: [row.id] }).then(res => {
      setLoading(false)
      getListData()
    })
  }

  useEffect(() => {
    setLoading(true)
    FetchBillList(queryParams).then(res => {
      console.log(res,"2323")
      const {list, ...pagi} = res[1]
      setListData(list)
      setPagination(pagi)
      setLoading(false)
    })
  }, [queryParams])

  return (
    <div>
      <Condition onReset={handleQuery} onSearch={handleQuery} />
      <div style={{ margin: '24px 0' }}>
        <NavLink to={`/property/bill/management/add`}>
          <Button type="primary">添加</Button>
        </NavLink>
      </div>
      <Spin spinning={loading}>
        <TableList
          dataSource={listData}
          pagination={pagination}
          onPageChange={handlePageChange}
          onDetail={handleDetail}
          onDeleteRow={handleDeleteRow}
        />
      </Spin>
    </div>
  )
}