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

import React, { useEffect, useState,useRef } from 'react';
import { connect } from 'react-redux';
import { Spin, Button, Popconfirm, Badge } from 'antd';
import ProTable from '@ant-design/pro-table';
import './protable.less'
import { getHighways } from "../actions/infor"
import HightModal from './highways/highwaysdata';


const HigwaysTable = (props) => {
    const { dispatch, user, } = props
    const [rowSelected, setRowSelected] = useState([])
    const [counts, setCounts] = useState()//shuju
    const [modalVisibleyilan, setModalVisibleyilan] = useState(false);
    const [modalRecord, setModalRecord] = useState();
    const [typecard, setTypecard] = useState();
    const [recortd, setRecortd] = useState()
    const [sitename, setSitename] = useState()//桥梁名称
    const [delet, setDelet] = useState()

    const ref = useRef()
    useEffect(() => { ref.current.reload() }, [ delet])
//打开弹窗
const hightModal = (type, record) => {
    setModalVisibleyilan(true);
    // setModalType(type);
    if (type == 'edit') {
        setModalRecord(record);
    } else {
        setModalRecord(null);
    }
} 
    const columns =
        [
            {
                title: '类型',
                dataIndex: 'placeName',
                fixed: 'left',
                width: 120,
                search: false,
                options: 1,
                backgroundColor: "#ffffff",
                fieldProps: {
                    onChange: (value, cs) => {
                        setSitename(value.currentTarget.value)
                    },
                    placeholder: '请输入类型进行搜索',
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                },
                render: (dom, record) => {
                    return record.name
                },
            },
            {
                title: '数量',
                search: false,
                dataIndex: 'containers',

                fixed: 'left',
                width: 120,
                render: (dom, record) => {
                    return record.count
                },
                fieldProps: {
                    getPopupContainer: (triggerNode) => triggerNode.parentNode,
                }
            },
            {
                title: '操作',
                dataIndex: 'creatTime',
                valueType: 'dateTimeRange',
                hideInSearch: true,
                width: 160,
                fixed: 'right',
                render: (dom, record) => {
                    return <div><Button type="link"
                    onClick={() => {
                        hightModal('edit', record)
                        setTypecard('compile')
                        setRecortd(record)
                    }}
                    >编辑</Button></div>

                }
            },
            
        ]
    return (
        <Spin spinning={false}>
            <div className='protable-transpor'>
                <ProTable
                    actionRef={ref}
                    scroll={{ x: 800 }}
                    options={false}
                    form={{
                        submitter:false 
                    }}
                    // ref={c => { finishedProductTable = c; }}
                    style={{ width: "100% ", overflow: "auto", height: '760px' }}
                    rowKey='id'
                    onReset={(v) => {
                      setSitename('')
                    }}
                    // rowSelection={{
                    //     selectedRowKeys: rowSelected,
                    //     onChange: (selectedRowKeys) => {
                    //         setRowSelected(selectedRowKeys);
                    //     },
                    // }}
                    columns={columns}

                    dataSource={counts ||  []}
                    request={async (params) => {
                        const query = {
                            name:sitename
                        }
                        setRowSelected([]);
                        const res = await dispatch(getHighways(query));
                        setCounts(res.payload.data)
                        return {
                            ...res,
                            total: res.payload.data ? res.payload.data.count : 0
                        }
                    }}
                >
                </ProTable></div>
                {modalVisibleyilan ? <HightModal
                visible={modalVisibleyilan}
                onVisibleChange={setModalVisibleyilan}
                modalRecord={modalRecord}
                typecard={typecard}
                rewkeys={'highways'}
                recortd={recortd}
                setRecortd={setRecortd}
                setDelet={setDelet}
            /> : ''}
        </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)(HigwaysTable);