fe_service_ebtp_frontend/src/pages/VideoMonitor/Post/index.tsx

import { isNotEmpty } from '@/utils/CommonUtils';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Button, Spin, message } from 'antd';
import React, { useRef, useState } from 'react';
import { useHistory } from 'umi';
import ViewModal from '../ViewModal';
import { getPage } from '../service';

interface ViewDetailsProps {
    entity?: {
        projectName?:string|null,
        projectNumber?:string|null,
    } | null,
    visibleDefault?:boolean| false,
}
/**
 * 事后监督列表
 * @returns 
 */
const PostSupervision: React.FC<{}> = () => {

    const [spin, spinSet] = useState<boolean>(false);
    const [visible, setVisible] = useState<boolean>(false);
    const [record, setRecord] = useState<any[]>([]);
    //查询分页数据
    const [pageData, pageDataSet] = useState<any>({
        pageNo: 1,
        pageSize: 10
    });
    const history = useHistory();
    const ref = useRef<ActionType>();

    //查看详情
    const viewDetails = (record: any) => {
        setVisible(true);
        setRecord(record);
    }

    //关闭
    const closeViewDetails = () => {
        setVisible(false);
    }

    //评标监控回看
    function reviewMonitor(record: any): void {
        message.warn('功能开发中....');
    }

    const columns: ProColumns<any>[] = [

        {
            valueType: 'index',
            align: 'center',
            hideInSearch: true,
        },
        {
            title: '项目名称',
            align: 'center',
            dataIndex: 'projectName',
            width: '20%',
            hideInSearch: false,
        },
        {
            title: '项目编号',
            align: 'center',
            dataIndex: 'projectNumber',
            hideInSearch: true,
        },
        {
            title: '标段',
            align: 'center',
            dataIndex: 'sectionName',
            hideInSearch: true,
        },
        {
            title: '评审室名称',
            align: 'center',
            dataIndex: 'reviewRoomName',
            hideInSearch: false,
            width: '10%',
        },
        {
            title: '预计评标开始时间',
            align: 'center',
            dataIndex: 'startTime',
            hideInSearch: true,
            width: '15%',
        },
        {
            title: '预计评标结束时间',
            align: 'center',
            dataIndex: 'endTime',
            hideInSearch: true,
            width: '9.5%',
        },
        {
            title: '状态',
            align: 'center',
            dataIndex: 'state',
            hideInSearch: true,
            width: '4.5%',
            valueEnum: {
                0: {
                    text: '未开始'
                },
                1: {
                    text: '评标中'
                },
                2: {
                    text: '已结束'
                },
            }
        },
        {
            title: '操作',
            align: 'center',
            valueType: 'option',
            width: '10%',
            render: (_: any, record: any) =>
            (
                <>
                    <Button
                        key="viewDetails"
                        type="text"
                        onClick={() =>
                            viewDetails(record)
                        }
                    >
                        查看详情
                    </Button>
                    <Button
                        key="reviewMonitor"
                        type="text"
                        onClick={() =>
                            reviewMonitor(record)
                        }
                    >
                        评标监控回看
                    </Button>
                </>
            )
        },
    ]

    return (
        <Spin spinning={spin}>
            <div className="zjl-entrust confirm">
                <ProTable
                    columns={columns}
                    options={false}
                    bordered={false}
                    size='small'
                    actionRef={ref}
                    search={{ labelWidth: 'auto', span: 6 }}
                    loading={false}
                    request={async (params) => {
                        // spinSet(true);
                        // return await getPage({
                        //     ...params,
                        //     basePageRequest: { pageNo: pageData.pageNo, pageSize: pageData.pageSize },
                        // }).then((res) => {
                        //     const result = {
                        //         data: res.data.records,
                        //         total: res.data.total,
                        //         success: res.success,
                        //         pageSize: res.data.size,
                        //         current: res.data.current
                        //     }
                        //     return result;
                        // }).finally(() => {
                        //     isNotEmpty(window.location.search) && history.push(window.location.pathname);
                        //     spinSet(false);
                        // })
                        return {data:[{projectName: '2022年中国联通集团大厦A1913会议室智能化改造项目',
                                      projectNumber: 'SS25102022000211',
                                      sectionName: '标段一',
                                      reviewRoomName: '集团第一评审室',
                                      state : 2,
                                      startTime : '2022-07-13 12:30',
                                      endTime : '2022-07-13 12:30'}],
                                total:1,
                                pageSize:10,
                                current:1}
                                
                        }
                    }
                    pagination={{
                        defaultPageSize: 10,
                        pageSizeOptions: [10, 20, 30, 50],
                        defaultCurrent: 1,
                        size: "small",
                        showSizeChanger: true,
                        onChange: (page, pageSize) => pageDataSet({ pageNo: page, pageSize: pageSize }),
                        onShowSizeChange: (current, size) => pageDataSet({ pageNo: current, pageSize: size }),
                    }}
                    onReset={() => { pageDataSet({ pageNo: 1, pageSize: 10 }) }}
                    rowKey={"id"}
                />
            </div>
            <ViewModal modalVisible = {visible} onCancel = {()=> closeViewDetails()} data = {record}/>
        </Spin>
    )
}
export default PostSupervision;