224 lines
8.4 KiB
JavaScript
224 lines
8.4 KiB
JavaScript
|
import React, { Fragment, useRef, useMemo,useEffect,useState } from 'react';
|
|||
|
|
import BasicCrudModal from '../../../components/crud/BasicCrudModal';
|
|||
|
|
import { Table, Card, Modal, Form, Input, Button, Row,Col, Timeline, message, Tabs,Image } from 'antd';
|
|||
|
|
import {FileWordOutlined,FilePdfOutlined,FileZipOutlined,FileExcelOutlined } from '@ant-design/icons';
|
|||
|
|
import { useSelector } from 'react-redux';
|
|||
|
|
import ToolBar from './toolbar';
|
|||
|
|
import ModalForm from './form';
|
|||
|
|
import apiurl from '../../../service/apiurl';
|
|||
|
|
import usePageTable from '../../../components/crud/usePageTable2';
|
|||
|
|
import { createCrudService } from '../../../components/crud/_';
|
|||
|
|
import {CrudOpRender_text} from '../../../components/crud/CrudOpRender';
|
|||
|
|
|
|||
|
|
const url = "http://223.75.53.141:9102/test.by-lyf.tmp"
|
|||
|
|
const Page = () => {
|
|||
|
|
const role = useSelector(state => state.auth.role);
|
|||
|
|
const editBtn = role?.rule?.find(item => item.menuName == "编辑");
|
|||
|
|
const viewBtn = role?.rule?.find(item => item.menuName == "查看");
|
|||
|
|
const delBtn = role?.rule?.find(item => item.menuName == "删除");
|
|||
|
|
const refModal = useRef();
|
|||
|
|
const [searchVal, setSearchVal] = useState(false)
|
|||
|
|
const [iframeSrc, setIframeSrc] = useState('')
|
|||
|
|
const [pdfViewOPen, setPdfViewOPen] = useState(false)
|
|||
|
|
const [isFetch, setIsFetch] = useState(false)
|
|||
|
|
const columns = [
|
|||
|
|
{ title: '序号', key: 'inx', dataIndex: 'inx', width: 60, align:"center" },
|
|||
|
|
{ title: '名称', key: 'name', dataIndex: 'name', width: 250, ellipsis: true },
|
|||
|
|
{
|
|||
|
|
title: '发生日期', key: 'eventsDate', dataIndex: 'eventsDate', width: 140,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '事件类型', key: 'eventsType', dataIndex: 'eventsType', width: 140,
|
|||
|
|
render: (value) => <span>{value == 1 ? "综合大事记" : value == 2 ? "专题大事记" : ''}</span>,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
title: '事件内容描述', key: 'eventsDesc', dataIndex: 'eventsDesc', width: 300},
|
|||
|
|
{
|
|||
|
|
title: '操作', key: 'operation', width: 240, fixed: 'right',align: 'center',
|
|||
|
|
render: (value, row, index) => (
|
|||
|
|
<CrudOpRender_text
|
|||
|
|
edit={editBtn ? true : false}
|
|||
|
|
del={delBtn ? true : false}
|
|||
|
|
view={viewBtn ? true : false}
|
|||
|
|
command={(cmd) => () => command(cmd)(row)} />)
|
|||
|
|
},
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
|
|||
|
|
const width = useMemo(() => columns.reduce((total, cur) => total + (cur.width), 0), [columns]);
|
|||
|
|
|
|||
|
|
const command = (type) => (params) => {
|
|||
|
|
if (type === 'save') {
|
|||
|
|
refModal.current.showSave();
|
|||
|
|
} else if (type === 'edit') {
|
|||
|
|
refModal.current.showEdit({ ...params });
|
|||
|
|
} else if (type === 'view') {
|
|||
|
|
refModal.current.showView(params);
|
|||
|
|
} else if (type === 'del') {
|
|||
|
|
refModal.current.onDeleteGet(apiurl.rcgl.gcdsj.delete + `/${params.id}`);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const download = (params) => {
|
|||
|
|
let downloadLink = document.createElement("a");
|
|||
|
|
downloadLink.href = `http://local.gunshiiot.com:18083/gunshiApp/xyt/projectEvents/file/download/${params}`;
|
|||
|
|
downloadLink.download = `${params.fileName}`;
|
|||
|
|
downloadLink.style.display = "none";
|
|||
|
|
// 将链接添加到页面中
|
|||
|
|
document.body.appendChild(downloadLink);
|
|||
|
|
|
|||
|
|
// 模拟点击事件，开始下载
|
|||
|
|
downloadLink.click();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const { tableProps, search, refresh } = usePageTable(createCrudService(apiurl.rcgl.gcdsj.page).find_noCode);
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* @description 处理成功的回调
|
|||
|
|
*/
|
|||
|
|
const successCallback = () => {
|
|||
|
|
refresh()
|
|||
|
|
setIsFetch(!isFetch)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
const viewPdf = (params) => {
|
|||
|
|
setIframeSrc(params)
|
|||
|
|
setPdfViewOPen(true)
|
|||
|
|
}
|
|||
|
|
useEffect(()=>{
|
|||
|
|
const params = {
|
|||
|
|
search: {
|
|||
|
|
...searchVal,
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
search(params)
|
|||
|
|
}, [searchVal])
|
|||
|
|
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<div className='content-root clearFloat xybm' style={{paddingRight:"0",paddingBottom:"0"}}>
|
|||
|
|
<div className='lf CrudAdcdTreeTableBox' style={{width:"100%",overflowY:"auto"}}>
|
|||
|
|
<Card className='nonebox'>
|
|||
|
|
<ToolBar
|
|||
|
|
setSearchVal={setSearchVal}
|
|||
|
|
onSave={command('save')}
|
|||
|
|
role={role}
|
|||
|
|
/>
|
|||
|
|
</Card>
|
|||
|
|
<div className="ant-card-body" style={{ padding: "20px 0 0 0" }}>
|
|||
|
|
<Tabs defaultActiveKey="1">
|
|||
|
|
<Tabs.TabPane tab="列表" key="1">
|
|||
|
|
<Table columns={columns} rowKey="inx" {...tableProps} scroll={{ x: width , y: "calc( 100vh - 400px )"}}/>
|
|||
|
|
</Tabs.TabPane>
|
|||
|
|
<Tabs.TabPane tab="时间轴" key="2">
|
|||
|
|
<div className='time-line'>
|
|||
|
|
<Timeline>
|
|||
|
|
{tableProps.dataSource.map((item, index) => (
|
|||
|
|
<Timeline.Item key={index}>
|
|||
|
|
<div className='time-line-item'>
|
|||
|
|
<span style={{width:100}}>{item.eventsDate}</span>
|
|||
|
|
<div className='item-right'>
|
|||
|
|
<span>{item.eventsDesc}</span>
|
|||
|
|
<div style={{ display: "flex"}}>
|
|||
|
|
<span>附件：</span>
|
|||
|
|
<Row gutter={[16]} style={{flex:1}}>
|
|||
|
|
{
|
|||
|
|
item.files.length > 0 && item.files.map(file => {
|
|||
|
|
return (
|
|||
|
|
<Col span={12}>
|
|||
|
|
<div className="file-item" style={{width:"100%"}}>
|
|||
|
|
<div className='file-description'>
|
|||
|
|
{file.fileName.indexOf('.docx') > -1 ?
|
|||
|
|
<div
|
|||
|
|
onClick={() => { download(file.fileId) }}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<FileWordOutlined
|
|||
|
|
style={{ fontSize: 40 }}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
:
|
|||
|
|
file.fileName.indexOf('.pdf') > -1 ?
|
|||
|
|
<div
|
|||
|
|
onClick={() => { viewPdf(file?.fileId) }}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<FilePdfOutlined style={{ fontSize: 40 }} />
|
|||
|
|
</div>
|
|||
|
|
:
|
|||
|
|
file.fileName.indexOf('.zip') > -1 ?
|
|||
|
|
<div
|
|||
|
|
onClick={() => { download(file?.fileId) }}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<FileZipOutlined style={{ fontSize: 40 }} />
|
|||
|
|
</div>
|
|||
|
|
:
|
|||
|
|
file.fileName.indexOf('.xlsx') > -1 ?
|
|||
|
|
<div
|
|||
|
|
onClick={() => { download(file?.fileId) }}
|
|||
|
|
style={{ cursor: 'pointer' }}
|
|||
|
|
>
|
|||
|
|
<FileExcelOutlined style={{ fontSize: 40 }} />
|
|||
|
|
</div>
|
|||
|
|
:
|
|||
|
|
<Image width={60} src={url +file?.filePath} alt='' />
|
|||
|
|
}
|
|||
|
|
<span>{file.fileName}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Col>
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
</Row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Timeline.Item>
|
|||
|
|
))}
|
|||
|
|
</Timeline>
|
|||
|
|
</div>
|
|||
|
|
</Tabs.TabPane>
|
|||
|
|
</Tabs>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<BasicCrudModal
|
|||
|
|
width={1000}
|
|||
|
|
ref={refModal}
|
|||
|
|
title=""
|
|||
|
|
component={ModalForm}
|
|||
|
|
onCrudSuccess={successCallback}
|
|||
|
|
// onCrudSuccess={()=>{refresh({addvcd:localStorage.getItem('ADCD6')})}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Modal
|
|||
|
|
open={pdfViewOPen}
|
|||
|
|
width={1000}
|
|||
|
|
title=""
|
|||
|
|
footer={null}
|
|||
|
|
style={{marginTop:"-5%"}}
|
|||
|
|
onCancel={() => {
|
|||
|
|
setPdfViewOPen(false)
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<iframe
|
|||
|
|
style={{
|
|||
|
|
height: '80vh',
|
|||
|
|
width: '100%',
|
|||
|
|
border: 0,
|
|||
|
|
marginTop: 20,
|
|||
|
|
}}
|
|||
|
|
src={`${process.env.PUBLIC_URL}/static/pdf/web/viewer.html?file=${encodeURIComponent(`/gunshiApp/xyt/projectEvents/file/download/${iframeSrc}`)}`}
|
|||
|
|
/>
|
|||
|
|
</Modal>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default Page;
|