add the ticker record button

myems-web/src/components/MyEMS/Ticket/TicketApplication.js

@@ -37,7 +37,7 @@ import { toast } from 'react-toastify';
 import ButtonIcon from '../../common/ButtonIcon';
 import { APIBaseURL } from '../../../config';
 import { join } from 'lodash';
-import { Steps } from 'antd';
+import { Steps, Timeline } from 'antd';
 
 const { Step } = Steps;
 
@@ -160,6 +160,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       </DropdownToggle>
       <DropdownMenu right className="border py-2">
         <DropdownItem onClick={viewTicketStatusModal.bind(this, id)}>{t('View State')}</DropdownItem>
+        <DropdownItem onClick={viewTicketRecordModal.bind(this, id)}>{t('View Record')}</DropdownItem>
         <DropdownItem onClick={viewTicketWorkflowModal.bind(this, id)}>{t('View Workflow')}</DropdownItem>
       </DropdownMenu>
     </UncontrolledDropdown>
@@ -372,8 +373,40 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
       });
   };
 
-  let hiddenTicketWorkflowModal = () => {
+  let viewTicketRecordModal = (id, e) => {
-    setModalIsShown(false);
+    console.log('View Ticket Record', id);
+    // Get Ticket Status
+    let isResponseOK = false;
+    fetch(APIBaseURL + '/ticket/status/' + id, {
+      method: 'GET',
+      headers: {
+        'Content-type': 'application/json'
+      },
+      body: null
+    })
+      .then(response => {
+        console.log(response);
+        if (response.ok) {
+          isResponseOK = true;
+        }
+        return response.json();
+      })
+      .then(json => {
+        if (isResponseOK) {
+          console.log('/ticket/record ---', json);
+          console.log('/ticket/record ---', json['data']);
+          let temp = json.data;
+          console.log('temp', temp);
+          setTicketStatus({ ...temp });
+          setModalIsShown(true);
+          setOpenedModalName('Record');
+        } else {
+          toast.error(json.description);
+        }
+      })
+      .catch(err => {
+        console.log(err);
+      });
   };
 
   let viewTicketWorkflowModal = (id, e) => {
@@ -400,9 +433,14 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
         console.log('switch status');
         return <ModalHeader>{t('Ticket Status')}</ModalHeader>;
 
+      case 'Record':
+        console.log('switch record');
+        return <ModalHeader>{t('Ticket Record')}</ModalHeader>;
+
       case 'Workflow':
         console.log('switch workflow');
         return <ModalHeader>{t('Ticket Workflow')}</ModalHeader>;
+
       default:
         console.log('switch none');
         return <ModalHeader>{t('Ticket None')}</ModalHeader>;
@@ -453,16 +491,42 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
                     let description_time = item.state_flow_log_list[0].transition.transition_name;
                     description = description_user + description_operation + '@' + description_time;
                   }
-                  return <Step key={item.state_id} title={item.state_name} description={description} />;
+                  return <Step key={item.state_id} title={item.state_name} description="" />;
                 })}
               </Steps>
             )}
           </ModalBody>
         );
 
+      case 'Record':
+        console.log('switch Record');
+        return (
+          <ModalBody>
+            {ticketStatus && (
+              <Timeline mode="left">
+                {ticketStatus.value
+                  .filter(item => item.state_flow_log_list.length > 0)
+                  .map((item, index) => {
+                    let description_user = item.state_flow_log_list[0].participant_info.participant_alias;
+                    let description_time = item.state_flow_log_list[0].gmt_created;
+                    let description_operation = item.state_flow_log_list[0].transition.transition_name;
+                    let description = "用户'" + description_user + "'发起了'" + description_operation + "'操作";
+                    return (
+                      <Timeline.Item key={index} label={description_time}>
+                        {description}
+                      </Timeline.Item>
+                    );
+                  })}
+
+              </Timeline>
+            )}
+          </ModalBody>
+        );
+
       case 'Workflow':
         console.log('switch workflow');
         return <ModalBody>{t('Ticket Workflow')}</ModalBody>;
+
       default:
         console.log('switch none');
         return <ModalBody>{}</ModalBody>;
@@ -488,6 +552,13 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
           </ModalHeader>
         );
 
+      case 'Record':
+        return (
+          <ModalHeader>
+            <Button onClick={hiddenModal}>{t('Close')}</Button>
+          </ModalHeader>
+        );
+
       case 'Workflow':
         return (
           <ModalHeader>