add the ticket list api
hyh123a
parent
c25aaad3d0
commit
6a1a313897
|
|
@ -54,6 +54,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
|
||||
// State
|
||||
const [selectedTicketType, setSelectedTicketType] = useState(undefined);
|
||||
const [ticketTypes, setTicketTypes] = useState([]);
|
||||
const [ticketList, setTicketList] = useState([]);
|
||||
|
||||
const [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
|
||||
const [cascaderOptions, setCascaderOptions] = useState(undefined);
|
||||
|
|
@ -64,12 +66,11 @@ const TicketApplication = ({ 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
|
||||
})
|
||||
|
|
@ -81,73 +82,44 @@ const TicketApplication = ({ 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/Ticket?' + '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);
|
||||
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);
|
||||
});
|
||||
// Get Ticket List
|
||||
|
||||
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
|
||||
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('000', json);
|
||||
// console.log('111', typeof(json),json);
|
||||
setTicketList(json);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
|
|
@ -156,6 +128,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
console.log(err);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const DetailedDataTable = loadable(() => import('../common/DetailedDataTable'));
|
||||
|
||||
const nameFormatter = (dataField, { name }) => (
|
||||
|
|
@ -183,39 +156,64 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
const columns = [
|
||||
{
|
||||
key: 'a0',
|
||||
dataField: 'equipmentname',
|
||||
dataField: 'title',
|
||||
headerClasses: 'border-0',
|
||||
text: t('Name'),
|
||||
text: t('Title'),
|
||||
classes: 'border-0 py-2 align-middle',
|
||||
formatter: nameFormatter,
|
||||
sort: true
|
||||
},
|
||||
{
|
||||
key: 'a1',
|
||||
dataField: 'space',
|
||||
dataField: 'workflow_id',
|
||||
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: 'a00',
|
||||
dataField: '',
|
||||
headerClasses: 'border-0',
|
||||
text: '',
|
||||
|
|
@ -228,23 +226,11 @@ const TicketApplication = ({ 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'
|
||||
}
|
||||
];
|
||||
useEffect(() => {
|
||||
console.log('selectedTicketType', selectedTicketType);
|
||||
}, [selectedTicketType]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
|
|
@ -264,9 +250,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
{t('Ticket Type')}
|
||||
</Label>
|
||||
<CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
|
||||
{workflowTypeOptions.map((workflowType, index) => (
|
||||
<option value={workflowType.value} key={workflowType.value}>
|
||||
{t(workflowType.label)}
|
||||
{ticketTypes.map((ticketType, index) => (
|
||||
<option value={ticketType.id} key={ticketType.id}>
|
||||
{t(ticketType.name)}
|
||||
</option>
|
||||
))}
|
||||
</CustomInput>
|
||||
|
|
@ -278,7 +264,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
icon="external-link-alt"
|
||||
transform="shrink-3 down-2"
|
||||
color="falcon-default"
|
||||
onClick={console.log("Apply The Ticket")}
|
||||
onClick={console.log('Apply The Ticket')}
|
||||
>
|
||||
{t('Apply')}
|
||||
</ButtonIcon>
|
||||
|
|
|
|||
Loading…
Reference in New Issue