fix multiple image in report k3

src/views/Report/k3/DialogForm.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
-import { Image } from 'antd';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+import { Image, Col, Row } from 'antd';
 import 'antd/dist/antd.css';
 import { BASE_SIMPRO_LUMEN_IMAGE } from '../../../const/ApiConst.js';
 export default class DialogForm extends Component {
@@ -43,12 +43,25 @@ export default class DialogForm extends Component {
   }
 
   renderForm = () => {
+    const { dataImage } = this.props;
     return(
-      <div style={{width:"100%",display:'flex',justifyContent:'center',textAlign:'center'}}>
-          <Image
-            width={200}
-            src={`${BASE_SIMPRO_LUMEN_IMAGE}/${this.state.url}`}
-          />
+      <div style={{justifyContent:'center'}}>
+        <Row gutter={[16, 16]}>
+          <Image.PreviewGroup>
+          {
+            dataImage && dataImage.length > 0 && dataImage.map((item, idx) => 
+              <Col span={8}>
+                <Image
+                  style={{width: 150, height: 200}}
+                  src={`${BASE_SIMPRO_LUMEN_IMAGE}/${item.image}`}
+                />
+              </Col>
+            )
+          }
+          </Image.PreviewGroup>
+
+          { !dataImage || (dataImage && dataImage.length < 1) && <div style={{textAlign: 'center', color: 'red', flex: 1, padding: 20}}>No image available</div> }
+        </Row>
       </div>
     )
   }
@@ -63,7 +76,7 @@ export default class DialogForm extends Component {
         : null}
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={() => this.handleCancel()}>Close</Button>
+          
         </ModalFooter>
       </Modal>
     )