implemented inventur and changed warehousearticle/category

This commit is contained in:
2025-12-15 23:47:16 +01:00
parent b43925d37e
commit 3000c9e2e7
18 changed files with 2711 additions and 13 deletions
@@ -1,3 +1,13 @@
/* Main card margin */
#app > .card {
margin-top: 1rem;
}
/* Reduce button margin */
#app > .card > .card-body > .mb-3 {
margin-bottom: 0.5rem !important;
}
/* End of Life Row Highlighting */
.end-of-life {
background-color: #f8d7da !important;
@@ -6,8 +16,62 @@
/*
* Modal Layout
*/
.modal-body {
.modal-dialog.modal-xl .modal-body {
overflow-x: hidden;
overflow-y: auto;
max-height: calc(100vh - 200px);
}
.modal-dialog.modal-xl .modal-content {
max-height: calc(100vh - 50px);
}
/* Disabled checkbox styling */
.wa-checkbox-item.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Disabled form controls styling */
.wa-modal-content .form-control:disabled,
.wa-modal-content .form-control[disabled],
.wa-modal-content textarea:disabled,
.wa-modal-content textarea[disabled] {
background-color: #e9ecef !important;
cursor: not-allowed !important;
opacity: 0.7;
}
.wa-modal-content .tt-select-modern.disabled .tt-select-trigger,
.wa-modal-content .tt-select-trigger[disabled],
.wa-modal-content .tt-select-trigger.disabled {
background-color: #e9ecef !important;
cursor: not-allowed !important;
opacity: 0.7;
pointer-events: none;
}
.wa-modal-content .form-group.disabled {
opacity: 0.7;
pointer-events: none;
}
/* Disabled field styling */
.wa-field-disabled {
opacity: 0.5;
position: relative;
}
.wa-field-disabled::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: not-allowed;
z-index: 5;
}
.wa-modal-content {
@@ -331,7 +331,7 @@ Vue.component('warehouse-article-modal', {
<!-- Basic Information -->
<div class="wa-section">
<div class="row">
<div class="col-md-12">
<div class="col-md-12" :class="{ 'wa-field-disabled': !isEditMode && !formData.category_id }">
<tt-input
label="Titel"
v-model="formData.title"
@@ -339,7 +339,7 @@ Vue.component('warehouse-article-modal', {
required
sm/>
</div>
<div class="col-md-12">
<div class="col-md-12" :class="{ 'wa-field-disabled': !isEditMode && !formData.category_id }">
<tt-textarea
label="Beschreibung"
v-model="formData.description"
@@ -351,6 +351,7 @@ Vue.component('warehouse-article-modal', {
label="Kategorie"
v-model="formData.category_id"
:options="categoryOptions"
@input="onCategoryChange"
required
sm/>
</div>
@@ -358,12 +359,13 @@ Vue.component('warehouse-article-modal', {
<tt-input
label="Artikel-Nummer"
v-model="formData.articleNumber"
placeholder="z.B. 1234"
placeholder="Wird automatisch generiert"
required
disabled
form-label
sm/>
</div>
<div class="col-md-2">
<div class="col-md-2" :class="{ 'wa-field-disabled': !isEditMode && !formData.category_id }">
<tt-select
label="Einheit"
v-model="formData.unit"
@@ -371,7 +373,7 @@ Vue.component('warehouse-article-modal', {
required
sm/>
</div>
<div class="col-md-2">
<div class="col-md-2" :class="{ 'wa-field-disabled': !isEditMode && !formData.category_id }">
<tt-select
label="Erlöskonto"
v-model="formData.revenueAccount"
@@ -389,7 +391,7 @@ Vue.component('warehouse-article-modal', {
<warehouse-article-distributor v-if="isEditMode" :id="Number(id)"/>
<!-- Additional Attributes -->
<div class="wa-section">
<div class="wa-section" :class="{ 'wa-field-disabled': !isEditMode && !formData.category_id }">
<h5 class="wa-section-title"><i class="fas fa-cog mr-2"></i>Zusätzliche Artikel Attribute</h5>
<div class="row">
<div class="col-md-6">
@@ -571,6 +573,19 @@ Vue.component('warehouse-article-modal', {
isSbidiShopHide: false
};
},
async onCategoryChange(categoryId) {
if (!categoryId || this.isEditMode) return;
try {
const res = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseArticle/getNextArticleNumber`, {
params: { categoryId: categoryId }
});
if (res.data.success) {
this.formData.articleNumber = res.data.articleNumber;
}
} catch (e) {
console.error('Failed to get next article number:', e);
}
},
async save() {
if (!this.isValid) return;
this.saving = true;
@@ -618,10 +633,17 @@ Vue.component('warehouse-article', {
<warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
<div class="mb-3" v-if="window.TT_CONFIG.WAREHOUSE_ADMIN">
<button @click="articleModalId = 'create'" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Artikel erstellen
</button>
</div>
<tt-table-crud
ref="table"
emit-edit
@openHistory="historyModalId = $event.id; historyModal = true"
@printLabel="printLabel($event)"
@edit="articleModalId = $event.id">
<template v-slot:cheapestsellprice="{ row }">
<template v-for="price in JSON.parse(row.cheapestSellPrice || '[]')">
@@ -661,5 +683,11 @@ Vue.component('warehouse-article', {
if (Object.keys(table.filters).length === 0) table.filters = {};
table.refreshTable();
}
},
methods: {
printLabel(event) {
const url = window.TT_CONFIG.BASE_PATH + "/WarehouseArticle/printLabel?id=" + event.id;
window.open(url, '_blank');
}
}
});
@@ -0,0 +1,224 @@
/* Stocktake Progress Fullscreen Modal */
.stocktake-progress-fullscreen {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1050;
background: #f5f6f8;
display: flex;
flex-direction: column;
}
/* Header - dark background with white text */
.stocktake-progress-header {
background: #343a40;
color: #ffffff !important;
padding: 0.75rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #007bff;
}
.stocktake-progress-header * {
color: #ffffff !important;
}
.stocktake-progress-header h4 {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff !important;
margin: 0;
}
.stocktake-progress-header .badge {
font-size: 0.85rem;
padding: 0.35rem 0.6rem;
margin-left: 0.75rem;
background: #ffffff !important;
color: #343a40 !important;
}
.stocktake-progress-header .btn-outline-light {
border-color: rgba(255,255,255,0.5);
color: #ffffff !important;
}
.stocktake-progress-header .btn-outline-light:hover {
background: rgba(255,255,255,0.1);
}
/* Body */
.stocktake-progress-body {
flex: 1;
padding: 1rem 1.5rem;
overflow-y: auto;
}
/* Stat cards - clean white cards with colored left border */
.stocktake-progress-fullscreen .stat-card {
background: #ffffff !important;
border: 1px solid #e0e0e0;
border-radius: 6px;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border-left: 4px solid;
}
.stocktake-progress-fullscreen .stat-card .card-body {
padding: 0.75rem 1rem;
}
.stocktake-progress-fullscreen .stat-card h6 {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 0.2rem !important;
color: #6c757d !important;
opacity: 1 !important;
}
.stocktake-progress-fullscreen .stat-card h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0 !important;
color: #212529 !important;
}
.stocktake-progress-fullscreen .stat-card i.fa-2x {
font-size: 1.25rem;
opacity: 0.4;
}
/* Card border colors */
.stocktake-progress-fullscreen .stat-card.card-primary {
border-left-color: #007bff;
}
.stocktake-progress-fullscreen .stat-card.card-primary i {
color: #007bff;
}
.stocktake-progress-fullscreen .stat-card.card-success {
border-left-color: #28a745;
}
.stocktake-progress-fullscreen .stat-card.card-success i {
color: #28a745;
}
.stocktake-progress-fullscreen .stat-card.card-info {
border-left-color: #17a2b8;
}
.stocktake-progress-fullscreen .stat-card.card-info i {
color: #17a2b8;
}
.stocktake-progress-fullscreen .stat-card.card-warning {
border-left-color: #ffc107;
}
.stocktake-progress-fullscreen .stat-card.card-warning i {
color: #ffc107;
}
.stocktake-progress-fullscreen .stat-card.card-secondary {
border-left-color: #6c757d;
}
.stocktake-progress-fullscreen .stat-card.card-secondary i {
color: #6c757d;
}
.stocktake-progress-fullscreen .stat-card.card-danger {
border-left-color: #dc3545;
}
.stocktake-progress-fullscreen .stat-card.card-danger i {
color: #dc3545;
}
/* Main content card */
.stocktake-progress-fullscreen .card {
border: 1px solid #e0e0e0;
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border-radius: 6px;
}
.stocktake-progress-fullscreen .card-header {
padding: 0.625rem 1rem;
border-bottom: 1px solid #e9ecef;
background: #ffffff;
}
.stocktake-progress-fullscreen .card-header h5 {
font-size: 0.9rem;
font-weight: 600;
color: #212529;
}
.stocktake-progress-fullscreen .card-body {
padding: 0;
}
/* Table styling */
.stocktake-progress-fullscreen .table {
margin-bottom: 0;
font-size: 0.85rem;
}
.stocktake-progress-fullscreen .table th {
font-weight: 600;
color: #495057;
border-bottom: 2px solid #dee2e6;
padding: 0.5rem 0.75rem;
white-space: nowrap;
background: #f8f9fa;
}
.stocktake-progress-fullscreen .table td {
padding: 0.5rem 0.75rem;
vertical-align: middle;
color: #212529;
}
.stocktake-progress-fullscreen .table tbody tr:hover {
background-color: #f8f9fa;
}
.stocktake-progress-fullscreen code {
background: #e9ecef;
padding: 0.15rem 0.35rem;
border-radius: 3px;
font-size: 0.8rem;
color: #007bff;
}
/* Info bar styling */
.stocktake-progress-fullscreen .info-bar {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 0.5rem 1rem;
font-size: 0.85rem;
color: #212529;
}
.stocktake-progress-fullscreen .info-bar .refresh-info {
color: #6c757d;
font-size: 0.8rem;
}
/* Empty state styling */
.stocktake-progress-fullscreen .fa-inbox {
opacity: 0.3;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.stocktake-progress-header {
padding: 0.75rem 1rem;
flex-direction: column;
gap: 0.75rem;
}
.stocktake-progress-body {
padding: 0.75rem;
}
}
@@ -0,0 +1,368 @@
// Stocktake Progress Modal Component - Fullscreen
Vue.component('stocktake-progress-modal', {
props: {
show: { type: Boolean, default: false },
id: { type: Number, default: null }
},
//language=Vue
template: `
<div v-if="show" class="stocktake-progress-fullscreen">
<div class="stocktake-progress-header">
<div class="d-flex align-items-center">
<h4 class="mb-0">
<i class="fas fa-clipboard-check me-2"></i>
Inventur Fortschritt
<span v-if="stocktake" class="badge bg-light text-dark">{{ stocktake.stocktakeNumber }}</span>
</h4>
</div>
<button class="btn btn-sm btn-outline-light" @click="close">
<i class="fas fa-times me-1"></i> Schließen
</button>
</div>
<div class="stocktake-progress-body">
<div v-if="loading" class="text-center py-5">
<div class="spinner-border text-primary" role="status" style="width: 2.5rem; height: 2.5rem;">
<span class="visually-hidden">Laden...</span>
</div>
<p class="mt-2 text-muted mb-0">Lade Inventurdaten...</p>
</div>
<div v-else-if="stocktake" class="h-100 d-flex flex-column">
<!-- Stats Cards -->
<div class="row g-2 mb-3">
<div class="col-md-3">
<div class="card stat-card card-primary h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="card-subtitle">Inventur</h6>
<h4 class="card-title">{{ stocktake.title }}</h4>
</div>
<i class="fas fa-clipboard-list fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stat-card card-success h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="card-subtitle">Gescannte Artikel</h6>
<h4 class="card-title">{{ stocktake.totalScannedItems }}</h4>
</div>
<i class="fas fa-barcode fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stat-card card-info h-100">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="card-subtitle">Lagerort</h6>
<h4 class="card-title">{{ stocktake.locationName }}</h4>
</div>
<i class="fas fa-warehouse fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card stat-card h-100" :class="statusCardClass">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center">
<div>
<h6 class="card-subtitle">Status</h6>
<h4 class="card-title">{{ statusText }}</h4>
</div>
<i class="fas fa-info-circle fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<!-- Started At Info Bar -->
<div v-if="stocktake.startedAt" class="info-bar d-flex align-items-center mb-3">
<i class="fas fa-clock me-2 text-primary"></i>
<span>Gestartet am: <strong>{{ stocktake.startedAt }}</strong></span>
<span class="ms-auto refresh-info">
<i class="fas fa-sync-alt me-2" :class="{ 'fa-spin': refreshing }"></i>
<span v-if="refreshing">Aktualisiere...</span>
<span v-else>Nächste Aktualisierung in {{ countdown }}s</span>
</span>
</div>
<!-- Scanned Items Table -->
<div class="card flex-grow-1">
<div class="card-header bg-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-list me-2"></i>
Gescannte Artikel
</h5>
<span class="badge bg-secondary">{{ items.length }} Einträge</span>
</div>
<div class="card-body" style="overflow-y: auto; max-height: calc(100vh - 320px);">
<table class="table table-striped table-hover">
<thead class="sticky-top bg-light">
<tr>
<th style="width: 120px;">Artikel-Nr.</th>
<th>Artikel</th>
<th class="text-end" style="width: 80px;">Menge</th>
<th style="width: 80px;">Regal</th>
<th style="width: 80px;">Fach</th>
<th style="width: 140px;">Gescannt am</th>
<th style="width: 130px;">Gescannt von</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td><code class="text-primary">{{ item.articleNumber }}</code></td>
<td>{{ item.articleTitle }}</td>
<td class="text-end"><strong class="text-success">{{ item.countedQuantity }}</strong></td>
<td>{{ item.rack || '-' }}</td>
<td>{{ item.shelf || '-' }}</td>
<td class="text-nowrap">{{ item.scannedAt || '-' }}</td>
<td>{{ item.scannedBy || '-' }}</td>
</tr>
</tbody>
</table>
<!-- Empty State -->
<div v-if="items.length === 0" class="text-center py-4">
<i class="fas fa-inbox fa-3x text-muted mb-2"></i>
<h6 class="text-muted">Noch keine Artikel gescannt</h6>
<p class="text-muted small mb-0">
Scannen Sie Artikel mit der PWA-App, um sie hier zu sehen.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
`,
data() {
return {
loading: false,
refreshing: false,
stocktake: null,
items: [],
refreshInterval: null,
countdownInterval: null,
countdown: 5,
};
},
computed: {
statusText() {
if (!this.stocktake) return '';
const statusMap = {
'planned': 'Geplant',
'in_progress': 'In Bearbeitung',
'completed': 'Abgeschlossen',
'cancelled': 'Abgebrochen'
};
return statusMap[this.stocktake.status] || this.stocktake.status;
},
statusCardClass() {
if (!this.stocktake) return 'card-secondary';
const classMap = {
'planned': 'card-secondary',
'in_progress': 'card-warning',
'completed': 'card-success',
'cancelled': 'card-danger'
};
return classMap[this.stocktake.status] || 'card-secondary';
}
},
watch: {
show(newVal) {
if (newVal && this.id) {
document.body.style.overflow = 'hidden';
this.loadProgress();
this.startAutoRefresh();
} else {
document.body.style.overflow = '';
this.stopAutoRefresh();
}
},
id(newVal) {
if (this.show && newVal) {
this.loadProgress();
}
}
},
methods: {
close() {
this.$emit('update:show', false);
},
async loadProgress() {
if (!this.id) return;
if (!this.stocktake) {
this.loading = true;
} else {
this.refreshing = true;
}
try {
const response = await axios.get(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/getProgress`, {
params: { id: this.id }
});
if (response.data.success) {
this.stocktake = response.data.stocktake;
this.items = response.data.items;
}
} catch (error) {
console.error('Failed to load progress:', error);
} finally {
this.loading = false;
this.refreshing = false;
this.countdown = 5;
}
},
startAutoRefresh() {
this.stopAutoRefresh();
this.countdown = 5;
// Countdown timer
this.countdownInterval = setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
}
}, 1000);
// Refresh data
this.refreshInterval = setInterval(() => {
if (this.show && this.id) {
this.loadProgress();
}
}, 5000);
},
stopAutoRefresh() {
if (this.refreshInterval) {
clearInterval(this.refreshInterval);
this.refreshInterval = null;
}
if (this.countdownInterval) {
clearInterval(this.countdownInterval);
this.countdownInterval = null;
}
}
},
beforeDestroy() {
document.body.style.overflow = '';
this.stopAutoRefresh();
}
});
// Main Stocktake Component
Vue.component('warehouse-stocktake', {
//language=Vue
template: `
<tt-card>
<tt-table-crud
@openHistory="historyModal = true; historyModalId = $event.id"
@startStocktake="startStocktake($event)"
@viewProgress="viewProgress($event)"
@completeStocktake="completeStocktake($event)"
@applyToStock="applyToStock($event)"
@exportReport="exportReport($event)"
>
<template v-slot:actions="{ row, actions }">
<template v-for="action in actions">
<!-- Hide start button if not planned -->
<span v-if="action.key === 'startStocktake' && row.rawStatus !== 'planned'" :key="action.key"></span>
<!-- Hide complete button if not in_progress -->
<span v-else-if="action.key === 'completeStocktake' && row.rawStatus !== 'in_progress'" :key="action.key"></span>
<!-- Hide apply button if not completed -->
<span v-else-if="action.key === 'applyToStock' && row.rawStatus !== 'completed'" :key="action.key"></span>
<!-- Show other actions normally -->
<button v-else
:key="action.key"
class="btn btn-sm btn-link p-1"
:title="action.title"
@click="$emit(action.key, row)">
<i :class="action.class"></i>
</button>
</template>
</template>
</tt-table-crud>
<warehouse-history-modal :show.sync="historyModal" :id="historyModalId"/>
<stocktake-progress-modal :show.sync="progressModal" :id="progressModalId"/>
</tt-card>
`,
data() {
return {
historyModal: false,
historyModalId: null,
progressModal: false,
progressModalId: null,
};
},
methods: {
async startStocktake(event) {
const row = event;
if (row.rawStatus !== 'planned') {
window.notify('warning', 'Inventur kann nur im Status "Geplant" gestartet werden');
return;
}
if (!confirm('Möchten Sie diese Inventur wirklich starten?')) {
return;
}
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/startStocktake`, {
id: row.id
});
if (response.data.success) {
window.notify('success', response.data.message);
window.dispatchEvent(new Event('refreshTable'));
} else {
window.notify('error', response.data.message);
}
} catch (error) {
window.notify('error', 'Fehler beim Starten der Inventur');
}
},
viewProgress(event) {
this.progressModalId = event.id;
this.progressModal = true;
},
async completeStocktake(event) {
const row = event;
if (!confirm('Möchten Sie diese Inventur wirklich abschließen?')) {
return;
}
try {
const response = await axios.post(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/completeStocktake`, {
id: row.id
});
if (response.data.success) {
window.notify('success', response.data.message);
window.dispatchEvent(new Event('refreshTable'));
} else {
window.notify('error', response.data.message);
}
} catch (error) {
window.notify('error', 'Fehler beim Abschließen der Inventur');
}
},
applyToStock(event) {
window.notify('warning', 'Aktuell noch nicht möglich');
},
exportReport(event) {
window.open(`${window.TT_CONFIG.BASE_PATH}/WarehouseStocktake/exportReport?id=${event.id}`, '_blank');
}
}
});