add the ticket agent form
hyh123a
parent
d105de9167
commit
a280523226
|
|
@ -8,9 +8,7 @@ import {
|
|||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Form,
|
||||
FormGroup,
|
||||
Input,
|
||||
Label,
|
||||
Media,
|
||||
Row,
|
||||
|
|
@ -36,6 +34,11 @@ import { withTranslation } from 'react-i18next';
|
|||
import { toast } from 'react-toastify';
|
||||
import ButtonIcon from '../../common/ButtonIcon';
|
||||
import { APIBaseURL } from '../../../config';
|
||||
import { Steps, Timeline, Collapse, Popconfirm, message, Form, Input, Checkbox, textarea } from 'antd';
|
||||
|
||||
const { Step } = Steps;
|
||||
const { Panel } = Collapse;
|
||||
const { TextArea } = Input;
|
||||
|
||||
const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
||||
useEffect(() => {
|
||||
|
|
@ -65,14 +68,12 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
const [ticketList, setTicketList] = useState([]);
|
||||
const [ticketListAll, setTicketListAll] = useState([]);
|
||||
|
||||
const [ticketApplicationPayload, setTicketApplicationPayload] = 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);
|
||||
const [modalIsShown, setModalIsShown] = useState(false);
|
||||
// status
|
||||
const [ticketStatus, setTicketStatus] = useState({});
|
||||
// ticket field
|
||||
const [ticketFields, setTicketFields] = useState({});
|
||||
const [ticketTransitionField, setTicketTransitionField] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
let isResponseOK = false;
|
||||
|
|
@ -148,11 +149,123 @@ const TicketAggent = ({ 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={viewTicket.bind(this, id)}>{t('Handle Ticket')}</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
);
|
||||
|
||||
let hiddenModal = () => {
|
||||
setModalIsShown(false);
|
||||
};
|
||||
|
||||
let viewTicket = (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);
|
||||
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);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// Get Ticket Field
|
||||
isResponseOK = false;
|
||||
fetch(APIBaseURL + '/ticket/fields/' + 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/fields ---', json);
|
||||
let temp = json.data;
|
||||
console.log('fields temp', temp);
|
||||
setTicketFields({ ...temp });
|
||||
setModalIsShown(true);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
|
||||
// Get Ticket Transition Field
|
||||
isResponseOK = false;
|
||||
fetch(APIBaseURL + '/ticket/transition/' + 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/transition ---', json);
|
||||
let temp = json.data;
|
||||
console.log('transition temp', temp);
|
||||
setTicketTransitionField({ ...temp });
|
||||
setModalIsShown(true);
|
||||
} else {
|
||||
toast.error(json.description);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: 'a00',
|
||||
|
|
@ -247,6 +360,20 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
setTicketList(ticketListAll.filter(item => item.ticket_type === selectedTicketTypeName));
|
||||
};
|
||||
|
||||
let callback = key => {
|
||||
console.log(key);
|
||||
};
|
||||
|
||||
let submitApplication = target => {
|
||||
hiddenModal();
|
||||
};
|
||||
let confirmButton = () => {
|
||||
message.info('Clicked on Yes.');
|
||||
};
|
||||
|
||||
const text = `
|
||||
Hello world
|
||||
`;
|
||||
useEffect(() => {
|
||||
console.log('ticketList', ticketList);
|
||||
}, [ticketList]);
|
||||
|
|
@ -264,8 +391,11 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
}, [ticketTypes]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('ticketApplicationPayload', ticketApplicationPayload);
|
||||
}, [ticketApplicationPayload]);
|
||||
console.log('ticketFields', ticketFields);
|
||||
}, [ticketFields]);
|
||||
const onFinish = (values) => {
|
||||
console.log('Success:', values);
|
||||
};
|
||||
return (
|
||||
<Fragment>
|
||||
<div>
|
||||
|
|
@ -307,6 +437,118 @@ const TicketAggent = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
</Form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Modal size="xl" isOpen={modalIsShown}>
|
||||
<ModalHeader>{t('Ticket')}</ModalHeader>;
|
||||
<ModalBody>
|
||||
<Collapse accordion onChange={callback}>
|
||||
<Panel header={t('Ticket Workflow')} key="1">
|
||||
<p>{text}</p>
|
||||
</Panel>
|
||||
<Panel header={t('Ticket Record')} key="2">
|
||||
{ticketStatus && ticketStatus.value && (
|
||||
<Timeline size="small" 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>
|
||||
)}
|
||||
</Panel>
|
||||
<Panel header={t('Ticket Status')} key="3">
|
||||
{ticketStatus && ticketStatus.value && (
|
||||
<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>
|
||||
)}
|
||||
</Panel>
|
||||
<Panel header={t('Ticket Fields')} key="4">
|
||||
<Form
|
||||
onFinish={onFinish}>
|
||||
{ticketFields &&
|
||||
ticketFields.value &&
|
||||
ticketFields.value.field_list &&
|
||||
ticketFields.value.field_list.map((item, index) => {
|
||||
switch (item.field_type_id) {
|
||||
case 5:
|
||||
console.log('5');
|
||||
|
||||
return (
|
||||
<Form.Item key={index} label={item.field_name} name={item.field_name}>
|
||||
<Input defaultValue={item.field_value} disabled={item.field_attribute==1?true:false}/>
|
||||
</Form.Item>
|
||||
);
|
||||
|
||||
case 55:
|
||||
console.log('55');
|
||||
|
||||
return (
|
||||
<Form.Item key={index} label={item.field_name} name={item.field_name}>
|
||||
<TextArea defaultValue={item.field_value} disabled={item.field_attribute==1?true:false}/>
|
||||
</Form.Item>
|
||||
// <InputGroup key={index}>
|
||||
// <InputGroupText>{item.field_name}</InputGroupText>
|
||||
// <textarea value={item.field_value} disabled />
|
||||
// </InputGroup>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
console.log('default');
|
||||
break;
|
||||
}
|
||||
})}
|
||||
</Form>
|
||||
</Panel>
|
||||
</Collapse>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{ticketTransitionField &&
|
||||
ticketTransitionField.value &&
|
||||
ticketTransitionField.value.map((item, index) => {
|
||||
if (item.alert_enable) {
|
||||
return (
|
||||
<Popconfirm
|
||||
key={index}
|
||||
placement="top"
|
||||
title={text}
|
||||
onConfirm={submitApplication}
|
||||
okText="Yes"
|
||||
cancelText="No"
|
||||
>
|
||||
<Button color="primary">{item.transition_name}</Button>
|
||||
</Popconfirm>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<Button key={index} color="primary" onClick={submitApplication}>
|
||||
{item.transition_name}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
})}
|
||||
|
||||
<Button onClick={hiddenModal}>{t('Close')}</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
||||
<DetailedDataTable data={ticketList} title={t('Ticket List')} columns={columns} pagesize={10} />
|
||||
</Fragment>
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@ import { toast } from 'react-toastify';
|
|||
import ButtonIcon from '../../common/ButtonIcon';
|
||||
import { APIBaseURL } from '../../../config';
|
||||
import { join } from 'lodash';
|
||||
import { Steps, Timeline } from 'antd';
|
||||
import { Steps, Timeline, Collapse } from 'antd';
|
||||
|
||||
const { Step } = Steps;
|
||||
|
||||
const { Panel } = Collapse;
|
||||
const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
||||
useEffect(() => {
|
||||
let is_logged_in = getCookieValue('is_logged_in');
|
||||
|
|
@ -504,6 +504,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
<ModalBody>
|
||||
{ticketStatus && (
|
||||
<Timeline mode="left">
|
||||
<Timeline.Item key={100} label={""}></Timeline.Item>
|
||||
{ticketStatus.value
|
||||
.filter(item => item.state_flow_log_list.length > 0)
|
||||
.map((item, index) => {
|
||||
|
|
@ -517,7 +518,7 @@ const TicketApplication = ({ setRedirect, setRedirectUrl, t }) => {
|
|||
</Timeline.Item>
|
||||
);
|
||||
})}
|
||||
|
||||
<Timeline.Item key={999} label={""}></Timeline.Item>
|
||||
</Timeline>
|
||||
)}
|
||||
</ModalBody>
|
||||
|
|
|
|||
Loading…
Reference in New Issue