From 05bc4a4cbe6460d7d639f847c2b9b3ed353874be Mon Sep 17 00:00:00 2001 From: hyh123a Date: Mon, 18 Apr 2022 13:01:15 +0800 Subject: [PATCH] add the apply page --- .../components/MyEMS/Ticket/TicketAgent.js | 246 ++++++++++-------- .../MyEMS/Ticket/TicketApplication.js | 31 ++- 2 files changed, 171 insertions(+), 106 deletions(-) diff --git a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js index 8eb31bce..1109cd75 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketAgent.js +++ b/myems-web/src/components/MyEMS/Ticket/TicketAgent.js @@ -16,7 +16,8 @@ import { Row, UncontrolledDropdown, Spinner, - CustomInput + CustomInput, + Button } from 'reactstrap'; import Cascader from 'rc-cascader'; import loadable from '@loadable/component'; @@ -30,7 +31,7 @@ import { toast } from 'react-toastify'; import ButtonIcon from '../../common/ButtonIcon'; import { APIBaseURL } from '../../../config'; -const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { +const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => { useEffect(() => { let is_logged_in = getCookieValue('is_logged_in'); let user_name = getCookieValue('user_name'); @@ -52,6 +53,11 @@ const TicketAgent = ({ 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 [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined); const [equipmentList, setEquipmentList] = useState([]); @@ -61,12 +67,11 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { useEffect(() => { let isResponseOK = false; - fetch(APIBaseURL + '/spaces/tree', { + // Get Ticket Type + fetch(APIBaseURL + '/ticket/types', { method: 'GET', headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') + 'Content-type': 'application/json' }, body: null }) @@ -78,73 +83,11 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { return response.json(); }) .then(json => { - console.log(json); if (isResponseOK) { - // rename keys - json = JSON.parse( - JSON.stringify([json]) - .split('"id":') - .join('"value":') - .split('"name":') - .join('"label":') - ); - setCascaderOptions(json); - setSelectedSpaceName([json[0]].map(o => o.label)); - let selectedSpaceID = [json[0]].map(o => o.value); - // begin of getting equipment list - let isSecondResponseOK = false; - fetch(APIBaseURL + '/reports/TicketAgent?' + 'spaceid=' + selectedSpaceID, { - method: 'GET', - headers: { - 'Content-type': 'application/json', - 'User-UUID': getCookieValue('user_uuid'), - Token: getCookieValue('token') - }, - body: null - }) - .then(response => { - if (response.ok) { - isSecondResponseOK = true; - } - return response.json(); - }) - .then(json => { - if (isSecondResponseOK) { - let json_equipments = JSON.parse( - JSON.stringify([json['equipments']]) - .split('"id":') - .join('"value":') - .split('"name":') - .join('"label":') - ); - console.log(json); - let equipments = []; - json_equipments[0].forEach((currentValue, index) => { - equipments.push({ - key: index, - id: currentValue['id'], - name: currentValue['equipment_name'], - space: currentValue['space_name'], - costcenter: currentValue['cost_center_name'], - description: currentValue['description'] - }); - }); - setEquipmentList(equipments); - - setExcelBytesBase64(json['excel_bytes_base64']); - - // hide spinner - setSpinnerHidden(true); - // show export button - setExportButtonHidden(false); - } else { - toast.error(json.description); - } - }) - .catch(err => { - console.log(err); - }); - // end of getting equipment list + 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); } @@ -153,6 +96,37 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { console.log(err); }); }, []); + + useEffect(() => { + let isResponseOK = false; + // Get Ticket List + fetch(APIBaseURL + '/ticket/list', { + 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); + }); + }, []); + const DetailedDataTable = loadable(() => import('../common/DetailedDataTable')); const nameFormatter = (dataField, { name }) => ( @@ -179,40 +153,72 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { const columns = [ { - key: 'a0', - dataField: 'equipmentname', + key: 'a00', + dataField: 'id', headerClasses: 'border-0', - text: t('Name'), + text: t('ID'), + classes: 'border-0 py-2 align-middle', + sort: true + }, + { + key: 'a0', + dataField: 'title', + headerClasses: 'border-0', + text: t('Title'), classes: 'border-0 py-2 align-middle', - formatter: nameFormatter, sort: true }, { key: 'a1', - dataField: 'space', + dataField: 'ticket_type', headerClasses: 'border-0', - text: t('Space'), + text: t('Ticket Type'), classes: 'border-0 py-2 align-middle', sort: true }, { key: 'a2', - dataField: 'costcenter', + dataField: 'sn', headerClasses: 'border-0', - text: t('Cost Center'), + text: t('Serial Number'), classes: 'border-0 py-2 align-middle', sort: true }, { key: 'a3', - dataField: 'description', + dataField: 'state', headerClasses: 'border-0', - text: t('Description'), + text: t('Ticket State'), classes: 'border-0 py-2 align-middle', sort: true }, { key: 'a4', + dataField: 'creator', + headerClasses: 'border-0', + text: t('Ticket Creator'), + classes: 'border-0 py-2 align-middle', + sort: true + }, + { + key: 'a5', + dataField: 'gmt_created', + headerClasses: 'border-0', + text: t('Created Time'), + classes: 'border-0 py-2 align-middle', + sort: true + }, + { + key: 'a6', + dataField: 'gmt_modified', + headerClasses: 'border-0', + text: t('Modified Time'), + classes: 'border-0 py-2 align-middle', + sort: true + }, + + { + key: 'a000', dataField: '', headerClasses: 'border-0', text: '', @@ -225,31 +231,54 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0'; let onWorkflowTypeChange = ({ target }) => { - console.log('onWorkflowTypeChange', target.value); + setSelectedTicketType(target.value); }; - const workflowTypeOptions = [ - { - key: 1, - id: 1, - value: '1', - label: 'VPN申请' - }, - { - key: 2, - id: 2, - value: '2', - label: 'VPN申请2' - } - ]; + let applyTicket = () => { + console.log("You apply the ticket!!", selectedTicketType); + 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]); return (
{t('Ticket')} - {t('My Agent')} + {t('My Application')}
@@ -262,21 +291,32 @@ const TicketAgent = ({ setRedirect, setRedirectUrl, t }) => { {t('Ticket Type')} - {workflowTypeOptions.map((workflowType, index) => ( - ))} + +
+ + {t('Apply')} + + - + ); }; -export default withTranslation()(withRedirect(TicketAgent)); +export default withTranslation()(withRedirect(TicketAggent)); diff --git a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js b/myems-web/src/components/MyEMS/Ticket/TicketApplication.js index 09390a66..d5764bce 100644 --- a/myems-web/src/components/MyEMS/Ticket/TicketApplication.js +++ b/myems-web/src/components/MyEMS/Ticket/TicketApplication.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'; @@ -58,6 +62,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { const [ticketList, setTicketList] = useState([]); const [ticketApplicationfields, setTicketApplicationfields] = useState({}); + const [applyModalIsShown, setApplyModalIsShown] = useState(false); + const [selectedSpaceName, setSelectedSpaceName] = useState(undefined); const [cascaderOptions, setCascaderOptions] = useState(undefined); const [equipmentList, setEquipmentList] = useState([]); @@ -235,7 +241,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { }; let applyTicket = () => { - console.log("You apply the ticket!!", selectedTicketType); + console.log('You apply the ticket!!', selectedTicketType); let isResponseOK = false; fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, { @@ -263,7 +269,12 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { .catch(err => { console.log(err); }); - }; + setApplyModalIsShown(true); + }; + + let hiddenModal = () => { + setApplyModalIsShown(false); + } useEffect(() => { console.log('selectedTicketType', selectedTicketType); @@ -273,6 +284,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { console.log('ticketApplicationfields', ticketApplicationfields); }, [ticketApplicationfields]); + useEffect(() => { + console.log('applyModalIsShown', applyModalIsShown); + }, [applyModalIsShown]); + return (
@@ -314,6 +329,16 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => { + + {t('Ticket Application')} + 这是申请表单 + + + + + );