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, Modal, Spin, Image, message, Popover } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getReportList, getReportDetail } from '../actions/patrol';
import React, { useEffect, useState } from 'react';
import { httpDel } from '@peace/utils'
import { PinyinHelper } from '@peace/utils';
import PatrolGis from './gis/patrolGis';
// @ts-ignore
import styles from './protable.less';
import moment from 'moment';

const DetailForm = (props) => {
    const { visible, data, handleClose, loading } = props;
    const keyList = [
        { key: '编号', name: 'id' },
        { key: '工程类型', name: 'projectType' },
        { key: '所在路段', name: 'road' },
        { key: '具体位置', name: 'address' },
        { key: '巡查内容', name: 'content' },
        { key: '病害照片', name: 'scenePic' },
    ];

    const renderContent = (data) => {
        if (data) {
            // Object.keys(data).map(key => {

            // })
            return keyList.map(obj => {
                return <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between', margin: '12px 0' }}>
                    <span style={{ fontSize: 16, color: 'gray', minWidth: '26%' }}>{obj.key}</span>
                    {
                        obj.name != 'scenePic' ?
                            <Input style={{ width: '70%' }} value={obj.name == 'id' ? moment(data.time).format("YYYYMMDD") * 10000 + data.id : data[obj.name]} disabled />
                            :
                            <div style={{ width: '70%', display: 'flex', position: 'relative', flexWrap: 'wrap' }}>
                                {
                                    data.scenePic && data.scenePic instanceof Array ? data.scenePic.map(imgSrc => {
                                        return <div style={{ width: '44%', margin: 6 }}>
                                            <Image src={imgSrc} width={'100%'} style={{ marginBottom: 4 }} />
                                        </div>
                                    }) : '暂无图片'
                                }
                            </div>

                    }
                </div>
            })
        } else {
            return '暂无数据'
        }
    }

    return (
        <Modal
            visible={visible}
            footer={null}
            onCancel={handleClose}
            title={'巡查管理详情'}
        >
            <Spin spinning={loading}>
                {renderContent(data)}
            </Spin>
        </Modal>
    )
}

const DetailList = (props) => {
    const { reportList, loading, dispatch, handleOpen, handelRefresh } = props;
    const [visible, setVisible] = useState(false)
    const [selectRecord, setSelectRecord] = useState();
    const checkDetail = (record) => {
        dispatch(getReportDetail(record.id))
    }

    const handleRemove = (record) => {
        let url = 'report/{reportId}';
        const actionType = "DEL_REPORT_RECORD";
        const msg = {}
        if (record) {
            url = url.replace('{reportId}', record.id)
            httpDel(dispatch, { url, actionType, msg }).then(res => {
                if (res.success) {
                    message.success("记录删除成功");
                    handelRefresh()
                } else {
                    message.error("记录删除失败")
                }
            })
        }
    }

    const columns = [
        {
            title: '编号',
            key: 'id',
            dataIndex: 'id',
            align: 'center',
            render: (text, record) => {
                return moment(record.time).format("YYYYMMDD") * 10000 + record.id;
            }
        },
        {
            title: '工程类型',
            key: 'projectType',
            dataIndex: 'projectType',
            align: 'center',
        },
        {
            title: '所属道路',
            key: 'road',
            dataIndex: 'road',
            align: 'center'
        }, {
            title: '所在路段',
            key: 'address',
            dataIndex: 'address',
            align: 'center',
            render: (text, record) => {
                return `${record.roadSectionStart || ''}-${record.roadSectionEnd || ''}`
            }
        },
        {
            title: '具体内容',
            key: 'content',
            dataIndex: 'content',
            align: 'center'
        },
        {
            title: '巡查人',
            width: 100,
            key: 'userName',
            dataIndex: 'userName',
            align: 'center',
            render: (text, record) => {
                return record?.user?.name || ''
            }
        }, {
            title: '上报时间',
            key: 'time',
            dataIndex: 'time',
            valueType: 'dateTime',
            align: 'center'
        }, {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            align: 'center',
            render: (text, record) => {
                return [
                    <Button
                        onClick={() => { checkDetail(record); handleOpen(); }}
                        style={{ marginRight: 10 }}>查看</Button>,
                    <Popover
                        content={[
                            <div style={{ width: '100%', height: 30 }}>
                                <Button onClick={() => setVisible(false)} style={{ float: "right" }} >否</Button>
                                <Button type="primary" onClick={() => handleRemove(record)} style={{ marginRight: 8, float: "right" }} >是</Button>
                            </div>
                        ]}
                        visible={selectRecord == record.id && visible}
                        trigger="click"
                        onClick={() => setSelectRecord(record.id)}
                        title="是否删除该记录？"
                        onVisibleChange={(newVisible) => setVisible(newVisible)}
                    >
                        <Button>删除</Button>
                    </Popover>
                ]
            }
        },
    ];
    return (
        <ProTable
            columns={columns}
            dataSource={reportList}
            loading={loading}
            pagination={{
                pageSize: 10,
                defaultPageSize: 10,
                showSizeChanger: false,
            }}
            rowKey="key"
            toolBarRender={false}
            search={false}
        />
    );
};



const PatrolNameList = (props) => {
    const [users, setUsers] = useState([]);
    const { onChange, record, userList, loading } = props;
    const [selectRoad, setSelectRoad] = useState();

    useEffect(() => {
        if (userList && userList instanceof Array && userList.length) {
            setSelectRoad(userList[0].id)
            // onChange(userList[0]);
        }
    }, [userList])

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

    ];

    useEffect(() => {
        if (userList) {
            setUsers(userList)
        }
    }, [userList])

    var timer = null;
    const doUserNameSearch = (e) => {
        const name = e.target.value;
        if (timer) {
            clearTimeout(timer)
        } else {
            setTimeout(() => {
                let users = userList.filter(user => PinyinHelper.isSearchMatched(user.name, name));
                setUsers(users);
            }, 500);
        }
    }

    return (
        <div className='spilce'>
            <ProTable
                columns={columns}
                dataSource={users}
                loading={loading}
                rowKey="name"
                rowClassName={(record) => {
                    return record.id == selectRoad ? 'list-row-actived' : '';
                }}
                toolBarRender={() => [
                    <Input placeholder='输入巡查人员名称' onChange={doUserNameSearch} ></Input>
                ]}
                options={false}
                pagination={false}
                search={false}
                onRow={(record) => {
                    return {
                        onClick: () => {
                            if (record) {
                                // console.log('record:', record)
                                setSelectRoad(record.id);
                                onChange(record);
                            }
                        },
                    };
                }}
            /></div>

    );
};



const PatrolTable = (props) => {
    const { userList, reportList, dispatch, reportListLoading, reportDetail, reportDetailLoading, userLoading, exports } = props;
    const [record, setRecord] = useState();
    const [dateRange, setDateRange] = useState();
    const [detailVisible, setDetailVisible] = useState(false)
    const [activeTabKey1, setActiveTabKey1] = useState('tab1');

    const { RangePicker } = DatePicker;

    useEffect(() => {
        if (userList && userList instanceof Array) {
            setRecord(userList[0]);
        }
    }, [userList])

    useEffect(() => {
        if (record) {
            queryData();
        }
    }, [record, dateRange])

    const queryData = () => {
        let query = { userId: record.id, reportType: 'patrol' }
        if ((dateRange && dateRange instanceof Array && dateRange[0] != '')) {
            query.startTime = moment(dateRange[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')
            query.endTime = moment(dateRange[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss')
        }
        dispatch(getReportList(query));
    }

    useEffect(() => {
        if (activeTabKey1 && activeTabKey1 == 'tab2') {
            setRecord(null);
        } else if (activeTabKey1 && activeTabKey1 == 'tab1') {
            setRecord(userList[0]);
        }
    }, [activeTabKey1])

    const handelRefresh = () => {
        let query = { userId: record.id, reportType: 'patrol' }
        dispatch(getReportList(query));
    }

    const handleClose = () => {
        setDetailVisible(false)
    }
    const handleOpen = () => {
        setDetailVisible(true)
    }

    const tabList = [
        {
            key: 'tab1',
            tab: '巡查',
        }, {
            key: 'tab2',
            tab: '巡查轨迹查询',
        },
    ];
    const contentList = {
        tab1: [<div>
            <Card style={{ flex: 1 }}>
                <DetailList reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen} handelRefresh={handelRefresh} />
            </Card>
        </div>],
        tab2: <PatrolGis userId={(record || {}).id} dispatch={dispatch} reportList={reportList} />
    };
    const onTab1Change = (key) => {
        setActiveTabKey1(key);
    };

    const handleChangeRecord = (newRecord) => {
        let target = null;
        if (!record || newRecord.id != record.id) {
            target = newRecord;
        }
        setRecord(target);
    }

    const handleExport = () => {
        if (reportList && reportList instanceof Array && reportList.length) {
            let ids = reportList.map(item => item.id);
            exports(ids);
        }
    }

    return (
        <div className='card-protable'>
            <Card >
                <PatrolNameList
                    onChange={(record) => handleChangeRecord(record)}
                    record={record}
                    userList={userList}
                    loading={userLoading} />
            </Card>
            <Card
                style={{ flex: 1 }}
                tabList={tabList}
                activeTabKey={activeTabKey1}
                onTabChange={(key) => {
                    onTab1Change(key);
                }}
            >
                {
                    activeTabKey1 == 'tab1' ? <div style={{ marginBottom: 20 }}>
                        <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
                        <Button style={{ marginLeft: 20 }}>查询</Button>
                        <Button style={{ marginLeft: 20 }} onClick={handleExport} >导出</Button>
                    </div> : ''
                }
                {contentList[activeTabKey1]}
                <DetailForm
                    visible={detailVisible}
                    handleClose={handleClose}
                    data={reportDetail}
                    loading={reportDetailLoading} />
            </Card>
        </div>

    );
};

function mapStateToProps(state) {
    const { auth, depMessage, userList, reportList, reportDetail } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
        userList: userList.data || [],
        userLoading: userList.isRequesting,
        reportList: reportList.data,
        reportListLoading: reportList.isRequesting,
        reportDetail: reportDetail.data,
        reportDetailLoading: reportDetail.isRequesting,
    };
}
export default connect(mapStateToProps)(PatrolTable);