Highways4Good/web/client/src/sections/fillion/components/inforTable.js

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm, TreeSelect } from 'antd';
import ProTable from '@ant-design/pro-table';

import moment from 'moment';
import { getReportStatistic } from "../actions/infor"
const InForTable = (props) => {
    const { dispatch, user, depData, depMessage, depLoading } = props
    const [rowSelected, setRowSelected] = useState([])
    const [regionId, setRegionId] = useState()//区域id
    const [placeType, setPlaceType] = useState()//场所
    const [day, setDay] = useState([moment('2022-03-01').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])//日期
    const [sitename, setSitename] = useState()//场所名称
    const [counts, setCounts] = useState()//shuju
    useEffect(() => {
        setRegionId(user.departmentId)
    }, [user])
    useEffect(() => {
        setDay([moment('2022-03-01').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
    }, [depData])
    const onChange = (value) => {
        // setRegionName(value)
        setRegionId(value)
    }
    const columns = [
        {
            title: '场所名称',
            dataIndex: 'placeName',
            formItemProps: {
                label: '场所名称',
            },
            fieldProps: {
                onChange: (value, cs) => {
                    setSitename(value.currentTarget.value)
                },
                placeholder: '请输入场所名称进行搜索',
                getPopupContainer: (triggerNode) => triggerNode.parentNode,
            },
        },
        {
            title: '场所地址',
            search: false,
            dataIndex: 'time',
            valueType: 'dateRange',
            initialValue: day,
            order: 4,
            render: (dom, record) => {
                return record.address
            },
            fieldProps: {
                getPopupContainer: (triggerNode) => triggerNode.parentNode,
            }
        },
        {
            title: '隐患场所',
            dataIndex: 'regionName',
            valueType: 'select',
            initialValue: -1,
            fieldProps: {
                label: null,
                onChange: (value, cs) => {
                    setPlaceType(value);
                },
                options: [{

                    label: '全部',
                    value: -1
                },
                {
                    label: '隐患场所',
                    value: 0
                }, {
                    label: '非隐患场所',
                    value: 1
                }, {
                    label: '非合用场所',
                    value: 2
                },],
                getPopupContainer: (triggerNode) => triggerNode.parentNode,
            },
            order: 5,
            render: (dom, record) => {
                let flag = "是"
                if (record.hiddenDangerItem12 == null) {
                    flag = <span style={{ color: '#8c8987' }}>/</span>
                }
                if (record.hiddenDangerItem12 && record.correctiveAction == null && record.punishment == null) {
                    flag = <span style={{ color: '#8c8987' }}>否</span>
                }
                return flag
            }
        },
        {
            title: '排查日期',
            dataIndex: 'time',
            valueType: 'dateRange',
            initialValue: day,
            order: 4,
            fieldProps: {
                onChange: (value, cs) => {
                    setDay(cs)
                },
                getPopupContainer: (triggerNode) => triggerNode.parentNode,
            },
            render: (dom, record) => {
                return [moment(record.time).format('YYYY-MM-DD HH:mm:ss'),]
            }
        },
        {
            title: '操作',
            dataIndex: 'creatTime',
            valueType: 'dateTimeRange',
            hideInSearch: true,
            render: (dom, record) => {
                return <Button type="link" onClick={() => { props.openModal('edit', record) }}>详情</Button>
            }
        },
    ]
    return (
        <Spin spinning={false}>
            <h4 style={{ position: 'relative', top: '34px', left: '62px' }}>区域：</h4>
            <TreeSelect
                value={regionId}
                suffixIcon={true}
                dropdownMatchSelectWidth={false}
                style={{ width: '18.4%', marginLeft: '104px' }}
                treeData={depData}
                placeholder="全部"
                showSearch={true}
                onChange={onChange}
                treeDefaultExpandAll={false}
                request={async () => {
                    return depData
                }}
                expandedKeys={["title"]}
                notFoundContent={
                    depLoading ?
                        <p style={{ textAlign: 'center' }}>
                            <Spin spinning={depLoading}></Spin>
                        </p> :
                        <p style={{ textAlign: 'center' }}>暂无数据</p>
                }
                getPopupContainer={(triggerNode) => triggerNode.parentNode}
            />
            <div>
                <ProTable
                    style={{ width: "100% ", overflow: "auto", height: '760px' }}
                    rowKey="id"
                    onReset={(v) => {
                        const { id } = depMessage[0]
                        console.log(id)
                        setRegionId(id)
                        setPlaceType(-1)
                        setDay([moment('2022-03-01').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')])
                        setSitename('')
                    }}
                    rowSelection={{
                        selectedRowKeys: rowSelected,
                        onChange: (selectedRowKeys) => {
                            setRowSelected(selectedRowKeys);
                        },
                    }}
                    columns={columns}
                    options={false}
                    dataSource={(counts || {}).rows || []}
                    request={async (params) => {
                        const query = {
                            startDate: day[0],
                            endDate: day[1],
                            placeType: placeType,
                            regionId: regionId,
                            placeName: sitename,
                            limit: params.pageSize,
                            offset: ((params.current ? params.current : 1) - 1) * params.pageSize
                        }
                        setRowSelected([]);
                        const res = await dispatch(getReportStatistic(query));
                        setCounts(res.payload.data)
                        return {
                            ...res,
                            total: res.payload.data ? res.payload.data.count : 0
                        }
                    }}
                    search={{
                        defaultCollapsed: false,
                        optionRender: (searchConfig, formProps, dom) => [
                            ...dom.reverse(),
                            <Popconfirm title="确认导出?" onConfirm={() => { props.exports(rowSelected, counts) }}>
                                <Button
                                >
                                    导出
                                </Button>
                            </Popconfirm>
                        ],
                    }}
                >
                </ProTable></div>

        </Spin >
    )
}
function mapStateToProps(state) {
    const { auth, depMessage } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
    };
}
export default connect(mapStateToProps)(InForTable);