antD 时间框清空

import React from 'react'
import { Layout, Row, Button, Table, DatePicker, Form, Col, Select, message, Modal } from 'antd'
import ModalCon from './addEdit'
import ReactEcharts from 'echarts-for-react'
import '../riverWater.less'
import { queryByPage, delFun } from '@api/RiverWater/reportProtect'
import { tempStcdList } from '@api/RiverWater/singleCompare'
import moment from 'moment'
const { Header, Content, Footer } = Layout
const FormItem = Form.Item
const Option = Select.Option
export interface IProps {

}

interface IState {
    columns?: any
    loading?: boolean
    tableData?: any
    pagination?: any
    height: number
    stcd?: any
    stnm?: any
    stcds: any
    treeData?: any
    selectedRowKeys?: any
    selectedRows?: any
    type: string
    isShow: boolean
    startTime: any
    endTime: any
    flagstartTime: any
    flagEndTime: any
    echartsOption?: any
    tableFTime: any
    flagNum?: any
    xAxisData: any
    seriesData: any
}

export default class StationInfo extends React.Component<IProps, IState> {

    constructor(props: IProps) {
        super(props)
        this.getStcdList()
        const stcd = sessionStorage.getItem('stcd')
    
        this.state = {
            tableFTime: '',
            xAxisData: [],
            seriesData: [],
            flagNum: 0,
            isShow: false,
            loading: true,
            tableData: [],
            height: 400,
            startTime: '',
            endTime: '',
            flagstartTime: '',
            flagEndTime: '',
            pagination: {
                showSizeChanger: true,
                showQuickJumper: true,
                current: 1,
                pageSize: 15,
                total: 0,
                showTotal: (total: any) => `共${total} 条`,
                pageSizeOptions: ['15', '30', '45']
            },
            stcd,
            stnm: '',
            stcds: [],
         
            treeData: [],
            selectedRowKeys: [],
            selectedRows: [],
            type: '',
            echartsOption: {},
            columns: [
                {
                    title: '测站编码',
                    dataIndex: 'stcd',
                    width: '8%',
                    align: 'center'
                },
                {
                    title: '测站名称',
                    dataIndex: 'stnm',
                    width: '10%',
                    align: 'center',
                    render: (value, row) => {
                        return (
                            <a href='javascript:;' onClick={this.handleClick.bind(this, row)}>{value}</a>
                        )
                    }
                },
                {
                    title: '时间',
                    dataIndex: 'tm',
                    width: '15%',
                    align: 'center'
                },
                {
                    title: '水位',
                    dataIndex: 'z',
                    width: '5%',
                    align: 'right'
                },
                {
                    title: '水量(m³)',
                    dataIndex: 'q',
                    width: '7%',
                    align: 'right'
                },
                {
                    title: '断面过水面积(m²)',
                    dataIndex: 'xsa',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '断面平均流速(m/s)',
                    dataIndex: 'xsavv',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '断面最大流速(m/s)',
                    dataIndex: 'xsmxv',
                    width: '13%',
                    align: 'right'
                },
                {
                    title: '河水特征码',
                    dataIndex: 'flwchrcd',
                    width: '8%',
                    align: 'center'
                },
                {
                    title: '水势',
                    dataIndex: 'wptn',
                    align: 'center',
                    width: '6%',
                }
               
            ]
        }
    }

    handleClick = (row: object) => {
        this.setState({
            isShow: true,
            type: 'detail',
            selectedRows: [row]
        })
    }

    getStcdList = () => {
        tempStcdList().then((res: any) => {
            if (res!.code! === 'CODE_0000') {
                const data = res.data
            
                sessionStorage.setItem('stcd', data[0].stcd)
                this.setState({
                    stcds: data,
                    stcd: data[0].stcd
                })
            }
        })
    }

   

    initEcharts = () => {
        const   { xAxisData, seriesData } = this.state
        // 绘制图表
        const option = {
            title: {
                text: '河道水情来报维护折线图',
                x: 'center',
                y: 'top',
                textAlign: 'left',
                top: 10,
                left: 'left'
            },
            tooltip: {
                trigger: 'axis'
            },
            // legend: {
            //     data: ['齐齐哈勒克', '坝上', '出库', '且末']
            // },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData
                }
            ],
            yAxis: [
                {
                    name: '水位(m)',
                    nameLocation: 'middle',
                    nameRotate: 90,
                    nameGap: 40,
                    nameTextStyle: {
                        fontSize: 13
                    }
                }
            ],
            series: [
                {
                    name: '水位',
                    type: 'line',                   
                    data: seriesData
                }
            ]
        }
        return option
    }
    componentDidMount = () => {
        const contentHeight = document.getElementById('js-page-content')!.offsetHeight
        this.setState({
            height: contentHeight - 450
        })
        const { stcd } = this.state
        this.getTableData(stcd, '', '')
    }
    getTableData = (stcd, startTime, endTime) => {
        const { pagination } = this.state
        const param = {
            stcd,
            page: 1, 
            rows: 1000,
            rvnm: '',
            startTime: startTime ? moment(startTime).format('YYYY-MM-DD HH:mm:ss') : '',
            endTime: endTime ? moment(endTime).format('YYYY-MM-DD HH:mm:ss') : '',
        }
        if (this.state.flagNum < 2) {
            queryByPage(param).then((res: any) => {
            //    console.log(res)
                if (res.code === 'CODE_0000') {
                    const xAxisData: any [] = []
                    const seriesData: any [] = []
                    res.data.records.map(item => {
                        xAxisData.push(item.tm)
                        seriesData.push(item.z)
                    })
                    this.setState({
                        tableData: res.data.records,
                        tableFTime: res.data.records.length ? res.data.records[0].tm : '',
                        loading: false,
                        flagNum: this.state.flagNum + 1,
                        xAxisData,
                        seriesData,
                        pagination: {
                            showSizeChanger: true,
                            showQuickJumper: true,
                            current: pagination.current,
                            pageSize: pagination.pageSize,
                            total: res.data.total,
                            showTotal: (total: any) => `共${total} 条`
                        }
                    }, () => {
                       
                        if (this.state.tableData.length) {
                            const { tableFTime } = this.state
                            const startT = moment(tableFTime).add(-12, 'hour').format('YYYY-MM-DD HH:mm:ss')
                            const endT = moment(tableFTime).add(12, 'hour').format('YYYY-MM-DD HH:mm:ss')
                            this.getTableData(stcd, startT, endT)
                            this.setState({
                                flagstartTime: startT,
                                flagEndTime: endT,
                                echartsOption: this.initEcharts()
                            })
                        }
                    })
                }
            })
        }
        
      
    }


    handleReset = (e) => {
        e.preventDefault()
        const stcd = sessionStorage.getItem('stcd')
        this.setState({
            stcd,
            startTime: '',
            endTime: ''
        })
    }

    handleTableChange = (pagination) => {
        this.setState({ pagination }, () => {
            const { stcd } = this.state
            this.getTableData(stcd, '', '')
        })
    }

    getQueryStnm = (e) => {
     
        this.setState({
            stcd: e
        })
       
    }

    onSelectChange = (selectedRowKeys, selectedRows) => {
        this.setState({
            selectedRowKeys,
            selectedRows
        })
    }

    setFn = () => {
        this.setState({
            isShow: false,
            selectedRowKeys: [],
            flagNum: 0
        }, () => {
            const { stcd, flagstartTime, flagEndTime } = this.state  
            this.getTableData(stcd, flagstartTime, flagEndTime)
        })
        
    }

    addBtn = () => {
        this.setState({
            isShow: true,
            type: 'add'
        })
    }

    editBtn = () => {
        if (this.state.selectedRowKeys.length === 1) {
            this.setState({
                isShow: true,
                type: 'edit'
            })
        } else {
            message.error('请选择一条数据进行编辑')
        }
    }

    delBtn = (e) => {
        e.preventDefault()
        const self = this
        const confirm = Modal.confirm
        const { selectedRowKeys } = this.state
        if (selectedRowKeys.length === 1) {
            confirm({
                title: '提示',
                content: '确认要删除?',
                okText: '确认',
                cancelText: '取消',
                onOk() {
                    self.delBtnFn()
                }
            })
        } else {
            message.warn('请选择一条数据')
        }
    }

    delBtnFn = () => {
      
        const { selectedRows } = this.state
        const param = {
            stcd: selectedRows[0].stcd,
            tm: selectedRows[0].tm
        }
        delFun(param).then((res: any) => {
          //  console.log(res)
            if (res) {
                message.success('删除成功', 3)
                this.setState({
                    selectedRowKeys: [],
                    flagNum: 1
                }, () => {
                    const { stcd, flagstartTime, flagEndTime } = this.state
                   
                    this.getTableData(stcd, flagstartTime, flagEndTime)
                })
               
            }
        })
       
    }
    onChangeStartTime = (value, dateString) => {
        const param = { value, dateString }
        this.setState({
            startTime:  param.dateString ? moment(param.dateString, 'YYYY-MM-DD HH:mm:ss') : ''  // 点击输入框清除按钮防止出错
        })
    }
    onChangeEndTime = (value, dateString) => {
       
        const param = { value, dateString }
        this.setState({
            endTime: param.dateString ? moment(param.dateString, 'YYYY-MM-DD HH:mm:ss') : ''
        })
    }
    // 查询
    getSelect = () => {
        this.setState({
            flagNum: 1
        }, () => {
            const { stcd, startTime, endTime } = this.state
            this.getTableData(stcd, startTime, endTime)
        })
    }
     // 设置开始日期不能选择的时间
    disabledStartDate = current => {
        if (this.state.endTime) {
            return current > Date.now() || current > new Date(this.state.endTime).getTime()
        } else {
            return current > Date.now()
        }
     }

    // 设置结束不能选择的时间
     disabledEndDate = current => {
        return current < new Date(this.state.startTime).getTime()  || current > Date.now()
      }
    render() {
        const { columns, pagination, loading, tableData, selectedRowKeys, stcds } = this.state
        const rowSelection = {
            loading: true,
            selectedRowKeys,
            onChange: this.onSelectChange
        }
        return (
            <Layout className='bodyClass'>
                <Form layout='inline' className='queryForm'>
                    <Row>
                        <Col sm={24} md={6} >
                        <FormItem label='测站名称'>
                           <Select value={this.state.stcd} style={{width: '100%'}} onChange={this.getQueryStnm}>
                                {
                                    stcds.map((item: any) => (
                                        <Option key={item.stcd}>{item.stnm}</Option>
                                    ))
                                }
                            </Select>
                            </FormItem>
                           
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label='开始时间' style={{ width: '100%' }}>
                               <DatePicker value={this.state.startTime} showTime placeholder='请选择开始时间' disabledDate={this.disabledStartDate} onChange={this.onChangeStartTime}  />
                               
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} >
                            <FormItem label='结束时间' style={{ width: '100%' }}>
                               <DatePicker value={this.state.endTime} showTime placeholder='请选择结束时间'  disabledDate={this.disabledEndDate} onChange={this.onChangeEndTime}  />
                            </FormItem>
                        </Col>
                        <Col sm={24} md={6} className='user_btn' >
                            <Button className='searchBtn' icon='search' onClick={this.getSelect}>查询</Button>
                            <Button className='resetBtn' icon='reload' onClick={this.handleReset}>重置</Button>
                        </Col>
                    </Row>
                    {/* <Row>
                        <Col sm={24} md={6} >
                            <FormItem label='选择时间' style={{ width: '100%' }}>
                                <RangePicker style={{ width: '100%' }} format='YYYY-MM-DD' />
                            </FormItem>
                        </Col>
                    </Row> */}
                </Form>
                <Content className='contentLayout'>
                    <Header className='contentHeader'>
                        <Row>
                            <Button onClick={this.addBtn}>新增</Button>
                            <Button onClick={this.editBtn}>编辑</Button>
                            <Button onClick={this.delBtn}>删除</Button>
                        </Row>
                    </Header>
                    <Table
                        columns={columns}
                        rowKey='id'
                        pagination={pagination}
                        loading={loading}
                        dataSource={tableData}
                        rowSelection={rowSelection}
                        onChange={this.handleTableChange}
                        scroll={{ x: true, y: 200 }}
                        bordered
                    />
                    <ModalCon
                        isShow={this.state.isShow}
                        setFn={this.setFn}
                        type={this.state.type}
                        rowData={this.state.selectedRows![0]}
                    />
                </Content>
                <Footer className='contentLayout' style={{height: this.state.height}}>
                    <div id='histogram' className='containerDiv'>
                        {
                            tableData.length > 0 ? <ReactEcharts
                                option={this.state.echartsOption}
                                theme='clear'
                                style={{ width: '100%', height: '100%' }}
                            /> : 
                            <div style={{textAlign: 'center', display: 'flex', flexDirection: 'column', height: '100%'}}>
                                <h1 style={{fontSize: 20, fontWeight: 'bolder'}}>
                                    河道水情来报维护
                                </h1>
                                <div className='nodata' style={{flex: 1}}/>
                            </div>
                        }
                        
                    </div>
                </Footer>

            </Layout>
        )
    }
}

 

转载于:https://www.cnblogs.com/whlBooK/p/11540396.html

// 文件上传组件plannedWork // 当前最新的单个文件 const [plannedFile, setPlannedFile] = useState<UploadFile | null>(null); const [currentPlannedFile, setCurrentPlannedFile] = useState<File | null>(null); const [plannedMessage, setPlannedMessage] = useState<{ type: ‘success’ | ‘error’; content: string } | null>( null ); const [plannedError, setPlannedError] = useState(false); const propsPlanned: UploadProps = { // 确保最多只能选择一个文件 maxCount: 1, beforeUpload: (file) => { // 保存当前选择的文件对象 setCurrentPlannedFile(file); // 阻止默认的自动上传行为 return false; }, onChange: ({ file }) => { if (file.status === 'done') { // 更新到最新文件 setPlannedFile(file as unknown as UploadFile); } }, }; useEffect(() => { if (plannedMessage) { // 消息提示持续时间 const timer = setTimeout(() => { setPlannedMessage(null); }, 5000); return () => clearTimeout(timer); } }, [plannedMessage]); const handlePlannedUpload = async () => { if (!inputnum) { setPlannedMessage({ type: ‘error’, content: “请先输入月份” }); return; } if (!currentPlannedFile) { setPlannedMessage({ type: 'error', content: "请先选择文件" }); return; } const formData = new FormData(); formData.append('file', currentPlannedFile!); try { const response = await axiosPost( `/user/plannedWork/read?date=${inputnum}-01`, formData, t, "multipart/form-data" ); if (response.data.code !== 200) { setPlannedMessage({ type: 'error', content: "文件内容有误" }); setPlannedError(true) } else { setPlannedMessage({ type: 'success', content: "上传成功" }); setUp1(true); setPlannedError(false) // 清空已选文件 setPlannedFile(null); setCurrentPlannedFile(null); } } catch (error: any) { setPlannedMessage({ type: 'error', content: error.response?.data?.message || "上传失败", }); setPlannedError(true) } };实现在执行handlePlannedUpload后回到propsPlanned然后setCurrentPlannedFile(null)
最新发布
04-04
从你的描述来看,你是希望在 `handlePlannedUpload` 执行完毕后,将状态清空并触发文件上传组件的状态更新。以下是解决方案: --- ### 解决方案 为了让 `propsPlanned` 的配置能够感知到新的状态变化,并且可以设置 `setCurrentPlannedFile(null)` 来清除选择的文件,你需要对现有代码做一些调整。 #### 修改点分析 1. **`beforeUpload` 和 `onChange`** - `beforeUpload` 已经阻止了默认的自动上传行为。 - `onChange` 负责处理上传完成后的回调逻辑,但目前它只会在文件上传完成后更改 `plannedFile`。 2. **手动控制文件状态** - 如果需要在 `handlePlannedUpload` 完成后再清空当前文件状态,则可以在函数结束处调用 `setCurrentPlannedFile(null)` 并通过某种方式通知组件刷新。 3. **强制触发表格组件状态更新** - React 中,如果想让某个依赖于状态的子组件重新渲染,可以通过改变其父级依赖来达到目的。例如,你可以传递一个新的键值给组件实例。 --- #### 改进后的代码示例 ```javascript import { useState, useEffect } from 'react'; import { UploadProps } from 'antd'; // 文件上传相关状态管理 const [plannedFile, setPlannedFile] = useState<UploadFile | null>(null); const [currentPlannedFile, setCurrentPlannedFile] = useState<File | null>(null); const [plannedMessage, setPlannedMessage] = useState< { type: 'success' | 'error'; content: string } | null >(null); const propsPlanned: UploadProps = { maxCount: 1, beforeUpload: (file) => { // 保存当前选择的文件对象 setCurrentPlannedFile(file); return false; // 阻止默认上传行为 }, onChange: ({ file }) => { if (file.status === 'done') { setPlannedFile(file as unknown as UploadFile); // 更新到最新文件 } }, }; useEffect(() => { if (plannedMessage) { const timer = setTimeout(() => { setPlannedMessage(null); }, 5000); return () => clearTimeout(timer); } }, [plannedMessage]); // 自定义上传逻辑 const handlePlannedUpload = async () => { if (!inputnum) { setPlannedMessage({ type: 'error', content: '请先输入月份' }); return; } if (!currentPlannedFile) { setPlannedMessage({ type: 'error', content: '请先选择文件' }); return; } try { const formData = new FormData(); formData.append('file', currentPlannedFile!); const response = await axiosPost(`/user/plannedWork/read?date=${inputnum}-01`, formData, t, 'multipart/form-data'); if (response.data.code !== 200) { setPlannedMessage({ type: 'error', content: '文件内容有误' }); setPlannedError(true); } else { setPlannedMessage({ type: 'success', content: '上传成功' }); // 清空已选文件状态 setPlannedFile(null); setCurrentPlannedFile(null); // 关键步骤:清除当前文件引用 } } catch (error: any) { setPlannedMessage({ type: 'error', content: error.response?.data?.message || '上传失败', }); setPlannedError(true); } // 强制刷新上传组件状态 setForceUpdateKey((prevKey) => prevKey + 1); // 使用 force update key 触发子组件重置 }; ``` --- #### 核心改动说明 1. **添加 Force Update Key** - 创建一个额外的状态变量 `forceUpdateKey`,用于强制刷新 `<Upload>` 组件。 ```javascript const [forceUpdateKey, setForceUpdateKey] = useState(0); ``` - 将此键绑定到上传组件上: ```javascript <Upload {...propsPlanned} key={forceUpdateKey}> {/* 子元素 */} </Upload> ``` 2. **清除所有文件状态** - 在 `handlePlannedUpload` 函数末尾,确保不仅清除了 `plannedFile`,还同步设置了 `currentPlannedFile` 为 `null`。 3. **消息提示机制优化** - 增加了一个定时器,在显示消息一段时间后将其隐藏,提升用户体验。 --- ### 实现效果 - 用户点击按钮触发 `handlePlannedUpload` 后,无论是否成功都会清空文件选择- 刷新上传组件使其恢复初始状态。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值