forked from gzzfw/frontEnd/gzDyh

dminyi
2024-09-11 678b15974cf4dd0eb130b2677b8a992358b6152f
gz-customerSystem/src/views/register/matterDetail/NewFileCheck.jsx
@@ -1,14 +1,42 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, Fragment } from 'react';
import { Row, Col, Space } from 'antd';
import { Select, DatePicker, Form, Button } from '@arco-design/web-react';
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 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' }}>
@@ -17,8 +45,7 @@
            layout='horizontal'
            style={{ marginTop: '24px', marginBottom: '20px' }}
            scrollToFirstError={true}
            initialValues={{
            }}//默认值
            {...formItemLayout}
         >
            <Row gutter={24} style={{ marginRight: '0px' }}>
               <Col span={7}>
@@ -79,17 +106,50 @@
               <Col span={3}>
                  <Space>
                     <Button size="middle " type='primary'>查询</Button>
                     <Button size="middle ">查询</Button>
                     <Button size="middle ">重置</Button>
                  </Space>
               </Col>
            </Row>
         </Form>
         <div style={{ display: 'flex' }}>
            <div style={{ width: '200px' }}>
         <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>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <span>上传时间:{itemData.updateTime}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <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>