Untitled
unknown
plain_text
a year ago
12 kB
10
Indexable
<script> import { lotesCurvaData, lotesCurvasSubData } from '$lib/stores/globalVariables'; import { get } from 'svelte/store'; import { onMount } from 'svelte'; import { goto } from '$app/navigation'; let sizes = []; let subdivisions = 1; // Obtener todas las tallas únicas de los datos $: getSizes(), $lotesCurvaData, $lotesCurvasSubData; function getSizes() { const data = get(lotesCurvaData); sizes = Array.from(new Set(data.flatMap(item => Object.keys(item).filter(key => key !== 'COLOR')))); } // Función para procesar los datos de entrada en formato de tabla function generateTable() { const input = document.getElementById('dataInput').value.trim(); const lines = input.split('\n').filter(line => line.trim() !== ''); if (lines.length === 0) return; sizes = Array.from(new Set(lines.map(line => line.split('\t')[4].trim()))); const colors = lines.reduce((acc, line) => { const [referencia, tipoDeTela, descripcion, color, talla, cantidad, cantidadReal] = line.split('\t').map(item => item.trim()); if (!acc[color]) acc[color] = { COLOR: color }; acc[color][talla] = (acc[color][talla] || 0) + parseInt(cantidadReal); return acc; }, {}); lotesCurvaData.set(Object.values(colors)); createSubdivisions(); // Reiniciar los datos después de generar la tabla } function handleSubdivisionChange(event) { subdivisions = parseInt(event.target.value); createSubdivisions(); } function createSubdivisions() { const initialData = get(lotesCurvaData); const subData = [{ name: 'Lote Principal', ref: '', marca: '', cliente: '', ordenConfeccion: '', ordenProduccion: '', taller: '', // Cambiado de 'notas' a 'taller' nombreReferencia: '', cantidadBultos: '', data: initialData.map(item => ({ ...item })) }]; for (let i = 2; i <= subdivisions; i++) { subData.push({ name: `Empaque Lote ${i}`, ref: '', marca: '', cliente: '', ordenConfeccion: '', ordenProduccion: '', taller: '', // Cambiado de 'notas' a 'taller' nombreReferencia: '', cantidadBultos: '', data: initialData.map(item => ({ COLOR: item.COLOR, ...sizes.reduce((acc, size) => { acc[size] = ''; return acc; }, {}) })) }); } lotesCurvasSubData.set(subData); } function updateSubValue(event, subIndex, item, size) { const newValue = parseInt(event.target.innerText.trim()) || 0; if (isNaN(newValue) || newValue < 0) return; lotesCurvasSubData.update(current => { const updatedSubData = [...current]; updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => { if (i.COLOR === item.COLOR) { return { ...i, [size]: newValue }; } return i; }); // Recalcular el primer subconjunto const originalData = get(lotesCurvaData); updatedSubData[0].data = originalData.map(originalItem => { const color = originalItem.COLOR; const updatedItem = { COLOR: color }; sizes.forEach(size => { const originalSizeValue = originalItem[size] || 0; const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => { const subItem = sub.data.find(i => i.COLOR === color); return sum + (parseInt(subItem[size]) || 0); }, 0); updatedItem[size] = originalSizeValue - otherSubValues; }); return updatedItem; }); return updatedSubData; }); } function incrementValue(subIndex, item, size) { lotesCurvasSubData.update(current => { const updatedSubData = [...current]; const originalData = get(lotesCurvaData); const originalItem = originalData.find(i => i.COLOR === item.COLOR); const originalSizeValue = originalItem[size] || 0; const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => { const subItem = sub.data.find(i => i.COLOR === item.COLOR); return sum + (parseInt(subItem[size]) || 0); }, 0); if (originalSizeValue - otherSubValues > 0) { updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => { if (i.COLOR === item.COLOR) { return { ...i, [size]: (parseInt(i[size]) || 0) + 1 }; } return i; }); // Recalcular el primer subconjunto updatedSubData[0].data = originalData.map(originalItem => { const color = originalItem.COLOR; const updatedItem = { COLOR: color }; sizes.forEach(size => { const originalSizeValue = originalItem[size] || 0; const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => { const subItem = sub.data.find(i => i.COLOR === color); return sum + (parseInt(subItem[size]) || 0); }, 0); updatedItem[size] = originalSizeValue - otherSubValues; }); return updatedItem; }); } return updatedSubData; }); } function decrementValue(subIndex, item, size) { lotesCurvasSubData.update(current => { const updatedSubData = [...current]; updatedSubData[subIndex].data = updatedSubData[subIndex].data.map(i => { if (i.COLOR === item.COLOR) { return { ...i, [size]: Math.max((parseInt(i[size]) || 0) - 1, 0) }; } return i; }); // Recalcular el primer subconjunto const originalData = get(lotesCurvaData); updatedSubData[0].data = originalData.map(originalItem => { const color = originalItem.COLOR; const updatedItem = { COLOR: color }; sizes.forEach(size => { const originalSizeValue = originalItem[size] || 0; const otherSubValues = updatedSubData.slice(1).reduce((sum, sub) => { const subItem = sub.data.find(i => i.COLOR === color); return sum + (parseInt(subItem[size]) || 0); }, 0); updatedItem[size] = originalSizeValue - otherSubValues; }); return updatedItem; }); return updatedSubData; }); } function updateSubField(event, subIndex, field) { const newValue = event.target.value; lotesCurvasSubData.update(current => { const updatedSubData = [...current]; updatedSubData[subIndex][field] = newValue; return updatedSubData; }); } // Función para calcular el total de unidades por talla en las subdivisiones function calculateTotalInSub(data, size) { return data.reduce((total, item) => total + (parseInt(item[size]) || 0), 0); } function navigateToPDFPreview() { goto('/lotes/orden-empaque/pdf-preview'); } function navigateToMainPage() { goto('/lotes/orden-empaque'); } </script> <div class="mb-3"> <textarea id="dataInput" class="form-control" rows="3" placeholder="Introduce las tallas y cantidades aquí" ></textarea> </div> <div class="mb-3"> <button class="btn btn-primary w-100" on:click={generateTable}>Generar Tabla</button> </div> <div class="mb-3"> <label for="subdivision" class="form-label">Sub dividir curva en:</label> <input type="number" id="subdivision" min="1" value={subdivisions} on:input={handleSubdivisionChange} class="form-control" /> </div> {#each $lotesCurvasSubData as subData, subIndex} <div class="mt-4"> <h5>{subData.name}</h5> <div class="row mb-3"> <div class="col-md-2"> <label for={`ref-${subIndex}`} class="form-label">Ref:</label> <input id={`ref-${subIndex}`} type="text" class="form-control" value={subData.ref} on:input={(e) => updateSubField(e, subIndex, 'ref')} autocomplete="off" /> </div> <div class="col-md-2"> <label for={`marca-${subIndex}`} class="form-label">Marca:</label> <input id={`marca-${subIndex}`} type="text" class="form-control" value={subData.marca} on:input={(e) => updateSubField(e, subIndex, 'marca')} autocomplete="off" /> </div> <div class="col-md-2"> <label for={`cliente-${subIndex}`} class="form-label">Cliente:</label> <input id={`cliente-${subIndex}`} type="text" class="form-control" value={subData.cliente} on:input={(e) => updateSubField(e, subIndex, 'cliente')} autocomplete="off" /> </div> <div class="col-md-3"> <label for={`ordenConfeccion-${subIndex}`} class="form-label">Orden Confección:</label> <input id={`ordenConfeccion-${subIndex}`} type="text" class="form-control" value={subData.ordenConfeccion} on:input={(e) => updateSubField(e, subIndex, 'ordenConfeccion')} autocomplete="off" /> </div> <div class="col-md-3"> <label for={`ordenProduccion-${subIndex}`} class="form-label">Orden Producción:</label> <input id={`ordenProduccion-${subIndex}`} type="text" class="form-control" value={subData.ordenProduccion} on:input={(e) => updateSubField(e, subIndex, 'ordenProduccion')} autocomplete="off" /> </div> </div> <div class="mb-3"> <label for={`taller-${subIndex}`} class="form-label">Taller:</label> <input id={`taller-${subIndex}`} type="text" class="form-control" value={subData.taller} on:input={(e) => updateSubField(e, subIndex, 'taller')} autocomplete="off" /> </div> <div class="mb-3"> <label for={`nombreReferencia-${subIndex}`} class="form-label">nombreReferencia:</label> <input id={`nombreReferencia-${subIndex}`} type="text" class="form-control" value={subData.nombreReferencia} on:input={(e) => updateSubField(e, subIndex, 'nombreReferencia')} autocomplete="off" /> </div> <div class="mb-3"> <label for={`cantidadBultos-${subIndex}`} class="form-label">bultos:</label> <input id={`cantidadBultos-${subIndex}`} type="text" class="form-control" value={subData.cantidadBultos} on:input={(e) => updateSubField(e, subIndex, 'cantidadBultos')} autocomplete="off" /> </div> <table class="table table-striped table-bordered"> <thead> <tr> <th scope="col" class="fixed-width">COLOR</th> {#each sizes as size} <th scope="col" class="fixed-width text-center">{size}</th> {/each} <th scope="col" class="fixed-width">Total</th> </tr> </thead> <tbody> {#each subData.data as item} <tr> <td class="fixed-width">{item.COLOR}</td> {#each sizes as size} <td class="fixed-width"> {#if subIndex > 0} <div class="d-flex justify-content-between align-items-center text-center"> <button class="btn btn-sm btn-outline-primary" on:click={() => decrementValue(subIndex, item, size)}>-</button > <span class="text-center" contenteditable="true" on:blur={(e) => updateSubValue(e, subIndex, item, size)} >{item[size] || ''}</span > <button class="btn btn-sm btn-outline-primary" on:click={() => incrementValue(subIndex, item, size)}>+</button > </div> {:else} {item[size] || ''} {/if} </td> {/each} <td class="fixed-width" >{sizes.reduce((total, size) => total + (parseInt(item[size]) || 0), 0)}</td > </tr> {/each} <tr class="table-secondary"> <td class="fixed-width">Total</td> {#each sizes as size} <td class="fixed-width">{calculateTotalInSub(subData.data, size)}</td> {/each} <td class="fixed-width"></td> </tr> </tbody> </table> </div> {/each} <style> .fixed-width { width: 80px; min-width: 80px; max-width: 80px; } .table-secondary { background-color: #f8f9fa; } td[contenteditable='true']:focus { background-color: #f8f9fa; outline: none; } </style>
Editor is loading...
Leave a Comment