OperationalService/web-network/client/src/sections/fillion/components/fileTable.js

import { connect } from 'react-redux';
import './protable.less'
import { Card, Button, Row, DatePicker, Input, Modal, message, Image } from 'antd';
import ProTable from '@ant-design/pro-table';
import { getFileList, createFileDir, queryFileDir, uploadFile, deleteFile } from '../actions/file';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react';
import { httpDel } from '@peace/utils'
import { PinyinHelper } from '@peace/utils';
import RoadModal from './file/roadModal';
// import Pdfh5 from "pdfh5";
// import "pdfh5/css/pdfh5.css";
import FunctionMenu from './file/functionMenu';
const { confirm } = Modal;

// @ts-ignore
import UploadModal from './file/uploadModal';

// var pdfh5 = null;
const DetailList = (props) => {
    const { fileList, loading, dispatch, handelRefresh, onPageChange, user } = props;
    const [imgSrc, setImgSrc] = useState({ imageView: false, imgSrc: '' })
    const [pdfView, setPdfView] = useState({ showPDF: false, pdfName: '', pdfurl: '' })
    var tyApiRoot = localStorage.getItem('tyApiRoot')

    // useEffect(() => {
    //     if (pdfView.showPDF) {
    //         pdfh5 = new Pdfh5("#pdf-loader", {
    //             pdfurl: pdfView.pdfurl
    //         })
    //     }
    // }, [pdfView])

    const handleRemove = (record, filePath) => {
        if (record) {
            dispatch(deleteFile(record.id)).then(res => {
                if (res.type == 'DELETE_FILE_SUCCESS') {
                    message.success("文件删除成功");
                    handelRefresh()
                } else {
                    message.error("文件删除失败")
                }
            })
        }
        let url = `${tyApiRoot}/attachments`, msg = {};
        const actionType = "DEL_FILE_RECORD";
        if (filePath) {
            httpDel(dispatch, { url, actionType, msg, query: { src: filePath } })
        }
    }
    const overviewPDF = (record, filePath) => {
        setPdfView({ showPDF: true, pdfName: record.fileName, pdfurl: filePath })
    }

    const showDeleteConfirm = (record, filePath) => {
        confirm({
            title: '是否确认删除该文件?',
            icon: <ExclamationCircleOutlined />,
            // content: 'Some descriptions',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk() {
                handleRemove(record, filePath);
            },
            onCancel() {
            },
        });
    }
    //处理预览的逻辑
    const preview = (url) => {
        let link = encodeURI(url) || ''
        if (link)
            if (url.indexOf("pdf") !== -1 || url.indexOf("csv") !== -1 || url.indexOf("jpg") !== -1 || url.indexOf("png") !== -1) {
                window.open(link)
            } else {
                window.open(`https://view.officeapps.live.com/op/view.aspx?src=${link}`)

            }
    }
    const columns = [
        {
            title: '资料名称',
            key: 'fileName',
            dataIndex: 'fileName',
            align: 'center',
        }, {
            title: '所属道路',
            key: 'road',
            dataIndex: 'road',
            align: 'center',
            render: (text, record) => {
                return fileList?.road?.roadName;
            }
        }, {
            title: '资料类型',
            key: 'fileType',
            dataIndex: 'fileType',
            align: 'center',
            render: (text, record) => {
                return fileList?.type?.fileType;
            }
        },
        {
            title: '文件类型',
            key: 'fileExt',
            dataIndex: 'fileExt',
            align: 'center'
        },
        {
            title: '文件大小',
            width: 100,
            key: 'fileSize',
            dataIndex: 'fileSize',
            align: 'center',
            render: (text, record) => {
                let size = 0;
                if (record.fileSize < 1024 * 1024) {
                    size = (record.fileSize / 1024).toFixed(2) + 'KB'
                } else {
                    size = (record.fileSize / 1024 / 1024).toFixed(2) + 'MB'
                }
                return <span>{size}</span>
            }
        }, {
            title: '创建时间',
            key: 'createDate',
            dataIndex: 'createDate',
            valueType: 'dateTime',
            align: 'center'
        }, {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            align: 'center',
            render: (text, record) => {
                const regEx = /\bhttps?:\/\/[^:\/]+/ig;
                const path = record.fileUrl;
                const filename = path.substr(path.lastIndexOf("/") + 1);
                const filePath = path.replace(regEx, "");
                const filePath_ = `${tyApiRoot}/attachments?src=${filePath}&filename=${filename}`;

                return <span>
                    {/* {<a style={{ color: '#333398' }} href={fpath}>下载</a>} */}
                    {<a style={{ color: '#333398' }} onClick={() => {
                        window.open(filePath_);
                    }} >下载</a>}
                    <span className="ant-divider" />
                    <a style={{ color: '#333398' }} onClick={() => { showDeleteConfirm(record, filePath) }}
                        disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : ''}
                    >删除</a>
                    <span className="ant-divider" />
                    <a style={{ color: '#333398' }} onClick={() => { preview(path) }}>预览</a>
                    {/* {
                        ['.png', '.jpg'].some(item => item == record.fileExt) ?
                            [<span className="ant-divider" />,
                            <a style={{ color: '#333398' }} onClick={() => { setImgSrc({ imageView: true, imgSrc: path }) }}>预览</a>]
                            : ''
                    } */}
                    {/* {
                        ['.pdf'].some(item => item == record.fileExt) ?
                            [<span className="ant-divider" />,
                            <a style={{ color: '#333398' }} onClick={() => overviewPDF(record, path)}>预览</a>]
                            : ''
                    } */}
                </span>
            },
        },
    ];
    return [
        <ProTable
            columns={columns}
            dataSource={fileList?.list || []}
            loading={loading}
            pagination={{
                total: fileList?.count || 0,
                pageSize: 10,
                defaultPageSize: 10,
                showSizeChanger: false,
                onChange: (page, pageSize) => {
                    onPageChange(page, pageSize)
                }
            }}
            rowKey="key"
            toolBarRender={false}
            search={false}
        />,
        <Image
            width={200}
            style={{ display: 'none' }}
            src={imgSrc.imgSrc}
            preview={{
                visible: imgSrc.imageView,
                src: imgSrc.imgSrc,
                onVisibleChange: value => {
                    setImgSrc({ imageView: value, imgSrc: '' });
                },
            }}
        />,
        // <Modal
        //     visible={pdfView.showPDF}
        //     footer={null}
        //     title={pdfView.pdfName}
        //     width={860}
        //     onCancel={() => {
        //         pdfh5 = null;
        //         setPdfView({ showPDF: false, pdfName: '', pdfurl: '' });
        //     }}
        // >
        //     <div id="pdf-loader" style={{ width: 830, height: 600, overflowY: 'hidden' }} />
        // </Modal>

    ];
};



const RoadNameList = (props) => {
    const [filterRoad, setFilterRoad] = useState([]);
    const [addVisible, setAddVisible] = useState(false);
    const [selectRoad, setSelectRoad] = useState();
    const { onChange, roads, loading, queryData, dispatch, user } = props
    const [editAble, setEditAble] = useState(user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : '')
    const columns = [
        {
            title: '道路名称',
            key: 'roadName',
            dataIndex: 'roadName',
            align: 'center',
        },

    ];

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

    useEffect(() => {
        if (roads) {
            setFilterRoad(roads)
        }
    }, [roads])

    var timer = null;
    const doRoadNameSearch = (e) => {
        const name = e.target.value;
        if (timer) {
            clearTimeout(timer)
        } else {
            setTimeout(() => {
                let _roads = roads.filter(road => PinyinHelper.isSearchMatched(road.roadName, name));
                setFilterRoad(_roads);
            }, 500);
        }
    }

    const createRoadDir = (roadName) => {
        dispatch(createFileDir({ roadName })).then(res => {
            if (res.type == 'CREATE_FILE_DIR_SUCCESS') {
                setAddVisible(false)
                message.success('新增道路文件夹成功');
                dispatch(queryFileDir())
            }
        });

    }

    const onDelDir = () => {

    }

    return (
        <div id="tree-box" className='spilce'>
            <ProTable
                columns={columns}
                dataSource={filterRoad}
                loading={loading}
                rowKey="name"
                rowClassName={(record) => {
                    return record.rId == selectRoad ? 'list-row-actived' : '';
                }}
                toolBarRender={() => [
                    <div>
                        <Button onClick={() => setAddVisible(true)} type="primary" style={{ width: '100%', marginBottom: 8 }}
                            disabled={editAble}
                        >新增</Button>
                        <Input placeholder='输入道路名称' onChange={doRoadNameSearch} ></Input>
                    </div>
                ]}
                options={false}
                pagination={false}
                search={false}
                onRow={(record) => {
                    return {
                        onClick: () => {
                            if (record) {
                                let id = record.rId
                                if (selectRoad == record.rId) {
                                    id = null
                                }
                                setSelectRoad(id);
                                onChange(record);
                            }
                        },
                    };
                }}
            />
            <RoadModal
                roads={roads}
                isVisible={addVisible}
                onSubmit={createRoadDir}
                onCancel={() => { setAddVisible(false) }}
            />

            <FunctionMenu
                selectRoad={selectRoad}
                dispatch={dispatch}
                onDelDir={onDelDir}
            />
        </div>

    );
};



const FileTable = (props) => {
    const { roads, fileList, dispatch, fileListLoading, roadsLoading, user } = props;
    const [record, setRecord] = useState();
    const [activeTabKey1, setActiveTabKey1] = useState('1');
    const [uploadVisible, setUploadVisible] = useState(false);
    const { RangePicker } = DatePicker;

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

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

    const queryData = () => {
        const { rId } = record;
        dispatch(getFileList({ fId: activeTabKey1, limit: 10, offset: 0, roadId: rId }))
    }

    const onPageChange = (page, pageSize) => {
        dispatch(getFileList({ fId: activeTabKey1, limit: pageSize, offset: (page - 1) * pageSize, roadId: rId }))
    }

    useEffect(() => {
        if (record && activeTabKey1) {
            queryData();
        }

    }, [activeTabKey1, record])

    const handelRefresh = () => {
        queryData()
    }

    const tabList = [
        {
            key: '1',
            tab: '前期资料',
        }, {
            key: '2',
            tab: '施工资料',
        }, {
            key: '3',
            tab: '竣工资料',
        }, {
            key: '4',
            tab: '维修资料',
        }, {
            key: '5',
            tab: '道路资料',
        },
    ];
    const onTab1Change = (key) => {
        setActiveTabKey1(key);
    };

    const handleChangeRecord = (newRecord) => {
        let target = null;
        if (!record || newRecord.rId != record.rId) {
            target = newRecord;
        }
        setRecord(target);
    }
    const hanleUpload = (fileList) => {
        let fileUrl, fileExt, fileName, fileSize;
        if (fileList && fileList instanceof Array) {
            const file = fileList[0];
            fileName = file.name;
            fileExt = fileName.substr(fileName.lastIndexOf('.'));
            fileUrl = file.url;
            fileSize = file.size;
            dispatch(uploadFile({ typeId: activeTabKey1, userId: user.id, fileSize, fileName, fileUrl, fileExt, roadId: record.rId })).then(res => {
                if (res.type == 'UPLOAD_FILE_SUCCESS') {
                    message.success('文件新增成功');
                    setUploadVisible(false);
                    queryData();
                }
            });
        }
    }

    return (
        <div className='card-protable'>
            <Card >
                <RoadNameList
                    user={user}
                    dispatch={dispatch}
                    queryData={queryData}
                    onChange={(record) => handleChangeRecord(record)}
                    record={record}
                    roads={roads}
                    loading={roadsLoading} />
            </Card>
            <Card
                style={{ flex: 1 }}
                tabList={tabList}
                activeTabKey={activeTabKey1}
                onTabChange={(key) => {
                    onTab1Change(key);
                }}
            >
                <Row>
                    <Button onClick={() => { setUploadVisible(true) }} type="primary" style={{ width: 160, marginBottom: 8, visibility: record ? 'visible' : "hidden" }}
                        disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : ''}
                    >上传</Button>
                </Row>
                <Card style={{ flex: 1 }}>
                    <DetailList user={user} fileList={fileList} record={record} loading={fileListLoading} dispatch={dispatch} handelRefresh={handelRefresh} onPageChange={onPageChange} />
                </Card>
            </Card>
            <UploadModal
                isVisible={uploadVisible}
                onCancel={() => { setUploadVisible(false) }}
                onSubmit={hanleUpload}
            />
        </div>

    );
};

function mapStateToProps(state) {
    const { fileDirs, fileList, auth } = state;
    return {
        roads: fileDirs.data,
        roadsLoading: fileDirs.isRequesting,
        fileList: fileList.data,
        fileListLoading: fileList.isRequesting,
        user: auth.user,
    };
}
export default connect(mapStateToProps)(FileTable);