提交

src/components/Common/Form/index.jsx

@@ -22,6 +22,7 @@ import {
 import { UploadOutlined } from '@ant-design/icons'
 import SimplePictureUpload from '../Upload/SimplePictureUpload'
 import MultiplePictureUpload from '../Upload/MultiplePictureUpload'
+import NormalUpload from '../Upload/NormalUpload'
 
 const { TextArea } = Input
 const { Option } = Select
@@ -73,6 +74,7 @@ const FormComponentType = {
   'timepicker': TimePicker,
   'simplepictureupload': SimplePictureUpload,
   'multiplepictureupload': MultiplePictureUpload,
+  'normalupload': NormalUpload,
   'custom': 'Custom'  // 自定义
 }
 
@@ -169,6 +171,9 @@ const SageForm = (props, ref) => {
       case 'multiplepictureupload':
         formCompnentNode = <FormComponent {...item} />
         break;
+      case 'normalupload':
+        formCompnentNode = <FormComponent {...item} />
+        break;
       default:
         formCompnentNode = <FormComponent {...item.props} />
         break;

src/components/Common/Upload/NormalUpload/index.jsx

+import React, { useState, useEffect } from 'react'
+import { Button, Upload, message } from 'antd'
+import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons'
+import './style.less'
+
+
+const NormalUpload = (props) => {
+
+  const {
+    name: field,
+    children: childrenProps,
+    maxNum,
+    props: {
+      action = '/ebd/sys/file/upload',
+      name = 'file',
+      fileList: fileListProps,
+      uploadSuccess,
+      ...uploadProps
+    }
+  } = props
+
+  const [fileList, setFileList] = useState([])
+
+  useEffect(() => {
+    setFileList(fileListProps || [])
+  }, [fileListProps])
+
+  // 上传
+  const handleChange = ({ file, fileList: _fileList }) => {
+    // if (info.file.status !== 'uploading') {
+    //   // console.log(info.file, info.fileList);
+    // }
+    // if (info.file.status === 'done') {
+    //   // message.success(`${info.file.name} file uploaded successfully`);
+    //   message.success(`文件上传成功`);
+    // } else if (info.file.status === 'error') {
+    //   // message.error(`${info.file.name} file upload failed.`);
+    //   message.error(`文件上传失败`);
+    // }
+
+    let newFileList = _fileList.slice()
+    if (maxNum) {
+      newFileList = newFileList.slice(-maxNum)
+    }
+
+    console.log(newFileList)
+
+    if (file.status === 'done') {
+      if (uploadSuccess) {
+        const imageList = []
+        newFileList.forEach(item => {
+          imageList.push(item.response?.data.id || item.id)
+          item.thumbUrl = `/ebd/sys/file/showImage?imageId=${item.response?.data.id || item.id}`
+        })
+        uploadSuccess(field, imageList)
+      }
+    }
+    setFileList(newFileList)
+  }
+
+  // 删除
+  const hanldeRemove = (file) => {
+    const newFileList = fileList.slice()
+    fileList.forEach((item, index) => {
+      if (item.uid === file.uid) {
+        newFileList.splice(index, 1)
+      }
+    })
+    // setFileList(newFileList)
+
+    if (uploadSuccess) {
+      const imageList = []
+      newFileList.forEach(item => {
+        imageList.push(item.response?.data.id || item.id)
+      })
+      uploadSuccess(field, imageList)
+    }
+  }
+
+  const uploadButton = childrenProps || (
+    <Button>
+      <UploadOutlined /> 上传
+    </Button>
+  );
+
+  return (
+    <Upload
+      action={action}
+      name={name}
+      fileList={fileList}
+      onChange={handleChange}
+      onRemove={hanldeRemove}
+      {...uploadProps}
+    >
+      {childrenProps || uploadButton}
+    </Upload>
+  )
+
+}
+
+export default NormalUpload

src/components/Common/Upload/NormalUpload/style.less

+.avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}

src/pages/demo/crud/components/CreateForm.jsx

@@ -375,6 +375,17 @@ const CreateForm = (props, ref) => {
         uploadSuccess
       },
     },
+    {
+      name: 'field28',
+      label: '字段28',
+      type: 'normalupload',
+      maxNum: 2,
+      rules: [{ required: true }],
+      props: {
+        listType: 'picture',
+        uploadSuccess
+      },
+    },
   ]
 
   // 暴露外部方法

src/pages/demo/crud/components/UpdateForm.jsx

@@ -51,8 +51,8 @@ const UpdateForm = (props, ref) => {
   }
 
   // 获取图片列表
-  const getFileList = () => {
-    const imageList = detail.field27 ? JSON.parse(detail.field27) : []
+  const getFileList = (list) => {
+    const imageList = list ? JSON.parse(list) : []
     const fileList = []
     imageList.forEach(item => {
         const obj = {}
@@ -387,7 +387,19 @@ const UpdateForm = (props, ref) => {
       rules: [{ required: true }],
       maxNum: 2,
       props: {
-        fileList: getFileList(),
+        fileList: getFileList(detail.field27),
+        uploadSuccess
+      },
+    },
+    {
+      name: 'field28',
+      label: '字段28',
+      type: 'normalupload',
+      maxNum: 2,
+      rules: [{ required: true }],
+      props: {
+        listType: 'picture',
+        fileList: getFileList(detail.field28),
         uploadSuccess
       },
     },

src/pages/demo/crud/index.jsx

@@ -189,6 +189,7 @@ const CrudList = () => {
       field25: data.field25 ? moment(data.field25, 'HH:mm:ss') : '',
       field26: data.field26,
       field27: data.field27 ? JSON.parse(data.field27) : [],
+      field28: data.field28 ? JSON.parse(data.field28) : [],
     })
   }