product-inventory-management.git

import html2canvas from 'html2canvas'
 
function esc(s) {
  if (!s) return ''
  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
}
 
function fmtDate(v) {
  if (!v) return ''
  const d = new Date(v)
  const y = d.getFullYear()
  const m = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  return y + '-' + m + '-' + day
}
 
function fmtMoney(v) {
  if (v == null) return '0.00'
  return Number(v).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
}
 
function digitUppercase(n) {
  const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']
  const radices = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿']
  let num = Math.abs(n)
  let result = ''
  const intPart = Math.floor(num)
  const intStr = String(intPart)
  const len = intStr.length
  if (intPart === 0) {
    result = '零'
  } else {
    let zeroFlag = false
    for (let i = 0; i < len; i++) {
      const d = parseInt(intStr[i])
      const pos = len - 1 - i
      if (d === 0) {
        zeroFlag = true
        if (pos % 4 === 0) {
          result += radices[pos]
          zeroFlag = false
        }
      } else {
        if (zeroFlag) {
          result += '零'
          zeroFlag = false
        }
        result += digits[d] + radices[pos]
      }
    }
    if (result.endsWith('零')) result = result.slice(0, -1)
  }
  result += '元'
  const decPart = Math.round((num - intPart) * 100)
  if (decPart === 0) {
    result += '整'
  } else {
    const jiao = Math.floor(decPart / 10)
    const fen = decPart % 10
    if (jiao > 0) result += digits[jiao] + '角'
    if (fen > 0) result += digits[fen] + '分'
  }
  return result
}
 
function coreCss() {
  return `*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Microsoft YaHei","SimSun",sans-serif;padding:30px 36px;color:#333;background:#fff}.title{text-align:center;font-size:18px;font-weight:bold;letter-spacing:6px;margin-bottom:4px}.sub{text-align:center;font-size:12px;color:#999;margin-bottom:18px}.info-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px dashed #ccc}.info-top .left,.info-top .right{line-height:2}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 36px;font-size:13px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #ccc}.info-grid .l{color:#666}.info-grid .v{font-weight:500}table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:14px}th,td{border:1px solid #333;padding:5px 6px;text-align:center}th{background:#eee;font-weight:500}td.r{text-align:right}.summary{text-align:right;font-size:13px;margin-bottom:16px;line-height:2.2}.summary .cn{font-weight:bold;color:#cf1322}`
}
 
function productRows(products) {
  if (!products || !products.length) return ''
  let html = ''
  products.forEach((p, i) => {
    const name = p.productCategory || ''
    const spec = p.specificationModel || ''
    html += '<tr>'
    html += '<td>' + (i + 1) + '</td>'
    html += '<td style="text-align:left">' + esc(name)
    if (spec) html += '<br><span style="color:#888;font-size:12px">' + esc(spec) + '</span>'
    html += '</td>'
    html += '<td>' + esc(p.unit || '') + '</td>'
    html += '<td class="r">' + (p.quantity != null ? Number(p.quantity).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : '') + '</td>'
    html += '<td class="r">' + fmtMoney(p.taxInclusiveUnitPrice) + '</td>'
    html += '<td class="r">' + fmtMoney(p.taxInclusiveTotalPrice) + '</td>'
    html += '<td>' + (p.taxRate != null ? p.taxRate + '%' : '') + '</td>'
    html += '<td>' + esc(p.invoiceType || '') + '</td>'
    html += '</tr>'
  })
  return html
}
 
function calcTotals(products) {
  let total = 0, totalNoTax = 0
  if (products) {
    products.forEach(p => {
      if (p.taxInclusiveTotalPrice != null) total += Number(p.taxInclusiveTotalPrice)
      if (p.taxExclusiveTotalPrice != null) totalNoTax += Number(p.taxExclusiveTotalPrice)
    })
  }
  return { total, totalNoTax }
}
 
function buildSalesHtml(companyName, ledger, forPrint) {
  const products = ledger.productData || []
  const { total, totalNoTax } = calcTotals(products)
  const toolbar = forPrint ? '<div class="toolbar"><button onclick="window.print()">打印 / 另存为 PDF</button></div>' : ''
  const printCss = forPrint ? '@media print{body{padding:15px 24px}.toolbar{display:none}}' : ''
  const printScript = forPrint ? '<script>window.onload=function(){setTimeout(function(){window.print();},300);};<\/script>' : ''
 
  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
<title>销售单 - ${esc(ledger.salesContractNo)} - ${esc(companyName)}</title>
<style>.toolbar{text-align:center;margin-bottom:16px}.toolbar button{padding:6px 20px;font-size:14px;cursor:pointer;background:#1890ff;color:#fff;border:none;border-radius:4px}.toolbar button:hover{background:#40a9ff}${coreCss()}${printCss}</style></head><body>
${toolbar}
<div class="title">${esc(companyName)}</div>
<div class="sub">销售合同 / 销售单</div>
<div class="info-top">
  <div class="left"><div><strong>销方名称：</strong>${esc(companyName)}</div></div>
  <div class="right"><div><strong>合同编号：</strong>${esc(ledger.salesContractNo)}</div><div><strong>签订日期：</strong>${fmtDate(ledger.executionDate)}</div></div>
</div>
<div class="info-grid">
  <div><span class="l">客户名称：</span><span class="v">${esc(ledger.customerName)}</span></div>
  <div><span class="l">项目名称：</span><span class="v">${esc(ledger.projectName)}</span></div>
  <div><span class="l">业务员：</span><span class="v">${esc(ledger.salesman)}</span></div>
  <div><span class="l">付款方式：</span><span class="v">${esc(ledger.paymentMethod)}</span></div>
  <div><span class="l">录入日期：</span><span class="v">${fmtDate(ledger.entryDate)}</span></div>
  <div><span class="l">交货日期：</span><span class="v">${fmtDate(ledger.deliveryDate)}</span></div>
  ${ledger.remarks ? `<div style="grid-column:1/-1"><span class="l">备注：</span><span class="v">${esc(ledger.remarks)}</span></div>` : ''}
</div>
<table><thead><tr><th>序号</th><th>产品名称 / 规格型号</th><th>单位</th><th>数量</th><th>含税单价</th><th>含税总价</th><th>税率</th><th>发票类型</th></tr></thead><tbody>
${productRows(products)}
</tbody></table>
<div class="summary">
  <div>不含税合计：<strong>${fmtMoney(totalNoTax)}</strong></div>
  <div>含税合计（大写）：<span class="cn">${digitUppercase(total)}</span></div>
  <div>含税合计（小写）：<strong>¥${fmtMoney(total)}</strong></div>
</div>
${printScript}
</body></html>`
}
 
function buildPurchaseHtml(companyName, ledger, products, forPrint) {
  const { total, totalNoTax } = calcTotals(products)
  const contractAmount = ledger.contractAmount != null ? Number(ledger.contractAmount) : total
  const toolbar = forPrint ? '<div class="toolbar"><button onclick="window.print()">打印 / 另存为 PDF</button></div>' : ''
  const printCss = forPrint ? '@media print{body{padding:15px 24px}.toolbar{display:none}}' : ''
  const printScript = forPrint ? '<script>window.onload=function(){setTimeout(function(){window.print();},300);};<\/script>' : ''
 
  return `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
<title>采购单 - ${esc(ledger.purchaseContractNumber)} - ${esc(companyName)}</title>
<style>.toolbar{text-align:center;margin-bottom:16px}.toolbar button{padding:6px 20px;font-size:14px;cursor:pointer;background:#1890ff;color:#fff;border:none;border-radius:4px}.toolbar button:hover{background:#40a9ff}${coreCss()}${printCss}</style></head><body>
${toolbar}
<div class="title">${esc(companyName)}</div>
<div class="info-top">
  <div class="left"><div><strong>购方名称：</strong>${esc(companyName)}</div></div>
  <div class="right"><div><strong>合同编号：</strong>${esc(ledger.purchaseContractNumber)}</div><div><strong>签订日期：</strong>${fmtDate(ledger.executionDate)}</div></div>
</div>
<div class="info-grid">
  <div><span class="l">供应商名称：</span><span class="v">${esc(ledger.supplierName)}</span></div>
  <div><span class="l">项目名称：</span><span class="v">${esc(ledger.projectName)}</span></div>
  <div><span class="l">录入人：</span><span class="v">${esc(ledger.recorderName)}</span></div>
  <div><span class="l">付款方式：</span><span class="v">${esc(ledger.paymentMethod)}</span></div>
  <div><span class="l">录入日期：</span><span class="v">${fmtDate(ledger.entryDate)}</span></div>
  ${ledger.salesContractNo ? `<div><span class="l">关联销售合同号：</span><span class="v">${esc(ledger.salesContractNo)}</span></div>` : ''}
  ${ledger.remarks ? `<div style="grid-column:1/-1"><span class="l">备注：</span><span class="v">${esc(ledger.remarks)}</span></div>` : ''}
</div>
<table><thead><tr><th>序号</th><th>产品名称 / 规格型号</th><th>单位</th><th>数量</th><th>含税单价</th><th>含税总价</th><th>税率</th><th>发票类型</th></tr></thead><tbody>
${productRows(products)}
</tbody></table>
<div class="summary">
  <div>不含税合计：<strong>${fmtMoney(totalNoTax)}</strong></div>
  <div>含税合计（大写）：<span class="cn">${digitUppercase(total)}</span></div>
  <div>含税合计（小写）：<strong>¥${fmtMoney(total)}</strong></div>
  <div>合同金额（大写）：<span class="cn">${digitUppercase(contractAmount)}</span></div>
  <div>合同金额（小写）：<strong>¥${fmtMoney(contractAmount)}</strong></div>
</div>
${printScript}
</body></html>`
}
 
export function buildSalesDocument(companyName, ledger) {
  return buildSalesHtml(companyName, ledger, false)
}
 
export function buildPurchaseDocument(companyName, ledger, products) {
  return buildPurchaseHtml(companyName, ledger, products, false)
}
 
function buildSalesPrintHtml(companyName, ledger) {
  return buildSalesHtml(companyName, ledger, true)
}
 
function buildPurchasePrintHtml(companyName, ledger, products) {
  return buildPurchaseHtml(companyName, ledger, products, true)
}
 
export function openPrintWindow(html) {
  const w = window.open('', '_blank', 'width=900,height=700')
  if (!w) return
  w.document.write(html)
  w.document.close()
}
 
export async function downloadAsJpg(html, filename) {
  const iframe = document.createElement('iframe')
  iframe.style.position = 'fixed'
  iframe.style.left = '0'
  iframe.style.top = '0'
  iframe.style.width = '900px'
  iframe.style.height = '600px'
  iframe.style.opacity = '0'
  iframe.style.pointerEvents = 'none'
  iframe.style.zIndex = '99999'
  document.body.appendChild(iframe)
 
  return new Promise((resolve, reject) => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
    iframeDoc.open()
    iframeDoc.write(html)
    iframeDoc.close()
 
    const doCapture = async () => {
      try {
        const body = iframeDoc.body
        iframe.style.height = Math.max(body.scrollHeight, 600) + 'px'
        await new Promise(r => setTimeout(r, 100))
        const canvas = await html2canvas(body, {
          scale: 2,
          useCORS: true,
          backgroundColor: '#ffffff',
          windowWidth: 900
        })
        document.body.removeChild(iframe)
        canvas.toBlob(blob => {
          const url = URL.createObjectURL(blob)
          const a = document.createElement('a')
          a.href = url
          a.download = filename
          a.click()
          URL.revokeObjectURL(url)
          resolve()
        }, 'image/jpeg', 0.95)
      } catch (e) {
        document.body.removeChild(iframe)
        reject(e)
      }
    }
 
    iframe.onload = () => setTimeout(doCapture, 300)
    setTimeout(doCapture, 1000)
  })
}
 
export function downloadSalesJpg(companyName, ledger, filename) {
  const html = buildSalesHtml(companyName, ledger, false)
  return downloadAsJpg(html, filename)
}
 
export function downloadPurchaseJpg(companyName, ledger, products, filename) {
  const html = buildPurchaseHtml(companyName, ledger, products, false)
  return downloadAsJpg(html, filename)
}
 
export function printSales(companyName, ledger) {
  const html = buildSalesPrintHtml(companyName, ledger)
  openPrintWindow(html)
}
 
export function printPurchase(companyName, ledger, products) {
  const html = buildPurchasePrintHtml(companyName, ledger, products)
  openPrintWindow(html)
}
 
export function printSalesMulti(companyName, orders) {
  let bodies = ''
  orders.forEach((ledger, i) => {
    const html = buildSalesHtml(companyName, ledger, true)
    const bodyMatch = html.match(/<body>([\s\S]*)<\/body>/)
    if (bodyMatch) {
      const body = bodyMatch[1].replace(/<script>[\s\S]*?<\/script>/g, '')
      bodies += '<div class="print-page' + (i < orders.length - 1 ? ' page-break' : '') + '">' + body + '</div>'
    }
  })
  const combined = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
<title>销售单 - ${esc(companyName)}</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","SimSun",sans-serif;padding:20px 36px;color:#333;background:#fff}
.toolbar{text-align:center;margin-bottom:20px}
.toolbar button{padding:6px 24px;font-size:14px;cursor:pointer;background:#1890ff;color:#fff;border:none;border-radius:4px}
.toolbar button:hover{background:#40a9ff}
${coreCss()}
.print-page{page-break-inside:avoid}
.page-break{page-break-after:always}
@media print{body{padding:15px 24px}.toolbar{display:none}}
</style></head><body>
<div class="toolbar"><button onclick="window.print()">打印全部 (共${orders.length}份)</button></div>
${bodies}
<script>window.onload=function(){setTimeout(function(){window.print();},300);};<\/script>
</body></html>`
  openPrintWindow(combined)
}
 
export function printPurchaseMulti(companyName, orders) {
  let bodies = ''
  orders.forEach((item, i) => {
    const html = buildPurchaseHtml(companyName, item.ledger, item.products, true)
    const bodyMatch = html.match(/<body>([\s\S]*)<\/body>/)
    if (bodyMatch) {
      const body = bodyMatch[1].replace(/<script>[\s\S]*?<\/script>/g, '')
      bodies += '<div class="print-page' + (i < orders.length - 1 ? ' page-break' : '') + '">' + body + '</div>'
    }
  })
  const combined = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
<title>采购单 - ${esc(companyName)}</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Microsoft YaHei","SimSun",sans-serif;padding:20px 36px;color:#333;background:#fff}
.toolbar{text-align:center;margin-bottom:20px}
.toolbar button{padding:6px 24px;font-size:14px;cursor:pointer;background:#1890ff;color:#fff;border:none;border-radius:4px}
.toolbar button:hover{background:#40a9ff}
${coreCss()}
.print-page{page-break-inside:avoid}
.page-break{page-break-after:always}
@media print{body{padding:15px 24px}.toolbar{display:none}}
</style></head><body>
<div class="toolbar"><button onclick="window.print()">打印全部 (共${orders.length}份)</button></div>
${bodies}
<script>window.onload=function(){setTimeout(function(){window.print();},300);};<\/script>
</body></html>`
  openPrintWindow(combined)
}