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';
|
|
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: '当事人'
|
}
|
|
useEffect(() => {
|
setList(props.menuList || [])
|
}, [props.menuList])
|
|
//点击菜单
|
const clickItem = (data) => {
|
console.log(data);
|
setItemData(data)
|
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>
|
:
|
<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;
|
