592 lines
17 KiB
Vue
592 lines
17 KiB
Vue
<template>
|
|
<div id="case-detail" ref="case-detail" class="v-container-case-detail">
|
|
<div>
|
|
<b-alert
|
|
:show="dataAlert.dismissCountDown"
|
|
dismissible
|
|
:variant="dataAlert.variant"
|
|
@dismissed="dataAlert.dismissCountDown = 0"
|
|
@dismiss-count-down="countDownChanged"
|
|
>
|
|
{{ dataAlert.message }}
|
|
</b-alert>
|
|
<p class="">
|
|
<b-icon icon="arrow-left"></b-icon>
|
|
<button type="button" class="btn btn-link" @click="$emit('onLastPage')">
|
|
{{ $t("ID_BACK") }}
|
|
</button>
|
|
<button-fleft :data="newCase"></button-fleft>
|
|
</p>
|
|
<modal-new-request ref="newRequest"></modal-new-request>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<div id="pending-task" ref="pending-task">
|
|
<v-server-table
|
|
:data="tableData"
|
|
:columns="columns"
|
|
:options="options"
|
|
v-show="showTable"
|
|
ref="vueTable"
|
|
>
|
|
<div slot="task" slot-scope="props">
|
|
<TaskCell :data="props.row.TASK" />
|
|
</div>
|
|
<div slot="case_title" slot-scope="props">
|
|
{{ props.row.CASE_TITLE }}
|
|
</div>
|
|
<div slot="assignee" slot-scope="props">
|
|
{{ props.row.ASSIGNEE }}
|
|
</div>
|
|
<div slot="status" slot-scope="props">
|
|
{{ props.row.STATUS }}
|
|
</div>
|
|
<div slot="due_date" slot-scope="props">
|
|
{{ props.row.DUE_DATE }}
|
|
</div>
|
|
<div slot="actions" slot-scope="props">
|
|
<b-button
|
|
v-if="props.row.STATUS === 'OPEN'"
|
|
@click="onClick(props)"
|
|
variant="outline-primary"
|
|
>{{ $t("ID_CONTINUE") }}</b-button
|
|
>
|
|
</div>
|
|
</v-server-table>
|
|
</div>
|
|
<TabsCaseDetail
|
|
:dataCaseStatus="dataCaseStatusTab"
|
|
:dataCase="dataCase"
|
|
></TabsCaseDetail>
|
|
<ModalCancelCase ref="modal-cancel-case" :dataCase="dataCase"></ModalCancelCase>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<case-summary
|
|
v-if="dataCaseSummary"
|
|
:data="dataCaseSummary"
|
|
></case-summary>
|
|
<io-documents
|
|
v-if="
|
|
dataIoDocuments.inputDocuments.length > 0 ||
|
|
dataIoDocuments.outputDocuments.length > 0
|
|
"
|
|
:data="dataIoDocuments"
|
|
></io-documents>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-9">
|
|
<case-comments
|
|
ref="case-comments"
|
|
:data="dataComments"
|
|
:onClick="onClickComment"
|
|
:postComment="postComment"
|
|
:dropFiles="dropFiles"
|
|
/>
|
|
</div>
|
|
<div class="col-sm-3">
|
|
<attached-documents
|
|
v-if="dataAttachedDocuments.items.length > 0 && !attachDocuments"
|
|
:data="dataAttachedDocuments"
|
|
></attached-documents>
|
|
<attached-documents-edit
|
|
v-if="dataAttachedDocuments.items.length > 0 && attachDocuments"
|
|
:data="dataAttachedDocuments"
|
|
:onRemove="onRemoveAttachedDocument"
|
|
></attached-documents-edit>
|
|
</div>
|
|
</div>
|
|
<ModalClaimCase ref="modal-claim-case"></ModalClaimCase>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import IoDocuments from "../components/home/caseDetail/IoDocuments.vue";
|
|
import CaseSummary from "../components/home/caseDetail/CaseSummary.vue";
|
|
import AttachedDocuments from "../components/home/caseDetail/AttachedDocuments.vue";
|
|
import AttachedDocumentsEdit from "../components/home/caseDetail/AttachedDocumentsEdit.vue";
|
|
import CaseComment from "../components/home/caseDetail/CaseComment";
|
|
import CaseComments from "../components/home/caseDetail/CaseComments";
|
|
import TabsCaseDetail from "../home/TabsCaseDetail.vue";
|
|
import ButtonFleft from "../components/home/ButtonFleft.vue";
|
|
import ModalCancelCase from "../home/modal/ModalCancelCase.vue";
|
|
import ModalNewRequest from "./ModalNewRequest.vue";
|
|
import ModalClaimCase from "./modal/ModalClaimCase.vue";
|
|
import TaskCell from "../components/vuetable/TaskCell.vue";
|
|
import utils from "./../utils/utils";
|
|
import Api from "../api/index";
|
|
|
|
export default {
|
|
name: "CaseDetail",
|
|
components: {
|
|
TabsCaseDetail,
|
|
IoDocuments,
|
|
CaseSummary,
|
|
AttachedDocuments,
|
|
AttachedDocumentsEdit,
|
|
CaseComment,
|
|
CaseComments,
|
|
ModalCancelCase,
|
|
ButtonFleft,
|
|
ModalNewRequest,
|
|
ModalClaimCase,
|
|
TaskCell
|
|
},
|
|
props: {},
|
|
data() {
|
|
return {
|
|
dataAlert: {
|
|
dismissSecs: 5,
|
|
dismissCountDown: 0,
|
|
message: "",
|
|
variant: "info"
|
|
},
|
|
dataCase: null,
|
|
newCase: {
|
|
title: this.$i18n.t("ID_NEW_CASE"),
|
|
class: "btn-success",
|
|
onClick: () => {
|
|
this.$refs["newRequest"].show();
|
|
},
|
|
},
|
|
columns: [
|
|
"task",
|
|
"case_title",
|
|
"assignee",
|
|
"status",
|
|
"due_date",
|
|
"actions"
|
|
],
|
|
showTable: true,
|
|
tableData: [],
|
|
options: {
|
|
headings: {
|
|
task: this.$i18n.t("ID_TASK"),
|
|
case_title: this.$i18n.t("ID_CASE_TITLE"),
|
|
assignee: this.$i18n.t("ID_CURRENT_USER"),
|
|
status: this.$i18n.t("ID_STATUS"),
|
|
due_date: this.$i18n.t("ID_DUE_DATE"),
|
|
actions: this.$i18n.t("ID_ACTIONS")
|
|
},
|
|
selectable: {
|
|
mode: "single", // or 'multiple'
|
|
only: function (row) {
|
|
return true; // any condition
|
|
},
|
|
selectAllMode: "all", // or 'page',
|
|
programmatic: false,
|
|
},
|
|
filterable: false,
|
|
requestFunction() {
|
|
return this.$parent.$parent.getCasesForVueTable();
|
|
},
|
|
},
|
|
dataCaseSummary: null,
|
|
dataCaseStatusTab: null,
|
|
dataIoDocuments: {
|
|
titleInput: this.$i18n.t("ID_REQUEST_DOCUMENTS"),
|
|
titleOutput: this.$i18n.t("ID_OUTPUT_DOCUMENTS"),
|
|
inputDocuments: [],
|
|
outputDocuments: []
|
|
},
|
|
dataAttachedDocuments: {
|
|
title: "Attached Documents",
|
|
items: []
|
|
},
|
|
attachDocuments: false,
|
|
dataComments: {
|
|
title: "Comments",
|
|
items: []
|
|
}
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
let that = this;
|
|
this.dataCase = this.$parent.dataCase;
|
|
this.$el.getElementsByClassName("VuePagination__count")[0].remove();
|
|
this.getDataCaseSummary();
|
|
this.getInputDocuments();
|
|
this.getOutputDocuments();
|
|
this.getCasesNotes();
|
|
this.requestOpenSummary();
|
|
},
|
|
methods: {
|
|
postComment(comment, send, files) {
|
|
let that = this;
|
|
Api.caseNotes
|
|
.post(
|
|
_.extend({}, this.dataCase, {
|
|
COMMENT: comment,
|
|
SEND_MAIL: send,
|
|
FILES: files
|
|
})
|
|
)
|
|
.then((response) => {
|
|
if (response.status === 200 ) {
|
|
that.attachDocuments = false;
|
|
that.dataAttachedDocuments.items = [];
|
|
that.getCasesNotes();
|
|
} else {
|
|
that.showAlert(response.data.message, "danger");
|
|
that.dataAttachedDocuments.items = [];
|
|
}
|
|
});
|
|
},
|
|
onClickComment(data) {
|
|
let att = [];
|
|
this.dataAttachedDocuments.items = [];
|
|
_.each(data.data.attachments, (a) => {
|
|
att.push({
|
|
data: a,
|
|
title: a.APP_DOC_FILENAME,
|
|
extension: a.APP_DOC_FILENAME.split(".").pop(),
|
|
onClick: () => {},
|
|
});
|
|
});
|
|
this.dataAttachedDocuments.items = att;
|
|
},
|
|
getDataCaseSummary() {
|
|
let action,
|
|
option,
|
|
that = this;
|
|
Api.cases
|
|
.casesummary(this.dataCase)
|
|
.then((response) => {
|
|
var data = response.data.summary;
|
|
this.dataCaseStatusTab = [];
|
|
this.dataCaseStatusTab.push({
|
|
title: null,
|
|
items: response.data.caseProperties
|
|
});
|
|
|
|
_.each(response.data.taskProperties, (o) => {
|
|
this.dataCaseStatusTab.push({
|
|
title: null,
|
|
items: _.isArray(o) ? o : [o]
|
|
});
|
|
});
|
|
|
|
this.dataCaseSummary = {
|
|
title: this.$i18n.t("ID_SUMMARY"),
|
|
titleActions: this.$i18n.t("ID_ACTIONS"),
|
|
btnLabel: this.$i18n.t("ID_CANCEL_CASE"),
|
|
btnType: false,
|
|
onClick: null,
|
|
label: {
|
|
process: data[1].label,
|
|
processDescription: data[2].label,
|
|
caseNumber: data[3].label,
|
|
caseTitle: data[4].label,
|
|
status: data[5].label,
|
|
create: data[6].label,
|
|
delegationDate: this.$i18n.t("ID_TASK_DELEGATE_DATE"),
|
|
duration: this.$i18n.t("ID_DURATION")
|
|
},
|
|
text: {
|
|
process: data[1].value,
|
|
processDescription: data[2].value,
|
|
caseNumber: data[3].value,
|
|
caseTitle: data[4].value,
|
|
status: data[5].value,
|
|
create: data[6].value,
|
|
delegationDate: data[7] ? data[7].value : "",
|
|
duration: data[8] ? data[8].value : ""
|
|
}
|
|
};
|
|
// Hack for identify the cancel case button
|
|
Api.cases.actions(this.dataCase).then((response) => {
|
|
action = _.find(response.data, function (o) {
|
|
return o.id === "ACTIONS";
|
|
});
|
|
if (action) {
|
|
option = _.find(action.options, function (o) {
|
|
return o.fn === "cancelCase";
|
|
});
|
|
if (option && !option.hide) {
|
|
that.dataCaseSummary.onClick = () => {
|
|
that.$refs["modal-cancel-case"].show();
|
|
};
|
|
}
|
|
}
|
|
});
|
|
})
|
|
.catch((err) => {
|
|
throw new Error(err);
|
|
});
|
|
},
|
|
getInputDocuments() {
|
|
Api.cases
|
|
.inputdocuments(this.dataCase)
|
|
.then((response) => {
|
|
let data = response.data,
|
|
document = data.data,
|
|
i,
|
|
info;
|
|
|
|
if (data.totalCount > 0 && document !== []) {
|
|
this.dataIoDocuments.inputDocuments = [];
|
|
for (i = 0; i < data.totalCount; i += 1) {
|
|
info = {
|
|
title: document[i].TITLE,
|
|
extension: document[i].TITLE.split(".")[1],
|
|
onClick: () => {},
|
|
data: document[i]
|
|
};
|
|
this.dataIoDocuments.inputDocuments.push(info);
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
throw new Error(err);
|
|
});
|
|
},
|
|
getOutputDocuments() {
|
|
Api.cases
|
|
.outputdocuments(this.dataCase)
|
|
.then((response) => {
|
|
var data = response.data,
|
|
document = data.data,
|
|
i,
|
|
info;
|
|
|
|
if (data.totalCount > 0 && document !== []) {
|
|
this.dataIoDocuments.outputDocuments = [];
|
|
for (i = 0; i < data.totalCount; i += 1) {
|
|
info = {
|
|
title: document[i].TITLE,
|
|
extension: document[i].TITLE.split(".")[1],
|
|
onClick: () => {},
|
|
data: document[i]
|
|
};
|
|
this.dataIoDocuments.outputDocuments.push(info);
|
|
}
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
throw new Error(err);
|
|
});
|
|
},
|
|
dropFiles(files) {
|
|
this.attachDocuments = true;
|
|
this.dataAttachedDocuments.items = files;
|
|
},
|
|
onRemoveAttachedDocument(file) {
|
|
this.$refs["case-comments"].removeFile(file);
|
|
},
|
|
/**
|
|
* Get for user format name configured in Processmaker Environment Settings
|
|
*
|
|
* @param {string} name
|
|
* @param {string} lastName
|
|
* @param {string} userName
|
|
* @return {string} nameFormat
|
|
*/
|
|
nameFormatCases(name, lastName, userName) {
|
|
let nameFormat = "";
|
|
if (/^\s*$/.test(name) && /^\s*$/.test(lastName)) {
|
|
return nameFormat;
|
|
}
|
|
if (this.nameFormat === "@firstName @lastName") {
|
|
nameFormat = name + " " + lastName;
|
|
} else if (this.nameFormat === "@firstName @lastName (@userName)") {
|
|
nameFormat = name + " " + lastName + " (" + userName + ")";
|
|
} else if (this.nameFormat === "@userName") {
|
|
nameFormat = userName;
|
|
} else if (this.nameFormat === "@userName (@firstName @lastName)") {
|
|
nameFormat = userName + " (" + name + " " + lastName + ")";
|
|
} else if (this.nameFormat === "@lastName @firstName") {
|
|
nameFormat = lastName + " " + name;
|
|
} else if (this.nameFormat === "@lastName, @firstName") {
|
|
nameFormat = lastName + ", " + name;
|
|
} else if (this.nameFormat === "@lastName, @firstName (@userName)") {
|
|
nameFormat = lastName + ", " + name + " (" + userName + ")";
|
|
} else {
|
|
nameFormat = name + " " + lastName;
|
|
}
|
|
return nameFormat;
|
|
},
|
|
|
|
getCasesNotes() {
|
|
let that = this;
|
|
Api.caseNotes
|
|
.get(this.dataCase)
|
|
.then((response) => {
|
|
that.formatResponseCaseNotes(response.data.data);
|
|
that.dataComments.noPerms = response.data.noPerms || 0;
|
|
})
|
|
.catch((err) => {
|
|
throw new Error(err);
|
|
});
|
|
},
|
|
formatResponseCaseNotes(notes) {
|
|
let that = this,
|
|
notesArray = [];
|
|
_.each(notes, (n) => {
|
|
n.id = _.random(1000000);
|
|
notesArray.push({
|
|
user: that.nameFormatCases(
|
|
n.usr_firstname,
|
|
n.usr_lastname,
|
|
n.usr_username
|
|
),
|
|
date: n.note_date,
|
|
comment: n.note_content,
|
|
data: n
|
|
});
|
|
});
|
|
|
|
this.dataComments.items = notesArray;
|
|
},
|
|
formatCaseProperties(data) {
|
|
let index,
|
|
sections = [];
|
|
this.dataCaseStatusTab = [];
|
|
_.each(data, (o) => {
|
|
if (
|
|
(index = _.findIndex(sections, (s) => {
|
|
return s.title == o.section;
|
|
})) == -1
|
|
) {
|
|
sections.push({
|
|
title: o.section,
|
|
items: []
|
|
});
|
|
index = 0;
|
|
}
|
|
sections[index].items.push(o);
|
|
});
|
|
|
|
this.dataCaseStatusTab = sections;
|
|
},
|
|
getCasesForVueTable() {
|
|
let that = this,
|
|
dt;
|
|
return new Promise((resolutionFunc, rejectionFunc) => {
|
|
Api.cases
|
|
.pendingtask(that.$parent.dataCase)
|
|
.then((response) => {
|
|
dt = that.formatDataResponse(response.data);
|
|
resolutionFunc({
|
|
data: dt,
|
|
count: response.data.length,
|
|
});
|
|
that.showTable = response.data.length > 0 ? true : false;
|
|
})
|
|
.catch((err) => {
|
|
throw new Error(err);
|
|
});
|
|
});
|
|
},
|
|
formatDataResponse(response) {
|
|
let data = [];
|
|
_.forEach(response, (v) => {
|
|
data.push({
|
|
TASK: [
|
|
{
|
|
TITLE: v.TAS_TITLE,
|
|
CODE_COLOR: v.TAS_COLOR,
|
|
COLOR: v.TAS_COLOR_LABEL
|
|
},
|
|
],
|
|
CASE_TITLE: v.DEL_TITLE,
|
|
ASSIGNEE:
|
|
v.USR_ID !== 0
|
|
? utils.userNameDisplayFormat({
|
|
userName: v.USR_USERNAME,
|
|
firstName: v.USR_LASTNAME,
|
|
lastName: v.USR_LASTNAME,
|
|
format: window.config.FORMATS.format || null
|
|
})
|
|
: this.$i18n.t("ID_UNASSIGNED"),
|
|
STATUS: v.DEL_THREAD_STATUS,
|
|
DUE_DATE: v.DEL_TASK_DUE_DATE,
|
|
TASK_COLOR: v.TAS_COLOR_LABEL,
|
|
APP_UID: v.APP_UID,
|
|
DEL_INDEX: v.DEL_INDEX,
|
|
PRO_UID: v.PRO_UID,
|
|
TAS_UID: v.TAS_UID
|
|
});
|
|
});
|
|
return data;
|
|
},
|
|
/**
|
|
* Show the alert message
|
|
* @param {string} message - message to be displayen in the body
|
|
* @param {string} type - alert type
|
|
*/
|
|
showAlert(message, type) {
|
|
this.dataAlert.message = message;
|
|
this.dataAlert.variant = type || "info";
|
|
this.dataAlert.dismissCountDown = this.dataAlert.dismissSecs;
|
|
},
|
|
/**
|
|
* Updates the alert dismiss value to update
|
|
* dismissCountDown and decrease
|
|
* @param {mumber}
|
|
*/
|
|
countDownChanged(dismissCountDown) {
|
|
this.dataAlert.dismissCountDown = dismissCountDown;
|
|
},
|
|
/**
|
|
* Click handler
|
|
*
|
|
* @param {object} data
|
|
*/
|
|
onClick(data) {
|
|
if (data.row.ASSIGNEE === "Unassigned") {
|
|
this.claimCase(data.row);
|
|
} else {
|
|
this.$emit("onUpdateDataCase", {
|
|
APP_UID: data.row.APP_UID,
|
|
DEL_INDEX: data.row.DEL_INDEX,
|
|
PRO_UID: data.row.PRO_UID,
|
|
TAS_UID: data.row.TAS_UID,
|
|
ACTION: this.dataCase.ACTION || "todo"
|
|
});
|
|
this.$emit("onUpdatePage", "XCase");
|
|
}
|
|
},
|
|
/**
|
|
* Claim case
|
|
*
|
|
* @param {object} item
|
|
*/
|
|
claimCase(item) {
|
|
let that = this;
|
|
Api.cases.open(_.extend({ ACTION: "unassigned" }, item)).then(() => {
|
|
Api.cases.cases_open(_.extend({ ACTION: "todo" }, item)).then(() => {
|
|
that.$refs["modal-claim-case"].data = item;
|
|
that.$refs["modal-claim-case"].show();
|
|
});
|
|
});
|
|
},
|
|
/**
|
|
* Verify if the case has the permission Summary Form
|
|
* to add dynUid in dataCase
|
|
*/
|
|
requestOpenSummary() {
|
|
Api.cases
|
|
.openSummary(this.dataCase)
|
|
.then((response) => {
|
|
var data = response.data;
|
|
if (data.dynUid !== "") {
|
|
this.dataCase.DYN_UID = data.dynUid;
|
|
}
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
.v-container-case-detail {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
padding-left: 50px;
|
|
padding-right: 20px;
|
|
}
|
|
</style> |