Merge remote-tracking branch 'origin/master'

one_stop_public/libs/UploadCom.js

 import React from 'react';
-import { Button, Icon, message, Modal, Upload } from 'antd';
-import { queryApiActionPath } from '../utils/queryConfig';
+import {Button, Icon, message, Modal, Upload} from 'antd';
+import {queryApiActionPath} from '../utils/queryConfig';
 import config from '@/webPublic/one_stop_public/config';
 import styles from './style.less';
 import UploadComDiyForQnZy from '@/webPublic/one_stop_public/libs/UploadComDiyForQnZy';
@@ -40,7 +40,8 @@ class UploadCom extends React.Component {
       try {
         this.otherProps = new Function(this.otherProps)();
         console.log(this.otherProps);
-      } catch (e) {}
+      } catch (e) {
+      }
     }
   }
 
@@ -62,12 +63,12 @@ class UploadCom extends React.Component {
 
   //检测尺寸
   isSize = file => {
-    const { limitWarnningMessage } = this.otherProps;
+    const {limitWarnningMessage} = this.otherProps;
     return new Promise((resolve, reject) => {
-      let { width, height } = this.otherProps.limitImageSize;
+      let {width, height} = this.otherProps.limitImageSize;
       let _URL = window.URL || window.webkitURL;
       let img = new Image();
-      img.onload = function() {
+      img.onload = function () {
         let valid = img.width >= width && img.height >= height;
         valid ? resolve() : reject();
       };
@@ -97,11 +98,11 @@ class UploadCom extends React.Component {
     if (info.file.status === 'done') {
       message.success(`${info.file.name} 上传成功`);
       const files = this.state.files;
-      files.push({ path: info.file.response, name: info.file.name });
+      files.push({path: info.file.response, name: info.file.name});
       if (!('value' in this.props)) {
-        this.setState({ files });
+        this.setState({files});
       }
-      this.triggerChange({ files });
+      this.triggerChange({files});
     } else if (info.file.status === 'error') {
       message.error(`${info.file.name} 上传失败`);
     }
@@ -115,14 +116,14 @@ class UploadCom extends React.Component {
       }
     }
     if (!('value' in this.props)) {
-      this.setState({ files });
+      this.setState({files});
     }
-    this.triggerChange({ files });
+    this.triggerChange({files});
   };
 
   render() {
-    const { files, previewVisible, previewImage } = this.state;
-    const { isMultiple, accept, btnName, disabled } = this.props;
+    const {files, previewVisible, previewImage} = this.state;
+    const {isMultiple, accept, btnName, disabled} = this.props;
     const props = {
       name: 'file',
       multiple: isMultiple,
@@ -139,19 +140,19 @@ class UploadCom extends React.Component {
         <Upload {...props} disabled={disabled}>
           {!disabled && (
             <Button>
-              <Icon type="upload" />
+              <Icon type="upload"/>
               {btnName ? btnName : '上传附件'}
             </Button>
           )}
         </Upload>
-        <ul style={{ paddingLeft: 8, display: 'flex' }}>
-          {(files || []).map(f => {
+        <ul className={styles.ulImageList}>
+          {(Array.isArray(files) && files || []).map(f => {
             if (f.path && checkIsImage(f.path)) {
               return (
                 <li key={f.path} className={styles.preview_img}>
                   <div className={styles.preview_div}>
                     <img
-                      style={{ width: '100px', height: 'auto' }}
+                      style={{width: '100px', height: 'auto'}}
                       className={styles.img}
                       src={queryApiActionPath() + f.path}
                     />
@@ -165,12 +166,12 @@ class UploadCom extends React.Component {
                         });
                       }}
                     >
-                      <Icon type="eye" className={styles.icon_eye} />
+                      <Icon type="eye" className={styles.icon_eye}/>
                     </div>
                   </div>
                   {!disabled && (
                     <Icon
-                      style={{ marginLeft: 10 }}
+                      style={{marginLeft: 10}}
                       type="delete"
                       onClick={this.remove.bind(this, f.path)}
                     />
@@ -185,7 +186,7 @@ class UploadCom extends React.Component {
                 </a>{' '}
                 {!disabled && (
                   <Icon
-                    style={{ marginLeft: 10 }}
+                    style={{marginLeft: 10}}
                     type="delete"
                     onClick={this.remove.bind(this, f.path)}
                   />
@@ -193,16 +194,16 @@ class UploadCom extends React.Component {
               </li>
             );
           })}
-        </ul>
-        <Modal
-          visible={previewVisible}
-          footer={null}
-          onCancel={() => this.setState({ previewVisible: false })}
-          width={'90vw'}
-        >
-          <img alt="example" style={{ width: '100%', height: 'auto' }} src={previewImage} />
-        </Modal>
-      </div>
-    );
+      </ul>
+    <Modal
+      visible={previewVisible}
+      footer={null}
+      onCancel={() => this.setState({previewVisible: false})}
+      width={'90vw'}
+    >
+      <img alt="example" style={{width: '100%', height: 'auto'}} src={previewImage}/>
+    </Modal>
+  </div>
+  );
   }
 }

one_stop_public/libs/style.less

@@ -267,3 +267,17 @@
         }
     }
 }
+.ulImageList{
+  display: grid;
+  grid-row: auto;
+  grid-template-columns: repeat(auto-fill, 130px);
+  grid-auto-flow: column;
+  justify-items: start;
+  align-items: center;
+  column-gap: 10px;
+  .borderLi{
+    border: 1px solid gray;
+    display: grid;
+    padding: 5px;
+  }
+}