fix:市平台项目更新

xusd

8 days ago 544148eddae96db824423cd059ebecb9d13c392e

 src/views/register/matterDetail/NewFileCheck.jsx

@@ -2,6 +2,7 @@
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;
@@ -16,74 +17,82 @@
  },
};


const NewFileCheck = (props) => {
  const formRef = useRef();
  const [fileUrl, setFileUrl] = useState('')
  const [itemData, setItemData] = useState(null)
  const [list, setList] = useState([])
   const [fileUrl, setFileUrl] = useState('');
   const [itemData, setItemData] = useState(null);
   const [list, setList] = useState([]);
  const peopleTypeMap = {
    1: '工作人员',
    2: '当事人'
  }
      2: '当事人',
   };
   const containerRef = useRef(null);

  useEffect(() => {
    setList(props.menuList || [])
  }, [props.menuList])
      setList(props.menuList || []);
   }, [props.menuList]);

  //点击菜单
  const clickItem = (data) => {
    console.log(data);
    setItemData(data)
    setFileUrl(`${appUrl.fileUrl}/${appUrl.sys}${data.showUrl}`)
      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
         let newList = props.menuList;
      if (data.type) {
        newList = newList.filter(item => item.ownerType === 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) }))
            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) }))
            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('')
         setList(newList);
         setItemData(null);
         setFileUrl('');
    }
    // 重置
    if (type === 'reset') {
      setList(props.menuList || [])
      setItemData(null)
      setFileUrl('')
         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}
      >
         <Form ref={formRef} layout="horizontal" style={{ marginTop: '24px' }} scrollToFirstError={true} {...formItemLayout}>
        <Row gutter={24} style={{ marginRight: '0px' }}>
          <Col span={6}>
            <FormItem label='材料类型：' field='type'>
                  <FormItem label="材料类型：" field="type">
              <Select
                placeholder='请选择'
                        placeholder="请选择"
                allowClear
                options={[
                  {
@@ -99,91 +108,94 @@
            </FormItem>
          </Col>
          <Col span={7}>
            <FormItem
              label='上传时间：'
              field='time'
            >
              <DatePicker.RangePicker
                showTime
                shortcutsPlacementLeft={true}
                shortcuts={$$.shortcutsList()}
                separator='~'
                style={{ width: '100%' }}
              />
                  <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')}
            >
                  <FormItem label="上传人类型：" field="name" onChange={(e) => console.log(e.target.value, 'vvv')}>
              <Select
                placeholder='请选择'
                        placeholder="请选择"
                allowClear
                style={{ width: '100%' }}
                options={[
                  {
                    label: '工作人员',
                    value: 1
                              value: 1,
                  },
                  {
                    label: '当事人',
                    value: 2
                  }
                              value: 2,
                           },
                ]}
              />
            </FormItem>
          </Col>
          <Col span={4}>
            <Space>
              <Button className="dialogPrimary" type='primary' onClick={() => handleSUbmit('search')}>查询</Button>
              <Button onClick={() => {
                     <Button className="dialogPrimary" type="primary" onClick={() => handleSUbmit('search')}>
                        查询
                     </Button>
                     <Button
                        onClick={() => {
                formRef.current.resetFields();
                handleSUbmit('reset')
              }}>重置</Button>
                           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%' }}
               <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);
                                    }}
          >
            {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>
                                    {res.name}
                                 </MenuItem>
                              );
                })}
              </SubMenu>
                     );
            })}
          </Menu>
        </div>
        <div style={{ flex: 1 }}>
          {
            itemData ? <Fragment>
               {itemData ? (
                  <Fragment>
              <div style={{ background: '#e8f3ff', color: '#1A6FB8', padding: '5px 10px', marginBottom: '16px', marginLeft: '16px' }}>
                <span>材料名称：{itemData.name}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span>上传时间：{$$.timeFormat(itemData.updateTime)}</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span>上传人：{itemData.uploaderName} {itemData.uploaderType && <span>（{peopleTypeMap[itemData.uploaderType]}）</span>}</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' ?
                        {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>
                  </Fragment>
               ) : (
                  <Fragment>
              <div style={{ padding: '100px 0' }}>{$$.MyEmpty()}</div>
            </Fragment>
          }
               )}
        </div>
      </div>
    </nav>