fix: '文件预览功能提交'

src/constant/index.js

@@ -196,6 +196,51 @@ const getStyles = (type) => {
   }
 }
 
+const accepts = {
+  '全部': [],
+  '图片': ['.bmp', '.gif', '.jpeg', 'tiff', '.png', '.svg', '.jpg'],
+  '文档': ['.docx', '.xlsx', '.pdf'],
+  '视频': ['.mp4'],
+  '音频': ['.mp3'],
+}
+
+const getFileType = (fileName) => {
+  if (fileName) {
+    //图片
+    if (fileName.includes('jpg')) {
+      return 'jpg'
+    }
+    if (fileName.includes('png')) {
+      return 'png'
+    }
+    if (fileName.includes('svg')) {
+      return 'svg'
+    }
+    if (fileName.includes('jpeg')) {
+      return 'jpeg'
+    }
+    //文档
+    if (fileName.includes('docx')) {
+      return 'docx'
+    }
+    if (fileName.includes('xlsx')) {
+      return 'xlsx'
+    }
+    if (fileName.includes('pdf')) {
+      return 'pdf'
+    }
+    //音频
+    if (fileName.includes('mp3')) {
+      return 'mp3'
+    }
+    //视频
+    if (fileName.includes('mp4')) {
+      return 'mp4'
+    }
+  }
+  return null
+}
+
 export {
   dateDescribe,
   dateType,
@@ -206,4 +251,6 @@ export {
   colors,
   widgetData,
   getStyles,
+  accepts,
+  getFileType
 }

src/core/Account/components/TablePack/components/FileView/index.js

-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './index.less'
-import { Button } from 'antd'
+import { Button, Upload, message } from 'antd'
+import { accepts,getFileType } from '../../../../../../constant'
+import { uploadFileUrl, downloadFileUrl, downloadFile } from '../../../../../../apis/process'
 import {
   SnippetsOutlined,
   PlusOutlined,
@@ -15,16 +17,24 @@ import {
   ExclamationCircleOutlined,
   QuestionCircleOutlined,
   EditOutlined,
-  DownOutlined
+  DownOutlined,
+  FileOutlined,
+  UploadOutlined,
+  ArrowDownOutlined
 } from '@ant-design/icons'
+import FileViewer from 'react-file-viewer'
 import Viewer from 'viewerjs-react'
 import Drag from '../../../../../components/Drag'
 
 const FileView = (props) => {
-
-  const { value, fileType, title } = props
+  const site = window.globalConfig?.userInfo?.site || window.globalConfig?.userInfo?.LocalSite
+  const { value, fileType, title, preview, download } = props
+  console.log(props,'propssssssssssssss');
   let fileList = value ? value.split(',') : []
   const [visible, setVisible] = useState(false)
+  const [viewVisible, setViewVisible] = useState(false)
+  const [showList, setShowList] = useState('')
+  const [showFile, setShowFile] = useState({ fileType: '', filePath: '' })
 
   if (!fileList.length) return null
 
@@ -44,6 +54,64 @@ const FileView = (props) => {
     )
   }
 
+  const iconRender = (file, listType) => {
+    if (listType !== 'text') {
+      let fileType = getFileType(file.name)
+      if (fileType) {
+        return <div className={styles.iconImg} type={fileType}></div>
+      } else {
+        return <div className={styles.iconImg} type={'通用'}></div>
+      }
+    }
+    return <FileOutlined />
+  }
+
+  const option = {
+    name: 'file',
+    // action: `${window.location.origin}${uploadFileUrl}`,
+    listType: 'picture',
+    withCredentials: true,
+    showUploadList: download ?
+      {
+        showDownloadIcon: '下载',
+        downloadIcon: <ArrowDownOutlined style={{ color: fileType === '图片' ? 'white' : '' }} />,
+        showRemoveIcon: false
+      } : { showRemoveIcon: false },
+    onPreview: (file) => {
+      console.log(file,'filefilefile');
+      if (!preview) return message.info('该附件禁止预览')
+      let fileType = getFileType(file.name)
+      if (fileType) {
+        setShowFile({ name: file.name, fileType: fileType, filePath: file.url })
+        setViewVisible(true)
+      }
+    }
+  }
+
+  useEffect(() => {
+    let list = []
+    fileList.forEach((item, index) => {
+    if (item) { // @Tips: 直接过滤掉名字中有异常字符的文件
+      let uid = index + '_' + Math.random()
+      let _obj = {
+        uid: uid,
+        value: item,
+        name: item.split('\\').reverse()[0],
+        type: fileType === '图片' ? 'image/jpeg' : 'file',
+        status: 'done',
+        url: `${downloadFileUrl}?filePath=${item}${site ? `&_site=${site}` : ''}`,
+        sourcePath: item.url,
+        originFileObj: { "uid": uid },
+        "response": { "code": 0, "msg": "Ok", "data": item, "stackTrace": null },
+        "xhr": {},
+      };
+      // if (schema.renderTo === 'Image') _obj.thumbUrl = `${downloadFileUrl}?filePath=${item}${site ? `&_site=${site}` : ''}`;
+      list.push(_obj)
+    }
+  })
+  setShowList(JSON.stringify(list))
+  },[value])
+
   return (
     <div className={styles.fileView}>
       <Button
@@ -55,11 +123,33 @@ const FileView = (props) => {
       </Button>
       <Drag
         onOk={() => setVisible(false)}
-        
+        onCancel={() => setVisible(false)}
         title={title}
         visible={visible}
       >
-
+        <Upload
+          // disabled={disabled}
+          // accept={accepts[fileType]}
+          fileList={showList ? JSON.parse(showList) : []}
+          className="upload-list-inline"
+          iconRender={iconRender}
+          {...option}
+        />
+      </Drag>
+      <Drag
+        width={'70%'}
+        title={showFile.name}
+        visible={viewVisible}
+        onCancel={() => setViewVisible(false)}
+        onOk={() => setViewVisible(false)}
+        bodyStyle={{ height: 650, overflowY: showFile.fileType.includes('xlsx') ? 'none' : "auto" }}
+      >
+        <FileViewer
+          className='fileViewer'
+          title='123'
+          fileType={showFile.fileType}
+          filePath={window.location.origin + showFile.filePath}
+        />
       </Drag>
     </div>
   )

src/core/Account/components/TablePack/components/FileView/index.less

+@imgSrc: '../../../../../../assets/images/file';
 .fileView {
   display: flex;
   justify-content: center;
@@ -11,4 +12,45 @@
       transform: scale(1.2);
     }
   }
+  .iconImg {
+    width: 45px;
+    height: 45px;
+    margin: 0 auto;
+    &[type='通用'] {
+      background: url('@{imgSrc}/通用.png');
+      background-size: 100% 100%;
+    }
+    &[type='jpg'] {
+      background: url('@{imgSrc}/JPG.png');
+      background-size: 100% 100%;
+    }
+    &[type='png'] {
+      background: url('@{imgSrc}/PNG.png');
+      background-size: 100% 100%;
+    }
+    &[type="mp3"] {
+      background: url('@{imgSrc}/音乐.png');
+      background-size: 100% 100%;
+    }
+    &[type="mp4"] {
+      background: url('@{imgSrc}/视频.png');
+      background-size: 100% 100%;
+    }
+    &[type='docx'] {
+      background: url('@{imgSrc}/Word.png');
+      background-size: 100% 100%;
+    }
+    &[type='xlsx'] {
+      background: url('@{imgSrc}/Excel.png');
+      background-size: 100% 100%;
+    }
+    &[type='PDF'] {
+      background: url('@{imgSrc}/PDF.png');
+      background-size: 100% 100%;
+    }
+  }
+  video {
+    height: 100%;
+    width: 100%;
+  }
 }
\ No newline at end of file