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

import { connect } from 'react-redux';
import './protable.less'
import { Card, Button, Popconfirm, Badge, Col, Row, DatePicker, Input } from 'antd';
import ProTable from '@ant-design/pro-table';
// import { Badge, Button } from 'antd';
import React, { useEffect, useState } from 'react';
// @ts-ignore
import styles from './protable.less';
const DetailList = (props) => {
    const { patrolName } = props;
    const [tableListDataSource, setTableListDataSource] = useState([]);

    const columns = [
        {
            title: '问题编号',
            key: 'num',
            dataIndex: 'num',
            align: 'center'
        }, {
            title: '所属道路',
            key: 'road',
            dataIndex: 'road',
            align: 'center'
        }, {
            title: '所在路段',
            key: 'address',
            dataIndex: 'address',
            align: 'center'
        }, {
            title: '缺陷名称',
            key: 'name',
            dataIndex: 'name',
            align: 'center'
        }, {
            title: '巡查人',
            width: 100,
            key: 'patrolName',
            dataIndex: 'patrolName',
            align: 'center'
        }, {
            title: '上报时间',
            key: 'createdAt',
            dataIndex: 'createdAt',
            valueType: 'dateTime',
            align: 'center'
        }, {
            title: '操作',
            width: 200,
            key: 'option',
            valueType: 'option',
            align: 'center',
            render: () => [<Button style={{ marginRight: 10 }}>查看</Button>, <Button >删除</Button>]
        },
    ];
    useEffect(() => {
        const source = [];
        for (let i = 0; i < 25; i += 1) {
            source.push({
                num: `${i + 1}`,
                road: `成华大道${i + 2}`,
                address: `二仙桥${i + 3}`,
                name: `缺失内容${i + 4}`,
                patrolName: patrolName,
                createdAt: Date.now() - Math.floor(Math.random() * 10000),
                key: i,
            });
        }
        setTableListDataSource(source);
    }, [patrolName]);
    return (
        <ProTable
            columns={columns}
            dataSource={tableListDataSource}
            pagination={{
                pageSize: 10,
                defaultPageSize: 10,
                showSizeChanger: false,
            }}
            rowKey="key"
            toolBarRender={false}
            search={false}
        />
    );
};







const patrolNameListDataSource = [];

for (let i = 0; i < 10; i += 1) {
    patrolNameListDataSource.push({
        patrolName: `老大爷${i}`,
    });
}



const PatrolNameList = (props) => {
    const { onChange, patrolName } = props;

    const columns = [
        {
            title: '巡更人员',
            key: 'patrolName',
            dataIndex: 'patrolName',
            align: 'center'
        },

    ];
    return (
        <div className='spilce'>
            <ProTable
                columns={columns}
                request={(params, sorter, filter) => {
                    // 表单搜索项会从 params 传入，传递给后端接口。
                    console.log(params, sorter, filter);
                    return Promise.resolve({
                        data: patrolNameListDataSource,
                        success: true,
                    });
                }}
                rowKey="patrolName"
                rowClassName={(record) => {
                    return record.patrolName === patrolName ? styles['split-row-select-active'] : '';
                }}
                // toolbar={{
                //     search: {
                //         onSearch: (value) => {
                //             alert(value);
                //         },
                //     },
                // }}
                toolBarRender={() => [
                    <Input placeholder='输入巡更人员名称'></Input>
                ]}
                options={false}
                pagination={false}
                search={false}
                onRow={(record) => {
                    return {
                        onClick: () => {
                            if (record.patrolName) {
                                onChange(record.patrolName);
                            }
                        },
                    };
                }}
            /></div>

    );
};



const PatrolTable = () => {
    const [patrolName, setPatrolName] = useState('老大爷0');
    const { RangePicker } = DatePicker;
    const tabList = [
        {
            key: 'tab1',
            tab: '巡更',
        }, {
            key: 'tab2',
            tab: '巡更轨迹查询',
        },
    ];
    const contentList = {
        tab1: [<div>
            <Card style={{ flex: 1 }}>
                <DetailList patrolName={patrolName} />
            </Card>
        </div>]
    };
    const [activeTabKey1, setActiveTabKey1] = useState('tab1');
    const onTab1Change = (key) => {
        setActiveTabKey1(key);
    };
    return (
        <div className='card-protable'>
            <Card >
                <PatrolNameList onChange={(searchPatrolName) => setPatrolName(searchPatrolName)} patrolName={patrolName} />
            </Card>
            <Card
                style={{ flex: 1 }}
                tabList={tabList}
                activeTabKey={activeTabKey1}
                onTabChange={(key) => {
                    onTab1Change(key);
                }}
            >
                {
                    activeTabKey1 == 'tab1' ? <div style={{ marginBottom: 20 }}>
                        <RangePicker />
                        <Button style={{ marginLeft: 20 }}>查询</Button>
                        <Button style={{ marginLeft: 20 }}>导出</Button>
                    </div> : ''
                }
                {contentList[activeTabKey1]}
            </Card>
        </div>

    );
};

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)(PatrolTable);