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 peopleTypeMap = {
|
1: '工作人员',
|
2: '当事人'
|
}
|
|
useEffect(() => {
|
console.log(props.menuList, props.sourceType);
|
}, [])
|
|
//点击菜单
|
const clickItem = (data) => {
|
console.log(data);
|
setItemData(data)
|
setFileUrl(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`)
|
}
|
|
return (
|
<nav className="filesCheck-nav" style={{ borderRight: '1px solid transparent' }}>
|
<Form
|
ref={formRef}
|
layout='horizontal'
|
style={{ marginTop: '24px', marginBottom: '20px' }}
|
scrollToFirstError={true}
|
{...formItemLayout}
|
>
|
<Row gutter={24} style={{ marginRight: '0px' }}>
|
<Col span={7}>
|
<FormItem label='材料类型：' field='type'>
|
<Select
|
placeholder='请选择'
|
allowClear
|
options={[
|
{
|
label: '全部',
|
value: '',
|
},
|
{
|
label: '申请材料',
|
value: '22_00018-101',
|
},
|
{
|
label: '证据材料',
|
value: '22_00018-102',
|
},
|
]}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem
|
label='上传时间：'
|
field='time'
|
>
|
<DatePicker.RangePicker
|
separator='~'
|
style={{ width: '100%' }}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={7}>
|
<FormItem
|
label='上传人类型：'
|
field='name'
|
onChange={(e) => console.log(e.target.value, 'vvv')}
|
>
|
<Select
|
allowClear
|
style={{ width: '100%' }}
|
options={[
|
{
|
label: '工作人员',
|
value: 1
|
},
|
{
|
label: '当事人',
|
value: 2
|
}
|
]}
|
/>
|
</FormItem>
|
</Col>
|
<Col span={3}>
|
<Space>
|
<Button size="middle " type='primary'>查询</Button>
|
<Button size="middle ">重置</Button>
|
</Space>
|
</Col>
|
</Row>
|
|
</Form>
|
<div style={{ display: 'flex', height: '550px' }}>
|
<div style={{ width: '256px' }}>
|
<Menu
|
style={{ width: '100%', height: '100%' }}
|
>
|
{props.menuList?.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.trueName}</MenuItem>
|
})}
|
</SubMenu>
|
})}
|
</Menu>
|
</div>
|
<div style={{ flex: 1 }}>
|
{
|
itemData ? <Fragment>
|
<div style={{ background: '#e8f3ff', color: '#1A6FB8', padding: '5px 10px', marginBottom: '16px' }}>
|
<span>材料名称：{itemData.trueName}</span> |
|
<span>上传时间：{itemData.updateTime}</span> |
|
<span>上传人：{itemData.uploaderName} {itemData.uploaderType && <span>（{peopleTypeMap[itemData.uploaderType]}）</span>}</span>
|
</div>
|
<div style={{ width: '100%', height: '470px' }}>
|
{
|
itemData.suffix === 'pdf' ?
|
<embed src={fileUrl} type="application/pdf" width="100%" height="100%"></embed>
|
:
|
<img src={fileUrl} alt="" style={{ width: '100%', height: '100%' }} />
|
}
|
|
</div>
|
</Fragment> : <Fragment>
|
<div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>
|
</Fragment>
|
}
|
</div>
|
</div>
|
</nav>
|
);
|
};
|
|
export default NewFileCheck;
|
