#49 feat: diálogo para vincular productos con proveedores en Gestión de Productos

src/components/ProductsManagement.vue

@@ -122,6 +122,19 @@
               </v-chip>
             </template>
 
+            <!-- Slot para columna de proveedores -->
+            <template #item.actions="{ item }">
+              <v-btn
+                @click="openSupplierLink(item)"
+                color="primary"
+                size="small"
+                variant="tonal"
+                prepend-icon="mdi-truck"
+              >
+                Proveedores
+              </v-btn>
+            </template>
+
             <!-- Loading state -->
             <template #loading>
               <v-skeleton-loader type="table-row@10"></v-skeleton-loader>
@@ -138,6 +151,13 @@
       </v-col>
     </v-row>
 
+    <!-- Diálogo de proveedores del producto -->
+    <SupplierLinkDialog
+      :visible="linkDialog"
+      :product="linkProduct"
+      @update:visible="linkDialog = $event"
+    />
+
     <!-- Snackbar de feedback -->
     <v-snackbar
       v-model="snackbar.show"
@@ -155,6 +175,7 @@
 
 <script setup>
 import { ref, watch, inject, onMounted, computed } from "vue";
+import SupplierLinkDialog from "@/components/provenance/admin/SupplierLinkDialog.vue";
 
 // Estado
 const api = inject("api");
@@ -164,6 +185,8 @@ const selected = ref([]);
 const loading = ref(false);
 const snackbar = ref({ show: false, message: "", color: "success" });
 const searchQuery = ref("");
+const linkDialog = ref(false);
+const linkProduct = ref(null);
 
 // Headers de la tabla
 const headers = [
@@ -171,6 +194,7 @@ const headers = [
   { title: "Nombre", key: "name", sortable: true },
   { title: "Precio", key: "price", sortable: true },
   { title: "Estado", key: "active", sortable: true },
+  { title: "Proveedores", key: "actions", sortable: false },
 ];
 
 // Computed - Productos filtrados por búsqueda
@@ -236,6 +260,11 @@ function showSnackbar(message, color) {
   snackbar.value = { show: true, message, color };
 }
 
+function openSupplierLink(product) {
+  linkProduct.value = product;
+  linkDialog.value = true;
+}
+
 // Watchers
 watch(activeFilter, () => {
   selected.value = [];

src/components/provenance/admin/SupplierLinkDialog.vue

@@ -0,0 +1,126 @@
+<template>
+  <v-dialog
+    max-width="560"
+    :model-value="visible"
+    @update:model-value="onUpdateVisible"
+  >
+    <v-card>
+      <v-card-title>Proveedores del producto</v-card-title>
+      <v-card-text>
+        <p v-if="product" class="text-subtitle-1 mb-3">
+          {{ product.name }}
+        </p>
+        <v-autocomplete
+          v-model="selectedIds"
+          chips
+          closable-chips
+          item-title="name"
+          item-value="id"
+          :items="supplierItems"
+          label="Proveedores"
+          multiple
+          :search-input="searchQuery"
+        />
+        <v-chip
+          v-if="selectedIds.length > 0"
+          class="mt-3"
+          color="primary"
+          variant="tonal"
+        >
+          Seleccionados ({{ selectedIds.length }})
+        </v-chip>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer />
+        <v-btn variant="text" @click="close">Cancelar</v-btn>
+        <v-btn
+          color="primary"
+          data-testid="supplier-link-save"
+          :disabled="saving"
+          variant="elevated"
+          @click="save"
+        >
+          Guardar
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script setup>
+  import { computed, inject, ref, watch } from 'vue'
+
+  const props = defineProps({
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    product: {
+      type: Object,
+      default: null,
+    },
+  })
+
+  const emit = defineEmits(['update:visible'])
+
+  const api = inject('api')
+  const suppliers = ref([])
+  const selectedIds = ref([])
+  const searchQuery = ref('')
+  const saving = ref(false)
+
+  const supplierItems = computed(() => {
+    const query = searchQuery.value.trim().toLowerCase()
+    let filtered = suppliers.value
+    if (query) {
+      filtered = suppliers.value.filter(supplier => {
+        return (supplier.name || '').toLowerCase().includes(query)
+      })
+    }
+    const selected = selectedIds.value.map(Number)
+    for (const supplier of suppliers.value) {
+      const isSelected = selected.includes(supplier.id)
+      const alreadyIncluded = filtered.some(item => item.id === supplier.id)
+      if (isSelected && !alreadyIncluded) filtered = [supplier, ...filtered]
+    }
+    return filtered
+  })
+
+  async function load () {
+    suppliers.value = await api.getSuppliers()
+    if (props.product) {
+      const detail = await api.getProduct(props.product.id)
+      selectedIds.value = detail.suppliers || []
+    } else {
+      selectedIds.value = []
+    }
+  }
+
+  watch(
+    () => props.visible,
+    async isVisible => {
+      if (isVisible) await load()
+    },
+    { immediate: true }
+  )
+
+  async function save () {
+    saving.value = true
+    try {
+      await api.updateProduct(props.product.id, { suppliers: selectedIds.value })
+      close()
+    } catch (error) {
+      console.error('Error al guardar proveedores del producto:', error)
+    } finally {
+      saving.value = false
+    }
+  }
+
+  function onUpdateVisible (value) {
+    emit('update:visible', value)
+  }
+
+  function close () {
+    emit('update:visible', false)
+  }
+</script>