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

import { connect } from 'react-redux';
import './protable.less'
import { Card, Button, 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';
// @ts-ignore
import styles from './protable.less';
import moment from 'moment';

const DetailForm = (props) => {
    const { visible, data, handleClose, loading } = props;
    const [qndmn] = useState(localStorage.getItem('qndmn'));
    const keyList = [
        // { key: '编号', name: 'id' },
        { key: '工程类型', name: 'projectType' },
        { key: '所在路段', name: 'road' },
        { key: '具体位置', name: 'address' },
        { key: '巡查内容', name: 'content' },
        // { key: '病害照片', name: 'scenePic' },
        { key: '养护前', name: 'conserveBeforePic' },
        { key: '养护中', name: 'conserveUnderwayPic' },
        { key: '养护后', name: 'conserveAfterPic' },
    ];

    const renderContent = (data) => {
        if (data) {
            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' && obj.name.indexOf('conserve') == -1 ?
                            <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[obj.name] && data[obj.name] instanceof Array ? data[obj.name].map(imgSrc => {
                                        return <div style={{ width: '44%', margin: 6 }}>
                                            <Image src={qndmn + '/' + 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("记录删除失败")
                }
            })
        }
    }

    let basicDate = null;
    let counter = 0;

    const columns = [
        {
            title: '编号',
            key: 'id',
            dataIndex: 'id',
            align: 'center',
            render: (text, record) => {
                let day = moment(record.time).format("YYYYMMDD")
                if (!basicDate) {
                    basicDate = day;
                    counter += 1;
                } else if (basicDate == day) {
                    counter += 1;
                } else if (basicDate != day) {
                    basicDate = day;
                    counter = 1;
                }
                return moment(record.time).format("YYYYMMDD") * 10000 + counter;
            }
        }, {
            title: '工程类型',
            key: 'projectType',
            dataIndex: 'projectType',
            align: 'center',
            render: (text, record) => {
                switch (text) {
                    case 'road': return '道路';
                    case 'bridge': return '桥梁';
                    case 'culvert': return '涵洞';
                    case 'other': return '其他';
                    default: return text;
                }
            }
        }, {
            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: 200,
            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 && userList instanceof Array) {
            let users = userList.filter(user => user.remark != 'sp');
            setUsers(users);
        }
    }, [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) && user.remark != 'sp');
                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) {
                                setSelectRoad(record.id);
                                onChange(record);
                            }
                        },
                    };
                }}
            /></div>

    );
};



const MaintenanceTable = (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 { RangePicker } = DatePicker;

    useEffect(() => {
        if (userList && userList instanceof Array) {
            let users = userList.filter(user => user.remark != 'sp');

            setRecord(users[0]);
        }
    }, [userList])

    useEffect(() => {
        if (record) {
            let query = {
                userId: record.id,
                reportType: 'conserve',
                asc: true
            }
            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));
        }
    }, [record, dateRange])

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

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

    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) => setRecord(record)} record={record} userList={userList} loading={userLoading} handelRefresh={handelRefresh} />
            </Card>
            <Card style={{ flex: 1 }} >
                <div style={{ marginBottom: 20 }}>
                    <RangePicker onChange={(date, dateString) => { setDateRange(dateString) }} />
                    <Button style={{ marginLeft: 20 }}>查询</Button>
                    <Button style={{ marginLeft: 20 }} onClick={handleExport}>导出</Button>
                </div>
                <Card style={{ flex: 1 }}>
                    <DetailList
                        reportList={reportList} record={record} loading={reportListLoading} dispatch={dispatch} handleOpen={handleOpen}
                        handelRefresh={handelRefresh}
                    />
                </Card>
                <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)(MaintenanceTable);