rmlworkorder major upgrade
This commit is contained in:
Luca Haid
@@ -1,601 +0,0 @@
|
||||
// RMLWorkorderAdmin.js
|
||||
Vue.component('r-m-l-workorder-admin', {
|
||||
template: `
|
||||
<tt-card>
|
||||
<div class="mb-2 d-flex align-items-center" v-if="workordersToAssign.length > 0">
|
||||
<span class="mr-3 font-weight-bold">{{ workordersToAssign.length }} Workorder(s) zuweisen:</span>
|
||||
<div style="width: 300px;">
|
||||
<tt-select
|
||||
class="mb-0"
|
||||
:options="companiesForMassAssign"
|
||||
v-model="massAssignCompanyId"
|
||||
@input="massAssignCompanies"
|
||||
placeholder="Firma auswählen..."
|
||||
sm
|
||||
no-form-group
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tt-table-crud
|
||||
ref="table"
|
||||
:crud-config="crudConfig"
|
||||
>
|
||||
<template v-slot:preorderinfo="{ row }">
|
||||
<div class="small">
|
||||
<div><strong>Kunde:</strong> {{ row.customerCompany || row.customerName }}</div>
|
||||
<div>
|
||||
<strong>Anschluss:</strong>
|
||||
{{ row.street }} {{ row.hausnummer }}
|
||||
<template v-if="row.stiege">/{{ row.stiege }}</template>
|
||||
<template v-if="row.apartment"> / WE: {{ row.apartment }}</template>
|
||||
, {{ row.plz }} {{ row.city }}
|
||||
</div>
|
||||
<div>
|
||||
<strong>OAID:</strong> <span class="text-pink">{{ row.oaid }}</span>
|
||||
<tt-button
|
||||
icon="fas fa-external-link-alt"
|
||||
@click="window.open(window.TT_CONFIG.BASE_PATH + '/Preorder/Index?filter[ucode]=' + row.ucode, '_blank');"
|
||||
additional-class="btn-link btn-sm p-0 m-0"
|
||||
title="Zur Bestellung"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row }">
|
||||
<traffic-light :deadline="row.deadlineDate" :status="row.status"/>
|
||||
<i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
|
||||
<span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
|
||||
<tt-button
|
||||
v-if="row.status === 'intervention_required'"
|
||||
icon="ml-2 fas fa-check-circle text-success"
|
||||
@click="setToProblemSolved(row)"
|
||||
additional-class="btn-link btn-sm p-0"
|
||||
title="Auftrag auf Problem behoben setzen"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template v-slot:companyname="{ row }">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<div v-if="editingWorkorderId === row.id">
|
||||
<div v-if="companiesLoading" class="spinner-border spinner-border-sm"></div>
|
||||
<tt-select v-else
|
||||
:options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
|
||||
@input="assignCompany(row, $event)" @blur="editingWorkorderId = null"
|
||||
@keydown.esc.native="editingWorkorderId = null" placeholder="Firma zuweisen..."
|
||||
sm no-form-group
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="row.status === 'new'">
|
||||
<div v-if="companiesLoading" class="spinner-border spinner-border-sm"></div>
|
||||
<tt-select v-else
|
||||
:options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
|
||||
@input="assignCompany(row, $event)" @focus="getCompaniesForWorkorder(row)"
|
||||
placeholder="Firma zuweisen..." sm no-form-group
|
||||
/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span>{{ row.companyName || 'N/A' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-items-center">
|
||||
<tt-button
|
||||
v-if="!['completed', 'cancelled', 'new'].includes(row.status)"
|
||||
icon="fas fa-edit"
|
||||
@click="startCompanyEdit(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2"
|
||||
title="Zuweisung ändern"
|
||||
/>
|
||||
<tt-button
|
||||
v-if="!['completed', 'cancelled'].includes(row.status)"
|
||||
icon="fas fa-ban"
|
||||
@click="cancelWorkorder(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2 text-danger"
|
||||
title="Auftrag stornieren"
|
||||
/>
|
||||
<tt-button v-if="!workordersToAssign.includes(row.id)"
|
||||
icon="fas fa-plus-circle text-success" @click="addToAssignList(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zur Zuweisungsliste hinzufügen"
|
||||
/>
|
||||
<tt-button v-if="workordersToAssign.includes(row.id)"
|
||||
icon="fas fa-minus-circle text-danger" @click="removeFromAssignList(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Von Zuweisungsliste entfernen"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:additionalinfo="{ row }">
|
||||
<div v-if="editingAdditionalInfoId === row.id">
|
||||
<tt-textarea
|
||||
v-model="tempAdditionalInfo"
|
||||
@keydown.esc.native="cancelEdit"
|
||||
rows="3"
|
||||
no-form-group
|
||||
sm
|
||||
ref="editTextarea"
|
||||
/>
|
||||
<div class="mt-2 d-flex justify-content-end">
|
||||
<tt-button
|
||||
text="Abbrechen"
|
||||
@click="cancelEdit"
|
||||
sm
|
||||
additional-class="btn-secondary mr-2"
|
||||
/>
|
||||
<tt-button
|
||||
text="Speichern"
|
||||
@click="updateAdditionalInfo(row, tempAdditionalInfo)"
|
||||
sm
|
||||
additional-class="btn-success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-start">
|
||||
<span
|
||||
style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
|
||||
<tt-button
|
||||
icon="fas fa-edit" @click="startAdditionalInfoEdit(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:deadlinedate="{ row }">
|
||||
<div v-if="editingDeadlineId === row.id">
|
||||
<tt-date-picker
|
||||
:value="row.deadlineDate" :date-range="false"
|
||||
@input="updateDeadline(row, $event)" @blur="editingDeadlineId = null"
|
||||
sm no-form-group
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-center">
|
||||
<span>{{ formatDate(row.deadlineDate) }}</span>
|
||||
<tt-button icon="fas fa-edit" @click="editingDeadlineId = row.id"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Deadline ändern"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:appointmentdate="{ row }">
|
||||
{{ formatDate(row.appointmentDate, true) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<rml-documentation-viewer-admin
|
||||
:workorder-id="row.id"
|
||||
@workorder-updated="$refs.table.$refs.table.refreshTable()"
|
||||
@accept-documentation="acceptDocumentation"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</tt-table-crud>
|
||||
</tt-card>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
window,
|
||||
workordersToAssign: [],
|
||||
editingWorkorderId: null,
|
||||
editingDeadlineId: null,
|
||||
editingAdditionalInfoId: null,
|
||||
tempAdditionalInfo: '',
|
||||
companiesByTenant: {},
|
||||
companiesLoading: false,
|
||||
massAssignCompanyId: null,
|
||||
massAssignLoading: false,
|
||||
companiesForMassAssign: [],
|
||||
crudConfig: {
|
||||
...window.TT_CONFIG.CRUD_CONFIG, selectable: false, expandable: true,
|
||||
customRowClass: (row) => {
|
||||
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
|
||||
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
|
||||
const deadlineDate = moment.unix(row.deadlineDate);
|
||||
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
|
||||
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
|
||||
return 'tt-rml-workorder-ontrack';
|
||||
},
|
||||
additionalActions: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToAssignList(row) {
|
||||
if (!this.workordersToAssign.includes(row.id)) this.workordersToAssign.push(row.id);
|
||||
},
|
||||
removeFromAssignList(row) {
|
||||
this.workordersToAssign = this.workordersToAssign.filter(id => id !== row.id);
|
||||
},
|
||||
getStatusColumn(status) {
|
||||
const column = this.crudConfig.columns.find(c => c.key === 'status');
|
||||
return column.table.filterOptions.find(opt => opt.value === status) || {};
|
||||
},
|
||||
formatDate(timestamp, withTime = false) {
|
||||
if (!timestamp) return '–';
|
||||
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
|
||||
},
|
||||
async getCompaniesForWorkorder(workorder) {
|
||||
if (!workorder.tenantId || this.companiesByTenant[workorder.tenantId]) return;
|
||||
this.companiesLoading = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getCompanies`, {params: {tenantId: workorder.tenantId}});
|
||||
this.$set(this.companiesByTenant, workorder.tenantId, data);
|
||||
} catch (e) {
|
||||
window.notify('error', 'Firmenliste konnte nicht geladen werden.');
|
||||
} finally {
|
||||
this.companiesLoading = false;
|
||||
}
|
||||
},
|
||||
async startCompanyEdit(row) {
|
||||
await this.getCompaniesForWorkorder(row);
|
||||
this.editingWorkorderId = row.id;
|
||||
},
|
||||
async assignCompany(workorder, companyId) {
|
||||
if (!companyId) {
|
||||
this.editingWorkorderId = null;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/assignWorkorder`, {
|
||||
workorderId: workorder.id,
|
||||
companyId: companyId
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.editingWorkorderId = null;
|
||||
}
|
||||
},
|
||||
async massAssignCompanies(companyId) {
|
||||
if (!companyId) return;
|
||||
if (!confirm(`${this.workordersToAssign.length} Workorder(s) der ausgewählten Firma zuweisen?`)) {
|
||||
this.massAssignCompanyId = null;
|
||||
return;
|
||||
}
|
||||
this.massAssignLoading = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/massAssignWorkorders`, {
|
||||
companyId: companyId,
|
||||
workorderIds: this.workordersToAssign
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.workordersToAssign = [];
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.massAssignLoading = false;
|
||||
this.massAssignCompanyId = null;
|
||||
}
|
||||
},
|
||||
async updateDeadline(workorder, newDate) {
|
||||
if (!newDate) {
|
||||
this.editingDeadlineId = null;
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/updateDeadline`, {
|
||||
workorderId: workorder.id,
|
||||
deadlineDate: newDate
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.editingDeadlineId = null;
|
||||
}
|
||||
},
|
||||
async acceptDocumentation(workorderId) {
|
||||
if (!confirm('Soll die Dokumentation für diesen Arbeitsauftrag wirklich akzeptiert und der Auftrag abgeschlossen werden?')) return;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/acceptDocumentation`, {workorderId});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
},
|
||||
async setToProblemSolved(row) {
|
||||
const text = prompt('Bitte geben Sie einen kurzen Text für den Journaleintrag ein:', '');
|
||||
if (text === null) return;
|
||||
if (!text.trim()) {
|
||||
window.notify('error', 'Bitte geben Sie einen Text ein.');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/setToProblemSolved`, {
|
||||
workorderId: row.id,
|
||||
text: text
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
},
|
||||
startAdditionalInfoEdit(row) {
|
||||
this.editingAdditionalInfoId = row.id;
|
||||
this.tempAdditionalInfo = row.additionalInfo || '';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editTextarea?.$el.querySelector('textarea').focus();
|
||||
});
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingAdditionalInfoId = null;
|
||||
this.tempAdditionalInfo = '';
|
||||
},
|
||||
async updateAdditionalInfo(row, newInfo) {
|
||||
if (row.additionalInfo === newInfo) {
|
||||
this.cancelEdit();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/updateAdditionalInfo`, {
|
||||
workorderId: row.id,
|
||||
additionalInfo: newInfo
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
row.additionalInfo = newInfo;
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Netzwerkfehler beim Update.');
|
||||
} finally {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
async cancelWorkorder(row) {
|
||||
const reason = prompt('Bitte geben Sie einen Grund für die Stornierung an (optional):');
|
||||
if (reason === null) return;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/cancelWorkorder`, {
|
||||
workorderId: row.id,
|
||||
reason: reason
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Stornierung fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
workordersToAssign: {
|
||||
async handler(newVal) {
|
||||
if (newVal.length === 0) {
|
||||
this.companiesForMassAssign = [];
|
||||
return;
|
||||
}
|
||||
const firstWorkorder = this.$refs.table.$refs.table.rows.find(r => r.id === newVal[0]);
|
||||
if (!firstWorkorder) return;
|
||||
const firstTenantId = firstWorkorder.tenantId;
|
||||
if (!newVal.every(id => {
|
||||
const wo = this.$refs.table.$refs.table.rows.find(r => r.id === id);
|
||||
return wo && wo.tenantId === firstTenantId;
|
||||
})) {
|
||||
window.notify('error', 'Massen-Zuweisung nur für Aufträge des gleichen Mandanten möglich.');
|
||||
this.workordersToAssign.pop();
|
||||
return;
|
||||
}
|
||||
await this.getCompaniesForWorkorder(firstWorkorder);
|
||||
this.companiesForMassAssign = this.companiesByTenant[firstTenantId] || [];
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('traffic-light', {
|
||||
props: ['deadline', 'status'],
|
||||
computed: {
|
||||
lightInfo() {
|
||||
if (['completed', 'new', 'cancelled'].includes(this.status)) return {
|
||||
color: '#cccccc',
|
||||
title: 'Status irrelevant für Dringlichkeit'
|
||||
};
|
||||
const deadlineDate = moment.unix(this.deadline);
|
||||
if (!deadlineDate.isValid()) return {color: '#cccccc', title: 'Keine Deadline gesetzt'};
|
||||
if (deadlineDate.isBefore(moment())) return {color: '#dc3545', title: 'Deadline überschritten'};
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return {color: '#dc3545', title: 'Dringend: Weniger als 1 Woche'};
|
||||
if (daysLeft <= 21) return {color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen'};
|
||||
return {color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen'};
|
||||
}
|
||||
},
|
||||
template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">●</span>`
|
||||
});
|
||||
|
||||
Vue.component('rml-documentation-viewer-admin', {
|
||||
props: ['workorderId'],
|
||||
template: `
|
||||
<div class="p-3 bg-light">
|
||||
<div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
|
||||
<div v-else class="row">
|
||||
<div class="col-lg-6">
|
||||
<tt-file-gallery :files="docs" @selection-changed="selectedDocs = $event" selectable/>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card mb-3" v-if="selectedDocs.length > 0">
|
||||
<div class="card-header"><h5><i class="fas fa-exclamation-triangle text-danger mr-2"></i>Korrektur
|
||||
anfordern</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Wählen Sie die zu korrigierenden Dokumente aus der Galerie aus und geben Sie
|
||||
einen Grund an.</p>
|
||||
<tt-textarea v-model="correctionText" label="Grund für die Korrektur" sm row/>
|
||||
<tt-button text="Korrektur anfordern" @click="requestCorrection" :loading="correctionLoading"
|
||||
additional-class="btn-danger float-right"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header"><h5><i class="fas fa-check-circle text-success mr-2"></i>Dokumentation
|
||||
akzeptieren</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Prüfen Sie, ob alle erforderlichen Dokumente vorhanden und korrekt sind.</p>
|
||||
<div v-if="loadingConfig" class="text-center"><i class="fas fa-spinner fa-spin"></i></div>
|
||||
<ul v-else class="list-unstyled">
|
||||
<li v-for="docType in requiredDocTypes" :key="docType.value"
|
||||
class="mb-2 d-flex align-items-center small">
|
||||
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'"
|
||||
class="fa-fw mr-2"></i>
|
||||
<span>{{ docType.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<tt-button text="Dokumentation akzeptieren" @click="$emit('accept-documentation', workorderId)"
|
||||
additional-class="btn-success float-right" icon="fas fa-check"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-3">
|
||||
<div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
|
||||
<div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
|
||||
<ul v-if="journals.length" class="list-group list-group-flush">
|
||||
<li v-for="log in journals" :key="log.id" class="list-group-item small">
|
||||
<strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
|
||||
<div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="card-body text-muted text-center">Keine Journaleinträge.</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2"/>
|
||||
<tt-button text="Eintrag speichern" @click="addJournalEntry" :loading="addingJournalEntry"
|
||||
additional-class="btn-info btn-sm w-100 mt-2" icon="fas fa-paper-plane"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`,
|
||||
data: () => ({
|
||||
loading: true,
|
||||
loadingConfig: true,
|
||||
correctionLoading: false,
|
||||
docs: [],
|
||||
journals: [],
|
||||
selectedDocs: [],
|
||||
correctionText: '',
|
||||
newJournalMessage: '',
|
||||
addingJournalEntry: false,
|
||||
tenantDocTypes: null
|
||||
}),
|
||||
computed: {
|
||||
requiredDocTypes() {
|
||||
if (this.tenantDocTypes) return this.tenantDocTypes;
|
||||
return [{value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP'}, {
|
||||
value: 'photo_hup_open',
|
||||
text: 'Foto von dem offenen HÜP'
|
||||
}, {
|
||||
value: 'photo_splice_cassette_hup',
|
||||
text: 'Foto der Spleißkassette – HÜP'
|
||||
}, {
|
||||
value: 'photo_splice_cassette_fcp',
|
||||
text: 'Foto der Spleißkassette - FCP'
|
||||
}, {
|
||||
value: 'photo_hup_closed_stickers',
|
||||
text: 'Foto vom geschlossenen HÜP mit allen Aufklebern'
|
||||
}, {value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet'}, {
|
||||
value: 'photo_patch_position_osp',
|
||||
text: 'Foto der Patch-Position - OSP-Seite'
|
||||
}, {
|
||||
value: 'photo_patch_position_anb',
|
||||
text: 'Foto der Patch-Position - ANB-Seite'
|
||||
}, {value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)'}];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isUploaded(docType) {
|
||||
return this.docs.some(doc => doc.documentType === docType);
|
||||
},
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/getDocumentation`, {params: {workorderId: this.workorderId}});
|
||||
this.docs = data.docs;
|
||||
this.journals = data.journals;
|
||||
} catch (e) {
|
||||
window.notify('error', 'Dokumentation konnte nicht geladen werden.');
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async loadTenantConfig() {
|
||||
this.loadingConfig = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {params: {workorderId: this.workorderId}});
|
||||
if (data.success) this.tenantDocTypes = data.documentationTypes;
|
||||
} catch (e) {
|
||||
console.error("Konnte Mandantenkonfiguration nicht laden", e);
|
||||
} finally {
|
||||
this.loadingConfig = false;
|
||||
}
|
||||
},
|
||||
async requestCorrection() {
|
||||
if (!this.correctionText) return window.notify('error', 'Bitte geben Sie einen Grund für die Korrektur an.');
|
||||
if (this.selectedDocs.length === 0) return window.notify('error', 'Bitte wählen Sie mindestens ein Dokument für die Korrektur aus.');
|
||||
this.correctionLoading = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/requestCorrection`, {
|
||||
workorderId: this.workorderId,
|
||||
text: this.correctionText,
|
||||
fileIds: this.selectedDocs
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.correctionText = '';
|
||||
this.selectedDocs = [];
|
||||
await this.fetchData();
|
||||
this.$emit('workorder-updated');
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
this.correctionLoading = false;
|
||||
},
|
||||
async addJournalEntry() {
|
||||
if (!this.newJournalMessage.trim()) return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
|
||||
this.addingJournalEntry = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderAdmin/addJournal`, {
|
||||
workorderId: this.workorderId,
|
||||
text: this.newJournalMessage
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message || 'Journal-Eintrag hinzugefügt.');
|
||||
this.newJournalMessage = '';
|
||||
this.journals = data.journals;
|
||||
} else window.notify('error', data.message || 'Eintrag konnte nicht gespeichert werden.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.addingJournalEntry = false;
|
||||
}
|
||||
},
|
||||
formatDate(timestamp) {
|
||||
return window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm');
|
||||
},
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadTenantConfig();
|
||||
await this.fetchData();
|
||||
}
|
||||
});
|
||||
@@ -1,40 +0,0 @@
|
||||
/*
|
||||
* CSS for Workorder Table Row Highlighting
|
||||
*/
|
||||
|
||||
/* Urgent: Deadline passed or less than 1 week away */
|
||||
.table-hover .tt-rml-workorder-urgent:hover,
|
||||
.tt-rml-workorder-urgent {
|
||||
background-color: #fbe9e7 !important; /* Soft Red */
|
||||
}
|
||||
|
||||
/* Medium: Deadline less than 3 weeks away */
|
||||
.table-hover .tt-rml-workorder-medium:hover,
|
||||
.tt-rml-workorder-medium {
|
||||
background-color: #fff8e1 !important; /* Soft Yellow */
|
||||
}
|
||||
|
||||
/* On Track: Deadline more than 3 weeks away */
|
||||
.table-hover .tt-rml-workorder-ontrack:hover,
|
||||
.tt-rml-workorder-ontrack {
|
||||
background-color: #e8f5e9 !important; /* Soft Green */
|
||||
}
|
||||
|
||||
/* Irrelevant: No deadline or status makes it not applicable */
|
||||
.table-hover .tt-rml-workorder-irrelevant:hover,
|
||||
.tt-rml-workorder-irrelevant {
|
||||
background-color: #fafafa !important; /* Very light grey */
|
||||
}
|
||||
|
||||
.table-hover .tt-rml-workorder-high:hover,
|
||||
.tt-rml-workorder-high {
|
||||
background-color: #f8d7da !important; /* A slightly more intense red for high priority issues */
|
||||
}
|
||||
|
||||
.tt-file-gallery-item.border.border-danger {
|
||||
border: 4px solid #f1556c!important;
|
||||
}
|
||||
|
||||
.RMLWorkorderCompany-table .modal-body {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
@@ -1,568 +0,0 @@
|
||||
// RMLWorkorderCompany.js
|
||||
Vue.component('r-m-l-workorder-company', {
|
||||
template: `
|
||||
<div>
|
||||
<tt-card>
|
||||
<tt-table-crud
|
||||
ref="table"
|
||||
:crud-config="crudConfig"
|
||||
>
|
||||
<template v-slot:preorderinfo="{ row }">
|
||||
<div v-html="row.preorderInfo" class="small"></div>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row }">
|
||||
<traffic-light :deadline="row.deadlineDate" :status="row.status"/>
|
||||
<i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
|
||||
<span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:additionalinfo="{ row }">
|
||||
<div v-if="editingAdditionalInfoId === row.id">
|
||||
<tt-textarea
|
||||
v-model="tempAdditionalInfo"
|
||||
@keydown.esc.native="cancelEdit"
|
||||
rows="3" no-form-group sm ref="editTextarea"
|
||||
/>
|
||||
<div class="mt-2 d-flex justify-content-end">
|
||||
<tt-button text="Abbrechen" @click="cancelEdit" sm additional-class="btn-secondary mr-2"/>
|
||||
<tt-button text="Speichern" @click="updateAdditionalInfo(row, tempAdditionalInfo)" sm
|
||||
additional-class="btn-success"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-start">
|
||||
<span
|
||||
style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
|
||||
<tt-button
|
||||
v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
|
||||
icon="fas fa-edit" @click="startAdditionalInfoEdit(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:deadlinedate="{ row }">
|
||||
{{ formatDate(row.deadlineDate) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:appointmentdate="{ row }">
|
||||
<div
|
||||
v-if="!row.appointmentDate && ['assigned', 'correction_requested', 'problem_solved'].includes(row.status)">
|
||||
<tt-date-picker
|
||||
placeholder="Termin festlegen..." :date-range="false"
|
||||
@input="setAppointment(row, $event)" sm no-form-group
|
||||
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, drops: 'up' }"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="row.appointmentDate">
|
||||
<span>{{ formatDate(row.appointmentDate, true) }}</span>
|
||||
<tt-button
|
||||
v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
|
||||
icon="fas fa-edit" @click="openRescheduleModal(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Termin ändern"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>–</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<documentation-manager
|
||||
:workorder-id="row.id"
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</tt-table-crud>
|
||||
</tt-card>
|
||||
|
||||
<tt-modal v-if="rescheduleData" :show="true" :delete="false" title="Termin verschieben"
|
||||
@update:show="closeRescheduleModal" @submit="rescheduleAppointment">
|
||||
<p><strong>Auftrag:</strong> #{{ rescheduleData.workorder.id }}</p>
|
||||
<tt-date-picker
|
||||
label="Neuer Termin" :date-range="false" v-model="rescheduleData.newDate"
|
||||
sm row
|
||||
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, singleDatePicker: true }"
|
||||
/>
|
||||
<tt-textarea label="Grund" v-model="rescheduleData.reason" sm row required/>
|
||||
</tt-modal>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
rescheduleData: null, editingAdditionalInfoId: null, tempAdditionalInfo: '',
|
||||
crudConfig: {
|
||||
...window.TT_CONFIG.CRUD_CONFIG, expandable: true,
|
||||
customRowClass: (row) => {
|
||||
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
|
||||
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
|
||||
const deadlineDate = moment.unix(row.deadlineDate);
|
||||
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
|
||||
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
|
||||
return 'tt-rml-workorder-ontrack';
|
||||
},
|
||||
additionalActions: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusColumn(status) {
|
||||
const column = this.crudConfig.columns.find(c => c.key === 'status');
|
||||
return column.table.filterOptions.find(opt => opt.value === status) || {};
|
||||
},
|
||||
formatDate(timestamp, withTime = false) {
|
||||
if (!timestamp) return '–';
|
||||
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
|
||||
},
|
||||
async setAppointment(workorder, date) {
|
||||
if (!date) return;
|
||||
const hour = moment.unix(date).hour();
|
||||
if (hour >= 23 || hour < 1) {
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
return window.notify('error', 'Bitte Uhrzeit angeben!');
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/scheduleAppointment`, {
|
||||
workorderId: workorder.id,
|
||||
appointmentDate: date
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
},
|
||||
openRescheduleModal(row) {
|
||||
this.rescheduleData = {workorder: row, newDate: row.appointmentDate, reason: ''};
|
||||
},
|
||||
closeRescheduleModal() {
|
||||
this.rescheduleData = null;
|
||||
},
|
||||
async rescheduleAppointment() {
|
||||
const {workorder, newDate, reason} = this.rescheduleData;
|
||||
if (!newDate || !reason) return window.notify('error', 'Bitte geben Sie ein neues Datum und einen Grund an.');
|
||||
if (moment.unix(newDate).hour() >= 23 || moment.unix(newDate).hour() < 1) return window.notify('error', 'Bitte Uhrzeit angeben!');
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/rescheduleAppointment`, {
|
||||
workorderId: workorder.id,
|
||||
appointmentDate: newDate,
|
||||
reason: reason
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.closeRescheduleModal();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', e.response?.data?.message || 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
},
|
||||
startAdditionalInfoEdit(row) {
|
||||
this.editingAdditionalInfoId = row.id;
|
||||
this.tempAdditionalInfo = row.additionalInfo || '';
|
||||
this.$nextTick(() => {
|
||||
this.$refs.editTextarea?.$el.querySelector('textarea').focus();
|
||||
});
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingAdditionalInfoId = null;
|
||||
this.tempAdditionalInfo = '';
|
||||
},
|
||||
async updateAdditionalInfo(row, newInfo) {
|
||||
if (row.additionalInfo === newInfo) {
|
||||
this.cancelEdit();
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateAdditionalInfo`, {
|
||||
workorderId: row.id,
|
||||
additionalInfo: newInfo
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
row.additionalInfo = newInfo;
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Netzwerkfehler beim Update.');
|
||||
} finally {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
Vue.component('traffic-light', {
|
||||
props: ['deadline', 'status'],
|
||||
computed: {
|
||||
lightInfo() {
|
||||
if (['completed', 'new', 'cancelled'].includes(this.status)) return {
|
||||
color: '#cccccc',
|
||||
title: 'Status irrelevant für Dringlichkeit'
|
||||
};
|
||||
const deadlineDate = moment.unix(this.deadline);
|
||||
if (!deadlineDate.isValid()) return {color: '#cccccc', title: 'Keine Deadline gesetzt'};
|
||||
if (deadlineDate.isBefore(moment())) return {color: '#dc3545', title: 'Deadline überschritten'};
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return {color: '#dc3545', title: 'Dringend: Weniger als 1 Woche'};
|
||||
if (daysLeft <= 21) return {color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen'};
|
||||
return {color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen'};
|
||||
}
|
||||
},
|
||||
template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">●</span>`
|
||||
});
|
||||
|
||||
Vue.component('documentation-manager', {
|
||||
props: ['workorderId'],
|
||||
template: `
|
||||
<div class="p-3 bg-light" style="width: 100%;">
|
||||
<div v-if="loadingWorkorder || loadingConfig" class="text-center p-5"><i
|
||||
class="fas fa-spinner fa-spin fa-2x"></i></div>
|
||||
<div v-else class="row">
|
||||
<div class="col-lg-4 mb-3 mb-lg-0">
|
||||
<div>
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Benötigte Dokumente</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center">
|
||||
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'"
|
||||
class="fa-fw mr-2"></i>
|
||||
<span>{{ docType.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<tt-button text="Auftrag abschließen" @click="completeWorkorder"
|
||||
:disabled="!canComplete || ['documented', 'completed', 'cancelled'].includes(workorder.status)"
|
||||
:loading="completing" additional-class="btn-success w-100" icon="fas fa-check-double"
|
||||
/>
|
||||
<small v-if="!canComplete && !['documented', 'completed', 'cancelled'].includes(workorder.status)"
|
||||
class="form-text text-muted text-center mt-2">
|
||||
Bitte laden Sie alle benötigten Dokumente hoch, um den Auftrag abzuschließen.
|
||||
</small>
|
||||
<div v-if="['documented', 'completed', 'cancelled'].includes(workorder.status)"
|
||||
class="alert alert-secondary text-center mt-2 p-2">
|
||||
Auftrag zur Prüfung eingereicht oder storniert.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-3"
|
||||
v-if="['assigned', 'scheduled', 'correction_requested', 'problem_solved'].includes(workorder.status)">
|
||||
<div class="card-header bg-danger text-white"><h5><i class="fas fa-hard-hat mr-2"></i>Eingriff benötigt
|
||||
</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Falls ein Problem auftritt, das ein Eingreifen erfordert, melden Sie es
|
||||
hier.</p>
|
||||
<tt-button text="Problem melden" @click="openInterventionModal" additional-class="btn-danger w-100"
|
||||
icon="fas fa-exclamation-triangle"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-3">
|
||||
<div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
|
||||
<div class="card-body p-0" style="max-height: 200px; overflow-y: auto;">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li v-if="!journals.length" class="list-group-item text-center text-muted">Keine Einträge
|
||||
vorhanden.
|
||||
</li>
|
||||
<li v-for="log in journals" :key="log.id" class="list-group-item small"
|
||||
:class="{'list-group-item-danger': log.statusChange && (log.statusChange.includes('correction_requested') || log.statusChange.includes('intervention_required'))}">
|
||||
<strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
|
||||
<div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="card-footer" v-if="!['completed', 'documented', 'cancelled'].includes(workorder.status)">
|
||||
<tt-textarea v-model="newJournalMessage" placeholder="Ihre Nachricht oder Anmerkung..." rows="2"/>
|
||||
<tt-button text="Eintrag speichern" @click="addJournalEntry" :loading="addingJournalEntry"
|
||||
additional-class="btn-info btn-sm w-100 mt-2" icon="fas fa-paper-plane"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3" v-if="!['documented', 'completed', 'cancelled'].includes(workorder.status)">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Neues Dokument hochladen</h5>
|
||||
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="uploadData.documentType" sm row/>
|
||||
<tt-input label="Beschreibung" v-model="uploadData.description" sm row placeholder="Optional"/>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-sm-4 col-form-label-sm">Dateien</label>
|
||||
<div class="col-sm-8 p-0">
|
||||
<input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload"
|
||||
ref="fileInput" multiple accept="image/*,.pdf,.doc,.docx"/>
|
||||
</div>
|
||||
</div>
|
||||
<tt-button text="Hochladen" @click="uploadFiles" :loading="uploading"
|
||||
additional-class="btn-primary float-right" icon="fas fa-upload"/>
|
||||
</div>
|
||||
</div>
|
||||
<tt-file-gallery
|
||||
:files="filesWithStatus"
|
||||
:edit-mode="!['completed', 'documented', 'cancelled'].includes(workorder.status)"
|
||||
:delete-mode="!['completed', 'documented', 'cancelled'].includes(workorder.status)"
|
||||
@delete-file="deleteDocumentation" @update-file="updateDocumentation">
|
||||
<template v-slot:file-edit="{ file }">
|
||||
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="file.documentType" sm/>
|
||||
</template>
|
||||
</tt-file-gallery>
|
||||
</div>
|
||||
</div>
|
||||
<tt-modal v-if="interventionData" :show="true" :delete="false" title="Eingriff anfordern"
|
||||
@update:show="interventionData = null" @submit="requestIntervention">
|
||||
<tt-select label="Art des Problems" :options="interventionTypes" v-model="interventionData.types" sm row
|
||||
multiple/>
|
||||
<div v-for="type in interventionData.types" :key="type">
|
||||
<tt-input v-if="['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)"
|
||||
:label="'Distanz (m) für \\'' + getInterventionLabel(type) + '\\''" type="number"
|
||||
v-model="interventionData.details[type].distance" sm row required/>
|
||||
<tt-textarea v-if="type === 'other'" label="Grund für 'Sonstiges'"
|
||||
v-model="interventionData.details.other.reason" sm row required/>
|
||||
</div>
|
||||
</tt-modal>
|
||||
</div>`,
|
||||
data: () => ({
|
||||
loadingWorkorder: true,
|
||||
loadingConfig: true,
|
||||
tenantDocTypes: null,
|
||||
workorder: null,
|
||||
uploading: false,
|
||||
completing: false,
|
||||
uploadedFiles: [],
|
||||
journals: [],
|
||||
newJournalMessage: '',
|
||||
addingJournalEntry: false,
|
||||
interventionData: null,
|
||||
interventionTypes: [{value: 'stuck', text: 'Ab X Laufmeter stecken geblieben'}, {
|
||||
value: 'stuck_fcp',
|
||||
text: 'Vom FCP nach HÜP nach X Laufmetern stecken geblieben'
|
||||
}, {value: 'stuck_hup', text: 'Vom HÜP nach FCP nach X Laufmetern stecken geblieben'}, {
|
||||
value: 'no_air',
|
||||
text: 'Keine Luftverbindung'
|
||||
}, {value: 'other', text: 'Sonstiges'}],
|
||||
uploadData: {files: [], documentType: 'photo_hup_mounted', description: ''}
|
||||
}),
|
||||
computed: {
|
||||
requiredDocTypes() {
|
||||
if (this.tenantDocTypes) return this.tenantDocTypes;
|
||||
return [{value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP'}, {
|
||||
value: 'photo_hup_open',
|
||||
text: 'Foto von dem offenen HÜP'
|
||||
}, {
|
||||
value: 'photo_splice_cassette_hup',
|
||||
text: 'Foto der Spleißkassette – HÜP'
|
||||
}, {
|
||||
value: 'photo_splice_cassette_fcp',
|
||||
text: 'Foto der Spleißkassette - FCP'
|
||||
}, {
|
||||
value: 'photo_hup_closed_stickers',
|
||||
text: 'Foto vom geschlossenen HÜP mit allen Aufklebern'
|
||||
}, {value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet'}, {
|
||||
value: 'photo_patch_position_osp',
|
||||
text: 'Foto der Patch-Position - OSP-Seite'
|
||||
}, {
|
||||
value: 'photo_patch_position_anb',
|
||||
text: 'Foto der Patch-Position - ANB-Seite'
|
||||
}, {value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)'}];
|
||||
},
|
||||
allDocTypes() {
|
||||
return [...this.requiredDocTypes, {value: 'other', text: 'Sonstiges Dokument (optional)'}];
|
||||
},
|
||||
canComplete() {
|
||||
return this.requiredDocTypes.every(docType => this.isUploaded(docType.value));
|
||||
},
|
||||
filesWithStatus() {
|
||||
if (!this.journals?.length) return this.uploadedFiles;
|
||||
const correctionJournal = [...this.journals].sort((a, b) => b.create - a.create).find(j => j.statusChange?.includes('correction_requested'));
|
||||
if (!correctionJournal?.fileIds) return this.uploadedFiles;
|
||||
try {
|
||||
const incorrectFileIds = JSON.parse(correctionJournal.fileIds);
|
||||
if (!Array.isArray(incorrectFileIds)) return this.uploadedFiles;
|
||||
return this.uploadedFiles.map(file => incorrectFileIds.includes(file.id) ? {
|
||||
...file,
|
||||
class: 'border border-danger'
|
||||
} : file);
|
||||
} catch (e) {
|
||||
return this.uploadedFiles;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(timestamp) {
|
||||
return timestamp ? window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm') : '–';
|
||||
},
|
||||
async loadTenantConfig() {
|
||||
this.loadingConfig = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getTenantConfig`, {params: {workorderId: this.workorderId}});
|
||||
if (data.success) this.tenantDocTypes = data.documentationTypes;
|
||||
} catch (e) {
|
||||
console.error("Konnte Mandantenkonfiguration nicht laden", e);
|
||||
} finally {
|
||||
this.loadingConfig = false;
|
||||
}
|
||||
},
|
||||
async loadWorkorder() {
|
||||
this.loadingWorkorder = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getWorkorderById`, {params: {id: this.workorderId}});
|
||||
this.workorder = data;
|
||||
} catch (e) {
|
||||
window.notify('error', 'Arbeitsauftragsdetails konnten nicht geladen werden.');
|
||||
}
|
||||
this.loadingWorkorder = false;
|
||||
},
|
||||
isUploaded(docType) {
|
||||
return this.uploadedFiles.some(file => file.documentType === docType);
|
||||
},
|
||||
async fetchDocs() {
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/getDocumentation`, {params: {workorderId: this.workorderId}});
|
||||
this.uploadedFiles = data.docs;
|
||||
this.journals = data.journals;
|
||||
} catch (e) {
|
||||
window.notify('error', 'Dokumente konnten nicht geladen werden.');
|
||||
}
|
||||
},
|
||||
handleFileUpload(event) {
|
||||
this.uploadData.files = event.target.files;
|
||||
},
|
||||
async uploadFiles() {
|
||||
if (!this.uploadData.files?.length) return window.notify('error', 'Bitte eine oder mehrere Dateien auswählen.');
|
||||
this.uploading = true;
|
||||
const formData = new FormData();
|
||||
formData.append('workorderId', this.workorder.id);
|
||||
formData.append('documentType', this.uploadData.documentType);
|
||||
formData.append('description', this.uploadData.description);
|
||||
for (const file of this.uploadData.files) formData.append('files[]', file);
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/uploadDocumentation`, formData);
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.fileInput.value = '';
|
||||
this.uploadData.files = [];
|
||||
this.uploadData.description = '';
|
||||
this.uploadedFiles = data.docs;
|
||||
this.workorder = data.workorder;
|
||||
} else window.notify('error', data.error || 'Upload fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist beim Upload aufgetreten.');
|
||||
}
|
||||
this.uploading = false;
|
||||
},
|
||||
async completeWorkorder() {
|
||||
if (!confirm('Möchten Sie diesen Auftrag wirklich abschließen und zur Prüfung einreichen?')) return;
|
||||
this.completing = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/completeWorkorder`, {workorderId: this.workorder.id});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$emit('workorder-completed');
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
this.completing = false;
|
||||
},
|
||||
async deleteDocumentation(file) {
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/deleteDocumentation`, {id: file.id});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.uploadedFiles = data.docs;
|
||||
} else window.notify('error', data.message || 'Löschen fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Netzwerkfehler beim Löschen.');
|
||||
}
|
||||
},
|
||||
async updateDocumentation(file) {
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/updateDocumentation`, {
|
||||
id: file.id,
|
||||
documentType: file.documentType
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.uploadedFiles = data.docs;
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Netzwerkfehler beim Aktualisieren.');
|
||||
}
|
||||
},
|
||||
async addJournalEntry() {
|
||||
if (!this.newJournalMessage.trim()) return window.notify('error', 'Bitte geben Sie eine Nachricht ein.');
|
||||
this.addingJournalEntry = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/addJournal`, {
|
||||
workorderId: this.workorderId,
|
||||
text: this.newJournalMessage
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message || 'Journal-Eintrag hinzugefügt.');
|
||||
this.newJournalMessage = '';
|
||||
this.journals = data.journals;
|
||||
} else window.notify('error', data.message || 'Eintrag konnte nicht gespeichert werden.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.addingJournalEntry = false;
|
||||
}
|
||||
},
|
||||
getInterventionLabel(type) {
|
||||
return this.interventionTypes.find(t => t.value === type)?.text || type;
|
||||
},
|
||||
openInterventionModal() {
|
||||
this.interventionData = {
|
||||
types: [],
|
||||
details: {
|
||||
stuck: {distance: ''},
|
||||
stuck_fcp: {distance: ''},
|
||||
stuck_hup: {distance: ''},
|
||||
other: {reason: ''}
|
||||
}
|
||||
};
|
||||
},
|
||||
async requestIntervention() {
|
||||
const {types, details} = this.interventionData;
|
||||
if (types.length === 0) return window.notify('error', 'Bitte wählen Sie mindestens ein Problem aus.');
|
||||
let journalParts = [];
|
||||
types.sort();
|
||||
for (const type of types) {
|
||||
let text = '';
|
||||
const problemText = this.interventionTypes.find(o => o.value === type)?.text || 'Unbekanntes Problem';
|
||||
if (['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)) {
|
||||
const distance = details[type]?.distance;
|
||||
if (!distance || isNaN(distance) || distance <= 0) return window.notify('error', `Bitte eine gültige Distanz für "${problemText}" eingeben.`);
|
||||
text = problemText.replace('X', distance);
|
||||
} else if (type === 'no_air') text = problemText;
|
||||
else if (type === 'other') {
|
||||
const reason = details.other?.reason;
|
||||
if (!reason?.trim()) return window.notify('error', 'Bitte geben Sie einen Grund für "Sonstiges" an.');
|
||||
text = `Sonstiges: ${reason.trim()}`;
|
||||
}
|
||||
if (text) journalParts.push(text);
|
||||
}
|
||||
const journalText = journalParts.join('\\n');
|
||||
if (!journalText) return window.notify('error', 'Keine gültigen Problemdetails zum Senden gefunden.');
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorderCompany/requestIntervention`, {
|
||||
workorderId: this.workorderId,
|
||||
journalText
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.interventionData = null;
|
||||
this.$emit('workorder-completed');
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadWorkorder();
|
||||
await this.loadTenantConfig();
|
||||
await this.fetchDocs();
|
||||
}
|
||||
});
|
||||
@@ -1,53 +0,0 @@
|
||||
// RMLWorkorderCompanyDashboardView.js
|
||||
// This would be a separate file and view.
|
||||
|
||||
Vue.component('rml-workorder-company-dashboard', {
|
||||
template: `
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Meine offenen Aufträge</h4>
|
||||
<p class="display-4 text-primary">{{ stats.assigned || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Meine dringenden Aufträge</h4>
|
||||
<p class="display-4 text-danger">{{ stats.urgent || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Meine terminierten Aufträge</h4>
|
||||
<p class="display-4 text-warning">{{ stats.scheduled || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<tt-card>
|
||||
<template v-slot:header><h5>Nächste Termine</h5></template>
|
||||
</tt-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
stats: {}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// You would create a new controller action e.g., /RMLWorkorder/getCompanyDashboardStats
|
||||
// const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorder/getCompanyDashboardStats`);
|
||||
// this.stats = response.data;
|
||||
}
|
||||
})
|
||||
@@ -1,61 +0,0 @@
|
||||
// RMLWorkorderAdminDashboardView.js
|
||||
// This would be a separate file and view.
|
||||
|
||||
Vue.component('rml-workorder-admin-dashboard', {
|
||||
template: `
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Neue Aufträge</h4>
|
||||
<p class="display-4 text-primary">{{ stats.new || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">In Arbeit</h4>
|
||||
<p class="display-4 text-warning">{{ stats.in_progress || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Überfällig</h4>
|
||||
<p class="display-4 text-danger">{{ stats.overdue || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4 class="header-title">Abgeschlossen (30T)</h4>
|
||||
<p class="display-4 text-success">{{ stats.completed_30d || 0 }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<tt-card>
|
||||
<template v-slot:header><h5>Dringende Aufträge (Deadline < 1 Woche)</h5></template>
|
||||
</tt-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
stats: {}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
// You would create a new controller action e.g., /RMLWorkorder/getDashboardStats
|
||||
// const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/RMLWorkorder/getDashboardStats`);
|
||||
// this.stats = response.data;
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,310 @@
|
||||
// WorkorderAdmin.js
|
||||
Vue.component('workorder-admin', {
|
||||
template: `
|
||||
<tt-card>
|
||||
<div class="mb-2 d-flex align-items-center" v-if="workordersToAssign.length > 0">
|
||||
<span class="mr-3 font-weight-bold">{{ workordersToAssign.length }} Workorder(s) zuweisen:</span>
|
||||
<div style="width: 300px;">
|
||||
<tt-select class="mb-0" :options="companiesForMassAssign" v-model="massAssignCompanyId"
|
||||
@input="openMassAssignModal" placeholder="Firma auswählen..." sm no-form-group/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tt-table-crud ref="table" :crud-config="crudConfig">
|
||||
<template v-slot:preorderinfo="{ row }">
|
||||
<div class="small">
|
||||
<div><strong>Kunde:</strong> {{ row.customerCompany || row.customerName }}</div>
|
||||
<div><strong>Anschluss:</strong> {{ row.street }} {{ row.hausnummer }}<template v-if="row.stiege">/{{ row.stiege }}</template><template v-if="row.apartment"> / WE: {{ row.apartment }}</template>, {{ row.plz }} {{ row.city }}</div>
|
||||
<div><strong>OAID:</strong> <span class="text-pink">{{ row.oaid }}</span>
|
||||
<tt-button icon="fas fa-external-link-alt" @click="window.open(window.TT_CONFIG.BASE_PATH + '/Preorder/Index?filter[ucode]=' + row.ucode, '_blank');"
|
||||
additional-class="btn-link btn-sm p-0 m-0" title="Zur Bestellung"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row }">
|
||||
<traffic-light :deadline="row.deadlineDate" :status="row.status"/>
|
||||
<i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
|
||||
<span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
|
||||
<tt-button v-if="row.status === 'intervention_required'" icon="ml-2 fas fa-check-circle text-success"
|
||||
@click="problemSolvedModalData = row" additional-class="btn-link btn-sm p-0" title="Auftrag auf Problem behoben setzen"/>
|
||||
</template>
|
||||
|
||||
<template v-slot:companyname="{ row }">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div class="flex-grow-1">
|
||||
<div v-if="editingWorkorderId === row.id">
|
||||
<div v-if="companiesLoading" class="spinner-border spinner-border-sm"></div>
|
||||
<tt-select v-else :options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
|
||||
@input="assignCompany(row, $event)" @blur="editingWorkorderId = null" @keydown.esc.native="editingWorkorderId = null"
|
||||
placeholder="Firma zuweisen..." sm no-form-group/>
|
||||
</div>
|
||||
<div v-else-if="row.status === 'new'">
|
||||
<tt-select :options="companiesByTenant[row.tenantId] || []" :value="row.companyId"
|
||||
@input="assignCompany(row, $event)" @focus="getCompaniesForWorkorder(row)"
|
||||
placeholder="Firma zuweisen..." sm no-form-group/>
|
||||
</div>
|
||||
<div v-else><span>{{ row.companyName || 'N/A' }}</span></div>
|
||||
</div>
|
||||
<div class="d-flex align-items-center">
|
||||
<tt-button v-if="!['completed', 'cancelled', 'new'].includes(row.status)" icon="fas fa-edit" @click="startCompanyEdit(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zuweisung ändern"/>
|
||||
<tt-button v-if="['intervention_required', 'assigned'].includes(row.status)" icon="fas fa-hard-hat" @click="openCivilEngineeringModal(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2 text-orange" title="Tiefbau benötigt"/>
|
||||
<tt-button v-if="!['completed', 'cancelled'].includes(row.status)" icon="fas fa-ban" @click="cancelWorkorderModalData = row"
|
||||
additional-class="btn-link btn-sm p-0 ml-2 text-danger" title="Auftrag stornieren"/>
|
||||
<tt-button v-if="!workordersToAssign.includes(row.id)" icon="fas fa-plus-circle text-success" @click="addToAssignList(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zur Zuweisungsliste hinzufügen"/>
|
||||
<tt-button v-if="workordersToAssign.includes(row.id)" icon="fas fa-minus-circle text-danger" @click="removeFromAssignList(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Von Zuweisungsliste entfernen"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:additionalinfo="{ row }">
|
||||
<div v-if="editingAdditionalInfoId === row.id">
|
||||
<tt-textarea v-model="tempAdditionalInfo" @keydown.esc.native="cancelEdit" rows="3" no-form-group sm ref="editTextarea"/>
|
||||
<div class="mt-2 d-flex justify-content-end">
|
||||
<tt-button text="Abbrechen" @click="cancelEdit" sm additional-class="btn-secondary mr-2"/>
|
||||
<tt-button text="Speichern" @click="updateAdditionalInfo(row)" sm additional-class="btn-success"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-start">
|
||||
<span style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
|
||||
<tt-button icon="fas fa-edit" @click="startAdditionalInfoEdit(row)" additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:deadlinedate="{ row }">
|
||||
<div v-if="editingDeadlineId === row.id">
|
||||
<tt-date-picker :value="row.deadlineDate" :date-range="false" @input="updateDeadline(row, $event)" @blur="editingDeadlineId = null" sm no-form-group/>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-center">
|
||||
<span>{{ formatDate(row.deadlineDate) }}</span>
|
||||
<tt-button icon="fas fa-edit" @click="editingDeadlineId = row.id" additional-class="btn-link btn-sm p-0 ml-2" title="Deadline ändern"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:appointmentdate="{ row }">{{ formatDate(row.appointmentDate, true) }}</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<civil-engineering-manager v-if="row.status === 'civil_engineering_required'" :workorder-id="row.id" :is-admin="true"/>
|
||||
<workorder-details-manager v-else :workorder-id="row.id" :is-admin="true"
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
@accept-documentation="acceptDocumentation(row.id)"/>
|
||||
</template>
|
||||
</tt-table-crud>
|
||||
|
||||
<tt-modal v-if="civilEngineeringData" :show.sync="civilEngineeringData" title="Tiefbau zuweisen" @submit="assignCivilEngineering">
|
||||
<p><strong>Auftrag:</strong> #{{ civilEngineeringData.workorder.id }}</p>
|
||||
<tt-select label="Tiefbau-Firma" :options="companiesByTenant[civilEngineeringData.workorder.tenantId] || []" v-model="civilEngineeringData.companyId" sm row required/>
|
||||
</tt-modal>
|
||||
|
||||
<tt-modal v-if="cancelWorkorderModalData" :show.sync="cancelWorkorderModalData" title="Auftrag stornieren" @submit="cancelWorkorder">
|
||||
<p>Soll der Auftrag <strong>#{{ cancelWorkorderModalData.id }}</strong> wirklich storniert werden?</p>
|
||||
<tt-textarea label="Grund (optional)" v-model="cancelWorkorderModalData.reason" sm row/>
|
||||
</tt-modal>
|
||||
|
||||
<tt-modal v-if="problemSolvedModalData" :show.sync="problemSolvedModalData" title="Problem als gelöst markieren" @submit="setToProblemSolved">
|
||||
<p>Soll das Problem bei Auftrag <strong>#{{ problemSolvedModalData.id }}</strong> als gelöst markiert werden?</p>
|
||||
<tt-textarea label="Journaleintrag" v-model="problemSolvedModalData.text" sm row required/>
|
||||
</tt-modal>
|
||||
|
||||
<tt-modal v-if="massAssignModalData" :show.sync="massAssignModalData" :title="workordersToAssign.length + ' Aufträge zuweisen'" @submit="massAssignCompanies">
|
||||
<p>Sollen <strong>{{ workordersToAssign.length }}</strong> Workorder(s) der Firma <strong>{{ massAssignModalData.companyName }}</strong> zugewiesen werden?</p>
|
||||
<tt-date-picker label="Deadline" v-model="massAssignModalData.deadline" :date-range="false" sm row/>
|
||||
</tt-modal>
|
||||
|
||||
</tt-card>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
window, workordersToAssign: [], editingWorkorderId: null, editingDeadlineId: null, editingAdditionalInfoId: null,
|
||||
civilEngineeringData: null, tempAdditionalInfo: '', companiesByTenant: {}, companiesLoading: false, massAssignCompanyId: null,
|
||||
cancelWorkorderModalData: null, problemSolvedModalData: null, massAssignModalData: null,
|
||||
crudConfig: {
|
||||
...window.TT_CONFIG.CRUD_CONFIG, selectable: false, expandable: true,
|
||||
customRowClass: (row) => {
|
||||
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
|
||||
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
|
||||
const deadlineDate = moment.unix(row.deadlineDate);
|
||||
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
|
||||
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
|
||||
return 'tt-rml-workorder-ontrack';
|
||||
},
|
||||
additionalActions: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
companiesForMassAssign() {
|
||||
if (this.workordersToAssign.length === 0) return [];
|
||||
const firstWorkorder = this.$refs.table?.$refs.table.rows.find(r => r.id === this.workordersToAssign[0]);
|
||||
return firstWorkorder ? this.companiesByTenant[firstWorkorder.tenantId] || [] : [];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async acceptDocumentation(workorderId) {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/acceptDocumentation`, { workorderId });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
},
|
||||
openCivilEngineeringModal(row) {
|
||||
this.getCompaniesForWorkorder(row);
|
||||
this.civilEngineeringData = { workorder: row, companyId: null };
|
||||
},
|
||||
async assignCivilEngineering() {
|
||||
if (!this.civilEngineeringData.companyId) return window.notify('error', 'Bitte eine Firma auswählen.');
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/setCivilEngineeringRequired`, {
|
||||
workorderId: this.civilEngineeringData.workorder.id, companyId: this.civilEngineeringData.companyId
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.civilEngineeringData = null;
|
||||
} else window.notify('error', data.message || 'Zuweisung fehlgeschlagen.');
|
||||
},
|
||||
addToAssignList(row) { if (!this.workordersToAssign.includes(row.id)) this.workordersToAssign.push(row.id); },
|
||||
removeFromAssignList(row) { this.workordersToAssign = this.workordersToAssign.filter(id => id !== row.id); },
|
||||
getStatusColumn(status) {
|
||||
const column = this.crudConfig.columns.find(c => c.key === 'status');
|
||||
return column.table.filterOptions.find(opt => opt.value === status) || {};
|
||||
},
|
||||
formatDate(timestamp, withTime = false) {
|
||||
if (!timestamp) return '–';
|
||||
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
|
||||
},
|
||||
async getCompaniesForWorkorder(workorder) {
|
||||
if (!workorder.tenantId || this.companiesByTenant[workorder.tenantId]) return;
|
||||
this.companiesLoading = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/getCompanies`, {params: {tenantId: workorder.tenantId}});
|
||||
this.$set(this.companiesByTenant, workorder.tenantId, data);
|
||||
} catch (e) {
|
||||
window.notify('error', 'Firmenliste konnte nicht geladen werden.');
|
||||
} finally {
|
||||
this.companiesLoading = false;
|
||||
}
|
||||
},
|
||||
async startCompanyEdit(row) {
|
||||
await this.getCompaniesForWorkorder(row);
|
||||
this.editingWorkorderId = row.id;
|
||||
},
|
||||
async assignCompany(workorder, companyId) {
|
||||
if (!companyId) { this.editingWorkorderId = null; return; }
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/assignWorkorder`, { workorderId: workorder.id, companyId: companyId });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
this.editingWorkorderId = null;
|
||||
},
|
||||
openMassAssignModal(companyId) {
|
||||
if (!companyId) return;
|
||||
const companyName = this.companiesForMassAssign.find(c => c.value === companyId)?.text;
|
||||
this.massAssignModalData = { companyId, companyName, deadline: null };
|
||||
},
|
||||
async massAssignCompanies() {
|
||||
try {
|
||||
const { companyId, deadline } = this.massAssignModalData;
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/massAssignWorkorders`, {
|
||||
companyId: companyId, workorderIds: this.workordersToAssign, deadlineDate: deadline
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.workordersToAssign = [];
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {} finally {
|
||||
this.massAssignCompanyId = null;
|
||||
this.massAssignModalData = null;
|
||||
}
|
||||
},
|
||||
async updateDeadline(workorder, newDate) {
|
||||
if (!newDate) { this.editingDeadlineId = null; return; }
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/updateDeadline`, { workorderId: workorder.id, deadlineDate: newDate });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
} catch (e) {} finally {
|
||||
this.editingDeadlineId = null;
|
||||
}
|
||||
},
|
||||
async setToProblemSolved() {
|
||||
const { id, text } = this.problemSolvedModalData;
|
||||
if (!text || !text.trim()) return window.notify('error', 'Bitte geben Sie einen Text ein.');
|
||||
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/setToProblemSolved`, { workorderId: id, text: text });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.problemSolvedModalData = null;
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
},
|
||||
startAdditionalInfoEdit(row) {
|
||||
this.editingAdditionalInfoId = row.id;
|
||||
this.tempAdditionalInfo = row.additionalInfo || '';
|
||||
this.$nextTick(() => this.$refs.editTextarea?.$el.querySelector('textarea').focus());
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingAdditionalInfoId = null;
|
||||
this.tempAdditionalInfo = '';
|
||||
},
|
||||
async updateAdditionalInfo(row) {
|
||||
if (row.additionalInfo === this.tempAdditionalInfo) { this.cancelEdit(); return; }
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/updateAdditionalInfo`, {
|
||||
workorderId: row.id, additionalInfo: this.tempAdditionalInfo
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
row.additionalInfo = data.newInfo; // Update local data
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
} finally {
|
||||
this.cancelEdit();
|
||||
}
|
||||
},
|
||||
async cancelWorkorder() {
|
||||
const { id, reason } = this.cancelWorkorderModalData;
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/cancelWorkorder`, { workorderId: id, reason: reason });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.cancelWorkorderModalData = null;
|
||||
} else window.notify('error', data.message || 'Stornierung fehlgeschlagen.');
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
workordersToAssign: {
|
||||
async handler(newVal) {
|
||||
if (newVal.length === 0) return;
|
||||
const rows = this.$refs.table?.$refs.table.rows;
|
||||
if (!rows) return;
|
||||
|
||||
const firstWorkorder = rows.find(r => r.id === newVal[0]);
|
||||
if (!firstWorkorder) return;
|
||||
|
||||
const firstTenantId = firstWorkorder.tenantId;
|
||||
const allSameTenant = newVal.every(id => {
|
||||
const wo = rows.find(r => r.id === id);
|
||||
return wo && wo.tenantId === firstTenantId;
|
||||
});
|
||||
|
||||
if (!allSameTenant) {
|
||||
window.notify('error', 'Massen-Zuweisung nur für Aufträge des gleichen Mandanten möglich.');
|
||||
this.workordersToAssign.pop();
|
||||
return;
|
||||
}
|
||||
await this.getCompaniesForWorkorder(firstWorkorder);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,471 @@
|
||||
// WorkorderCommon.js
|
||||
|
||||
// A simple component to display a status light based on a deadline.
|
||||
Vue.component('traffic-light', {
|
||||
props: ['deadline', 'status'],
|
||||
computed: {
|
||||
lightInfo() {
|
||||
const deadlineDate = moment.unix(this.deadline);
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
|
||||
if (['completed', 'new', 'cancelled'].includes(this.status)) return { color: '#cccccc', title: 'Status irrelevant für Dringlichkeit' };
|
||||
if (!deadlineDate.isValid()) return { color: '#cccccc', title: 'Keine Deadline gesetzt' };
|
||||
if (deadlineDate.isBefore(moment())) return { color: '#dc3545', title: 'Deadline überschritten' };
|
||||
if (daysLeft <= 7) return { color: '#dc3545', title: 'Dringend: Weniger als 1 Woche' };
|
||||
if (daysLeft <= 21) return { color: '#ffc107', title: 'Mittel: Weniger als 3 Wochen' };
|
||||
return { color: '#28a745', title: 'Im Plan: Mehr als 3 Wochen' };
|
||||
}
|
||||
},
|
||||
template: `<span :style="{ color: lightInfo.color, fontSize: '1.2em' }" class="mr-2" :title="lightInfo.title">●</span>`
|
||||
});
|
||||
|
||||
// A manager for civil engineering tasks, used when a workorder requires it.
|
||||
Vue.component('civil-engineering-manager', {
|
||||
props: ['workorderId', 'isAdmin'],
|
||||
template: `
|
||||
<div class="p-3 bg-light" style="width: 100%;">
|
||||
<div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
|
||||
<div v-else class="row">
|
||||
<div class="col-lg-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Tiefbau-Arbeiten</h5>
|
||||
<p class="small text-muted">Schließen Sie den Tiefbau-Auftrag ab. Laden Sie Dokumente hoch, falls erforderlich.</p>
|
||||
<hr>
|
||||
<tt-button text="Tiefbau abschließen" @click="showCompleteModal = true"
|
||||
:disabled="!canComplete || completing"
|
||||
:loading="completing" additional-class="btn-success w-100" icon="fas fa-check-double"
|
||||
/>
|
||||
<small v-if="docsRequired && !canComplete" class="form-text text-muted text-center mt-2">
|
||||
Bitte laden Sie mindestens ein Dokument hoch, um den Auftrag abzuschließen.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8">
|
||||
<div class="card mb-3" v-if="docsRequired">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Dokument hochladen</h5>
|
||||
<tt-input label="Beschreibung" v-model="uploadData.description" sm row placeholder="Optional"/>
|
||||
<div class="form-group row">
|
||||
<label class="col-form-label col-sm-4 col-form-label-sm">Dateien</label>
|
||||
<div class="col-sm-8 p-0">
|
||||
<input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload" ref="fileInput" multiple accept="image/*,.pdf"/>
|
||||
</div>
|
||||
</div>
|
||||
<tt-button text="Hochladen" @click="uploadFiles" :loading="uploading" additional-class="btn-primary float-right" icon="fas fa-upload"/>
|
||||
</div>
|
||||
</div>
|
||||
<tt-file-gallery
|
||||
v-if="docsRequired"
|
||||
:files="uploadedFiles"
|
||||
:edit-mode="false"
|
||||
:delete-mode="true"
|
||||
@delete-file="deleteDocumentation">
|
||||
</tt-file-gallery>
|
||||
<div v-else class="alert alert-info">Für diesen Auftraggeber ist keine Dokumentation für Tiefbau-Arbeiten erforderlich.</div>
|
||||
</div>
|
||||
</div>
|
||||
<tt-modal :show.sync="showCompleteModal" title="Tiefbau abschließen" @submit="completeTask" @close="showCompleteModal = false" :delete="false">
|
||||
Möchten Sie diese Tiefbau-Arbeiten wirklich als abgeschlossen markieren?
|
||||
</tt-modal>
|
||||
</div>
|
||||
`,
|
||||
data: () => ({
|
||||
loading: true, uploading: false, completing: false, docsRequired: false,
|
||||
uploadedFiles: [], uploadData: { files: [], description: '' }, showCompleteModal: false
|
||||
}),
|
||||
computed: {
|
||||
canComplete() {
|
||||
return !this.docsRequired || this.uploadedFiles.length > 0;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async fetchInitialData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const configRes = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/getTenantConfig`, { params: { workorderId: this.workorderId } });
|
||||
this.docsRequired = configRes.data.civilEngineeringDocsRequired || false;
|
||||
|
||||
if(this.docsRequired) {
|
||||
const docRes = await axios.get(`${window.TT_CONFIG.BASE_PATH}/${this.isAdmin ? 'WorkorderAdmin' : 'WorkorderCompany'}/getDocumentation`, { params: { workorderId: this.workorderId } });
|
||||
this.uploadedFiles = docRes.data.docs || [];
|
||||
}
|
||||
} catch (e) {
|
||||
window.notify('error', 'Konfiguration konnte nicht geladen werden.');
|
||||
console.error(e);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
handleFileUpload(event) { this.uploadData.files = event.target.files; },
|
||||
async uploadFiles() {
|
||||
if (!this.uploadData.files?.length) return window.notify('error', 'Bitte eine oder mehrere Dateien auswählen.');
|
||||
this.uploading = true;
|
||||
const formData = new FormData();
|
||||
formData.append('workorderId', this.workorderId);
|
||||
formData.append('documentType', 'civil_engineering_photo');
|
||||
formData.append('description', this.uploadData.description);
|
||||
for (const file of this.uploadData.files) formData.append('files[]', file);
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/uploadDocumentation`, formData);
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.fileInput.value = '';
|
||||
this.uploadData = { files: [], description: '' };
|
||||
await this.fetchInitialData();
|
||||
} else window.notify('error', data.error || 'Upload fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist beim Upload aufgetreten.');
|
||||
}
|
||||
this.uploading = false;
|
||||
},
|
||||
async deleteDocumentation(file) {
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/deleteDocumentation`, {id: file.id});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
await this.fetchInitialData();
|
||||
} else window.notify('error', data.message || 'Löschen fehlgeschlagen.');
|
||||
} catch (e) {
|
||||
window.notify('error', 'Netzwerkfehler beim Löschen.');
|
||||
}
|
||||
},
|
||||
async completeTask() {
|
||||
this.completing = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/completeCivilEngineering`, { workorderId: this.workorderId });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$emit('workorder-completed');
|
||||
this.showCompleteModal = false;
|
||||
} else {
|
||||
window.notify('error', data.message || 'Abschluss fehlgeschlagen.');
|
||||
}
|
||||
} catch (e) {
|
||||
window.notify('error', 'Ein Netzwerkfehler ist aufgetreten.');
|
||||
} finally {
|
||||
this.completing = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.fetchInitialData();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Unified component for viewing and managing Workorder Details, Documentation, and Journals.
|
||||
* Adapts its UI and functionality based on the isAdmin prop.
|
||||
*/
|
||||
Vue.component('workorder-details-manager', {
|
||||
props: {
|
||||
workorderId: { type: String, required: true },
|
||||
isAdmin: { type: Boolean, default: false }
|
||||
},
|
||||
template: `
|
||||
<div class="p-3 bg-light">
|
||||
<div v-if="loading" class="text-center p-5"><i class="fas fa-spinner fa-spin fa-2x"></i></div>
|
||||
<div v-else class="row">
|
||||
<div class="col-lg-5 mb-3 mb-lg-0">
|
||||
<div v-if="!isAdmin" class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Benötigte Dokumente</h5>
|
||||
<ul class="list-unstyled">
|
||||
<li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center small">
|
||||
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
|
||||
<span>{{ docType.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<tt-button text="Auftrag zur Prüfung einreichen" @click="showCompleteModal = true"
|
||||
:disabled="!canComplete || isReadOnly" :loading="completing"
|
||||
additional-class="btn-success w-100" icon="fas fa-check-double"/>
|
||||
<small v-if="!canComplete && !isReadOnly" class="form-text text-muted text-center mt-2">
|
||||
Bitte laden Sie alle benötigten Dokumente hoch, um den Auftrag abzuschließen.
|
||||
</small>
|
||||
<div v-if="isReadOnly" class="alert alert-secondary text-center mt-2 p-2">
|
||||
Auftrag bereits abgeschlossen oder storniert. Keine Aktionen mehr möglich.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isAdmin" class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Prüfung & Freigabe</h5>
|
||||
<p class="small text-muted">Prüfen Sie, ob alle erforderlichen Dokumente vorhanden und korrekt sind.</p>
|
||||
<ul v-if="!loadingConfig" class="list-unstyled">
|
||||
<li v-for="docType in requiredDocTypes" :key="docType.value" class="mb-2 d-flex align-items-center small">
|
||||
<i :class="isUploaded(docType.value) ? 'fas fa-check-circle text-success' : 'far fa-circle text-muted'" class="fa-fw mr-2"></i>
|
||||
<span>{{ docType.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="text-center"><i class="fas fa-spinner fa-spin"></i></div>
|
||||
<hr>
|
||||
<tt-button text="Dokumentation akzeptieren" @click="showAcceptModal = true"
|
||||
additional-class="btn-success w-100" icon="fas fa-check"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-3">
|
||||
<div class="card-header"><h5><i class="fas fa-history mr-2"></i>Journal</h5></div>
|
||||
<div class="card-body p-0" style="max-height: 250px; overflow-y: auto;">
|
||||
<ul v-if="journals.length" class="list-group list-group-flush">
|
||||
<li v-for="log in journals" :key="log.id" class="list-group-item small"
|
||||
:class="{'list-group-item-danger': log.statusChange && (log.statusChange.includes('correction_requested') || log.statusChange.includes('intervention_required'))}">
|
||||
<strong>{{ formatDate(log.create) }} ({{ log.createByName }}):</strong>
|
||||
<div class="text-muted" style="white-space: pre-wrap;">{{ log.text }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="card-body text-muted text-center">Keine Journaleinträge.</div>
|
||||
</div>
|
||||
<div class="card-footer" v-if="!isReadOnly">
|
||||
<tt-textarea v-model="newJournalMessage" placeholder="Nachricht oder Anmerkung..." rows="2"/>
|
||||
<tt-button text="Eintrag speichern" @click="addJournalEntry" :loading="addingJournalEntry"
|
||||
additional-class="btn-info btn-sm w-100 mt-2" icon="fas fa-paper-plane"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-7">
|
||||
<div class="card mb-3" v-if="!isAdmin && !isReadOnly">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Neues Dokument hochladen</h5>
|
||||
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="uploadData.documentType" sm row/>
|
||||
<tt-input label="Beschreibung" v-model="uploadData.description" sm row placeholder="Optional"/>
|
||||
<div class="form-group row"><label class="col-form-label col-sm-4 col-form-label-sm">Dateien</label>
|
||||
<div class="col-sm-8 p-0"><input type="file" class="form-control-file form-control-sm p-0" @change="handleFileUpload" ref="fileInput" multiple accept="image/*,.pdf"/></div>
|
||||
</div>
|
||||
<tt-button text="Hochladen" @click="uploadFiles" :loading="uploading" additional-class="btn-primary float-right" icon="fas fa-upload"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mb-3" v-if="isAdmin && selectedDocs.length > 0">
|
||||
<div class="card-header bg-warning"><h5><i class="fas fa-exclamation-triangle mr-2"></i>Korrektur anfordern</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Die ausgewählten Dokumente werden als fehlerhaft markiert. Bitte geben Sie einen Grund an.</p>
|
||||
<tt-textarea v-model="correctionText" label="Grund" sm row required/>
|
||||
<tt-button text="Korrektur anfordern" @click="requestCorrection" :loading="correctionLoading" additional-class="btn-danger float-right"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tt-file-gallery :files="docsWithStatus" :edit-mode="!isAdmin && !isReadOnly" :delete-mode="!isReadOnly" :selectable="isAdmin"
|
||||
@delete-file="deleteDocumentation" @update-file="updateDocumentation" @selection-changed="selectedDocs = $event">
|
||||
<template v-slot:file-edit="{ file }">
|
||||
<tt-select label="Dokumententyp" :options="allDocTypes" v-model="file.documentType" sm/>
|
||||
</template>
|
||||
</tt-file-gallery>
|
||||
|
||||
<div class="card mt-3" v-if="!isAdmin && !isReadOnly">
|
||||
<div class="card-header bg-danger text-white"><h5><i class="fas fa-hard-hat mr-2"></i>Eingriff benötigt</h5></div>
|
||||
<div class="card-body">
|
||||
<p class="small text-muted">Falls ein Problem auftritt, das ein Eingreifen erfordert, melden Sie es hier.</p>
|
||||
<tt-button text="Problem melden" @click="openInterventionModal" additional-class="btn-danger w-100" icon="fas fa-exclamation-triangle"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tt-modal v-if="interventionData" :show.sync="interventionData" title="Eingriff anfordern" @submit="requestIntervention">
|
||||
<tt-select label="Art des Problems" :options="interventionTypes" v-model="interventionData.types" sm row multiple/>
|
||||
<div v-for="type in interventionData.types" :key="type">
|
||||
<tt-input v-if="['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)" :label="'Distanz (m) für \\'' + getInterventionLabel(type) + '\\''" type="number" v-model="interventionData.details[type].distance" sm row required/>
|
||||
<tt-textarea v-if="type === 'other'" label="Grund für 'Sonstiges'" v-model="interventionData.details.other.reason" sm row required/>
|
||||
</div>
|
||||
</tt-modal>
|
||||
<tt-modal :show.sync="showCompleteModal" title="Auftrag abschließen" @submit="completeWorkorder" :delete="false">
|
||||
Möchten Sie diesen Auftrag wirklich abschließen und zur Prüfung einreichen?
|
||||
</tt-modal>
|
||||
<tt-modal :show.sync="showAcceptModal" title="Dokumentation akzeptieren" @submit="acceptDocumentation" :delete="false">
|
||||
Soll die Dokumentation für diesen Arbeitsauftrag wirklich akzeptiert und der Auftrag abgeschlossen werden?
|
||||
</tt-modal>
|
||||
</div>`,
|
||||
data: () => ({
|
||||
loading: true, loadingConfig: true, workorder: null, docs: [], journals: [], tenantDocTypes: null,
|
||||
newJournalMessage: '', addingJournalEntry: false,
|
||||
// Company state
|
||||
uploading: false, completing: false, showCompleteModal: false,
|
||||
uploadData: { files: [], documentType: 'photo_hup_mounted', description: '' },
|
||||
interventionData: null, interventionTypes: [
|
||||
{value: 'stuck', text: 'Ab X Laufmeter stecken geblieben'},
|
||||
{value: 'stuck_fcp', text: 'Vom FCP nach HÜP nach X Laufmetern stecken geblieben'},
|
||||
{value: 'stuck_hup', text: 'Vom HÜP nach FCP nach X Laufmetern stecken geblieben'},
|
||||
{value: 'no_air', text: 'Keine Luftverbindung'}, {value: 'other', text: 'Sonstiges'}
|
||||
],
|
||||
// Admin state
|
||||
selectedDocs: [], correctionText: '', correctionLoading: false, showAcceptModal: false,
|
||||
}),
|
||||
computed: {
|
||||
isReadOnly() { return ['documented', 'completed', 'cancelled'].includes(this.workorder?.status); },
|
||||
requiredDocTypes() {
|
||||
if (this.tenantDocTypes) return this.tenantDocTypes;
|
||||
// Default list as a fallback
|
||||
return [{value: 'photo_hup_mounted', text: 'Foto vom montierten HÜP'}, {value: 'photo_hup_open', text: 'Foto von dem offenen HÜP'}, {value: 'photo_splice_cassette_hup', text: 'Foto der Spleißkassette – HÜP'}, {value: 'photo_splice_cassette_fcp', text: 'Foto der Spleißkassette - FCP'}, {value: 'photo_hup_closed_stickers', text: 'Foto vom geschlossenen HÜP mit allen Aufklebern'}, {value: 'photo_fcp_labeled', text: 'Foto vom FCP beschriftet'}, {value: 'photo_patch_position_osp', text: 'Foto der Patch-Position - OSP-Seite'}, {value: 'photo_patch_position_anb', text: 'Foto der Patch-Position - ANB-Seite'}, {value: 'measurement_protocol_otdr', text: 'ODTR – Messung (1310nm & 1550nm)'}];
|
||||
},
|
||||
allDocTypes() { return [...this.requiredDocTypes, {value: 'other', text: 'Sonstiges Dokument (optional)'}]; },
|
||||
canComplete() { return this.requiredDocTypes.every(docType => this.isUploaded(docType.value)); },
|
||||
docsWithStatus() {
|
||||
if (!this.journals?.length) return this.docs;
|
||||
const correctionJournal = [...this.journals].sort((a, b) => b.create - a.create).find(j => j.statusChange?.includes('correction_requested'));
|
||||
if (!correctionJournal?.fileIds) return this.docs;
|
||||
try {
|
||||
const incorrectFileIds = JSON.parse(correctionJournal.fileIds);
|
||||
if (!Array.isArray(incorrectFileIds)) return this.docs;
|
||||
return this.docs.map(doc => incorrectFileIds.includes(doc.id) ? { ...doc, class: 'border border-danger' } : doc);
|
||||
} catch (e) { return this.docs; }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatDate(timestamp) { return timestamp ? window.moment.unix(timestamp).format('DD.MM.YYYY HH:mm') : '–'; },
|
||||
// FIX: Added a guard to prevent calling .some() on an undefined value
|
||||
isUploaded(docType) {
|
||||
return Array.isArray(this.docs) && this.docs.some(doc => doc.documentType === docType);
|
||||
},
|
||||
async fetchData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const [workorderRes, docsJournalsRes] = await Promise.all([
|
||||
axios.get(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/getWorkorderById`, {params: {id: this.workorderId}}),
|
||||
axios.get(`${window.TT_CONFIG.BASE_PATH}/${this.isAdmin ? 'WorkorderAdmin' : 'WorkorderCompany'}/getDocumentation`, {params: {workorderId: this.workorderId}})
|
||||
]);
|
||||
this.workorder = workorderRes.data;
|
||||
// FIX: Ensure docs and journals are always arrays
|
||||
this.docs = docsJournalsRes.data.docs || [];
|
||||
this.journals = docsJournalsRes.data.journals || [];
|
||||
} catch (e) {
|
||||
window.notify('error', 'Details konnten nicht geladen werden.');
|
||||
this.docs = []; // Ensure it's an array on error
|
||||
this.journals = [];
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async loadTenantConfig() {
|
||||
this.loadingConfig = true;
|
||||
try {
|
||||
const {data} = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/getTenantConfig`, {params: {workorderId: this.workorderId}});
|
||||
if (data.success) this.tenantDocTypes = data.documentationTypes;
|
||||
} catch (e) { console.error("Mandantenkonfiguration nicht geladen", e); }
|
||||
finally { this.loadingConfig = false; }
|
||||
},
|
||||
async addJournalEntry() {
|
||||
if (!this.newJournalMessage.trim()) return;
|
||||
this.addingJournalEntry = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/${this.isAdmin ? 'WorkorderAdmin' : 'WorkorderCompany'}/addJournal`, { workorderId: this.workorderId, text: this.newJournalMessage });
|
||||
if (data.success) {
|
||||
this.newJournalMessage = '';
|
||||
this.journals = data.journals;
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
finally { this.addingJournalEntry = false; }
|
||||
},
|
||||
// Company Methods
|
||||
handleFileUpload(event) { this.uploadData.files = event.target.files; },
|
||||
async uploadFiles() {
|
||||
if (!this.uploadData.files?.length) return window.notify('error', 'Bitte Dateien auswählen.');
|
||||
this.uploading = true;
|
||||
const formData = new FormData();
|
||||
formData.append('workorderId', this.workorderId);
|
||||
formData.append('documentType', this.uploadData.documentType);
|
||||
formData.append('description', this.uploadData.description);
|
||||
for (const file of this.uploadData.files) formData.append('files[]', file);
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/uploadDocumentation`, formData);
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.fileInput.value = '';
|
||||
this.uploadData.files = [];
|
||||
await this.fetchData();
|
||||
this.$emit('workorder-updated');
|
||||
} else window.notify('error', data.error);
|
||||
} catch (e) { window.notify('error', 'Upload-Fehler'); }
|
||||
this.uploading = false;
|
||||
},
|
||||
async deleteDocumentation(file) {
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/deleteDocumentation`, {id: file.id});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
await this.fetchData();
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
},
|
||||
async updateDocumentation(file) {
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/updateDocumentation`, { id: file.id, documentType: file.documentType });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
await this.fetchData();
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
},
|
||||
openInterventionModal() {
|
||||
this.interventionData = { types: [], details: { stuck: {}, stuck_fcp: {}, stuck_hup: {}, other: {} } };
|
||||
},
|
||||
async requestIntervention() {
|
||||
const { types, details } = this.interventionData;
|
||||
if (types.length === 0) return window.notify('error', 'Bitte Problem auswählen.');
|
||||
let journalParts = [];
|
||||
for (const type of types.sort()) {
|
||||
const problemText = this.interventionTypes.find(o => o.value === type)?.text || type;
|
||||
if (['stuck', 'stuck_fcp', 'stuck_hup'].includes(type)) {
|
||||
if (!details[type]?.distance > 0) return window.notify('error', `Bitte DisWtanz für "${problemText}" eingeben.`);
|
||||
journalParts.push(problemText.replace('X', details[type].distance));
|
||||
} else if (type === 'other') {
|
||||
if (!details.other?.reason?.trim()) return window.notify('error', `Bitte Grund für "Sonstiges" angeben.`);
|
||||
journalParts.push(`Sonstiges: ${details.other.reason.trim()}`);
|
||||
} else journalParts.push(problemText);
|
||||
}
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/requestIntervention`, { workorderId: this.workorderId, journalText: journalParts.join('\\n') });
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.interventionData = null;
|
||||
this.$emit('workorder-completed');
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
},
|
||||
async completeWorkorder() {
|
||||
this.completing = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/completeWorkorder`, {workorderId: this.workorderId});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$emit('workorder-completed');
|
||||
this.showCompleteModal = false;
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
this.completing = false;
|
||||
},
|
||||
// Admin Methods
|
||||
async requestCorrection() {
|
||||
if (!this.correctionText) return window.notify('error', 'Bitte geben Sie einen Grund an.');
|
||||
if (this.selectedDocs.length === 0) return window.notify('error', 'Bitte Dokumente für die Korrektur auswählen.');
|
||||
this.correctionLoading = true;
|
||||
try {
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderAdmin/requestCorrection`, {
|
||||
workorderId: this.workorderId, text: this.correctionText, fileIds: this.selectedDocs
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.correctionText = '';
|
||||
this.selectedDocs = [];
|
||||
await this.fetchData();
|
||||
this.$emit('workorder-completed');
|
||||
} else window.notify('error', data.message);
|
||||
} catch (e) { window.notify('error', 'Netzwerkfehler'); }
|
||||
this.correctionLoading = false;
|
||||
},
|
||||
acceptDocumentation() {
|
||||
this.$emit('accept-documentation', this.workorderId);
|
||||
this.showAcceptModal = false;
|
||||
},
|
||||
getInterventionLabel(type) { return this.interventionTypes.find(t => t.value === type)?.text || type; },
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadTenantConfig();
|
||||
await this.fetchData();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,176 @@
|
||||
// WorkorderCompany.js
|
||||
Vue.component('workorder-company', {
|
||||
template: `
|
||||
<div>
|
||||
<tt-card>
|
||||
<tt-table-crud
|
||||
ref="table"
|
||||
:crud-config="crudConfig"
|
||||
>
|
||||
<template v-slot:preorderinfo="{ row }">
|
||||
<div class="small">
|
||||
<div><strong>Kunde:</strong> {{ row.customerCompany || row.customerName }}</div>
|
||||
<div>
|
||||
<strong>Anschluss:</strong> {{ row.street }} {{ row.hausnummer }}
|
||||
<template v-if="row.stiege">/{{ row.stiege }}</template>
|
||||
<template v-if="row.apartment"> / WE: {{ row.apartment }}</template>
|
||||
, {{ row.plz }} {{ row.city }}
|
||||
</div>
|
||||
<div><strong>Kontakt:</strong> {{ row.phone }} / {{ row.email }}</div>
|
||||
<div><strong>OAID:</strong> <span class="text-pink">{{ row.oaid }}</span></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:status="{ row }">
|
||||
<traffic-light :deadline="row.deadlineDate" :status="row.status"/>
|
||||
<i :class="getStatusColumn(row.status).icon" :title="getStatusColumn(row.status).text"></i>
|
||||
<span class="ml-2">{{ getStatusColumn(row.status).text }}</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:additionalinfo="{ row }">
|
||||
<div v-if="editingAdditionalInfoId === row.id">
|
||||
<tt-textarea v-model="tempAdditionalInfo" @keydown.esc.native="cancelEdit" rows="3" no-form-group sm ref="editTextarea"/>
|
||||
<div class="mt-2 d-flex justify-content-end">
|
||||
<tt-button text="Abbrechen" @click="cancelEdit" sm additional-class="btn-secondary mr-2"/>
|
||||
<tt-button text="Speichern" @click="updateAdditionalInfo(row)" sm additional-class="btn-success"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="d-flex align-items-start">
|
||||
<span style="white-space: pre-wrap; max-width: 250px; display: inline-block;">{{ row.additionalInfo || '-' }}</span>
|
||||
<tt-button v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
|
||||
icon="fas fa-edit" @click="startAdditionalInfoEdit(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Zusatz-Info bearbeiten"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-slot:deadlinedate="{ row }">
|
||||
{{ formatDate(row.deadlineDate) }}
|
||||
</template>
|
||||
|
||||
<template v-slot:appointmentdate="{ row }">
|
||||
<div v-if="!row.appointmentDate && ['assigned', 'correction_requested', 'problem_solved'].includes(row.status)">
|
||||
<tt-date-picker placeholder="Termin festlegen..." :date-range="false"
|
||||
@input="setAppointment(row, $event)" sm no-form-group
|
||||
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, drops: 'up' }"/>
|
||||
</div>
|
||||
<div v-else-if="row.appointmentDate">
|
||||
<span>{{ formatDate(row.appointmentDate, true) }}</span>
|
||||
<tt-button v-if="!['completed', 'cancelled', 'documented'].includes(row.status)"
|
||||
icon="fas fa-edit" @click="openRescheduleModal(row)"
|
||||
additional-class="btn-link btn-sm p-0 ml-2" title="Termin ändern"/>
|
||||
</div>
|
||||
<span v-else>–</span>
|
||||
</template>
|
||||
|
||||
<template v-slot:expandedRow="{ row }">
|
||||
<civil-engineering-manager
|
||||
v-if="row.status === 'civil_engineering_required'"
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
:is-admin="false"
|
||||
:workorder-id="row.id"
|
||||
/>
|
||||
<workorder-details-manager
|
||||
v-else
|
||||
@workorder-completed="$refs.table.$refs.table.refreshTable()"
|
||||
:workorder-id="row.id"
|
||||
:is-admin="false"
|
||||
/>
|
||||
</template>
|
||||
</tt-table-crud>
|
||||
</tt-card>
|
||||
|
||||
<tt-modal v-if="rescheduleModalData" :show.sync="rescheduleModalData" title="Termin verschieben" @submit="rescheduleAppointment">
|
||||
<p><strong>Auftrag:</strong> #{{ rescheduleModalData.workorder.id }}</p>
|
||||
<tt-date-picker label="Neuer Termin" :date-range="false" v-model="rescheduleModalData.newDate"
|
||||
:additional-props="{ timePicker: true, timePicker24Hour: true, locale: { format: 'DD.MM.YYYY HH:mm' }, singleDatePicker: true }" sm row/>
|
||||
<tt-textarea label="Grund" v-model="rescheduleModalData.reason" sm row required/>
|
||||
</tt-modal>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
window,
|
||||
rescheduleModalData: null,
|
||||
editingAdditionalInfoId: null,
|
||||
tempAdditionalInfo: '',
|
||||
crudConfig: {
|
||||
...window.TT_CONFIG.CRUD_CONFIG,
|
||||
expandable: true,
|
||||
customRowClass: (row) => {
|
||||
if (['completed', 'new', 'cancelled'].includes(row.status)) return 'tt-rml-workorder-irrelevant';
|
||||
if (['correction_requested', 'intervention_required'].includes(row.status)) return 'tt-rml-workorder-high';
|
||||
const deadlineDate = moment.unix(row.deadlineDate);
|
||||
if (!deadlineDate.isValid()) return 'tt-rml-workorder-irrelevant';
|
||||
const daysLeft = deadlineDate.diff(moment(), 'days');
|
||||
if (daysLeft <= 7) return 'tt-rml-workorder-urgent';
|
||||
if (daysLeft <= 21) return 'tt-rml-workorder-medium';
|
||||
return 'tt-rml-workorder-ontrack';
|
||||
},
|
||||
additionalActions: []
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusColumn(status) {
|
||||
const column = this.crudConfig.columns.find(c => c.key === 'status');
|
||||
return column.table.filterOptions.find(opt => opt.value === status) || {};
|
||||
},
|
||||
formatDate(timestamp, withTime = false) {
|
||||
if (!timestamp) return '–';
|
||||
return window.moment.unix(timestamp).format(withTime ? 'DD.MM.YYYY HH:mm' : 'DD.MM.YYYY');
|
||||
},
|
||||
async setAppointment(workorder, date) {
|
||||
if (!date) return;
|
||||
if (moment.unix(date).hour() >= 23 || moment.unix(date).hour() < 1) {
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
return window.notify('error', 'Bitte Uhrzeit angeben!');
|
||||
}
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/scheduleAppointment`, {
|
||||
workorderId: workorder.id, appointmentDate: date
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
},
|
||||
openRescheduleModal(row) {
|
||||
this.rescheduleModalData = { workorder: row, newDate: row.appointmentDate, reason: '' };
|
||||
},
|
||||
async rescheduleAppointment() {
|
||||
const { workorder, newDate, reason } = this.rescheduleModalData;
|
||||
if (!newDate || !reason) return window.notify('error', 'Bitte geben Sie ein neues Datum und einen Grund an.');
|
||||
if (moment.unix(newDate).hour() >= 23 || moment.unix(newDate).hour() < 1) return window.notify('error', 'Bitte Uhrzeit angeben!');
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/rescheduleAppointment`, {
|
||||
workorderId: workorder.id, appointmentDate: newDate, reason: reason
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
this.$refs.table.$refs.table.refreshTable();
|
||||
this.rescheduleModalData = null;
|
||||
} else window.notify('error', data.message || 'Ein Fehler ist aufgetreten.');
|
||||
},
|
||||
startAdditionalInfoEdit(row) {
|
||||
this.editingAdditionalInfoId = row.id;
|
||||
this.tempAdditionalInfo = row.additionalInfo || '';
|
||||
this.$nextTick(() => this.$refs.editTextarea?.$el.querySelector('textarea').focus());
|
||||
},
|
||||
cancelEdit() {
|
||||
this.editingAdditionalInfoId = null;
|
||||
this.tempAdditionalInfo = '';
|
||||
},
|
||||
async updateAdditionalInfo(row) {
|
||||
if (row.additionalInfo === this.tempAdditionalInfo) {
|
||||
this.cancelEdit();
|
||||
return;
|
||||
}
|
||||
const {data} = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WorkorderCompany/updateAdditionalInfo`, {
|
||||
workorderId: row.id, additionalInfo: this.tempAdditionalInfo
|
||||
});
|
||||
if (data.success) {
|
||||
window.notify('success', data.message);
|
||||
row.additionalInfo = data.newInfo;
|
||||
} else window.notify('error', data.message || 'Update fehlgeschlagen.');
|
||||
this.cancelEdit();
|
||||
},
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user