From 544148eddae96db824423cd059ebecb9d13c392e Mon Sep 17 00:00:00 2001
From: xusd <330628789@qq.com>
Date: Thu, 19 Jun 2025 20:52:50 +0800
Subject: [PATCH] fix:市平台项目更新
---
src/views/register/matterDetail/NewFileCheck.jsx | 354 ++++++++++++++++++++++++++++++----------------------------
1 files changed, 183 insertions(+), 171 deletions(-)
diff --git a/src/views/register/matterDetail/NewFileCheck.jsx b/src/views/register/matterDetail/NewFileCheck.jsx
index cf895d8..be2d5cc 100644
--- a/src/views/register/matterDetail/NewFileCheck.jsx
+++ b/src/views/register/matterDetail/NewFileCheck.jsx
@@ -2,192 +2,204 @@
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,
- },
+ 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 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])
+ 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('')
+ //点击菜单
+ 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();
}
- // 重置
- if (type === 'reset') {
- setList(props.menuList || [])
- setItemData(null)
- setFileUrl('')
- }
- }
+ setFileUrl(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`);
+ };
- console.log('list', list);
+ //查询
+ 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>
- );
+ 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;
--
Gitblit v1.8.0