161 lines
8.7 KiB
Vue
161 lines
8.7 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import LignesCommandeForm from '@/Components/Commandes/LignesCommandeForm.vue'
|
|
import { Head, Link, useForm } from '@inertiajs/vue3'
|
|
|
|
const props = defineProps({
|
|
services: Array,
|
|
fournisseurs: Array,
|
|
categories: Array,
|
|
articles: Array,
|
|
})
|
|
|
|
const form = useForm({
|
|
service_id: '',
|
|
fournisseur_id: '',
|
|
objet: '',
|
|
description: '',
|
|
justification: '',
|
|
priorite: 'normale',
|
|
reference_fournisseur: '',
|
|
imputation_budgetaire: '',
|
|
date_demande: new Date().toISOString().slice(0, 10),
|
|
date_souhaitee: '',
|
|
date_livraison_prevue: '',
|
|
notes: '',
|
|
notes_fournisseur: '',
|
|
lignes: [],
|
|
})
|
|
|
|
function submit() {
|
|
form.post(route('commandes.store'))
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Nouvelle commande" />
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex items-center gap-3">
|
|
<Link :href="route('commandes.index')" class="text-gray-400 hover:text-gray-600">
|
|
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</Link>
|
|
<h1 class="text-xl font-semibold text-gray-900">Nouvelle commande</h1>
|
|
</div>
|
|
</template>
|
|
|
|
<form @submit.prevent="submit" class="space-y-6 max-w-5xl">
|
|
<!-- Informations générales -->
|
|
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations générales</h2>
|
|
<div class="grid gap-4 sm:grid-cols-2">
|
|
<div class="sm:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700">Objet <span class="text-red-500">*</span></label>
|
|
<input v-model="form.objet" type="text" required
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
|
|
<p v-if="form.errors.objet" class="mt-1 text-xs text-red-600">{{ form.errors.objet }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Service <span class="text-red-500">*</span></label>
|
|
<select v-model="form.service_id" required
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
|
|
<option value="">Sélectionner...</option>
|
|
<option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
|
|
</select>
|
|
<p v-if="form.errors.service_id" class="mt-1 text-xs text-red-600">{{ form.errors.service_id }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Fournisseur</label>
|
|
<select v-model="form.fournisseur_id"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
|
|
<option value="">— Non défini —</option>
|
|
<option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Priorité</label>
|
|
<select v-model="form.priorite"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
|
|
<option value="normale">Normale</option>
|
|
<option value="haute">Haute</option>
|
|
<option value="urgente">Urgente</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Date de demande <span class="text-red-500">*</span></label>
|
|
<input v-model="form.date_demande" type="date" required
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Date souhaitée</label>
|
|
<input v-model="form.date_souhaitee" type="date"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Référence fournisseur</label>
|
|
<input v-model="form.reference_fournisseur" type="text"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Imputation budgétaire</label>
|
|
<input v-model="form.imputation_budgetaire" type="text"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div class="sm:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700">Description</label>
|
|
<textarea v-model="form.description" rows="2"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div class="sm:col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700">Justification</label>
|
|
<textarea v-model="form.justification" rows="2"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Notes internes</label>
|
|
<textarea v-model="form.notes" rows="2"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700">Notes fournisseur</label>
|
|
<textarea v-model="form.notes_fournisseur" rows="2"
|
|
class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lignes de commande -->
|
|
<div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
|
|
<h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Lignes de commande</h2>
|
|
<LignesCommandeForm v-model="form.lignes" :categories="categories" :articles="articles" />
|
|
<p v-if="form.errors.lignes" class="mt-2 text-xs text-red-600">{{ form.errors.lignes }}</p>
|
|
</div>
|
|
|
|
<!-- Actions -->
|
|
<div class="flex justify-end gap-3">
|
|
<Link :href="route('commandes.index')"
|
|
class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
Annuler
|
|
</Link>
|
|
<button type="submit" :disabled="form.processing"
|
|
class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
|
|
{{ form.processing ? 'Création...' : 'Créer la commande' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</AuthenticatedLayout>
|
|
</template>
|