feat(constructeur) : update piece edit flow with supplier references

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

app/pages/piece/[id].vue

@@ -146,27 +146,29 @@
               </div>
             </div>
 
-            <div v-if="isEditMode || editionForm.constructeurIds.length" class="form-control">
+            <div v-if="isEditMode || constructeurLinks.length" class="form-control">
               <label class="label">
                 <span class="label-text">Fournisseur</span>
               </label>
-              <ConstructeurSelect
-                v-if="isEditMode"
-                v-model="editionForm.constructeurIds"
-                class="w-full"
-                :disabled="!canEdit || saving"
-                placeholder="Rechercher un ou plusieurs fournisseurs..."
-                :initial-options="piece?.constructeurs || []"
+              <template v-if="isEditMode">
+                <ConstructeurSelect
+                  v-model="editionForm.constructeurIds"
+                  class="w-full"
+                  :disabled="!canEdit || saving"
+                  placeholder="Rechercher un ou plusieurs fournisseurs..."
+                  :initial-options="piece?.constructeurs || []"
+                />
+                <ConstructeurLinksTable
+                  v-model="constructeurLinks"
+                  class="mt-2"
+                  @remove="handleConstructeurRemoved"
+                />
+              </template>
+              <ConstructeurLinksTable
+                v-else
+                :model-value="constructeurLinks"
+                readonly
               />
-              <div v-else class="flex flex-wrap gap-2">
-                <span
-                  v-for="id in editionForm.constructeurIds"
-                  :key="id"
-                  class="badge badge-outline"
-                >
-                  {{ getConstructeurById(id)?.name || id }}
-                </span>
-              </div>
             </div>
           </div>
 
@@ -389,16 +391,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from '#imports'
 import { usePieceEdit } from '~/composables/usePieceEdit'
 import { useDocuments } from '~/composables/useDocuments'
 import { usePermissions } from '~/composables/usePermissions'
-import { useConstructeurs } from '~/composables/useConstructeurs'
 
 const route = useRoute()
 const { canEdit } = usePermissions()
-const { getConstructeurById } = useConstructeurs()
 const { updateDocument } = useDocuments()
 
 const isEditMode = ref(false)
@@ -416,6 +416,7 @@ const {
   previewVisible,
   selectedTypeId,
   editionForm,
+  constructeurLinks,
   productSelections,
   customFieldInputs,
   pieceTypeList,
@@ -448,6 +449,18 @@ const submitEdition = async () => {
   }
 }
 
+// Sync ConstructeurSelect changes → constructeurLinks
+watch(() => editionForm.constructeurIds, (newIds) => {
+  const existing = new Map(constructeurLinks.value.map(l => [l.constructeurId, l]))
+  constructeurLinks.value = newIds.map(id =>
+    existing.get(id) || { constructeurId: id, supplierReference: null },
+  )
+})
+
+const handleConstructeurRemoved = (constructeurId: string) => {
+  editionForm.constructeurIds = editionForm.constructeurIds.filter(id => id !== constructeurId)
+}
+
 const editingDocument = ref<any | null>(null)
 const editModalVisible = ref(false)