fix：修改详情中修改问题属地回显问题

liuwh

4 days ago ebc701d2374ddef3fb985be85c49c5cdcd5425a7

 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>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span>上传时间：{$$.timeFormat(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', 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>&nbsp;&nbsp;|&nbsp;&nbsp;
                        <span>上传时间：{$$.timeFormat(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', 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;