任务回填-上传材料开发

baseComponents/FormArray/DiyUploadOneStopFile.js

+import React, { useRef, useState, useEffect } from 'react';
+import { List, Switch, Button, Toast, Icon } from 'antd-mobile';
+import styles from './styles.less';
+import { uploadOnestopFile } from '@/H5Public/baseComponents/UploadFile/api';
+
+const Brief = List.Item.Brief;
+
+export default function DiyUploadOneStopFile(props) {
+  const { config, formValue = [], giveRequiredName, changeValue } = props;
+  const [files, setFiles] = useState([]);
+  const inputRef = useRef(null);
+  const uploadImage = () => {
+    Toast.loading('文件上传中', 1);
+    const domF = inputRef.current.files;
+    if (!domF.length) {
+      return false;
+    }
+    const file = domF[domF.length - 1];
+    uploadOnestopFile(file).then((res) => {
+      if (res) {
+        console.log(res);
+      }
+      Toast.hide();
+      if (res && typeof res === 'string') {
+        Toast.success('上传成功!', 1);
+        setFiles([
+          ...files,
+          {
+            name: file.name,
+            fileExt: file.name.split('.').pop(),
+            path: res,
+          },
+        ]);
+      }
+    });
+  };
+
+  useEffect(() => {
+     changeValue(files, config.key);
+  }, [files]);
+
+  const deleteItem = (data) => {
+    setFiles((files) => {
+      return files.filter((item) => {
+       return item.path !== data.path;
+      });
+    });
+  };
+  return (
+    <List.Item
+      multipleLine={true}
+      key={config.key}
+      className={styles.diyStyle}
+    >
+      {giveRequiredName(config)}
+      <Brief>
+        支持格式：xls、xlsx、wps、rar、zip、doc、docx、pdf、png、jpg、jpeg
+        <div className={styles.uploadButton}>
+          <input type="file"
+            // accept={'*'}
+                 id={config.key}
+                 ref={inputRef}
+                 style={{
+                   opacity: 0,
+                   width: '100vw',
+                   height: '50px',
+                   position: 'absolute',
+                   zIndex: 2,
+                 }}
+                 onChange={uploadImage}
+          />
+          <Button type={'primary'}>上传文件</Button>
+        </div>
+        <div className={styles.fileList}>
+          {
+            files.map((g) => {
+              return <div key={g.path} className={styles.fileItem}>
+                <a>{g.name}</a><Icon type={'cross-circle'} onClick={deleteItem.bind(this, g)} />
+              </div>;
+            })
+          }
+        </div>
+      </Brief>
+
+    </List.Item>
+  );
+}

baseComponents/FormArray/index.js

@@ -16,6 +16,7 @@ import FieldList from '@/H5Public/baseComponents/FieldList';
 
 import TextareaItemMultiRows from '../TextareaItemMultiRows';
 import { useState } from 'react';
+import DiyUploadOneStopFile from '@/H5Public/baseComponents/FormArray/DiyUploadOneStopFile';
 
 const DiyInput = props => {
   let { config, formValue, changeValue, otherProps } = props;
@@ -309,6 +310,16 @@ class FormArray extends Component {
                 changeValue={this.changeValue}
               />
             );
+          case 'UploadOneStopFile':
+            return (
+              <DiyUploadOneStopFile
+                key={x.key}
+                config={x}
+                formValue={formValues}
+                changeValue={this.changeValue}
+                giveRequiredName={giveRequiredName}
+              />
+            )
           case 'Components':
             return x.render(formValues[x.key], this.changeValue, x.key);
           default:

baseComponents/FormArray/styles.less

+.diyStyle{
+  :global{
+    .am-list-brief{
+      white-space: pre-wrap !important;
+      padding: 0 10px;
+    }
+  }
+  .uploadButton{
+    margin-top: 10px;
+  }
+}
+
+.fileList{
+  margin-top: 20px;
+  font-size: 16px;
+  .fileItem{
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    justify-items: end;
+    margin-bottom: 10px;
+  }
+}