seg_yinzy
/
myems
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

complete the ticket list page

pull/141/head
hyh123a 2022-04-21 13:33:39 +08:00
parent 38decf7cbb
commit 2c8c3ac0e1
3 changed files with 367 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
myems-web/src/components/MyEMS/Ticket/TicketAgent.js
View File

@ -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
<Modal size="xl" isOpen={modalIsShown}>
<ModalHeader>{t('Ticket')}</ModalHeader>;
<ModalBody>
<Collapse accordion onChange={callback}>
<Collapse accordion onChange={callback} defaultActiveKey={4}>
<Panel header={t('Ticket Workflow')} key="1">
<p>{text}</p>
</Panel>

146
myems-web/src/components/MyEMS/Ticket/TicketApplication.js
View File

@ -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 }) => {
</CardBody>
</Card>
<Modal size="xl" isOpen={modalIsShown}>
{getModelHeader()}
{getModelBody()}
{getModelFooter()}
{getModalHeader()}
{getModalBody()}
{getModalFooter()}
</Modal>
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />

338
myems-web/src/components/MyEMS/Ticket/TicketList.js
View File

@ -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 }) => {
<FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
</DropdownToggle>
<DropdownMenu right className="border py-2">
<DropdownItem onClick={() => console.log('Edit: ', id)}>{t('Edit Equipment')}</DropdownItem>
<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>
);
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 <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>;
}
};
let getModalBody = () => {
switch (openedModalName) {
case 'Status':
console.log('switch status');
return (
<ModalBody>
{ticketStatus && (
<Steps current={ticketStatus.current_id}>
{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 <Step key={item.state_id} title={item.state_name} description="" />;
})}
</Steps>
)}
</ModalBody>
);
case 'Record':
console.log('switch Record');
return (
<ModalBody>
{ticketStatus && (
<Timeline mode="left">
<Timeline.Item key={100} label={''} />
{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.Item key={999} label={''} />
</Timeline>
)}
</ModalBody>
);
case 'Workflow':
console.log('switch workflow');
return <ModalBody>{t('Ticket Workflow')}</ModalBody>;
default:
console.log('switch none');
return <ModalBody>{}</ModalBody>;
}
};
let getModalFooter = () => {
switch (openedModalName) {
case 'Status':
return (
<ModalHeader>
<Button onClick={hiddenModal}>{t('Close')}</Button>
</ModalHeader>
);
case 'Record':
return (
<ModalHeader>
<Button onClick={hiddenModal}>{t('Close')}</Button>
</ModalHeader>
);
case 'Workflow':
return (
<ModalHeader>
<Button onClick={hiddenModal}>{t('Close')}</Button>
</ModalHeader>
);
default:
return (
<ModalHeader>
<Button onClick={hiddenModal}>{t('Close')}</Button>
</ModalHeader>
);
}
};
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 (
<Fragment>
@ -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')}
</ButtonIcon>
@ -306,6 +525,11 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
</Form>
</CardBody>
</Card>
<Modal size="xl" isOpen={modalIsShown}>
{getModalHeader()}
{getModalBody()}
{getModalFooter()}
</Modal>
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
</Fragment>
);