From 2c8c3ac0e1eae4a70803a0b5f3fa6050e5e1cc7e Mon Sep 17 00:00:00 2001 From: hyh123a Date: Thu, 21 Apr 2022 13:33:39 +0800 Subject: [PATCH] complete the ticket list page --- .../components/MyEMS/Ticket/TicketAgent.js | 18 +- .../MyEMS/Ticket/TicketApplication.js | 146 ++++---- .../src/components/MyEMS/Ticket/TicketList.js | 338 +++++++++++++++--- 3 files changed, 367 insertions(+), 135 deletions(-) diff --git a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js index 99aaadf0..d323e368 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js +++ b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js @@ -80,7 +80,13 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => { // ticket body const [ticketBody, setTicketBody] = useState({}); + // Init: Get Ticket Types and List useEffect(() => { + getTicketTypes(); + getTicketList(); + }, []); + + const getTicketTypes = () => { let isResponseOK = false; // Get Ticket Type fetch(APIBaseURL + '/ticket/types' + '?username=admin', { @@ -110,9 +116,9 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); - }, []); + }; - useEffect(() => { + const getTicketList = () => { let isResponseOK = false; // Get Ticket List fetch(APIBaseURL + '/ticket/list/agent' + '?username=admin', { @@ -141,8 +147,7 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); - }, []); - + }; const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const actionFormatter = (dataField, { id }) => ( @@ -409,6 +414,9 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); + + // Get New Ticket List + getTicketList(); }; const text = ` @@ -492,7 +500,7 @@ Hello world {t('Ticket')}; - +

{text}

 diff --git a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js b/myems-web/src/components/MyEMS/Ticket/TicketApplication.js index ebdcd73c..31a9f0d7 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js +++ b/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, Timeline, Collapse } from 'antd'; +import { Steps, Timeline, Collapse, message } from 'antd'; const { Step } = Steps; const { Panel } = Collapse; @@ -77,65 +77,11 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { const [ticketStatus, setTicketStatus] = useState({}); useEffect(() => { - let isResponseOK = false; - // Get Ticket Type - fetch(APIBaseURL + '/ticket/types', { - 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('000', ticketTypes); - console.log('111', typeof json, json[0].id, json[0].name); - // console.log('111', typeof(json),json); - setTicketTypes(json); - } else { - toast.error(json.description); - } - }) - .catch(err => { - console.log(err); - }); + getTicketTypes(); }, []); useEffect(() => { - let isResponseOK = false; - // Get Ticket List - fetch(APIBaseURL + '/ticket/list/apply' + '?username=admin', { - 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/list', json); - setTicketList(json); - } else { - toast.error(json.description); - } - }) - .catch(err => { - console.log(err); - }); + getTicketList(); }, []); const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); @@ -237,6 +183,65 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { setSelectedTicketType(target.value); }; + let getTicketTypes = () => { + let isResponseOK = false; + // Get Ticket Type + fetch(APIBaseURL + '/ticket/types', { + 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) { + setTicketTypes(json); + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }; + + let getTicketList = () => { + let isResponseOK = false; + // Get Ticket List + fetch(APIBaseURL + '/ticket/list/apply' + '?username=admin', { + 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/list', json); + setTicketList(json); + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }; + let applyTicket = () => { console.log('You apply the ticket!!', selectedTicketType); @@ -270,7 +275,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { setOpenedModalName('Application'); }; - // Submit + // Submit Ticket let submitApplication = target => { hiddenModal(); console.log('You submit the ticket.'); @@ -279,7 +284,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { workflow_id: ticketApplicationfields.workflow_id }; setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp }); - console.log('submit----', ticketApplicationPayload); let isResponseOK = false; fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType + '?username=admin', { @@ -306,6 +310,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); + + // Get New Ticket List + getTicketList(); }; let hiddenModal = () => { @@ -332,9 +339,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { }) .then(json => { if (isResponseOK) { - console.log('/ticket/status ---', json); - console.log('/ticket/status ---', json['data']); - console.log('/ticket/status ---', json); let temp = json.data; let current_id; temp.value.map((item, index) => { @@ -381,10 +385,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { }) .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'); @@ -410,8 +411,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp }); }; - let getModelHeader = () => { - console.log('---------------------', 'getModelHeader'); + // Get Modal + let getModalHeader = () => { switch (openedModalName) { case 'Application': console.log('switch application'); @@ -435,8 +436,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { } }; - let getModelBody = () => { - console.log('---------------------', 'getModelBody'); + let getModalBody = () => { switch (openedModalName) { case 'Application': console.log('switch application'); @@ -522,7 +522,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { } }; - let getModelFooter = () => { + let getModalFooter = () => { switch (openedModalName) { case 'Application': return ( @@ -635,9 +635,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { - {getModelHeader()} - {getModelBody()} - {getModelFooter()} + {getModalHeader()} + {getModalBody()} + {getModalFooter()} diff --git a/myems-web/src/components/MyEMS/Ticket/TicketList.js b/myems-web/src/components/MyEMS/Ticket/TicketList.js index 7dff4fc1..b5764434 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketList.js +++ b/myems-web/src/components/MyEMS/Ticket/TicketList.js @@ -17,7 +17,11 @@ import { UncontrolledDropdown, Spinner, CustomInput, - Button + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, } from 'reactstrap'; import Cascader from 'rc-cascader'; import loadable from '@loadable/component'; @@ -30,6 +34,10 @@ import { withTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; import ButtonIcon from '../../common/ButtonIcon'; import { APIBaseURL } from '../../../config'; +import { Steps, Timeline, Collapse, message } from 'antd'; + +const { Step } = Steps; +const { Panel } = Collapse; const TicketList = ({ setRedirect, setRedirectUrl, t }) => { useEffect(() => { @@ -53,21 +61,28 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { let table = createRef(); // State - const [selectedTicketType, setSelectedTicketType] = useState(1); const [ticketTypes, setTicketTypes] = useState([]); const [ticketList, setTicketList] = useState([]); const [ticketApplicationfields, setTicketApplicationfields] = useState({}); + const [ticketListAll, setTicketListAll] = useState([]); - const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); - const [cascaderOptions, setCascaderOptions] = useState(undefined); - const [equipmentList, setEquipmentList] = useState([]); - const [spinnerHidden, setSpinnerHidden] = useState(false); - const [exportButtonHidden, setExportButtonHidden] = useState(true); - const [excelBytesBase64, setExcelBytesBase64] = useState(undefined); + // Select Button + const [selectedTicketType, setSelectedTicketType] = useState(1); + const [selectedTicketTypeName, setSelectedTicketTypeName] = useState(''); + + // View Button + const [modalIsShown, setModalIsShown] = useState(false); + const [openedModalName, setOpenedModalName] = useState(''); + const [ticketStatus, setTicketStatus] = useState({}); useEffect(() => { - let isResponseOK = false; // Get Ticket Type + getTicketTypes(); + getTicketList(); + }, []); + + const getTicketTypes = () => { + let isResponseOK = false; fetch(APIBaseURL + '/ticket/types', { method: 'GET', headers: { @@ -84,10 +99,9 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { }) .then(json => { if (isResponseOK) { - console.log('000', ticketTypes); - console.log('111', typeof json, json[0].id, json[0].name); - // console.log('111', typeof(json),json); setTicketTypes(json); + setSelectedTicketType(json[0].id); + setSelectedTicketTypeName(json[0].name); } else { toast.error(json.description); } @@ -95,19 +109,15 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); - }, []); - - useEffect(() => { + }; + const getTicketList = () => { let isResponseOK = false; - // Get Ticket List - fetch(APIBaseURL + '/ticket/list/completed', { - method: 'POST', + fetch(APIBaseURL + '/ticket/list/completed' + '?username=admin', { + method: 'GET', headers: { 'Content-type': 'application/json' }, - body: JSON.stringify({ - user_name: 'admin' - }) + body: null }) .then(response => { console.log(response); @@ -120,6 +130,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { if (isResponseOK) { console.log('/ticket/list', json); setTicketList(json); + setTicketListAll(json); } else { toast.error(json.description); } @@ -127,8 +138,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); - }, []); - + }; const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const actionFormatter = (dataField, { id }) => ( @@ -138,10 +148,212 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { - console.log('Edit: ', id)}>{t('Edit Equipment')} + {t('View State')} + {t('View Record')} + {t('View Workflow')} ); + let hiddenModal = () => { + setModalIsShown(false); + }; + + let viewTicketStatusModal = (id, e) => { + console.log('View Ticket Status', id); + // Get Ticket Status + let isResponseOK = false; + fetch(APIBaseURL + '/ticket/status/' + id + '?username=admin', { + 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) { + let temp = json.data; + let current_id; + temp.value.map((item, index) => { + console.log( + '/ticket/status ---', + item.state_id, + temp.current_state_id, + item.state_id == temp.current_state_id + ); + if (item.state_id == temp.current_state_id) { + current_id = index; + } + }); + console.log('temp', temp); + setTicketStatus({ ...temp, current_id: current_id }); + setModalIsShown(true); + setOpenedModalName('Status'); + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }; + + let viewTicketRecordModal = (id, e) => { + console.log('View Ticket Record', id); + // Get Ticket Status + let isResponseOK = false; + fetch(APIBaseURL + '/ticket/status/' + id + '?username=admin', { + 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) { + let temp = json.data; + setTicketStatus({ ...temp }); + setModalIsShown(true); + setOpenedModalName('Record'); + } else { + toast.error(json.description); + } + }) + .catch(err => { + console.log(err); + }); + }; + + let viewTicketWorkflowModal = (id, e) => { + console.log('View Ticket Workflow', id); + setModalIsShown(true); + setOpenedModalName('Workflow'); + }; + + // Get Modal + let getModalHeader = () => { + switch (openedModalName) { + case 'Status': + console.log('switch status'); + return {t('Ticket Status')}; + + case 'Record': + console.log('switch record'); + return {t('Ticket Record')}; + + case 'Workflow': + console.log('switch workflow'); + return {t('Ticket Workflow')}; + + default: + console.log('switch none'); + return {t('Ticket None')}; + } + }; + + let getModalBody = () => { + switch (openedModalName) { + case 'Status': + console.log('switch status'); + return ( + + {ticketStatus && ( + + {ticketStatus.value.map((item, index) => { + let description = ''; + if (index < ticketStatus.current_id) { + let description_user = item.state_flow_log_list[0].participant_info.participant_alias; + let description_operation = item.state_flow_log_list[0].gmt_created; + let description_time = item.state_flow_log_list[0].transition.transition_name; + description = description_user + description_operation + '@' + description_time; + } + return ; + })} + + )} + + ); + + case 'Record': + console.log('switch Record'); + return ( + + {ticketStatus && ( + + + {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 ( + + {description} + + ); + })} + + + )} + + ); + + case 'Workflow': + console.log('switch workflow'); + return {t('Ticket Workflow')}; + + default: + console.log('switch none'); + return {}; + } + }; + + let getModalFooter = () => { + switch (openedModalName) { + case 'Status': + return ( + + + + ); + + case 'Record': + return ( + + + + ); + + case 'Workflow': + return ( + + + + ); + + default: + return ( + + + + ); + } + }; const columns = [ { @@ -224,46 +436,53 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { let onWorkflowTypeChange = ({ target }) => { setSelectedTicketType(target.value); + ticketTypes.map(ticketType => { + if (ticketType.id == target.value) { + setSelectedTicketTypeName(ticketType.name); + console.log('onWorkflowTypeChange', ticketType.name, ticketType.id, target.value); + } + }); }; - let applyTicket = () => { - console.log("You apply the ticket!!", selectedTicketType); + let searchTicket = () => { + setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName)); + }; + + useEffect(() => { + console.log('ticketApplicationfields', ticketApplicationfields); + }, [ticketApplicationfields]); + + useEffect(() => { + console.log('ticketList', ticketList); + }, [ticketList]); + + useEffect(() => { + console.log('ticketListAll', ticketListAll); + }, [ticketListAll]); + + useEffect(() => { + console.log('ticketTypes', ticketTypes); + }, [ticketTypes]); - let isResponseOK = false; - fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, { - 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/apply', json); - setTicketApplicationfields(json); - } else { - toast.error(json.description); - } - }) - .catch(err => { - console.log(err); - }); - }; - useEffect(() => { console.log('selectedTicketType', selectedTicketType); }, [selectedTicketType]); useEffect(() => { - console.log('ticketApplicationfields', ticketApplicationfields); - }, [ticketApplicationfields]); + console.log('selectedTicketTypeName', selectedTicketTypeName); + }, [selectedTicketTypeName]); + + useEffect(() => { + console.log('ticketStatus', ticketStatus); + }, [ticketStatus]); + + useEffect(() => { + console.log('modalIsShown', modalIsShown); + }, [modalIsShown]); + + useEffect(() => { + console.log('openedModalName', openedModalName); + }, [openedModalName]); return ( @@ -297,7 +516,7 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { icon="external-link-alt" transform="shrink-3 down-2" color="falcon-default" - onClick={applyTicket} + onClick={searchTicket} > {t('Apply')} @@ -306,6 +525,11 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => { + + {getModalHeader()} + {getModalBody()} + {getModalFooter()} + );