forked from gzzfw/frontEnd/gzDyh

zhangyongtian
2024-09-07 172053309302ca857aae36d6769157dc7bb43472
gz-customerSystem/src/views/filesCheck/newFileCheck.jsx
@@ -2,7 +2,7 @@
 * @Company: hugeInfo
 * @Author: ldh
 * @Date: 2022-03-11 11:03:44
 * @LastEditTime: 2024-08-22 10:36:23
 * @LastEditTime: 2024-09-07 16:11:58
 * @LastEditors: dminyi 1301963064@qq.com
 * @Version: 1.0.0
 * @Description: 大厅来访材料附件查看
@@ -44,10 +44,9 @@
const FormItem = Form.Item;
const Option = Select.Option;
// 获取附件
function getFileListDataApi(submitData) {
   return $$.ax.request({ url: `caseInfo/listCaseFile?caseId=${submitData}`, type: 'get', service: 'mediate' });
function getFileListDataApi() {
   return $$.ax.request({ url: `fileInfo/listFileByCat?mainId=${'10001'}&ownerCat=&createStart=&createEnd=&uploaderType=`, type: 'get', service: 'sys', });
}
const NewFileCheck = ({ caseId }) => {
@@ -166,12 +165,12 @@
      const res = await getFileListDataApi(caseId || searchParams.get('caseId'));
      global.setSpinning(false);
      if (res.type) {
         let resData = res.data?.dataList || [];
         let resData = res.data || [];
         let arr = [];
         let filesArr = [];
         let index = 0;
         resData.forEach((x, t) => {
            arr.push(x.ownerTypeName);
            arr.push(x.ownerCatName);
            filesArr = filesArr.concat(x.fileList || []);
         });
         forEach: for (let i = 0; i < filesArr.length - 1; i++) {
@@ -186,6 +185,7 @@
         setOpenKeys(arr);
      }
   }
   console.log(files,'filesfiles')
   useEffect(() => {
      getFileListData();
@@ -277,116 +277,123 @@
               </Row>
            </Form>
            <Menu
               className="filesCheck-nav-menu"
               style={{ width: '200px' }}
               onOpenChange={(openKeys) => setOpenKeys(openKeys)}
               mode="inline"
               selectedKeys={[files[fileIndex]?.id]}
               openKeys={openKeys}
            >
               {data.data?.map((x, t) => {
                  return (
                     <SubMenu
                        key={x.ownerTypeName}
                        expandIcon={openKeys.includes(x.ownerTypeName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
                        title={x.ownerTypeName}
                     >
                        {x.fileList?.map((y, z) => {
                           return (
                              <Menu.Item
                                 onClick={async () => {
                                    global.setSpinning(true);
                                    for (let i = 0; i < files.length; i++) {
                                       if (files[i].id === y.id) {
                                          setFileIndex(i);
                                          break;
                                       }
                                    }
                                 }}
                                 icon={iconType(y.cat)}
                                 key={y.id}
                              >
                                 {y.name}
                              </Menu.Item>
                           );
                        })}
                     </SubMenu>
                  );
               })}
            </Menu>
         </nav>
         {files[fileIndex] ? (
            <main className="filesCheck-main">
               {/* 头部操作区 */}
               <div className="filesCheck-main-action">
                  <div className="filesCheck-main-action-title">
                     <h3>{files[fileIndex]?.name}</h3>
                  </div>
                  {files[fileIndex]?.cat === '22_00017-3' && (
                     <>
                        <div className="filesCheck-main-action-item">
                           <Tooltip title="左转">
                              <RotateLeftOutlined onClick={() => handleRotateImg('left')} />
                           </Tooltip>
                        </div>
                        <div className="filesCheck-main-action-item">
                           <Tooltip title="右转">
                              <RotateRightOutlined onClick={() => handleRotateImg('right')} />
                           </Tooltip>
                        </div>
                     </>
                  )}
                  <div className="filesCheck-main-action-item">
                     <Tooltip title="下载">
                        <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                           <DownloadOutlined />
                        </a>
                     </Tooltip>
                  </div>
               </div>
               {files[fileIndex]?.cat === '22_00017-3' ? (
                  <div className="filesCheck-main-imgBg" ref={imgBgRef}>
                     <img
                        ref={imgRef}
                        style={{ transform: 'scale3d(1,1,1) rotate(0deg)' }}
                        className="filesCheck-main-img"
                        src={`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`}
                        alt="图片加载中..."
                     />
                  </div>
               ) : (
                  <div className="filesCheck-main-other">
                     <div className="filesCheck-main-other-icon">{iconType(files[fileIndex]?.cat)}</div>
                     <div className="filesCheck-main-other-text">
                        您所查看的附件不支持预览,请下载查看{files[fileIndex]?.cat === '22_00017-6' ? '或跳转预览' : ''}。
                     </div>
                     <div>
                        {files[fileIndex]?.cat === '22_00017-6' && (
                           <Button
                              className="public-buttonMargin"
                              onClick={() => window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`)}
            <div style={{ display: 'flex' }}>
               <div style={{ width: '200px' }}>
                  <Menu
                     // className="filesCheck-nav-menu"
                     style={{ width: '200px' }}
                     onOpenChange={(openKeys) => setOpenKeys(openKeys)}
                     mode="inline"
                     selectedKeys={[files[fileIndex]?.id]}
                     openKeys={openKeys}
                  >
                     {data.data?.map((x, t) => {
                        return (
                           <SubMenu
                              key={x.ownerCatName}
                              expandIcon={openKeys.includes(x.ownerCatName) ? <CaretRightOutlined /> : <CaretDownOutlined />}
                              title={x.ownerCatName}
                           >
                              跳转查看
                           </Button>
                              {x.fileList?.map((y, z) => {
                                 return (
                                    <Menu.Item
                                       onClick={async () => {
                                          global.setSpinning(true);
                                          for (let i = 0; i < files.length; i++) {
                                             if (files[i].id === y.id) {
                                                setFileIndex(i);
                                                break;
                                             }
                                          }
                                       }}
                                       icon={iconType(y.cat)}
                                       key={y.id}
                                    >
                                       {y.name}
                                    </Menu.Item>
                                 );
                              })}
                           </SubMenu>
                        );
                     })}
                  </Menu>
               </div>
               <div style={{ flex: 1 }}>
                  {files[fileIndex] ? (
                     <main className="filesCheck-main">
                        {/* 头部操作区 */}
                        <div className="filesCheck-main-action">
                           <div className="filesCheck-main-action-title">
                              <h3>{files[fileIndex]?.name}</h3>
                           </div>
                           {files[fileIndex]?.cat === '22_00017-3' && (
                              <>
                                 <div className="filesCheck-main-action-item">
                                    <Tooltip title="左转">
                                       <RotateLeftOutlined onClick={() => handleRotateImg('left')} />
                                    </Tooltip>
                                 </div>
                                 <div className="filesCheck-main-action-item">
                                    <Tooltip title="右转">
                                       <RotateRightOutlined onClick={() => handleRotateImg('right')} />
                                    </Tooltip>
                                 </div>
                              </>
                           )}
                           <div className="filesCheck-main-action-item">
                              <Tooltip title="下载">
                                 <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                    <DownloadOutlined />
                                 </a>
                              </Tooltip>
                           </div>
                        </div>
                        {files[fileIndex]?.ownerCat === "22_00014-1" ? (
                           <div className="filesCheck-main-imgBg" ref={imgBgRef}>
                              <img
                                 ref={imgRef}
                                 style={{ transform: 'scale3d(1,1,1) rotate(0deg)' }}
                                 className="filesCheck-main-img"
                                 src={`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`}
                                 alt="图片加载中..."
                              />
                           </div>
                        ) : (
                           <div className="filesCheck-main-other">
                              <div className="filesCheck-main-other-icon">{iconType(files[fileIndex]?.cat)}</div>
                              <div className="filesCheck-main-other-text">
                                 您所查看的附件不支持预览,请下载查看{files[fileIndex]?.cat === '22_00017-6' ? '或跳转预览' : ''}。
                              </div>
                              <div>
                                 {files[fileIndex]?.cat === '22_00017-6' && (
                                    <Button
                                       className="public-buttonMargin"
                                       onClick={() => window.open(`${appUrl.fileUrl}${appUrl.fileShowUrl}${files[fileIndex]?.id}`)}
                                    >
                                       跳转查看
                                    </Button>
                                 )}
                                 <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                                    <Button type="primary">下载</Button>
                                 </a>
                              </div>
                           </div>
                        )}
                        <a href={`${appUrl.fileUrl}${appUrl.fileDownUrl}${files[fileIndex]?.id}`}>
                           <Button type="primary">下载</Button>
                        </a>
                     </div>
                  </div>
               )}
               <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
                  <LeftOutlined />
                        <div className="filesCheck-imgLeft" onClick={() => handleNext('back')}>
                           <LeftOutlined />
                        </div>
                        <div className="filesCheck-imgRight" onClick={() => handleNext('next')}>
                           <RightOutlined />
                        </div>
                     </main>
                  ) : (
                     <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
                  )}
               </div>
               <div className="filesCheck-imgRight" onClick={() => handleNext('next')}>
                  <RightOutlined />
               </div>
            </main>
         ) : (
            <div style={{ width: '100%', paddingTop: '20%' }}>{$$.MyEmpty()}</div>
         )}
            </div>
         </nav>
         {/*图片查看*/}
      </>
   );
};