GHHub/src/views/invoice/Index.jsx

import { NavLink } from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, DatePicker,Typography,App,Steps } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import { formatDate,isNotEmpty } from "@/utils/commons";
import { AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from '@ant-design/icons';

const { Title } = Typography;

function Index() {

    const { invoiceStore } = useStore();
    const { invoiceList ,invoicePage } = invoiceStore;
    const [groupNo, onGroupNoChange] = useState('');
    const [arrivalDateRange, onDateRangeChange] = useState([]);
    const [dataLoading, setDataLoading] = useState(false);
    const { notification } = App.useApp();


    const invoiceListColumns = [
        {
          title: '团名',
          dataIndex: 'GroupName',
          key: 'GroupName',
        },
        {
          title: '离团时间',
          dataIndex: 'GetGDate',
          key: 'GetGDate',
          render:(text,record) =>formatDate(new Date(text))
        },
        {
          title: '接团时间',
          key: 'LeftGDate',
          dataIndex: 'LeftGDate',
          render:(text,record) => isNotEmpty(text)?formatDate(new Date(text)):""
        },
        {
          title: '人数',
          key: 'PersonNum',
          dataIndex: 'PersonNum'
        },
        {
          title: '团总额',
          key: 'AllMoney',
          dataIndex: 'AllMoney'
        },
        {
            title: '填表时间',
            key: 'GMD_FWks_LastEditTime',
            dataIndex: 'GMD_FWks_LastEditTime',
            render:(text,record) => isNotEmpty(text)?formatDate(new Date(text)):""
          },
          {
            title: '填表人',
            key: 'GMD_FillWorkers_Name',
            dataIndex: 'GMD_FillWorkers_Name'
          },
          {
            title: '账单状态',
            key: 'status',
            render:BillStatus
          },
        {
          title: 'Action',
         key: 'action',
         render:(text, record) => <NavLink to={`/invoice/detail/${record.key}/${record.gmd_gri_sn}`}>Details</NavLink>,
        }
      ];

    function BillStatus(text,record){
        // if (record.GMD_Dealed){
        //     return  "已审核";
        // }else if (record.GMDFillworkers_SN<1){  
        //     return "未填写";
        // }else if (record.VRequestVerify){
        //     return "未审核";
        // }else{
        //     return "未提交";
        // }
       let FKState = record.FKState-1
       return <Steps
            current={FKState}
            initial={1}
            items={[
            {
                title: '提交',
                //status: 'finish',
                icon: <EditOutlined />,
            },
            {
                title: '顾问',
               // status: 'finish',
                icon: <SolutionOutlined />,
            },
            {
                title: '财务',
                //status: 'process',
                icon: <AuditOutlined />,
            },
            {
                title: 'Done',
                //status: 'wait',
                icon: <SmileOutlined />,
            },
            ]}
        />

    }

    const onSearchClick = (current = 1) => {
        setDataLoading(true);
        invoiceStore.fetchInvoiceList(current, 0, groupNo, arrivalDateRange[0], arrivalDateRange[1], 1)
            .catch(ex => {
                notification.error({
                    message: `Notification`,
                    description: ex.message,
                    placement: 'top',
                    duration: 4,
                });
            })
            .finally(() => {
                setDataLoading(false);
            });
    }

    return (

        <Space direction="vertical" style={{ width: '100%' }}>
            <Title level={3}>账单管理</Title>
            <Row gutter={{ md: 24 }}>
                <Col span={4}>
                    <Input placeholder="团名" onChange={(e) => { onGroupNoChange(e.target.value) }} />
                </Col>
                <Col span={6}>
                    <Space direction="horizontal">
                        Date
                        <DatePicker.RangePicker
                            allowClear={false}
                            inputReadOnly={true}
                            placeholder={['Start', 'End']}
                            onChange={(date, dateRange) => { onDateRangeChange(dateRange) }}
                        />
                    </Space>
                </Col>
                <Col span={14}>
                    <Button type='primary' onClick={() => onSearchClick()} loading={dataLoading}>Search</Button>
                </Col>
            </Row>
            <Row>
                <Col span={24}>
                    <Table
                    bordered
                    loading={dataLoading}
                    pagination={{
                        position: ['bottomCenter'],
                        current: invoicePage.current,
                        pageSize: invoicePage.size,
                        total: invoicePage.total,
                        simple: true
                    }}
                    onChange={(pagination, filters, sorter, extra) => {onSearchClick(pagination.current);}}
                    columns={invoiceListColumns} dataSource={toJS(invoiceList)}
                    />
                </Col>
            </Row>
        </Space>

    )

}

export default observer(Index);