http://scjoyedu.eicp.net:57400/zentao/task-view-4340.html

baseComponents/FormArray/DiyUploadOneStopFile.js

@@ -2,13 +2,21 @@ 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';
-
+import systemConfig from '@/config/config';
 const Brief = List.Item.Brief;
 
 export default function DiyUploadOneStopFile(props) {
   const { config, formValue = [], giveRequiredName, changeValue } = props;
+  const { readOnly } = config;
   const [files, setFiles] = useState([]);
   const inputRef = useRef(null);
+
+  useEffect(() => {
+    if(formValue[config.key] && Array.isArray(formValue[config.key])){
+      setFiles(formValue[config.key]);
+    }
+  }, [readOnly, formValue]);
+
   const uploadImage = () => {
     Toast.loading('文件上传中', 1);
     const domF = inputRef.current.files;
@@ -36,13 +44,13 @@ export default function DiyUploadOneStopFile(props) {
   };
 
   useEffect(() => {
-     changeValue(files, config.key);
+    changeValue(files, config.key);
   }, [files]);
 
   const deleteItem = (data) => {
     setFiles((files) => {
       return files.filter((item) => {
-       return item.path !== data.path;
+        return item.path !== data.path;
       });
     });
   };
@@ -53,29 +61,35 @@ export default function DiyUploadOneStopFile(props) {
       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>
+        {
+          !readOnly && <>
+            支持格式：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)} />
+                {/* TODO 加个弹窗的预览功能 */}
+                <a href={systemConfig.sqlFormsServer + g.path} target={'_blank'}>{g.name}</a> {!readOnly && <Icon type={'cross-circle'} onClick={deleteItem.bind(this, g)} /> }
               </div>;
             })
           }

baseComponents/FormArray/index.js

@@ -12,7 +12,6 @@ import {
 } from 'antd-mobile';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import FieldList from '@/H5Public/baseComponents/FieldList';
 
 import TextareaItemMultiRows from '../TextareaItemMultiRows';
 import { useState } from 'react';
@@ -69,9 +68,9 @@ const DiyTextarea = props => {
 const DiyPicker = props => {
   let { config, formValue, changeValue } = props;
   if (config.readOnly) {
-    config.placeholder = ' ';
+    config.extra = ' ';
   } else {
-    config.placeholder = config.placeholder || '点击输入';
+    config.extra = config.placeholder || '请选择';
   }
   let opt = config.options.map(x => {
     return {
@@ -79,18 +78,18 @@ const DiyPicker = props => {
       value: x.key,
     };
   });
-
   return (
     <Picker
       data={opt}
       cols={1}
       // extra={' '}
       key={config.key}
-      value={[formValue[config.key]]}
+      value={formValue[config.key] ? [formValue[config.key]] : undefined}
       disabled={config.readOnly}
       onChange={val => {
         changeValue(val[0], config.key);
       }}
+      extra={config.extra}
       {...config.otherProps}
     >
       <List.Item arrow={config.readOnly ? '' : 'horizontal'}>{giveRequiredName(config)}</List.Item>
@@ -352,5 +351,5 @@ FormArray.defaultProps = {
   },
   readOnly: false,
 };
-
+export  { giveRequiredName }
 export default FormArray;

utils/requestJSON.js

+import { getHeaders } from '@/H5Public/utils/2022new/getHeaders';
+
+export default function requestJSON(url, data) {
+  return fetch(url, {
+    method: 'post',
+    body: JSON.stringify({...data}),
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+      ...getHeaders().headers,
+
+    }
+  })
+    .then(function(res) {
+      return res.json();
+    }).then(function(data) {
+      return data;
+    })
+}