zy-asrs-master.git

 
import React, { useState, useRef, useEffect } from 'react'; 
import { Button, message, Modal, Tag } from 'antd'; 
import { 
    FooterToolbar, 
    PageContainer, 
    ProTable, 
    LightFilter, 
} from '@ant-design/pro-components'; 
import { FormattedMessage, useIntl } from '@umijs/max'; 
import { PlusOutlined, ExportOutlined } from '@ant-design/icons'; 
import Http from '@/utils/http'; 
import Edit from './components/edit' 
import { TextFilter, SelectFilter, DatetimeRangeFilter, LinkFilter } from '@/components/TableSearch' 
import { repairBug } from '@/utils/common-util'; 
 
const TABLE_KEY = "pro-table-operationRecord"; 
 
const resultMap = { 
    0: { 
        color: '#cd201f', 
        text: '失败', 
    }, 
    1: { 
        color: '#3b5999', 
        text: '成功', 
    }, 
}; 
 
const handleExport = async (intl) => { 
    const hide = message.loading(intl.formatMessage({ id: 'page.exporting', defaultMessage: '正在导出' })); 
    try { 
        const resp = await Http.doPostBlob('api/operationRecord/export'); 
        const blob = new Blob([resp], { type: 'application/vnd.ms-excel' }); 
        window.location.href = window.URL.createObjectURL(blob); 
        message.success(intl.formatMessage({ id: 'page.export.success', defaultMessage: '导出成功' })); 
        return true; 
    } catch (error) { 
        message.error(intl.formatMessage({ id: 'page.export.fail', defaultMessage: '导出失败，请重试' })); 
        return false; 
    } finally { 
        hide(); 
    } 
}; 
 
 
const Main = () => { 
    const intl = useIntl(); 
    const formTableRef = useRef(); 
    const actionRef = useRef(); 
    const [selectedRows, setSelectedRows] = useState([]); 
    const [modalVisible, setModalVisible] = useState(false); 
    const [currentRow, setCurrentRow] = useState(); 
    const [searchParam, setSearchParam] = useState({}); 
 
    useEffect(() => { 
 
    }, []); 
 
    const columns = [ 
        { 
            title: intl.formatMessage({ 
                id: 'page.table.no', 
                defaultMessage: 'No' 
            }), 
            dataIndex: 'index', 
            valueType: 'indexBorder', 
            width: 48, 
        }, 
        { 
            title: '接口名', 
            dataIndex: 'namespace', 
            valueType: 'text', 
            hidden: false, 
            copyable: true, 
            filterDropdown: (props) => <TextFilter 
                name='namespace' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '接口地址', 
            dataIndex: 'url', 
            valueType: 'text', 
            hidden: false, 
            width: 180, 
            filterDropdown: (props) => <TextFilter 
                name='url' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '平台密钥', 
            dataIndex: 'appkey', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='appkey' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '时间戳', 
            dataIndex: 'timestamp', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='timestamp' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '客户端IP', 
            dataIndex: 'clientIp', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='clientIp' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '请求内容', 
            dataIndex: 'request', 
            valueType: 'text', 
            hidden: false, 
            ellipsis: true, 
            copyable: true, 
            filterDropdown: (props) => <TextFilter 
                name='request' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '响应内容', 
            dataIndex: 'response', 
            valueType: 'text', 
            hidden: false, 
            ellipsis: true, 
            copyable: true, 
            filterDropdown: (props) => <TextFilter 
                name='response' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '消耗时间', 
            dataIndex: 'spendTime', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='spendTime' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
            render: (_, record) => { 
                return <span><span style={{ fontWeight: 'bold' }}>{_}</span><span> ms</span></span> 
            } 
        }, 
        { 
            title: '异常内容', 
            dataIndex: 'err', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='err' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '结果', 
            dataIndex: 'result$', 
            valueType: 'text', 
            hidden: false, 
            width: 100, 
            filterDropdown: (props) => <SelectFilter 
                name='result' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
                data={[ 
                    { label: '成功', value: 1 }, 
                    { label: '失败', value: 0 }, 
                ]} 
            />, 
            render: (_, record) => { 
                const result = resultMap[record.result] 
                return <Tag color={result.color}>{result.text}</Tag> 
            }, 
        }, 
        { 
            title: '用户', 
            dataIndex: 'userId$', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <LinkFilter 
                name='userId' 
                major='user' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '添加时间', 
            dataIndex: 'createTime$', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <DatetimeRangeFilter 
                name='createTime' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
        { 
            title: '备注', 
            dataIndex: 'memo', 
            valueType: 'text', 
            hidden: false, 
            filterDropdown: (props) => <TextFilter 
                name='memo' 
                {...props} 
                actionRef={actionRef} 
                setSearchParam={setSearchParam} 
            />, 
        }, 
 
        { 
            title: '操作', 
            dataIndex: 'option', 
            valueType: 'option', 
            hidden: true, 
            render: (_, record) => [ 
            ], 
        }, 
    ]; 
 
    return ( 
        <PageContainer 
            header={{ 
                breadcrumb: {}, 
            }} 
        > 
            <div style={{ width: '100%', float: 'right' }}> 
                <ProTable 
                    key="operationRecord" 
                    rowKey="id" 
                    actionRef={actionRef} 
                    formRef={formTableRef} 
                    columns={columns} 
                    cardBordered 
                    scroll={{ x: 1300 }} 
                    dateFormatter="string" 
                    pagination={{ pageSize: 16 }} 
                    search={false} 
                    style={{ 
                        marginBottom: '20px' 
                    }} 
                    toolbar={{ 
                        search: { 
                            onSearch: (value) => { 
                                setSearchParam(prevState => ({ 
                                    ...prevState, 
                                    condition: value 
                                })); 
                                actionRef.current?.reload(); 
                            }, 
                        }, 
                        filter: ( 
                            <LightFilter 
                                onValuesChange={(val) => { 
                                }} 
                            > 
                            </LightFilter> 
                        ), 
                        actions: [ 
                            <Button 
                                key="export" 
                                onClick={async () => { 
                                    handleExport(intl); 
                                }} 
                            > 
                                <ExportOutlined /> 
                                <FormattedMessage id='page.export' defaultMessage='导出' /> 
                            </Button>, 
                        ], 
                    }} 
                    request={(params, sorter, filter) => 
                        Http.doPostPromise('/api/operationRecord/page', { ...params, ...searchParam }, (res) => { 
                            return { 
                                data: res.data.records, 
                                total: res.data.total, 
                                success: true, 
                            } 
                        }) 
                    } 
                    rowSelection={undefined} 
                    columnsState={{ 
                        persistenceKey: TABLE_KEY, 
                        persistenceType: 'localStorage', 
                        defaultValue: { 
                            appkey: { show: repairBug(TABLE_KEY, 'appkey', false) }, 
                            err: { show: repairBug(TABLE_KEY, 'err', false) }, 
                            timestamp: { show: repairBug(TABLE_KEY, 'timestamp', false) }, 
                            memo: { show: repairBug(TABLE_KEY, 'memo', false) }, 
                            option: { fixed: 'right', disable: true }, 
                        }, 
                        onChange(value) { 
                        }, 
                    }} 
                /> 
            </div> 
 
            <Edit 
                open={modalVisible} 
                values={currentRow || {}} 
                onCancel={ 
                    () => { 
                        setModalVisible(false); 
                        setCurrentRow(undefined); 
                    } 
                } 
                onSubmit={async (values) => { 
                    setModalVisible(false); 
                    setCurrentRow(undefined); 
                    if (actionRef.current) { 
                        actionRef.current.reload(); 
                    } 
                } 
                } 
            /> 
        </PageContainer> 
    ); 
}; 
 
export default Main;