implemented inventur and changed warehousearticle/category
This commit is contained in:
@@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user