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

modify the ticket web page

pull/141/MERGE^2
hyh123a 2022-04-17 21:49:36 +08:00
parent f5dc197172
commit 58e26cb5cf
4 changed files with 244 additions and 325 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
myems-api/reports/ticket.py
View File

@ -103,7 +103,7 @@ class TicketListCollection:
query = (" SELECT id, title, workflow_id, sn, state_id, creator, gmt_created, gmt_modified "
" FROM ticket_ticketrecord "
" ORDER BY id ")
" ORDER BY id DESC")
cursor.execute(query)
rows = cursor.fetchall()
cursor.close()

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

@ -95,8 +95,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
.catch(err => {
console.log(err);
});
// Get Ticket List
}, []);
useEffect(() => {
@ -237,7 +235,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, {
@ -265,7 +263,6 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
.catch(err => {
console.log(err);
});
};
useEffect(() => {

281
myems-web/src/components/MyEMS/Ticket/TicketIntervention.js
View File

@ -15,7 +15,9 @@ import {
Media,
Row,
UncontrolledDropdown,
Spinner
Spinner,
CustomInput,
Button
} from 'reactstrap';
import Cascader from 'rc-cascader';
import loadable from '@loadable/component';
@ -51,6 +53,11 @@ const TicketIntervention = ({ 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([]);
@ -60,12 +67,11 @@ const TicketIntervention = ({ 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
})
@ -77,73 +83,11 @@ const TicketIntervention = ({ 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);
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);
}
@ -152,6 +96,37 @@ const TicketIntervention = ({ 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 }) => (
@ -178,40 +153,72 @@ const TicketIntervention = ({ 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: '',
@ -223,25 +230,23 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => {
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
let selectedSpaceID = value[value.length - 1];
// show spinner
setSpinnerHidden(false);
// hide export button
setExportButtonHidden(true);
// begin of getting equipment list
let onWorkflowTypeChange = ({ target }) => {
setSelectedTicketType(target.value);
};
let applyTicket = () => {
console.log("You apply the ticket!!", selectedTicketType);
let isResponseOK = false;
fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, {
fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
method: 'GET',
headers: {
'Content-type': 'application/json',
'User-UUID': getCookieValue('user_uuid'),
Token: getCookieValue('token')
'Content-type': 'application/json'
},
body: null
})
.then(response => {
console.log(response);
if (response.ok) {
isResponseOK = true;
}
@ -249,33 +254,8 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
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);
console.log('/ticket/apply', json);
setTicketApplicationfields(json);
} else {
toast.error(json.description);
}
@ -283,25 +263,15 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
.catch(err => {
console.log(err);
});
// end of getting equipment list
};
};
useEffect(() => {
console.log('selectedTicketType', selectedTicketType);
}, [selectedTicketType]);
const handleExport = e => {
e.preventDefault();
const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileName = 'Ticket.xlsx';
var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64;
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
var link = window.document.createElement('a');
link.href = window.URL.createObjectURL(blob, { type: mimeType });
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
};
useEffect(() => {
console.log('ticketApplicationfields', ticketApplicationfields);
}, [ticketApplicationfields]);
return (
<Fragment>
@ -315,26 +285,18 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
<CardBody className="p-3">
<Form>
<Row form>
<Col xs={6} sm={3}>
<FormGroup className="form-group">
<Label className={labelClasses} for="space">
{t('Ticket Type')}
</Label>
<br />
<Cascader
options={cascaderOptions}
onChange={onSpaceCascaderChange}
changeOnSelect
expandTrigger="hover"
>
<Input value={selectedSpaceName || ''} readOnly />
</Cascader>
</FormGroup>
</Col>
<Col xs="auto">
<FormGroup>
<br />
<Spinner color="primary" hidden={spinnerHidden} />
<Label className={labelClasses} for="workflowType">
{t('Ticket Type')}
</Label>
<CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
{ticketTypes.map((ticketType, index) => (
<option value={ticketType.id} key={ticketType.id}>
{t(ticketType.name)}
</option>
))}
</CustomInput>
</FormGroup>
</Col>
<Col xs="auto">
@ -343,17 +305,16 @@ const TicketIntervention = ({ setRedirect, setRedirectUrl, t }) => {
icon="external-link-alt"
transform="shrink-3 down-2"
color="falcon-default"
hidden={exportButtonHidden}
onClick={handleExport}
onClick={applyTicket}
>
{t('Export')}
{t('Apply')}
</ButtonIcon>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<DetailedDataTable data={equipmentList} title={t('Ticket List')} columns={columns} pagesize={10} />
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
</Fragment>
);
};

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

@ -15,7 +15,9 @@ import {
Media,
Row,
UncontrolledDropdown,
Spinner
Spinner,
CustomInput,
Button
} from 'reactstrap';
import Cascader from 'rc-cascader';
import loadable from '@loadable/component';
@ -51,6 +53,11 @@ 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 [selectedSpaceName, setSelectedSpaceName] = useState(undefined);
const [cascaderOptions, setCascaderOptions] = useState(undefined);
const [equipmentList, setEquipmentList] = useState([]);
@ -60,12 +67,11 @@ const TicketList = ({ 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
})
@ -77,73 +83,11 @@ const TicketList = ({ 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);
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);
}
@ -152,6 +96,37 @@ const TicketList = ({ 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 }) => (
@ -178,40 +153,72 @@ const TicketList = ({ 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: '',
@ -223,25 +230,23 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
const labelClasses = 'ls text-uppercase text-600 font-weight-semi-bold mb-0';
let onSpaceCascaderChange = (value, selectedOptions) => {
setSelectedSpaceName(selectedOptions.map(o => o.label).join('/'));
let selectedSpaceID = value[value.length - 1];
// show spinner
setSpinnerHidden(false);
// hide export button
setExportButtonHidden(true);
// begin of getting equipment list
let onWorkflowTypeChange = ({ target }) => {
setSelectedTicketType(target.value);
};
let applyTicket = () => {
console.log("You apply the ticket!!", selectedTicketType);
let isResponseOK = false;
fetch(APIBaseURL + '/reports/Ticket?' + 'spaceid=' + selectedSpaceID, {
fetch(APIBaseURL + '/ticket/apply/' + selectedTicketType, {
method: 'GET',
headers: {
'Content-type': 'application/json',
'User-UUID': getCookieValue('user_uuid'),
Token: getCookieValue('token')
'Content-type': 'application/json'
},
body: null
})
.then(response => {
console.log(response);
if (response.ok) {
isResponseOK = true;
}
@ -249,33 +254,8 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
})
.then(json => {
if (isResponseOK) {
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);
console.log('/ticket/apply', json);
setTicketApplicationfields(json);
} else {
toast.error(json.description);
}
@ -283,25 +263,15 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
.catch(err => {
console.log(err);
});
// end of getting equipment list
};
};
useEffect(() => {
console.log('selectedTicketType', selectedTicketType);
}, [selectedTicketType]);
const handleExport = e => {
e.preventDefault();
const mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
const fileName = 'Ticket.xlsx';
var fileUrl = 'data:' + mimeType + ';base64,' + excelBytesBase64;
fetch(fileUrl)
.then(response => response.blob())
.then(blob => {
var link = window.document.createElement('a');
link.href = window.URL.createObjectURL(blob, { type: mimeType });
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
};
useEffect(() => {
console.log('ticketApplicationfields', ticketApplicationfields);
}, [ticketApplicationfields]);
return (
<Fragment>
@ -315,26 +285,18 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
<CardBody className="p-3">
<Form>
<Row form>
<Col xs={6} sm={3}>
<FormGroup className="form-group">
<Label className={labelClasses} for="space">
{t('Ticket Type')}
</Label>
<br />
<Cascader
options={cascaderOptions}
onChange={onSpaceCascaderChange}
changeOnSelect
expandTrigger="hover"
>
<Input value={selectedSpaceName || ''} readOnly />
</Cascader>
</FormGroup>
</Col>
<Col xs="auto">
<FormGroup>
<br />
<Spinner color="primary" hidden={spinnerHidden} />
<Label className={labelClasses} for="workflowType">
{t('Ticket Type')}
</Label>
<CustomInput type="select" id="workflowType" name="workflowType" onChange={onWorkflowTypeChange}>
{ticketTypes.map((ticketType, index) => (
<option value={ticketType.id} key={ticketType.id}>
{t(ticketType.name)}
</option>
))}
</CustomInput>
</FormGroup>
</Col>
<Col xs="auto">
@ -343,17 +305,16 @@ const TicketList = ({ setRedirect, setRedirectUrl, t }) => {
icon="external-link-alt"
transform="shrink-3 down-2"
color="falcon-default"
hidden={exportButtonHidden}
onClick={handleExport}
onClick={applyTicket}
>
{t('Export')}
{t('Apply')}
</ButtonIcon>
</Col>
</Row>
</Form>
</CardBody>
</Card>
<DetailedDataTable data={equipmentList} title={t('Ticket List')} columns={columns} pagesize={10} />
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
</Fragment>
);
};