feat: 添加 FixUpload 组件

src/components/NiceForm/components/AntUpload/index.tsx

@@ -7,8 +7,11 @@ import {
   LoadingOutlined,
   PlusOutlined,
   UploadOutlined,
-  InboxOutlined
+  InboxOutlined,
+  FileFilled,
+  DeleteOutlined
 } from '@ant-design/icons'
+
 const { Dragger: UploadDragger } = AntdUpload
 
 const exts = [
@@ -93,6 +96,26 @@ const testOpts = (ext, options) => {
   return true
 }
 
+const getURL = (target: any) => {
+  return target?.['url'] || target?.['downloadURL'] || target?.['imgURL']
+}
+
+const getThumbURL = (target: any) => {
+  return (
+    target?.['thumbUrl'] ||
+    target?.['url'] ||
+    target?.['downloadURL'] ||
+    target?.['imgURL']
+  )
+}
+
+const getState = (target: any) => {
+  if (target?.success === false) return 'error'
+  if (target?.failed === true) return 'error'
+  if (target?.error) return 'error'
+  return target?.state || target?.status
+}
+
 const getImageByUrl = (url, options) => {
   for (let i = 0; i < exts.length; i++) {
     if (exts[i].ext.test(url) && testOpts(exts[i].ext, options)) {
@@ -105,17 +128,19 @@ const getImageByUrl = (url, options) => {
 
 const normalizeFileList = fileList => {
   if (fileList && fileList.length) {
-    return fileList.map(file => {
-      return file.response ? {
-        uid: file.uid,
-        status: file.status,
-        name: file.name,
-        url: file.downloadURL || file.imgURL || file.url,
-        ...file.response.data,
-        thumbUrl: file.imgURL || getImageByUrl(file.downloadURL || file.url, {
-          exclude: ['.png', '.jpg', '.jpeg', '.gif']
-        })
-      } : file;
+    return fileList.map((file, index) => {
+      return {
+        ...file,
+        uid: file.uid || `${index}`,
+        status: getState(file.response) || getState(file),
+        url: getURL(file) || getURL(file?.response),
+        thumbUrl: getImageByUrl(
+          getThumbURL(file) || getThumbURL(file?.response),
+          {
+            exclude: ['.png', '.jpg', '.jpeg', '.gif'],
+          }
+        ),
+      }
     })
   }
   return []
@@ -153,6 +178,7 @@ export interface IUploaderProps {
   locale: { [name: string]: any }
   value: any[]
   listType?: UploadListType
+  readOnly?: boolean
 }
 
 export const Upload = connect({
@@ -181,12 +207,20 @@ export const Upload = connect({
       const fileList = []
       value.forEach(item => {
         if (item.uid !== file.uid) {
-          fileList.push(item)
+          fileList.push(item as never)
         }
       })
       this.props.onChange(fileList)
     }
 
+    public removeItem = (item) => {
+      const { onChange } = this.props
+      this.setState({
+        value: this.state.value.filter(ele => ele.uid !== item.uid)
+      })
+      onChange(this.state.value.filter(ele => ele.uid !== item.uid))
+    }
+
     public onChangeHandler = ({ fileList }) => {
       const { onChange } = this.props
       fileList = toArr(fileList)
@@ -239,8 +273,7 @@ export const Upload = connect({
 
     public render() {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { listType, locale, onChange, value, ...others } = this.props
-
+      const { listType = 'text', locale, onChange, value = [], ...others } = this.props
       if (listType.indexOf('card') > -1) {
         return (
           <AntdUpload
@@ -250,7 +283,9 @@ export const Upload = connect({
             onRemove={this.onRemoveHandler}
             listType={'picture-card'}
           >
-            <UploadPlaceholder />
+            {!others.readOnly ? (
+              <UploadPlaceholder />
+            ) : null}
           </AntdUpload>
         )
       }
@@ -271,20 +306,29 @@ export const Upload = connect({
           </UploadDragger>
         )
       }
-      return (
+      return (<div>
+        {
+          value.map(item => (<p key={item.uid} style={{width: 424, display: 'flex', justifyContent: 'space-between'}}>
+            <a href={item.url} target="_blank"><FileFilled /> {item.name}</a>
+            {!others.readOnly ? <span style={{cursor: 'pointer'}} onClick={() => this.removeItem(item)}><DeleteOutlined /></span> : null}
+          </p>))
+        }
         <AntdUpload
           {...others}
           fileList={this.state.value}
           onChange={this.onChangeHandler}
           onRemove={this.onRemoveHandler}
           listType={listType}
+          itemRender={() => null}
         >
-          <Button style={{ margin: '0 0 10px' }}>
-            <UploadOutlined />
-            {(locale && locale.uploadText) || '上传文件'}
-          </Button>
+          {!others.readOnly ? (
+            <Button style={{ margin: '0 0 10px' }}>
+              <UploadOutlined />
+              {(locale && locale.uploadText) || '上传文件'}
+            </Button>
+          ) : null}
         </AntdUpload>
-      )
+      </div>)
     }
   }
 )

src/components/NiceForm/components/FixUpload.tsx

+/*
+ * @Author: XieZhiXiong
+ * @Date: 2021-06-01 17:32:51
+ * @LastEditors: XieZhiXiong
+ * @LastEditTime: 2021-06-01 17:44:27
+ * @Description: 默认带上 token 的 AntUpload
+ */
+import React from 'react';
+import { getAuth } from '@/utils/auth';
+import AntUpload from './AntUpload';
+
+const FixUpload = (props) => {
+  const { token } = (getAuth() || {});
+  return (
+    <AntUpload
+      headers={{
+        token,
+      }}
+      {...props}
+    />
+  );
+};
+
+FixUpload.isFieldComponent = true;
+
+export default FixUpload;

src/components/NiceForm/index.tsx

@@ -26,7 +26,7 @@ import { Checkbox } from '@formily/antd-components';
 import DateSelect from './components/DateSelect';
 import DateRangePickerUnix from './components/DateRangePickerUnix';
 import SmilingFace from './components/SmilingFace';
-import AntUpload from './components/AntUpload';
+import FixUpload from './components/FixUpload';
 import './index.less'
 import { currentStateType, getCurrentState } from './utils/keepAlive';
 import { useRouteMatch } from 'umi';
@@ -99,7 +99,7 @@ export const componentExport = {
   DateSelect,
   DateRangePickerUnix,
   SmilingFace,
-  AntUpload,
+  FixUpload,
 }
 const NiceForm: React.FC<NiceFormProps> = props => {
   const { children, components, ...reset } = props;