import React, { useState, useEffect, useRef, Fragment } from 'react';
|
import { Row, Col, Space } from 'antd';
|
import { Select, DatePicker, Form, Button, Menu } from '@arco-design/web-react';
|
import * as $$ from '@/utils/utility';
|
import * as docx from 'docx-preview';
|
|
const FormItem = Form.Item;
|
const MenuItem = Menu.Item;
|
const SubMenu = Menu.SubMenu;
|
const appUrl = $$.appUrl;
|
const formItemLayout = {
|
labelCol: {
|
span: 8,
|
},
|
wrapperCol: {
|
span: 16,
|
},
|
};
|
|
const NewFileCheck = (props) => {
|
const formRef = useRef();
|
const [fileUrl, setFileUrl] = useState('');
|
const [itemData, setItemData] = useState(null);
|
const [list, setList] = useState([]);
|
const peopleTypeMap = {
|
1: '工作人员',
|
2: '当事人',
|
};
|
const containerRef = useRef(null);
|
|
useEffect(() => {
|
setList(props.menuList || []);
|
}, [props.menuList]);
|
|
//点击菜单
|
const clickItem = (data) => {
|
console.log(data);
|
setItemData(data);
|
if (data.suffix === 'docx' || data.suffix === 'doc') {
|
const renderDocx = async () => {
|
try {
|
const response = await fetch(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`);
|
const blob = await response.blob();
|
await docx.renderAsync(blob, containerRef.current);
|
} catch (error) {
|
console.error('文档加载失败', error);
|
}
|
};
|
renderDocx();
|
}
|
setFileUrl(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`);
|
};
|
|
//查询
|
const handleSUbmit = (type) => {
|
const data = formRef.current.getFieldsValue();
|
console.log('data', data);
|
if (type === 'search') {
|
let newList = props.menuList;
|
if (data.type) {
|
newList = newList.filter((item) => item.ownerType === data.type);
|
}
|
if (data.name) {
|
newList = newList.map((item) => ({ ...item, fileList: item.fileList?.filter((i) => i.uploaderType === data.name) }));
|
}
|
if (data.time) {
|
let timeStart = new Date(data.time[0]);
|
let timeEnd = new Date(data.time[1]);
|
newList = newList.map((item) => ({
|
...item,
|
fileList: item.fileList?.filter((i) => new Date(i.createTime) >= timeStart && new Date(i.createTime) <= timeEnd),
|
}));
|
}
|
setList(newList);
|
setItemData(null);
|
setFileUrl('');
|
}
|
// 重置
|
if (type === 'reset') {
|
setList(props.menuList || []);
|
setItemData(null);
|
setFileUrl('');
|
}
|
};
|
|
console.log('list', list);
|
|
return (
|
<nav className="filesCheck-nav" style={{ borderRight: '1px solid transparent' }}>
|
<Form ref={formRef} layout="horizontal" style={{ marginTop: '24px' }} scrollToFirstError={true} {...formItemLayout}>
|
<Row gutter={24} style={{ marginRight: '0px' }}>
|
<Col span={6}>
|
<FormItem label="材料类型：" field="type">
|
<Select
|
placeholder="请选择"
|
allowClear
|
options={[
|
{
|
label: '申请材料',
|
value: '22_00018-101',
|
},
|
{
|
label: '证据材料',
|
value: '22_00018-102',
|
},
|
]}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem label="上传时间：" field="time">
|
<DatePicker.RangePicker showTime shortcutsPlacementLeft={true} shortcuts={$$.shortcutsList()} separator="~" style={{ width: '100%' }} />
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem label="上传人类型：" field="name" onChange={(e) => console.log(e.target.value, 'vvv')}>
|
<Select
|
placeholder="请选择"
|
allowClear
|
style={{ width: '100%' }}
|
options={[
|
{
|
label: '工作人员',
|
value: 1,
|
},
|
{
|
label: '当事人',
|
value: 2,
|
},
|
]}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={4}>
|
<Space>
|
<Button className="dialogPrimary" type="primary" onClick={() => handleSUbmit('search')}>
|
查询
|
</Button>
|
<Button
|
onClick={() => {
|
formRef.current.resetFields();
|
handleSUbmit('reset');
|
}}
|
>
|
重置
|
</Button>
|
</Space>
|
</Col>
|
</Row>
|
</Form>
|
<div style={{ display: 'flex', height: '550px' }}>
|
<div style={{ width: '256px', borderRight: '1px solid #F0F0F0' }}>
|
<Menu style={{ width: '100%', height: '100%' }}>
|
{list?.map((item) => {
|
return (
|
<SubMenu key={item.id} title={item.ownerTypeName + `（${(item.fileList && item.fileList.length) || 0}）`}>
|
{item.fileList?.map((res) => {
|
return (
|
<MenuItem
|
key={res.id}
|
onClick={() => {
|
clickItem(res);
|
}}
|
>
|
{res.name}
|
</MenuItem>
|
);
|
})}
|
</SubMenu>
|
);
|
})}
|
</Menu>
|
</div>
|
<div style={{ flex: 1 }}>
|
{itemData ? (
|
<Fragment>
|
<div style={{ background: '#e8f3ff', color: '#1A6FB8', padding: '5px 10px', marginBottom: '16px', marginLeft: '16px' }}>
|
<span>材料名称：{itemData.name}</span> |
|
<span>上传时间：{$$.timeFormat(itemData.updateTime)}</span> |
|
<span>
|
上传人：{itemData.uploaderName} {itemData.uploaderType && <span>（{peopleTypeMap[itemData.uploaderType]}）</span>}
|
</span>
|
</div>
|
<div style={{ width: '100%', height: '470px', display: 'flex', justifyContent: 'center', alignItems: 'center', overflow: 'auto' }}>
|
{itemData.suffix === 'pdf' ? (
|
<embed src={fileUrl} type="application/pdf" width="100%" height="100%"></embed>
|
) : itemData.suffix === 'docx' ? (
|
<div ref={containerRef} style={{ width: '100%', height: '100%' }} className="docx-container" />
|
) : (
|
<img src={fileUrl} alt="" style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
|
)}
|
</div>
|
</Fragment>
|
) : (
|
<Fragment>
|
<div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>
|
</Fragment>
|
)}
|
</div>
|
</div>
|
</nav>
|
);
|
};
|
|
export default NewFileCheck;
|
