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

add the ticket step function

pull/141/head
hyh123a 2022-04-20 15:57:41 +08:00
parent 2768414f81
commit 276be1c988
5 changed files with 1407 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1294
myems-web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
myems-web/package.json
View File

@ -17,6 +17,7 @@
"@fullcalendar/react": "^5.3.1",
"@fullcalendar/timegrid": "^5.3.1",
"@loadable/component": "^5.13.2",
"antd": "^4.19.5",
"attr-accept": "^2.2.2",
"bootstrap": "^4.5.3",
"chart.js": "^2.9.3",
@ -73,9 +74,9 @@
"react-toastify": "^5.5.0",
"react-typed": "^1.2.0",
"reactstrap": "^8.6.0",
"rsuite": "^5.6.1",
"slick-carousel": "^1.8.1",
"uuid": "^3.4.0",
"rsuite": "^5.6.1"
"uuid": "^3.4.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
@ -92,7 +93,6 @@
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"postcss": "^8.0.0",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^6.1.0",
"gulp-clean-css": "^4.3.0",
@ -101,6 +101,7 @@
"gulp-rtlcss": "^1.4.1",
"gulp-sass": "^5.0.0",
"gulp-sourcemaps": "^2.6.5",
"postcss": "^8.0.0",
"prettier": "1.17.1",
"sass": "^1.43.4"
}

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

@ -36,6 +36,10 @@ import { withTranslation } from 'react-i18next';
import { toast } from 'react-toastify';
import ButtonIcon from '../../common/ButtonIcon';
import { APIBaseURL } from '../../../config';
import { join } from 'lodash';
import { Steps } from 'antd';
const { Step } = Steps;
const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
useEffect(() => {
@ -69,6 +73,9 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
const [modalIsShown, setModalIsShown] = useState(false);
const [openedModalName, setOpenedModalName] = useState('');
// status
const [ticketStatus, setTicketStatus] = useState({});
useEffect(() => {
let isResponseOK = false;
// Get Ticket Type
@ -152,8 +159,8 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
<FontAwesomeIcon icon="ellipsis-h" className="fs--1" />
</DropdownToggle>
<DropdownMenu right className="border py-2">
<DropdownItem onClick={viewTicketStatusModal}>{t('View State')}</DropdownItem>
<DropdownItem onClick={viewTicketWorkflowModal}>{t('View Workflow')}</DropdownItem>
<DropdownItem onClick={viewTicketStatusModal.bind(this, id)}>{t('View State')}</DropdownItem>
<DropdownItem onClick={viewTicketWorkflowModal.bind(this, id)}>{t('View Workflow')}</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
);
@ -316,18 +323,61 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
setModalIsShown(false);
};
let viewTicketStatusModal = () => {
console.log('View Ticket Status');
setModalIsShown(true);
setOpenedModalName('Status');
let viewTicketStatusModal = (id, e) => {
console.log('View Ticket Status', id);
// Get Ticket Status
let isResponseOK = false;
fetch(APIBaseURL + '/ticket/status/' + id, {
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/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) => {
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 hiddenTicketWorkflowModal = () => {
setModalIsShown(false);
};
let viewTicketWorkflowModal = () => {
console.log('View Ticket Workflow');
let viewTicketWorkflowModal = (id, e) => {
console.log('View Ticket Workflow', id);
setModalIsShown(true);
setOpenedModalName('Workflow');
};
@ -339,25 +389,121 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
setTicketApplicationPayload({ ...ticketApplicationPayload, ...temp });
};
let getModelContent = () => {
console.log("---------------------", "getModelContent");
let getModelHeader = () => {
console.log('---------------------', 'getModelHeader');
switch (openedModalName) {
case 'Application':
console.log("switch application")
console.log('switch application');
return <ModalHeader>{t('Ticket Application')}</ModalHeader>;
case 'Status':
console.log("switch status")
console.log('switch status');
return <ModalHeader>{t('Ticket Status')}</ModalHeader>;
case 'Workflow':
console.log("switch workflow")
console.log('switch workflow');
return <ModalHeader>{t('Ticket Workflow')}</ModalHeader>;
default:
console.log("switch none")
console.log('switch none');
return <ModalHeader>{t('Ticket None')}</ModalHeader>;
}
};
let getModelBody = () => {
console.log('---------------------', 'getModelBody');
switch (openedModalName) {
case 'Application':
console.log('switch application');
return (
<ModalBody>
{ticketApplicationfields.fields &&
ticketApplicationfields.fields.map((field, index) => {
if (field.field_type === 'input') {
return (
<InputGroup key={index}>
<InputGroupText>{field.field_name}</InputGroupText>
<Input placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
</InputGroup>
);
} else if (field.field_type === 'text_area') {
return (
<InputGroup key={index}>
<InputGroupText>{field.field_name}</InputGroupText>
<textarea placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
</InputGroup>
);
} else {
return <Input key={index}> Error field</Input>;
}
})}
</ModalBody>
);
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={description} />;
})}
</Steps>
)}
</ModalBody>
);
case 'Workflow':
console.log('switch workflow');
return <ModalBody>{t('Ticket Workflow')}</ModalBody>;
default:
console.log('switch none');
return <ModalBody>{}</ModalBody>;
}
};
let getModelFooter = () => {
switch (openedModalName) {
case 'Application':
return (
<ModalFooter>
<Button color="primary" onClick={submitApplication}>
{ticketApplicationfields.name}
</Button>
<Button onClick={hiddenModal}>{t('Close')}</Button>
</ModalFooter>
);
case 'Status':
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>
);
}
};
useEffect(() => {
console.log('selectedTicketType', selectedTicketType);
}, [selectedTicketType]);
@ -383,6 +529,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
console.log('openedModalName', openedModalName);
}, [openedModalName]);
useEffect(() => {
console.log('ticketStatus', ticketStatus);
}, [ticketStatus]);
return (
<Fragment>
<div>
@ -424,37 +574,10 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
</Form>
</CardBody>
</Card>
<Modal isOpen={ modalIsShown}>
{getModelContent()}
{/* {openedModalName=='Application' && (<ModalHeader>{t('Ticket Application')}</ModalHeader>) } */}
<ModalBody>
{ticketApplicationfields.fields &&
ticketApplicationfields.fields.map((field, index) => {
if (field.field_type === 'input') {
return (
<InputGroup key={index}>
<InputGroupText>{field.field_name}</InputGroupText>
<Input placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
</InputGroup>
);
} else if (field.field_type === 'text_area') {
return (
<InputGroup key={index}>
<InputGroupText>{field.field_name}</InputGroupText>
<textarea placeholder={field.field_name} onChange={onFieldChange.bind(this, field.field_key)} />
</InputGroup>
);
} else {
return <Input key={index}> Error field</Input>;
}
})}
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={submitApplication}>
{ticketApplicationfields.name}
</Button>
<Button onClick={hiddenModal}>{t('Cancel')}</Button>
</ModalFooter>
<Modal size="xl" isOpen={modalIsShown}>
{getModelHeader()}
{getModelBody()}
{getModelFooter()}
</Modal>
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />

1
myems-web/src/index.js
View File

@ -7,6 +7,7 @@ import App from './App';
import Main from './Main';
import './helpers/initFA';
import './i18n';
import 'antd/dist/antd.css';
ReactDOM.render(
<Main>

0
myems-web/workflow Normal file
View File