Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

...

Bloco de código
languagexml
themeMidnight
titleExemplo nfcwfcustom1.html
linenumberstrue
<!DOCTYPE html>
<html>
  <head>
    <meta charset="windows-1252">
    <meta charset="UTF-8">
    <title>%cSTR1%</title>
    <style>
      /* Estilos devem ficar inline nas tags */
    </style>
  </head>

  <body style="width:100%; font: normal 14px 'Open Sans', Arial, sans-serif; color:#333; margin:0; padding:0;">

    <!-- Título -->
    <h1 style="font: normal 22px 'Open Sans', Arial, sans-serif; color:#0088CB; padding:8px 10px; margin:10px 0 0 0;">
      %cSTR2% %cNumCot% %cSTR3% %cNumProp%
    </h1>

    <!-- Cabeçalho -->
    <div style="border-top:2px solid #0088CB; padding:10px 10px 0 10px; margin:10px 15px 0 10px;">
      <table style="width:100%; border-collapse:collapse; font: normal 14px 'Open Sans', Arial, sans-serif;">
        <tr>
          <td style="width:140px; padding:4px 0;">%cSTR4%</td>
          <td style="padding:4px 0;">%cForNome%</td>
        </tr>
        <tr>
          <td style="padding:4px 0;">%cSTR5%</td>
          <td style="padding:4px 0;">%cFornece% / %cLoja%</td>
        </tr>
        <tr>
          <td style="padding:4px 0;">%cSTR6%</td>
          <td style="padding:4px 0;">%cFilCot%</td>
        </tr>
        <tr><td colspan="2" style="padding-top:6px;"><hr style="border:0; border-top:1px solid #ddd;"></td></tr>
      </table>
    </div>

    <!-- Itens -->
    <form method="post" action="mailto:%25WFMailTo%25" style="margin:0; padding:0;">
      <div style="border-top:2px solid #0088CB; padding:10px 10px 0 10px; margin:10px 15px 0 10px;">
        <h2 style="font: bold 18px 'Open Sans', Arial, sans-serif; color:#4a5c60; margin:0 0 8px 0;">%cSTR7%</h2>

        <table style="width:100%; border-collapse:collapse; font: normal 14px 'Open Sans', Arial, sans-serif;">
          <thead>
            <tr style="background:#0c9abe; color:#fff; text-align:left;">
              <th style="padding:8px; border:0;">%cSTR8%</th>
              <th style="padding:8px; border:0;">%cSTR9%</th>
              <th style="padding:8px; border:0;">%cSTR10%</th>
              <th style="padding:8px; border:0; text-align:right;">%cSTR11%</th>
              <th style="padding:8px; border:0; text-align:right;">%cSTR12%</th>
              <th style="padding:8px; border:0; text-align:right;">%cSTR13%</th>
              <th style="padding:8px; border:0; text-align:right;">%cSTR14%</th>
              <th style="padding:8px; border:0;">%cSTR15%</th>
            </tr>
          </thead>

          <tbody>
            <!-- Linha repetida pelo mecanismo do Workflow para cada item -->
            <tr class="item">
              <td style="padding:8px; border-bottom:1px solid #ddd;">%It.C8_ITEM%</td>
              <td style="padding:8px; border-bottom:1px solid #ddd;">%It.C8_PRODUTO%</td>
              <td style="padding:8px; border-bottom:1px solid #ddd;">%It.cProDesc%</td>

              <!-- Quantidade (numérico) -->
              <td style="padding:8px; border-bottom:1px solid #ddd; text-align:right;">
                <input type="number" name="It.C8_QUANT" class="C8_QUANT" value="%It.C8_QUANT%" step="0.01" min="0" readonly
                       style="width:100%; text-align:right; height:28px; border:1px solid #ccc; border-radius:4px; padding:0 6px; background:#f7f7f7;">
              </td>

              <!-- Qtde Disponível (numérico) -->
              <td style="padding:8px; border-bottom:1px solid #ddd; text-align:right;">
                <input type="number" name="It.C8_QTDISP" class="C8_QTDISP" value="%It.C8_QTDISP%" step="0.01" min="0"
                       oninput="gt(this)"
                       style="width:100%; text-align:right; height:28px; border:1px solid #ccc; border-radius:4px; padding:0 6px;">
              </td>

              <!-- Preço Unitário (numérico) -->
              <td style="padding:8px; border-bottom:1px solid #ddd; text-align:right;">
                <input type="number" name="It.C8_PRECO" class="C8_PRECO" value="%It.C8_PRECO%" step="0.01" min="0"
                       oninput="gt(this)"
                       style="width:100%; text-align:right; height:28px; border:1px solid #ccc; border-radius:4px; padding:0 6px;">
              </td>

              <!-- Total (numérico) - calculado automaticamente -->
              <td style="padding:8px; border-bottom:1px solid #ddd; text-align:right;">
                <input type="number" name="It.C8_TOTAL" class="C8_TOTAL" value="%It.C8_TOTAL%" step="0.01" min="0" readonly
                       style="width:100%; text-align:right; height:28px; border:1px solid #ccc; border-radius:4px; padding:0 6px; background:#f7f7f7;">
              </td>

              <!-- Observação (texto) -->
              <td style="padding:8px; border-bottom:1px solid #ddd;">
                <input type="text" name="It.C8_OBS" class="C8_OBS" value="%It.C8_OBS%"
                       style="width:100%; height:28px; border:1px solid #ccc; border-radius:4px; padding:0 6px;">
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Hidden essentialsCampos ocultos utilizados para obtenção de dados ao receber o workflow -->
      <input type="hidden" name="cFilCot"  value="%cFilCot%">
      <input type="hidden" name="cNumCot"  value="%cNumCot%">
      <input type="hidden" name="cFornece" value="%cFornece%">
      <input type="hidden" name="cLoja"    value="%cLoja%">
      <input type="hidden" name="cForNome" value="%cForNome%">
      <input type="hidden" name="cNumProp" value="%cNumProp%">

      <!-- Rodapé / Condição de pagamento + Ação -->
      <div style="border-top:2px solid #0088CB; padding:10px 10px 15px 10px; margin:10px 15px 20px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;">
        <div style="text-align:left;">
          <label for="DHU_COND" style="font-weight:bold; color:#4a5c60; margin-right:8px;">%cSTR17%</label>
          <input type="text" name="DHU_COND" id="DHU_COND" value="%DHU_COND%"
                 style="width:220px; height:30px; border:1px solid #ccc; border-radius:4px; padding:0 8px;">
        </div>

        <button type="submit"
          style="border-radius:5px; cursor:pointer; min-width:140px; height:40px; background:#045b8f; border:1px solid #045b8f; color:#fff; font-weight:bold; font-size:16px;">
          %cSTR16%
        </button>
      </div>
    </form>

    <!-- Gatilho JS: Total = Preço Unitário × Qtde Disponível (linha atual via this) -->
    <script>
      function gt(el){
        // sobe até a TR da linha
        var node = el;
        while (node && node.tagName !== 'TR') node = node.parentNode;
        if(!node) return;

        var qty = node.querySelector('.C8_QTDISP');
        var prc = node.querySelector('.C8_PRECO');
        var tot = node.querySelector('.C8_TOTAL');

        var q = parseFloat(((qty && qty.value) || '0').replace(',', '.'));
        var p = parseFloat(((prc && prc.value) || '0').replace(',', '.'));
        if (isNaN(q)) q = 0;
        if (isNaN(p)) p = 0;

        var val = q * p;
        if (tot) tot.value = val.toFixed(2);
      }
    </script>
  </body>
</html>


...