fix: imágenes de órdenes en lab_domicilios — corregir URL (encodeURIComponent rompía subdirectorios), agregar modal visor y botones Ver/Descargar

This commit is contained in:
Lizandro Guarnizo
2026-03-25 11:18:48 -05:00
parent 2abce6d4c2
commit 75aac68d65
+60 -14
View File
@@ -975,10 +975,22 @@ const esc = s => String(s||'').replace(/[<>&"]/g, c => ({'<':'&lt;','>':'&gt;','
/**
* Renderiza el bloque de órdenes médicas (multi-archivo) en el detalle de domicilio.
*/
/**
* Resuelve la URL directa para mostrar un archivo de orden médica.
* Equivalente al _resolveImg de lab_ordenes.php — NO usa encodeURIComponent
* para no romper las / del subdirectorio (ej. 2026/02/archivo.jpg).
*/
function _resolveOrdenUrl(f) {
if (!f) return '';
if (/^https?:\/\//i.test(f)) return f;
if (f.startsWith('uploads/')) return f;
return `uploads/media/${f}`;
}
function renderOrdenesDetail(dom) {
const archivos = dom.archivos_ordenes || [];
if (!archivos.length && !dom.orden_id) return '';
// Si no hay archivos cargados pero sí hay orden_id, mostramos solo el link
// Sin archivos adjuntos pero sí orden_id — solo link a la ficha
if (!archivos.length) {
return `<div class="mb-3">
<label class="form-label small text-muted text-uppercase">Órdenes médicas</label>
@@ -988,30 +1000,43 @@ function renderOrdenesDetail(dom) {
</div>`;
}
const items = archivos.map(a => {
const lf = a.local_file || '';
const isImg = /\.(jpe?g|png|gif|webp)$/i.test(lf);
const url = lf ? ('uploads/media/' + encodeURIComponent(lf)) : '';
const ficha = `<a href="lab_ordenes.php?id=${a.orden_id}" class="d-block small text-muted mt-1">
<i class="fas fa-external-link-alt me-1"></i>Orden #${a.orden_id}
</a>`;
const lf = a.local_file || '';
const isImg = /\.(jpe?g|png|gif|webp)$/i.test(lf);
const imgUrl = _resolveOrdenUrl(lf); // URL directa para <img>
const descUrl = lf ? `api/lab/descargar_orden.php?file=${encodeURIComponent(lf)}` : ''; // descarga
const ficha = a.orden_id
? `<a href="lab_ordenes.php?id=${a.orden_id}" class="d-block small text-muted mt-1">
<i class="fas fa-external-link-alt me-1"></i>Ficha orden #${a.orden_id}
</a>`
: '';
if (lf && isImg) return `
<div class="mb-2">
<a href="${url}" target="_blank" title="Ver imagen completa">
<img src="${url}" alt="Orden médica"
style="max-width:100%;max-height:180px;object-fit:contain;border-radius:6px;border:1px solid #dee2e6;display:block;cursor:zoom-in">
</a>${ficha}
<img src="${imgUrl}" alt="Orden médica"
style="max-width:100%;max-height:200px;object-fit:contain;border-radius:6px;border:1px solid #dee2e6;display:block;cursor:zoom-in"
onclick="verImagenDom('${imgUrl}')"
onerror="this.style.display='none'">
<div class="d-flex gap-2 mt-1">
<a href="${imgUrl}" target="_blank" class="btn btn-sm btn-outline-secondary flex-fill">
<i class="fas fa-expand me-1"></i>Ver completa
</a>
<a href="${descUrl}" target="_blank" class="btn btn-sm btn-outline-secondary flex-fill">
<i class="fas fa-download me-1"></i>Descargar
</a>
</div>
${ficha}
</div>`;
if (lf) return `
<div class="mb-2">
<a href="api/lab/descargar_orden.php?file=${encodeURIComponent(lf)}" target="_blank"
<a href="${descUrl}" target="_blank"
class="btn btn-sm btn-outline-secondary w-100 mb-1">
<i class="fas fa-file-download me-1"></i>Abrir / Descargar archivo
</a>${ficha}
</a>
${ficha}
</div>`;
return `<div class="mb-2">${ficha}</div>`;
}).join('');
return `<div class="mb-3">
<label class="form-label small text-muted text-uppercase">Órdenes médicas (${archivos.length})</label>
<label class="form-label small text-muted text-uppercase">Órdenes médicas${archivos.length > 1 ? ` (${archivos.length})` : ''}</label>
${items}
</div>`;
}
@@ -1173,5 +1198,26 @@ function verRespuestaFF(envioId) {
}
</script>
<script src="assets/js/lab-sidebar.js"></script>
<!-- Modal visor de imagen -->
<div class="modal fade" id="modalImagenDom" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content bg-dark">
<div class="modal-header border-0 py-2">
<button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body text-center p-0">
<img id="img-visor-dom" src="" class="img-fluid" style="max-height:80vh;object-fit:contain">
</div>
</div>
</div>
</div>
<script>
const _modalImgDom = new bootstrap.Modal('#modalImagenDom');
function verImagenDom(src) {
document.getElementById('img-visor-dom').src = src;
_modalImgDom.show();
}
</script>
</body>
</html>