123 lines
2.9 KiB
Vue
123 lines
2.9 KiB
Vue
<template>
|
|
<div class="container-fluid py-4">
|
|
<div class="d-sm-flex justify-content-between mb-4">
|
|
<div>
|
|
<h5 class="mb-0">Réceptions de Marchandises</h5>
|
|
<p class="text-sm mb-0">
|
|
Gestion des réceptions de marchandises en provenance des fournisseurs.
|
|
</p>
|
|
</div>
|
|
<div class="mt-sm-0 mt-3">
|
|
<soft-button color="info" variant="gradient" @click="handleCreate">
|
|
<i class="fas fa-plus me-2"></i> Nouvelle Réception
|
|
</soft-button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="form-group">
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
class="form-control"
|
|
placeholder="Rechercher..."
|
|
@input="handleSearch"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<select
|
|
v-model="statusFilter"
|
|
class="form-control"
|
|
@change="handleFilter"
|
|
>
|
|
<option value="">Tous les statuts</option>
|
|
<option value="draft">Brouillon</option>
|
|
<option value="posted">Validée</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<goods-receipt-table
|
|
:data="receipts"
|
|
:loading="loading"
|
|
@view="handleView"
|
|
@edit="handleEdit"
|
|
@delete="handleDelete"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, ref } from "vue";
|
|
import { storeToRefs } from "pinia";
|
|
import { useRouter } from "vue-router";
|
|
import GoodsReceiptTable from "@/components/molecules/Tables/Stock/GoodsReceiptTable.vue";
|
|
import SoftButton from "@/components/SoftButton.vue";
|
|
import { useReceiptStore } from "@/stores/receiptStore";
|
|
|
|
const router = useRouter();
|
|
const receiptStore = useReceiptStore();
|
|
const { receipts, loading } = storeToRefs(receiptStore);
|
|
|
|
const searchQuery = ref("");
|
|
const statusFilter = ref("");
|
|
|
|
let searchTimeout = null;
|
|
|
|
const handleCreate = () => {
|
|
router.push("/stock/receptions/new");
|
|
};
|
|
|
|
const handleView = (id) => {
|
|
router.push(`/stock/receptions/${id}`);
|
|
};
|
|
|
|
const handleEdit = (id) => {
|
|
router.push(`/stock/receptions/${id}/edit`);
|
|
};
|
|
|
|
const handleDelete = async (id) => {
|
|
if (
|
|
confirm(
|
|
"Êtes-vous sûr de vouloir supprimer cette réception de marchandise ?"
|
|
)
|
|
) {
|
|
try {
|
|
await receiptStore.deleteReceipt(id);
|
|
} catch (error) {
|
|
console.error("Failed to delete goods receipt", error);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSearch = () => {
|
|
clearTimeout(searchTimeout);
|
|
searchTimeout = setTimeout(() => {
|
|
loadGoodsReceipts();
|
|
}, 300);
|
|
};
|
|
|
|
const handleFilter = () => {
|
|
loadGoodsReceipts();
|
|
};
|
|
|
|
const loadGoodsReceipts = () => {
|
|
const params = {
|
|
search: searchQuery.value || undefined,
|
|
status: statusFilter.value || undefined,
|
|
};
|
|
receiptStore.fetchReceipts(params);
|
|
};
|
|
|
|
onMounted(() => {
|
|
loadGoodsReceipts();
|
|
});
|
|
</script>
|