内容
.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: '创建者名称' ,
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: '更新者名称' ,
dataIndex: 'updateUserName' ,
ellipsis: true ,
width: 120 ,
} ,
{
title: '更新时间' ,
dataIndex: 'updateTime' ,
ellipsis: true ,
width: 120 ,
render: ( 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: 10 px;
}
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)
}
}