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: , // 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 {size} } }, { 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 {/* {下载} */} { { window.open(filePath_); }} >下载} { showDeleteConfirm(record, filePath) }} disabled={user?.username !== 'SuperAdmin' && user?.userResources?.filter(i => i.resourceId === 'FILEMANAGE')[0].isshow === "true" ? true : ''} >删除 { preview(path) }}>预览 {/* { ['.png', '.jpg'].some(item => item == record.fileExt) ? [, { setImgSrc({ imageView: true, imgSrc: path }) }}>预览] : '' } */} {/* { ['.pdf'].some(item => item == record.fileExt) ? [, overviewPDF(record, path)}>预览] : '' } */} }, }, ]; return [ { onPageChange(page, pageSize) } }} rowKey="key" toolBarRender={false} search={false} />, { setImgSrc({ imageView: value, imgSrc: '' }); }, }} />, // { // pdfh5 = null; // setPdfView({ showPDF: false, pdfName: '', pdfurl: '' }); // }} // > //
// ]; }; 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 (
{ return record.rId == selectRoad ? 'list-row-actived' : ''; }} toolBarRender={() => [
]} 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); } }, }; }} /> { setAddVisible(false) }} />
); }; 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 (
handleChangeRecord(record)} record={record} roads={roads} loading={roadsLoading} /> { onTab1Change(key); }} > { setUploadVisible(false) }} onSubmit={hanleUpload} />
); }; 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);