Aller au contenu

ERP / Stock

Ordre d'achat

Disponible

Formulaire de création d'ordre d'achat : sélection fournisseur, date de livraison, lignes d'articles éditables avec quantités et prix, totaux. Combine entêtes en cartes et grille de saisie pour passer commande à un fournisseur.

Rendu multi-framework

Ordre d'achat · PO-2026-0847 (données mock)

Nouvel ordre d'achat

Brouillon

Lignes d'articles

Total HT3 869,00 €
TVA (20 %)773,80 €
Total TTC4 642,80 €
Voir le code (Svelte)
<div class="po-shell">
  <div class="po-header">
    <div class="po-header-id">
      <h2 class="po-title">Nouvel ordre d'achat</h2>
      <Badge tone="warning">Brouillon</Badge>
    </div>
    <div class="po-header-actions">
      <Button variant="secondary" size="sm">Annuler</Button>
      <Button variant="primary" size="sm">Soumettre</Button>
    </div>
  </div>
  <Card>
    <div class="po-fields">
      <div class="po-field">
        <label class="po-label">Fournisseur</label>
        <Combobox
          options={[{"value":"bosh","label":"Bosch Rexroth AG"},{"value":"3m","label":"3M France SAS"},{"value":"smc","label":"SMC Corporation"},{"value":"festo","label":"Festo SE & Co. KG"}]}
          value="bosh"
          placeholder="Choisir un fournisseur…"
        />
      </div>
      <div class="po-field">
        <label class="po-label">Date de livraison souhaitée</label>
        <DatePicker value="2026-07-15" label="Date de livraison" />
      </div>
      <div class="po-field">
        <label class="po-label">Référence commande</label>
        <Input value="PO-2026-0847" placeholder="Réf. interne…" />
      </div>
    </div>
  </Card>
  <div class="po-section">
    <h3 class="po-section-title">Lignes d'articles</h3>
    <DataGrid
      caption="Articles commandés"
      columns={[{"key":"ref","label":"Référence"},{"key":"designation","label":"Désignation"},{"key":"qty","label":"Qté","align":"end"},{"key":"unit_price","label":"Prix unitaire","align":"end"},{"key":"total","label":"Total HT","align":"end"}]}
      rows={[{"id":"1","ref":"BXR-7741","designation":"Vanne hydraulique 10L/min","qty":"4","unit_price":"312,00 €","total":"1 248,00 €"},{"id":"2","ref":"SMC-AF40","designation":"Filtre régulateur d'air","qty":"10","unit_price":"87,50 €","total":"875,00 €"},{"id":"3","ref":"FES-ADVU","designation":"Vérin compact double effet","qty":"6","unit_price":"148,00 €","total":"888,00 €"},{"id":"4","ref":"3M-VHB5952","designation":"Ruban adhésif haute résistance 25m","qty":"20","unit_price":"42,90 €","total":"858,00 €"}]}
    />
  </div>
  <div class="po-totals">
    <div class="po-total-row">
      <span class="po-total-key">Total HT</span>
      <span class="po-total-val">3 869,00 €</span>
    </div>
    <div class="po-total-row">
      <span class="po-total-key">TVA (20 %)</span>
      <span class="po-total-val">773,80 €</span>
    </div>
    <div class="po-total-row">
      <span class="po-total-key">Total TTC</span>
      <span class="po-total-val">4 642,80 €</span>
    </div>
  </div>
</div>

Composants DS utilisés