pc-admin/src/pages/examine/index.jsx

import React, { useRef, useState } from 'react'
import moment from 'moment';
import { history } from 'umi';
import { DatePicker, Button } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import PageTable from '@/components/PageTable'
import { getAuditList } from '@/services/application'


const { RangePicker } = DatePicker;

const formatterTime = (val) => {
  return val ? moment(val).format('YYYY-MM-DD HH:mm') : '';
};

export default (props) => {
  const actionRef = useRef();
  const [applyStart, setStart] = useState()
  const [applyEnd, setEnd] = useState()
  const [auditStart, setAuditStart] = useState()
  const [auditEnd, setAuditEnd] = useState()
  const goDetail = (id) => {
    history.push(`examine/detail.jsx?id=${id}`);
  }
  const handelApplyDateChange = (date, dateStrings) => {
    setStart(dateStrings[0])
    setEnd(dateStrings[1])
  }
  const handelVerifyDateChange = (date, dateStrings) => {
    setAuditStart(dateStrings[0])
    setAuditEnd(dateStrings[1])
  }
  const handleReset = () => {
    setStart()
    setEnd()
    setAuditStart()
    setAuditEnd()
  }
  const columns = [
    {
      title: '犬主',
      dataIndex: 'personName',
      key: 'personName',
      search: true,
    },
    {
      title: '犬名',
      dataIndex: 'petName',
      key: 'petName',
      search: false,
    },
    {
      title: '申请时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (t) => formatterTime(t),
      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelApplyDateChange} />
    },
    {
      title: '支付状态',
      dataIndex: 'payStatus',
      key: 'payStatus',
      search: false,
      render: (_, record) => {
        return record.payStatus === 0
          ? '待支付'
          : record.payStatus === 1
            ? '支付中'
            : record.payStatus === 2
              ? '已支付'
              : record.payStatus === 3
                ? '已退款' : ''
      },
    },
    {
      title: '审核状态',
      dataIndex: 'verifyStatus',
      key: 'verifyStatus',
      search: true,
      render: (_, record) => {
        return record.verifyStatus === 0
          ? '待审核'
          : record.verifyStatus === 1
            ? '审核通过'
            : record.verifyStatus === 2
              ? '审核驳回' : ''
      },
      valueType: 'select',
      valueEnum: {
        0: { text: '待审核' },
        1: { text: '审核通过' },
        2: { text: '审核驳回' },
      },
    },
    {
      title: '审核人',
      dataIndex: 'verifyUserName',
      key: 'verifyUserName',
      search: false,
    },
    {
      title: '审核时间',
      dataIndex: 'verifyDate',
      key: 'verifyDate',
      render: (t) => t != '-' ? formatterTime(t) : '-',
      renderFormItem: (_, record) => <RangePicker placeholder={['开始日期', '结束日期']} format='YYYY-MM-DD' onChange={handelVerifyDateChange} />
    },
    {
      title: '操作',
      valueType: 'option',
      width: 160,
      render: (_, record) => [
        <Button key={1} style={{ padding: 0 }} type="link"
          onClick={() => goDetail(record.applyId)}
        >
          详情
        </Button>
      ],
    },
  ]


  return (
    <PageHeaderWrapper>
      <PageTable
        actionRef={actionRef}
        columns={columns}
        request={getAuditList}
        params={{ applyStart, applyEnd, auditStart, auditEnd }}
        options={false}
        onReset={handleReset}
        rowKey="applyId"
      />
    </PageHeaderWrapper>
  )
}