react-列表查询

内容

.tsx

import React, { useState } from "react";
import {
    Table,
    Form,
    Select,
    DatePicker,
    Button,
    Row,
    Col
} from 'antd';
import moment from "moment"
import styles from "./importlogs.scss";
import ImportlogsData from "../../service/importlogsData"
import { observationTowerList, powerPlantList } from "./importlogsJson"

import { TableRowSelection, ColumnsType, TableCurrentDataSource, SorterResult, GetPopupContainer, TablePaginationConfig, SortOrder, TableLocale, FilterValue } from 'antd/lib/table/interface';
interface columsTypes {
    title?: string;
    dataIndex?: string;
    align?: string;
    key?: string;
    ellipsis?: boolean;
    width?: number;
    fixed?: string;
    render?: any;
}
interface searchFormInt {
    importState: string | undefined,
    operationModule: string | undefined,
}

type StateType = {
    searchForm: searchFormInt,
    powerPlantList: Array<any>,
    observationTowerList: Array<any>,
    loading: boolean,
    tableData: Array<any>,
    pagination: any,
};
type propType = {
};
export default class importlogs extends React.Component<propType, StateType> {
    //接口调取
    private request: ImportlogsData;
    constructor(props) {
        super(props);
        this.request = new ImportlogsData();
        this.state = {
            searchForm: {
                importState: undefined,
                operationModule: undefined,
            },
            powerPlantList: [],
            observationTowerList: [],
            loading: false,
            tableData: [],
            //分页
            pagination: {
                current: 1,
                pageSize: 10,
                total: 0,
                showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
            },
        };
        this.handleTableChange = this.handleTableChange.bind(this);
    }
    //状态下拉框
    async importStateDetailList() {
        this.setState({
            powerPlantList: powerPlantList
        }, () => {
        })
        console.log(this.state.powerPlantList, '1111111111')
    }
    //操作模块下拉框
    async observationTowerList() {
        this.setState({
            observationTowerList: observationTowerList
        }, () => {
        })
    }
    //搜索
    search = () => {
        const { pagination } = this.state
        this.setState({
            pagination: Object.assign(pagination, { current: 1 })
        }, () => {
        })
        console.log(this.state.searchForm)
        this.getSynchronizeDataLogPage(this.state.searchForm)
    }
    async getSynchronizeDataLogPage(params) {
        this.setState({
            loading: true
        })
        let query = params ? JSON.parse(JSON.stringify(params)) : {}
        console.log(query, "query")
        const res = await this.request.getSynchronizeDataLogPage({ ...query, current: this.state.pagination.current, size: this.state.pagination.pageSize })
        this.setState({
            tableData: res.data.records,
            pagination: Object.assign(this.state.pagination, { total: res.data.total }),
            loading: false
        }, () => {
        })
        console.log(res.data.total, "res.data.total")
    }
    searchFormChange(e, type) {
        console.log(e)
        const { searchForm } = this.state
        let obj = searchForm
        //赋值
        obj[type] = e
        this.setState({
            searchForm: obj,
        }, () => {
        })
    }
    //分页
    handleTableChange(paginations) {
        console.log(paginations, '分页分页分页')
        this.setState({
            pagination: Object.assign(this.state.pagination, paginations)
        }, () => {
            this.getSynchronizeDataLogPage(this.state.searchForm)
        })
    }
    //重置
    onReset = () => {
        let obj = {
            importState: undefined,
            operationModule: undefined,
        }
        let paginations = {
            current: 1,
            pageSize: 10,
            total: 0,
            showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
        }
        this.setState({
            searchForm: obj,
            pagination: paginations,
        }, () => {
            this.getSynchronizeDataLogPage(this.state.searchForm)
        })
    };

    componentDidMount() {
        this.getSynchronizeDataLogPage(this.state.searchForm)
        this.importStateDetailList()
        this.observationTowerList()
    }
    render() {
        const { searchForm, powerPlantList, observationTowerList, loading } = this.state
        const columns = [
            {
                title: '序号',
                dataIndex: 'key',
                render: (val, record, indx) => {
                    return <div style={{ width: '100%', height: "100%" }}>{indx + 1} </div>
                },
                ellipsis: true,
                width: 90,

            },
            {
                title: 'id',
                dataIndex: 'id',
                ellipsis: true,
                width: 120,
            },
            // {
            //     title: '创建者id',
            //     dataIndex: 'createUserId',
            //     ellipsis: true,
            //     width: 120,
            // },
            {
                title: '创建者名称',
                dataIndex: 'createUserName',
                ellipsis: true,
                width: 120,
            },
            {
                title: '状态',
                dataIndex: 'importState',
                ellipsis: true,
                width: 120,
            },
            {
                title: '操作模块',
                dataIndex: 'operationModule',
                ellipsis: true,
                width: 120,
            },
            {
                title: '创建时间',
                dataIndex: 'createTime',
                ellipsis: true,
                width: 120,
                render: (val, record) => {
                    return <div>{val ? moment(val).format("YYYY-MM-DD") : ""} </div>
                }
            },
            // {
            //     title: '更新者id',
            //     dataIndex: 'updateUserId',
            //     ellipsis: true,
            //     width: 120,
            // },
            {
                title: '更新者名称',
                dataIndex: 'updateUserName',
                ellipsis: true,
                width: 120,
            },
            {
                title: '更新时间',
                dataIndex: 'updateTime',
                ellipsis: true,
                width: 120,
                render: (val, record) => {
                    // console.log(val, record)
                    return <div>{val ? moment(val).format("YYYY-MM-DD") : ""} </div>
                }
            }
        ] as ColumnsType<columsTypes>
        //搜索条件
        const FormSizeDemo = () => {
            return (
                <Form
                    name="nest-messages"
                    labelCol={{ span: 7 }}
                    wrapperCol={{ span: 16 }}
                >
                    <Row>
                        <Col span={20}>
                            <Row>
                                <Col span={8}>
                                    <Form.Item label="导入状态">
                                        <Select placeholder="请选择类型" style={{ width: '100%' }} value={searchForm.importState} onChange={(event) => this.searchFormChange(event, "importState")}>
                                            {
                                                powerPlantList.map(item => {
                                                    return <Select.Option value={item.code}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select>
                                    </Form.Item>
                                </Col>
                                <Col span={8}>
                                    <Form.Item label="操作模块">
                                        <Select placeholder="请选择类型" style={{ width: '100%' }} value={searchForm.operationModule} onChange={(event) => this.searchFormChange(event, "operationModule")}>
                                            {
                                                observationTowerList.map(item => {
                                                    return <Select.Option value={item.code}>{item.name}</Select.Option>
                                                })
                                            }
                                        </Select>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Col>
                        <Col span={4} className={styles.search_button}>
                            <Row>
                                <Col span={12}>
                                    <Form.Item>
                                        <Button type="primary" onClick={this.search}>查询</Button>
                                    </Form.Item>
                                </Col>
                                <Col span={12}>
                                    <Form.Item className={styles.search_buttonRight}>
                                        <Button onClick={this.onReset}>重置</Button>
                                    </Form.Item>
                                </Col>
                            </Row>
                        </Col>
                    </Row>
                </Form>
            );
        };
        return <div style={{ padding: '0 20px', minHeight: 280, background: 'white', borderRadius: '10px', marginRight: 0 }}>
            <FormSizeDemo />
            <Table columns={columns} dataSource={this.state.tableData} pagination={this.state.pagination} loading={loading} onChange={this.handleTableChange} scroll={{ x: 'max-content', y: 500 }} id="tableExcel"></Table>
        </div>
    }
}

.scss

.search_button {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap
}
.search_buttonRight{
    margin-left:10px;
}

json.ts

//状态
const powerPlantList = [
    {
        name: "成功",
        code: "SUCCESS"
    },
    {
        name: "失败",
        code: "FALSE"
    },
    {
        name: "同步中",
        code: "ONGOING"
    }
]
//操作模块
const observationTowerList = [
    {
        name: "地震",
        code: "EARTHQUAKE"
    },
    {
        name: "气象灾害",
        code: "METEOROLOGICAL_DISASTER"
    },
    {
        name: "未来七天预测",
        code: "FUTURE_WEATHER_FORECAST"
    },
    {
        name: "城市信息",
        code: "NATION_CITY"
    },

    {
        name: "当前天气",
        code: "NOW_WEATHER_FORECAST"
    },
    {
        name: "台风详情",
        code: "TYPHOON_DETAIL"
    },
    {
        name: "台风预测",
        code: "TYPHOON_FORECAST"
    },
    {
        name: "台风",
        code: "TYPHOON"
    }
]
export {
    powerPlantList,
    observationTowerList,
}

data.ts 接口

import BaseRequest from "./BaseRequest";
import { catchError } from 'rxjs/operators';
import { Observable, of } from 'rxjs';
import { message, Button, Space } from 'antd';
import { baseModel } from '../model/BaseModel';
import { webchannelMap } from "../webchannel/webChannelInit";
import { formatParams } from "../unitl/formatData";

export default class ImportlogsData {

    private http: BaseRequest;
    constructor() {
        this.http = new BaseRequest();
    }
    //查询符合条件的列表数据
    public async getSynchronizeDataLogPage(paramsObj?: Object) {
        let paramsObjs = formatParams(paramsObj) //去空
        let params = new URLSearchParams();//传参
        for (let key in paramsObjs) {
            params.append(key, paramsObj[key])
        }
        console.log(params.toString(), "整理结果")
        return this.http.post<baseModel>('/ewl/met/importDataLog/getImportDataLogPage', params, null).pipe(
            catchError(err => this.handleError('getTaifengData()', err))
        ).toPromise();
    }
  
    private handleError(method: string, res?: any): Observable<any> {
        if (res.ok == false) {
            console.error(method, res);
        } else {
            const bs: BroadcastChannel = webchannelMap.webchannels.get("request");
            bs.postMessage(res);
            console.log(method, res);
        }
        return of(null)
    }
}