feat: место для подписи сотрудника на печати заявлений на отпуск

Печатное заявление подписывают от руки, а на листе было негде. В правом
верхнем углу шапки, под статусом, теперь ФИО сотрудника, место под роспись
и линия «(подпись)» — только при печати. ФИО именно сотрудника, а не
инициатора: заявку могут оформить за него. Общий компонент
shared/ui/PrintSignature, подключён в «Заявку на отпуск» и «Отпуск без
содержания».

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Тимур Городецкий
2026-10-29 10:13:40 +05:00
parent 49568e00e8
commit d3940ce584
9 changed files with 112 additions and 4 deletions
@@ -0,0 +1,43 @@
@import '../../../../../styles/design-tokens';
// Длина линии ≈ 5 см на листе A4 — хватает на роспись от руки.
$signature-line-width: 200px;
// Место под роспись между ФИО и линией.
$signature-height: $sp-8;
// На экране блока нет: расписываться негде.
.signature {
display: none;
}
@media print {
// Столбик, а не строка «ФИО ____»: в шапке рядом с заголовком места мало,
// строка в ширину сжала бы заголовок до трёх строк.
.signature {
display: flex;
flex-direction: column;
align-items: center;
// min-width, а не width: длинное ФИО растягивает столбик (и линию), а не
// вылезает за край листа.
min-width: $signature-line-width;
font-size: $fs-sm;
color: #000;
break-inside: avoid;
page-break-inside: avoid;
}
.name {
white-space: nowrap; // перенос фамилии на бланке выглядит как опечатка
}
.line {
align-self: stretch;
height: $signature-height;
border-bottom: 1px solid #000;
}
.caption {
margin-top: 2px;
font-size: $fs-caption;
}
}
@@ -0,0 +1,23 @@
import * as React from 'react';
import styles from './PrintSignature.module.scss';
const CAPTION = '(подпись)';
interface IPrintSignatureProps {
/** ФИО того, кто подписывает. Пусто — печатается только линия. */
name?: string;
}
/**
* Место для подписи на печатном заявлении — столбиком: ФИО, под ним место под
* роспись и линия, под линией «(подпись)». Узкий столбик рассчитан на правый
* верхний угол шапки (FormCard headerRight), как угол бумажного заявления.
* Видно только при печати — на экране расписываться негде.
*/
export const PrintSignature: React.FC<IPrintSignatureProps> = ({ name }) => (
<div className={styles.signature}>
{name && <span className={styles.name}>{name}</span>}
<span className={styles.line} />
<span className={styles.caption}>{CAPTION}</span>
</div>
);
@@ -50,6 +50,7 @@ export { OrganizationField } from './OrganizationField/OrganizationField';
export { OrganizationTable } from './OrganizationField/OrganizationTable';
export { PrintSplitButton } from './PrintSplitButton/PrintSplitButton';
export { OrgLetterhead } from './OrgLetterhead/OrgLetterhead';
export { PrintSignature } from './PrintSignature/PrintSignature';
export { LinkField } from './LinkField/LinkField';
export { ErrorOverlay } from './ErrorOverlay/ErrorOverlay';
export { SubmitActions } from './SubmitActions/SubmitActions';