cykj/zkxw
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(oa): align mobile print HTML stamp and layout with web PDF

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-08-13 10:53:33 +08:00
1 parent 2802ef23a6
commit 505bf29fdd
1 file changed
+61 -32
Download Patch File Download Diff File Expand all files Collapse all files
mobile-oa-h5/src/oa/print/exportOaApprovalPdf.js
+61 -32
View File
@@ -12,6 +12,9 @@ import {
} from '../../utils/receive-account-value.js'
import { toRmbUpper } from '../../utils/rmb-upper.js'
import { OA_STATUS_TEXT } from '../status-label.js'
import { resolveStamp } from '../oa-status-stamp.js'
export { resolveStamp }
export const OA_PRINT_COMPANY_NAME = '安徽中科兴皖医学研究有限公司'
@@ -71,20 +74,6 @@ function formatNow() {
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}
export function resolveStamp(status) {
const s = String(status || '').trim()
if (s === 'completed' || s === 'approved' || s === 'done') {
return { stampClass: 'ok', stampText: '已通过' }
}
if (s === 'rejected') return { stampClass: 'rej', stampText: '已拒绝' }
if (s === 'returned') return { stampClass: 'ret', stampText: '已打回' }
if (s === 'cancelled') return { stampClass: 'can', stampText: '已撤销' }
if (s === 'running' || s === 'pending') {
return { stampClass: 'run', stampText: '审批中' }
}
return { stampClass: 'run', stampText: '审批中' }
}
function ensurePlainObject(raw) {
if (raw == null) return {}
if (typeof raw === 'string') {
@@ -647,38 +636,71 @@ function buildPrintHtml(model) {
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: #1f2329;
font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif; }
.oa-print-page { position: relative; max-width: 794px; margin: 0 auto;
min-height: 100vh; padding: 32px 28px 40px; overflow: hidden; }
.oa-print-page {
position: relative;
width: 794px;
max-width: 794px;
margin: 0 auto;
min-height: 1123px;
padding: 48px 56px 56px;
overflow: hidden;
background: #fff;
color: #1f2329;
font-family: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
box-sizing: border-box;
}
.oa-print-wm { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.oa-print-wm__item { position: absolute; font-size: 14px; color: rgba(0,0,0,.045);
white-space: nowrap; transform: rotate(-30deg); letter-spacing: 2px; }
.oa-print-inner { position: relative; z-index: 1; }
.oa-print-title { margin: 0 0 12px; text-align: center; font-size: 22px;
.oa-print-title { margin: 0 0 14px; text-align: center; font-size: 28px;
font-weight: 700; letter-spacing: 2px; line-height: 1.3; }
.oa-print-meta { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-bottom: 12px;
.oa-print-meta { display: flex; flex-wrap: wrap; gap: 16px 48px; margin-bottom: 12px;
font-size: 12px; line-height: 1.5; }
.oa-print-table-wrap { position: relative; }
.oa-print-table { width: 100%; border-collapse: separate; border-spacing: 0;
table-layout: fixed; border-top: 1px solid #333; border-left: 1px solid #333; font-size: 13px; }
.oa-print-table th, .oa-print-table td { border-right: 1px solid #333; border-bottom: 1px solid #333;
padding: 8px 10px; vertical-align: top; word-break: break-word; }
.oa-print-table th { width: 28%; background: #fafafa; font-weight: 600; text-align: left; }
table-layout: fixed; font-size: 13px; border-top: 1px solid #1f2329; border-left: 1px solid #1f2329; }
.oa-print-table th, .oa-print-table td { border: none; border-right: 1px solid #1f2329;
border-bottom: 1px solid #1f2329; padding: 9px 12px; vertical-align: middle;
line-height: 1.5; word-break: break-all; }
.oa-print-table th { width: 118px; font-weight: 400; text-align: left; background: #fff; }
.oa-print-text { white-space: pre-wrap; }
.oa-print-url { line-height: 1.45; }
.oa-print-url { color: #3370ff; word-break: break-all; }
.oa-print-flow__row { display: flex; justify-content: space-between; gap: 12px; }
.oa-print-flow__left { flex: 1; min-width: 0; }
.oa-print-flow__right { flex: 0 0 auto; color: #646464; white-space: nowrap; }
.oa-print-flow__person-lines { margin-top: 4px; padding-left: 8px; }
.oa-print-flow__person-line { margin-top: 2px; font-size: 12px; }
.oa-print-flow__comment { margin-top: 4px; color: #646464; font-size: 12px; }
.oa-stamp { position: absolute; right: 12px; top: -8px; width: 88px; height: 88px;
border-radius: 50%; border: 3px solid; display: flex; align-items: center;
justify-content: center; font-weight: 700; font-size: 16px; transform: rotate(-12deg);
opacity: .85; z-index: 2; background: rgba(255,255,255,.55); }
.oa-stamp.ok { color: #059669; border-color: #059669; }
.oa-stamp.run { color: #d97706; border-color: #d97706; }
.oa-stamp.rej, .oa-stamp.ret, .oa-stamp.can { color: #dc2626; border-color: #dc2626; }
.oa-stamp.is-chars3 { font-size: 14px; }
.oa-stamp { --stamp: #3ec9a8; position: absolute; top: -10px; right: 18px;
width: 118px; height: 118px; z-index: 5; pointer-events: none;
transform: rotate(-18deg); opacity: 0.88; color: var(--stamp); }
.oa-stamp.ok { --stamp: #3ec9a8; }
.oa-stamp.run { --stamp: #f0a020; }
.oa-stamp.rej { --stamp: #e85d5d; }
.oa-stamp.ret { --stamp: #e07070; }
.oa-stamp.can { --stamp: #9aa0a6; }
.oa-stamp .outer { position: absolute; inset: 0; border-radius: 50%;
border: 5px solid currentColor; box-sizing: border-box; }
.oa-stamp .arc-top, .oa-stamp .arc-bottom { position: absolute; left: 14px; right: 14px;
border: 2px solid currentColor; opacity: 0.95; pointer-events: none; }
.oa-stamp .arc-top { top: 11px; height: 36px; border-bottom: none;
border-left-color: transparent; border-right-color: transparent;
border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.oa-stamp .arc-bottom { bottom: 11px; height: 36px; border-top: none;
border-left-color: transparent; border-right-color: transparent;
border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.oa-stamp .label-top { position: absolute; top: 22px; left: 0; right: 0;
text-align: center; font-size: 10px; font-weight: 500; letter-spacing: 2px;
line-height: 1; color: currentColor; opacity: 0.95; }
.oa-stamp .label-bottom { position: absolute; bottom: 20px; left: 0; right: 0;
text-align: center; font-size: 9px; font-weight: 500; letter-spacing: 0.5px;
line-height: 1; color: currentColor; opacity: 0.9;
font-family: Arial, "Helvetica Neue", sans-serif; }
.oa-stamp .main { position: absolute; inset: 0; display: flex; align-items: center;
justify-content: center; font-size: 32px; font-weight: 700; letter-spacing: 2px;
line-height: 1; color: currentColor; }
.oa-stamp .main.is-chars3 { font-size: 26px; letter-spacing: 1px; }
.oa-print-footer { display: flex; flex-wrap: wrap; justify-content: space-between;
gap: 8px; margin-top: 16px; font-size: 12px; color: #646464; }
@media print {
@@ -697,7 +719,14 @@ function buildPrintHtml(model) {
<span>创建时间：${escapeHtml(model.createDate)}</span>
</div>
<div class="oa-print-table-wrap">
<div class="oa-stamp ${escapeHtml(model.stampClass)}${stampChars3}">${escapeHtml(model.stampText)}</div>
<div class="oa-stamp ${escapeHtml(model.stampClass)}" aria-label="${escapeHtml(model.stampText)}">
<div class="outer"></div>
<div class="arc-top"></div>
<div class="arc-bottom"></div>
<div class="label-top">OA审批</div>
<div class="main${stampChars3}">${escapeHtml(model.stampText)}</div>
<div class="label-bottom">approval</div>
</div>
<table class="oa-print-table">
<tbody>${rowsHtml}${flowHtml}</tbody>
</table>