style: заметный комментарий согласующего в маршруте

Мелкий серый текст под именем согласующего пользователи не замечали, а там бывает причина возврата или отклонения. Теперь это плашка: светлый фон, полоса слева, обычный размер шрифта. Действует во всех формах. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
feat: комментарий инициатора в заявке на отпуск
2026-10-28 10:05:03 +05:00 · 2026-10-28 10:05:02 +05:00
7 changed files with 97 additions and 65 deletions
@@ -28,6 +28,9 @@
 - **Даты окончания нет**: отпуск задаётся началом и количеством дней, чтобы не считать
  праздники и выходные. Колонка `EndDate` не используется: из провижининга, типа контента и представления она убрана (само системное поле SharePoint `FromBaseType` удалить нельзя).
 - **Заголовок элемента** (`Title`): `Отпуск — {ФИО} — дд.мм.гггг`.
+- **Комментарий** (с 10-28, `VacationComment`, Note) — необязательный, заполняет инициатор,
+  последним полем секции; в просмотре пустой не показывается. В DOCX для ЭДО (`vacationDocument.ts`) не идёт; при печати
+  просмотра виден, как остальные поля секции.

 ## Подписание в ЭДО
 > **Сейчас выключено** (`VACATION_EDO_SIGNING_ENABLED = false` в `shared/config.ts`): решение последнего
@@ -71,7 +74,7 @@
  SLA на бэкенде approval-route этот код не вызывает — такое заявление на подпись не уйдёт.

 ## Секции формы
-RequestSection (сотрудник · должность · дата начала · количество дней)
+RequestSection (сотрудник · должность · дата начала · количество дней · замещающий · комментарий)

 ## Точки входа
 - rptype: `hr-vacation`
@@ -34,6 +34,7 @@ export async function loadVacationRequest(itemId: number, listId?: string): Prom
      'DepartmentId',
      'Project',
      'ProjectId',
+      'VacationComment',
      'RequestStatus',
      'RequestUniqueCode',
      'Employee/Title',
@@ -58,7 +59,8 @@ export async function loadVacationRequest(itemId: number, listId?: string): Prom
    Department: (item.Department as string) || '',
    DepartmentId: (item.DepartmentId as string) || '',
    Project: (item.Project as string) || '',
-    ProjectId: (item.ProjectId as string) || ''
+    ProjectId: (item.ProjectId as string) || '',
+    VacationComment: (item.VacationComment as string) || ''
  };

  return {
@@ -44,6 +44,8 @@ export interface IFormData {
  Project: string;
  /** oid проекта ('' — если введён вручную без выбора из списка). */
  ProjectId: string;
+  /** Комментарий инициатора к заявке — необязательный, для согласующих. */
+  VacationComment: string;
 }

 /** Обновление одного поля формы с сохранением типа значения. */
@@ -73,7 +75,8 @@ export const EMPTY_DATA: IFormData = {
  Department: '',
  DepartmentId: '',
  Project: '',
-  ProjectId: ''
+  ProjectId: '',
+  VacationComment: ''
 };

 /** Плейсхолдер для поля выбора сотрудника. */
@@ -13,6 +13,7 @@
    { "internalName": "Department", "title": "Подразделение", "type": "Text" },
    { "internalName": "DepartmentId", "title": "Id подразделения (справочник)", "type": "Text" },
    { "internalName": "Project", "title": "Проект", "type": "Text" },
-    { "internalName": "ProjectId", "title": "Id проекта (справочник)", "type": "Text" }
+    { "internalName": "ProjectId", "title": "Id проекта (справочник)", "type": "Text" },
+    { "internalName": "VacationComment", "title": "Комментарий", "type": "Note" }
  ]
 }
@@ -1,60 +1,75 @@
 import * as React from 'react';
-import { FormGrid, FormField, TextInput, PeopleField, OrganizationTable } from '../../../shared/ui';
+import { FormGrid, FormField, TextInput, TextArea, PeopleField, OrganizationTable, useFormReadOnly } from '../../../shared/ui';
 import { ProjectPicker } from '../../../shared/dictionary';
 import { ISectionProps, EMPLOYEE_PLACEHOLDER, SUBSTITUTE_PLACEHOLDER, MIN_NOTICE_DAYS, MAX_DAYS } from '../model';
 import { isoDatePlusDays } from '../../../shared/dateUtils';

 /** Единственная секция формы «Заявка на отпуск»: сотрудник (должность и подразделение подтягиваются из справочника), даты. */
-export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange, printOrgIndex }) => (
-  <FormGrid>
-    <FormField label="Сотрудник" htmlFor="Employee" required full>
-      <PeopleField
-        context={context}
-        value={data.Employee}
-        onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
-        placeholder={EMPLOYEE_PLACEHOLDER}
-      />
-    </FormField>
-    <OrganizationTable value={data.Organization} printIndex={printOrgIndex} />
-    <FormField label="Проект" htmlFor="Project">
-      <ProjectPicker
-        id="Project"
-        context={context}
-        value={data.Project}
-        onChange={(name, id) => {
-          set('Project', name);
-          set('ProjectId', id);
-        }}
-        placeholder="Начните вводить название или код проекта…"
-      />
-    </FormField>
-    <FormField label="Дата начала" htmlFor="StartDate" required>
-      <TextInput
-        id="StartDate"
-        type="date"
-        value={data.StartDate}
-        onChange={(v) => set('StartDate', v)}
-        min={isoDatePlusDays(MIN_NOTICE_DAYS)}
-      />
-    </FormField>
-    <FormField label="Количество дней" htmlFor="DaysCount" required>
-      <TextInput
-        id="DaysCount"
-        type="number"
-        value={data.DaysCount}
-        onChange={(v) => set('DaysCount', v)}
-        min={1}
-        max={MAX_DAYS}
-        placeholder={`от 1 до ${MAX_DAYS}`}
-      />
-    </FormField>
-    <FormField label="Лицо, замещающее на время отсутствия" htmlFor="Substitute" full>
-      <PeopleField
-        context={context}
-        value={data.Substitute}
-        onChange={(v) => set('Substitute', v)}
-        placeholder={SUBSTITUTE_PLACEHOLDER}
-      />
-    </FormField>
-  </FormGrid>
-);
+export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange, printOrgIndex }) => {
+  const readOnly = useFormReadOnly();
+
+  return (
+    <FormGrid>
+      <FormField label="Сотрудник" htmlFor="Employee" required full>
+        <PeopleField
+          context={context}
+          value={data.Employee}
+          onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
+          placeholder={EMPLOYEE_PLACEHOLDER}
+        />
+      </FormField>
+      <OrganizationTable value={data.Organization} printIndex={printOrgIndex} />
+      <FormField label="Проект" htmlFor="Project">
+        <ProjectPicker
+          id="Project"
+          context={context}
+          value={data.Project}
+          onChange={(name, id) => {
+            set('Project', name);
+            set('ProjectId', id);
+          }}
+          placeholder="Начните вводить название или код проекта…"
+        />
+      </FormField>
+      <FormField label="Дата начала" htmlFor="StartDate" required>
+        <TextInput
+          id="StartDate"
+          type="date"
+          value={data.StartDate}
+          onChange={(v) => set('StartDate', v)}
+          min={isoDatePlusDays(MIN_NOTICE_DAYS)}
+        />
+      </FormField>
+      <FormField label="Количество дней" htmlFor="DaysCount" required>
+        <TextInput
+          id="DaysCount"
+          type="number"
+          value={data.DaysCount}
+          onChange={(v) => set('DaysCount', v)}
+          min={1}
+          max={MAX_DAYS}
+          placeholder={`от 1 до ${MAX_DAYS}`}
+        />
+      </FormField>
+      <FormField label="Лицо, замещающее на время отсутствия" htmlFor="Substitute" full>
+        <PeopleField
+          context={context}
+          value={data.Substitute}
+          onChange={(v) => set('Substitute', v)}
+          placeholder={SUBSTITUTE_PLACEHOLDER}
+        />
+      </FormField>
+      {/* Пустой комментарий в просмотре не показываем — пустое поле только мешает читать. */}
+      {(!readOnly || data.VacationComment.trim()) && (
+        <FormField label="Комментарий" htmlFor="VacationComment" full>
+          <TextArea
+            id="VacationComment"
+            value={data.VacationComment}
+            onChange={(v) => set('VacationComment', v)}
+            rows={3}
+          />
+        </FormField>
+      )}
+    </FormGrid>
+  );
+};
@@ -43,7 +43,8 @@ function buildItem(
    Department: data.Department || null,
    DepartmentId: data.DepartmentId || null,
    Project: data.Project || null,
-    ProjectId: data.ProjectId || null
+    ProjectId: data.ProjectId || null,
+    VacationComment: data.VacationComment.trim() || null
  };
 }

@@ -157,20 +157,27 @@
  }
 }

-// Комментарий решения — мелким текстом под именем согласующего (в той же ячейке,
+// Комментарий решения — плашкой под именем согласующего (в той же ячейке,
 // а не отдельной строкой: иначе ломается rowSpan колонки «Шаг» у параллельных).
+// Плашка, а не мелкий серый текст: пользователи его не замечали, а там бывает
+// причина возврата/отклонения.
 .commentInline {
  display: block;
-  margin-top: 3px;
-  font-size: $fs-caption;
-  color: $gray-500;
+  margin-top: $sp-1;
+  padding: 6px 10px;
+  border-left: 3px solid $navy-600;
+  border-radius: 0 $r-sm $r-sm 0;
+  background: $navy-100;
+  font-size: $fs-sm;
+  color: $gray-900;
  line-height: 1.45;
  white-space: pre-wrap; // сохранить переносы строк из комментария
+  overflow-wrap: anywhere; // длинная ссылка без пробелов не распирает ячейку
 }

 .commentLabel {
-  color: $gray-400;
-  font-weight: 500;
+  color: $navy-800;
+  font-weight: 600;
 }

 // Пометка «доп. согласующий, добавил: …» — под именем согласующего. Золотой