Formato de Ticket FT

Modificado el Jue., 20 Jul., 2023 a las 4:34 P. M.

En el siguiente articulo se agregaran las consultas y el formato en html que se utiliza en Farmacias Tepa.

Consulta SQlite:

SELECT
d.UsuarioCreacion Creacion, 
d.TotalLetra Letra,
d.TotalRecibido Recibido,
d.Total-d.Importe Impuestos,
r.cantidad Unidades,
*,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%01%') EfectivoTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%02%') ChequeTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%03%') TransferenciaTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%04%') TarjetaCreditoTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%05%') MonederoTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%06%') DineroElectronicoTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%08%') ValesTotal,
(SELECT SUM(Abono) FROM Tabla.documentocobro WHERE idVentaCompra = d.id AND FormaPago LIKE '%28%') TarjetaDebitoTotal
FROM Tabla.documentoventa d 
INNER JOIN Tabla.desgloseventa ds ON d.Id = ds.IdDocumento 
INNER JOIN (SELECT SUM(Cantidad) cantidad,IdDocumento IdDesglose FROM Tabla.DesgloseVenta WHERE Estatus = 1 GROUP BY IdDocumento) r ON r.IdDesglose = d.Id
WHERE ds.Estatus = 1 [AND] [CONDICIONESUSUARIO]

A Continuacion se anexa el archivo html:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Ticket de Venta</title>
    <script id="jquery.min.js" src="@@@jquery.min.js"></script>
  <body>
    <header class="clearfix">
      <div id="company">
        <h2 class="name">@@NombreComercial</h2>
        <div >Emisor RFC: @@Rfc</div>
        <div >Farmacia Tepa</div>
        <div >Régimen Fiscal : @@RegimenFiscal</div>
        <div >Expedido en : @@CodigoPostal</div>
        <div>@@Calle #@@NumeroExterior</div>       
        <div>@@Municipio, @@EntidadFederativa</div>
        <div>@@Telefono</div>
        <div><a href="mailto:@@Correo">@@Correo</a></div>
      </div>
    </header>
    <main>
      <div id="details">
        <!--<div id="client">
          <div class="to">EXPEDIDO A:</div>
          <h2 class="name">@NombreEmpresa</h2>
          <div class="address">@Calle #@NumeroExterior @NumeroInterior Tel. @Telefono</div>
          <div class="email"><a href="mailto:@Correo">@Correo</a></div>
        </div>!-->
        <div id="invoice">         
            <div id="ticket">Ticket de venta</div>
          <h1>Folio @Id</h1>
          <div class="date">Fecha: @FechaDocumento</div>
        </div>
      <table border="0" cellspacing="0" cellpadding="0">
        <thead>
          <tr>
            <th class="qty">Cantidad</th>
            <th class="unit">Precio Uni</th>
            <th class="unit">%Desct</th>
            <th class="total">Importe</th>
          </tr>
        </thead>
        <desglose>
            <tbody>
                <tr>
                  <td class="no">@CodigoBarras</td>
                  <td colspan="3" class="desc">@Descripcion</td>
                </tr>
              </tbody>
        <tbody>
          <tr>
            <td class="qty">@Cantidad</td>
            <td class="unit">$@PrecioUnitario</td>
            <td class="qty">@Descuento</td>
            <td class="total">$@Total</td>
          </tr>
        </tbody>
        </desglose>
      </table>
      <div id="total">
        <div>Total<div class = "datosCobro">$@Total</div></div>
      </div>
      <div id = "cobro">
        <div>Impuestos Incluidos <div class = "datosCobro">@Impuestos</div></div>
        <div id = "divefectivo">Pagó con Efectivo  <div class = "datosCobro">@EfectivoTotal</div></div>
        <div id = "divcheque">Pagó con Cheque<div class = "datosCobro">@ChequeTotal</div></div>
        <div id = "divtransferencia">Pagó con Transferencia<div class = "datosCobro">@TransferenciaTotal</div></div>
        <div id = "divtcredito">Pagó con Tarjeta de Credito<div class = "datosCobro">@TarjetaCreditoTotal</div></div>
        <div id = "divMonedero">Pagó con Monedero Electronico<div class = "datosCobro">@MonederoTotal</div></div> 
        <div id = "divDineroElectronico">Pagó con Dinero Electronico<div class = "datosCobro">@DineroElectronicoTotal</div></div>
        <div id = "divValesTotal">Pagó con Vales<div class = "datosCobro">@ValesTotal</div></div>
        <div id = "divtDebito">Pagó con Tarjeta de Debito<div class = "datosCobro">@TarjetaDebitoTotal</div></div>
        <div>Su cambio <div class = "datosCobro">@Cambio</div></div>
    </div>
    <div id = "datosVenta">
        <div>**@Letra**</div>
        <div>TOTAL DE UNIDADES : @Unidades</div>
        <div>PAGO EN UNA SOLA EXHIBICION</div>
        <div>MUCHAS GRACIAS POR SU COMPRA</div>
        <div>Cajero : @Creacion</div>
    </div>
    <!--<div id="thanks">¡Gracias por tu confianza!</div><div id="notices">
        <div>OBSERVACIONES:</div>
        <div class="notice">@Observaciones</div>
      </div>-->
<script type="text/javascript">

  function OcultarEfectivo() {
    var valor= document.querySelector("#divefectivo .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divefectivo").style.display = "none";
    }
  }

  function OcultarCheque() {
    var valor= document.querySelector("#divcheque .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divcheque").style.display = "none";
    }
  }

  function OcultarTransferencia() {
    var valor= document.querySelector("#divtransferencia .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divtransferencia").style.display = "none";
    }
  }

  function OcultarTCredito() {
    var valor= document.querySelector("#divtcredito .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divtcredito").style.display = "none";
    }
  }

  function OcultarMonedero() {
    var valor= document.querySelector("#divMonedero .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divMonedero").style.display = "none";
    }
  }

  function OcultarDineroElectronico() {
    var valor= document.querySelector("#divDineroElectronico .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divDineroElectronico").style.display = "none";
    }
  }

  function OcultarVales() {
    var valor= document.querySelector("#divValesTotal .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divValesTotal").style.display = "none";
    }
  }

  function OcultarTDebito() {
    var valor= document.querySelector("#divtDebito .datosCobro").innerText;
    if (!valor.trim()) {
      document.getElementById("divtDebito").style.display = "none";
    }
  } 
   
document.addEventListener("DOMContentLoaded", OcultarDineroElectronico); 
document.addEventListener("DOMContentLoaded", OcultarMonedero); 
document.addEventListener("DOMContentLoaded", OcultarTCredito);  
document.addEventListener("DOMContentLoaded", OcultarTransferencia); 
document.addEventListener("DOMContentLoaded", OcultarCheque);
document.addEventListener("DOMContentLoaded", OcultarEfectivo);
document.addEventListener("DOMContentLoaded", OcultarVales);
document.addEventListener("DOMContentLoaded", OcultarTDebito);



</script>
    </main>
    <footer>
      <div id="factura">En caso de necesitar una factura de este ticket, puede solicitarla en https://testwebft.azurewebsites.net/</div>
      Farmacias Tepa v1.0 by Opravy
    </footer>
  </body>
<style>
@media print {
   @page {
       margin: 5mm;
  }
}
@font-face {
  font-family : SourceSansPro;
  src : url(@@@sourcesanspro);
}
.clearfix:after {
  content : "";
  display : table;
  clear : both;
}
a {
  color : black;
  text-decoration : none;
}
body {
 position: relative;
 width: 8.0cm;
 height: 27.94cm;
 margin: 0 auto;
 color: black;
 background-color: #FFFFFF;
 font-family: Arial, sans-serif;
 font-size: 12px;
 font-weight: 800;
 line-height: 1;
}

thead {
  border-bottom : 2px solid black;
}
header {
  padding : 10px 0;
  margin-bottom : 10px;
  border-bottom : 1px solid #AAAAAA;
}
#logo {
  float : left;
  margin-top : 8px;
}
#logo img {
  height : 70px;
}
#company {
  text-align : center;
}
#ticket {
  border-bottom : 1px solid black;
}
#details {
  margin-bottom : 10px;
}
#client {
  padding-left : 6px;
  border-left : 6px solid #0087C3;
  float : left;
}
#client .to {
  color : #777777;0
}
h2.name {
  font-size : 1.3em;
  font-weight : normal;
  margin : 0;
}
#invoice  {
  text-align : center;
  font-size : 1em;
}
#invoice h1 {
  color : black;
  font-size : 1em;
}
#invoice .date {
  font-size : 1em;
  color : black;
}
table {
  width : 100%;
  border-collapse : collapse;
  border-spacing : 0;
  margin-bottom : 2px;
}
table th, table td {
  padding : 2px;
  background : #FFFFFF;
  text-align : center;
  border-bottom : 1px solid #FFFFFF;
}
table th {
  white-space : nowrap;
  font-weight : normal;
}
table td {
  text-align : left;
}
table td h3 {
  color : black;
  font-size : 0.9em;
  font-weight : normal;
  margin : 0 0 0.1em 0;
}
table .no {
  color : black;
  font-size : 0.9em;
}
table .desc, table .no, table.unit, table.qty, table.total {
  text-align : left;
  font-size : 0.9em;
}
table .unit {
  background : #FFFFFF;
}
table .total {
  color : black;
}
table td.unit, table td.qty, table td.total {
  font-size : 0.9em;
}
table tbody tr:last-child td {
  border : none;
}
table tfoot td {
  padding-top : 10px;
  padding : 0;
  background : #FFFFFF;
  border-bottom : none;
  font-size : 1em;
  white-space : nowrap;
  border-top : 1px solid #AAAAAA;
  width : 100%;
}
table tfoot tr:first-child td {
  border-top : none;
}
table tfoot tr:last-child td {
  color : black;
  font-size : 1em;
  border-top : 1px solid black;
  padding-bottom : 10px;
}
table tfoot tr td:first-child {
  border : none;
}
.datosCobro {
  float : right;
  margin-right : 10px;
}
#datosVenta {
  margin-top : 10px;
  text-align : center;
  font-size : 1em;
}
#cobro, #total {
  border-top : 1px solid black;
  border-bottom : 1px solid black;
}
#thanks {
  font-size : 1.3em;
  margin-top : 10px;
  margin-bottom : 20px;
}
#factura {
  font-size : 1em;
  margin-top : 10px;
  margin-bottom : 20px;
}
#notices {
  padding-left : 6px;
  border-left : 6px solid #0087C3;
}
#notices .notice {
  font-size : 1em;
}
footer {
  color : black;
  bottom : 0;
  clear : both;
  width : 100%;
  border-top : 1px solid #AAAAAA;
  padding : 0 0;
  text-align : center;
}
</style>

</html>