import React from ‘react‘; import {connect} from "react-redux" import {bindActionCreators} from ‘redux‘; import request from ‘@src/util/util.js‘; import {Table, DatePicker,Layout, Row, Col, Select, Button, Icon, Input} from ‘antd‘; const { MonthPicker, RangePicker, WeekPicker } = DatePicker; const {Header,Content} = Layout; const {Option} = Select; function createTableConfig () { const columns = [{ title: ‘序号‘, dataIndex: ‘no‘, },{ title: ‘ID‘, dataIndex: ‘uid‘, }, { title: ‘注册类型‘, dataIndex: ‘type‘, }, { title: ‘来源‘, dataIndex: ‘isMobile‘, }, { title: ‘审核状态‘, dataIndex: ‘status‘, }, { title: ‘昵称‘, dataIndex: ‘username‘, }]; let table = { columns, bordered: true, pagination: { showSizeChanger: true } } return table; } class Welcome extends React.Component{ constructor(props) { super(props); let searchParm = { page:1, limit:10, registerType:-1, filter:0, keyword:‘‘, verifyStatus:-1, startTime:‘‘, endTime:‘‘ } let tableData = { dataList:{ list:[], totalCount:0 } } this.state = { ...searchParm, ...tableData, dateTime:‘‘, } } handleChangeTimeMt(date, dateString) { this.setState({ startTime:dateString[0], endTime:dateString[1], dateTime:date }) } verifyStatusMt (option) { this.setState({ verifyStatus:option }) } changeInputValMt (el) { this.setState({ keyword:el.target.value }) } getTableDataMt (isInitPage) { if(!isInitPage){//搜索初始化分页参数 this.setState({ page:1, limit:10, }) } let resolve = () => { let parm = ‘/member/list‘; parm += ‘?page=‘+this.state.page, parm += ‘&limit=‘+this.state.limit, parm += ‘&verifyStatus=‘ +this.state.verifyStatus; parm += ‘®isterType=‘ +this.state.registerType; parm += ‘&filter=‘ +this.state.filter; parm += ‘&keyword=‘ +this.state.keyword; parm += ‘&startTime=‘ +this.state.startTime; parm += ‘&endTime=‘ +this.state.endTime; request.get(parm) .then(res => { this.setState({ dataList: { list:res.data.list, totalCount:res.data.totalCount } }) }) } setTimeout(resolve) } changeTableData (isShowSize, page, pageSize) { this.setState({ page:page, limit:pageSize, }) setTimeout(()=>{ this.getTableDataMt(true) }) } clearKeywordsMt () { this.setState({ keyword:‘‘ }) } componentWillMount(){ this.getTableDataMt() } render(){ let welcomeStyle = { position:‘relative‘ } let headStyle = { padding:‘0 20px‘, lineHeight:‘64px‘ } let contStyle = { padding:‘20px‘ } let headPointStyle = { marginLeft: ‘20px‘, marginRight: ‘10px‘ } let headInputStyle = { display: ‘inline-block‘, width: ‘160px‘, marginRight: ‘10px‘ } let tableConfig = createTableConfig.call(this); tableConfig.dataSource = this.state.dataList.list; let pagination = tableConfig.pagination; let {page, limit} = this.state; pagination.onChange = this.changeTableData.bind(this, false); pagination.onShowSizeChange = this.changeTableData.bind(this, true); pagination.total = this.state.dataList.totalCount; pagination.current = page; pagination.pageSize = limit; pagination.showTotal = (total, range) => ("筛选结果:" + total); return ( <div className="welcome" style={welcomeStyle}> {/* 搜索区域 */} <Content style={headStyle}> <RangePicker onChange={this.handleChangeTimeMt.bind(this)} value={this.state.dateTime}/> <span style={headPointStyle}>审核状态</span> <Select defaultValue={-1} value={this.state.verifyStatus} onSelect={this.verifyStatusMt.bind(this)}> <Option value={-1}>全部</Option> <Option value={1}>待审核</Option> <Option value={2}>已通过</Option> <Option value={3}>已拒绝</Option> </Select> <span style={headPointStyle}> </span> <div style={headInputStyle}> <Input value={this.state.keyword} onInput={this.changeInputValMt.bind(this)} prefix={<Icon type=‘search‘/>} suffix={<Icon type=‘close-circle‘ onClick={this.clearKeywordsMt.bind(this)}/>}/> </div> <Button onClick={this.getTableDataMt.bind(this,false)} className=‘btnStyle‘ style={{marginRight: ‘10px‘}}>搜索</Button> </Content> {/* 列表区域 */} <Content style={contStyle}> <Table {...tableConfig} rowKey={record => record.uid}/> </Content> </div> ) } } export default (Welcome)
原文地址:https://www.cnblogs.com/zhujiasheng/p/9200594.html
时间: 2024-10-13 18:04:29