feat: migrated vacation form to request portal
This commit is contained in:
Тимур Городецкий
@@ -14,6 +14,7 @@ export const REQUEST_TYPES: IRequestType[] = [
|
||||
{ id: 'it-1c-ticket', categoryId: 'it', title: 'Заявка в отдел 1С', icon: 'clipboard' },
|
||||
|
||||
// Отдел кадров
|
||||
{ id: 'hr-vacation', categoryId: 'hr', title: 'Заявка на отпуск', icon: 'calendar' },
|
||||
{ id: 'hr-transfer', categoryId: 'hr', title: 'на перемещение сотрудников', icon: 'send' }
|
||||
];
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"dataListTitle": "Заявка в отдел 1С — согласование",
|
||||
"columns": [
|
||||
{ "internalName": "TansuSiteApprover", "title": "Согласующий", "type": "User", "userSelectionMode": "PeopleOnly" },
|
||||
{ "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
|
||||
{ "internalName": "ApprovalStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
|
||||
{ "internalName": "Ticket", "title": "Заявка", "type": "Lookup", "lookupList": "Заявка в отдел 1С — данные", "lookupShowField": "Title" },
|
||||
{ "internalName": "Date", "title": "Дата", "type": "DateTime" },
|
||||
{ "internalName": "Comment", "title": "Комментарий", "type": "Note" },
|
||||
|
||||
@@ -20,7 +20,7 @@ export async function loadTicketRequest(itemId: number): Promise<ILoadedRequest>
|
||||
const item = (await getSP()
|
||||
.web.lists.getByTitle(LIST_TITLE)
|
||||
.items.getById(itemId)
|
||||
.select(...SCALAR_FIELDS, 'Title', 'Status', 'RequestUniqueCode')()) as Record<string, unknown>;
|
||||
.select(...SCALAR_FIELDS, 'Title', 'RequestStatus', 'RequestUniqueCode')()) as Record<string, unknown>;
|
||||
|
||||
const data: IFormData = { ...EMPTY_DATA };
|
||||
const writable = data as unknown as Record<string, string>;
|
||||
@@ -31,5 +31,5 @@ export async function loadTicketRequest(itemId: number): Promise<ILoadedRequest>
|
||||
});
|
||||
data.TaskName = (item.Title as string) || '';
|
||||
|
||||
return { data, status: (item.Status as string) || '', code: (item.RequestUniqueCode as string) || '' };
|
||||
return { data, status: (item.RequestStatus as string) || '', code: (item.RequestUniqueCode as string) || '' };
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
"titleColumnName": "Наименование задачи",
|
||||
"columns": [
|
||||
{ "internalName": "RequestUniqueCode", "title": "Уникальный код заявки", "type": "Text" },
|
||||
{ "internalName": "Status", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
|
||||
{ "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
|
||||
|
||||
{ "internalName": "WorkType", "title": "Виды работ", "type": "Choice", "required": true, "choices": [
|
||||
"Создание пользователя в 1С",
|
||||
|
||||
@@ -18,7 +18,7 @@ export function ticket1cApprovalService(): ApprovalListService {
|
||||
|
||||
/** Поля элемента списка данных из модели формы. TaskName пишется в системную колонку Title. */
|
||||
function buildItem(data: IFormData, status: string): Record<string, unknown> {
|
||||
const item: Record<string, unknown> = { Title: data.TaskName, Status: status };
|
||||
const item: Record<string, unknown> = { Title: data.TaskName, RequestStatus: status };
|
||||
|
||||
(Object.keys(data) as (keyof IFormData)[]).forEach((key) => {
|
||||
if (key === 'TaskName') return;
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
# Заявка на отпуск (hr-vacation)
|
||||
|
||||
**Назначение:** заявление сотрудника на отпуск (перенос формы из отдельной web part `pto-tracker`).
|
||||
**Категория:** Отдел кадров
|
||||
**Списки SP:** «Заявка на отпуск — данные» / «Заявка на отпуск — согласование»
|
||||
**RequestTypeId (внешний API маршрутов):** 11 (в старой pto-tracker было 1; при заведении типа в админке портала получил новый id 11)
|
||||
|
||||
## Маршрут
|
||||
- Тип заявки в approval-route API (`/api/request-types`): id **11**, `pageUrl` «hr-vacation»,
|
||||
`listId` «/sites/requests/Lists/List5», section «Кадры».
|
||||
- Фазы: только согласование. Фазы исполнения нет — после согласования заявка
|
||||
просто получает статус «Согласовано» (никакого Planner, в отличие от Ticket1C).
|
||||
- **Матрица редактируема заявителем** при новой заявке / черновике / возврате
|
||||
(как RecruitingHire / WorkplaceSetup): `useMatrixEditor(editable = !readOnly)`.
|
||||
Заявитель может добавлять/удалять/переставлять согласующих поверх планируемого
|
||||
маршрута.
|
||||
|
||||
## Особое поведение
|
||||
- **Заявку можно подать за другого сотрудника.** Поле «Сотрудник» — People-picker
|
||||
(колонка User `Employee`). Планируемый маршрут резолвится по e-mail
|
||||
**выбранного** сотрудника (`getPlannedMatrix(..., data.Employee, ...)`), а не
|
||||
текущего пользователя — поэтому reloadKey матрицы включает `data.Employee`.
|
||||
- **Автоподстановка должности.** Новая заявка предзаполняется текущим
|
||||
пользователем (email + должность из профиля `SPS-JobTitle` через
|
||||
`approval.getJobTitle`). При выборе другого сотрудника его должность
|
||||
подтягивается так же. Ошибка профиля не мешает форме — поле просто остаётся как есть.
|
||||
- **Дата окончания не вводится** — считается при сохранении: `начало + (дни − 1)`
|
||||
и пишется в колонку `EndDate` (обязательна в списке, но в UI её нет).
|
||||
- **Заголовок элемента** (`Title`): `Отпуск — {ФИО} — дд.мм.гггг`.
|
||||
|
||||
## Секции формы
|
||||
RequestSection (сотрудник · должность · дата начала · количество дней)
|
||||
|
||||
## Точки входа
|
||||
- rptype: `hr-vacation`
|
||||
- Режим согласующего (просмотр): есть (`VacationView`)
|
||||
- «Создать на основе»: нет
|
||||
@@ -0,0 +1,20 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $sp-2;
|
||||
margin-bottom: $sp-4;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: $navy-700;
|
||||
font-family: $font-sans;
|
||||
font-size: $fs-sm;
|
||||
cursor: pointer;
|
||||
transition: color .18s;
|
||||
|
||||
&:hover {
|
||||
color: $gold-600;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import styles from './VacationForm.module.scss';
|
||||
import {
|
||||
Alert,
|
||||
FormCard,
|
||||
FormModeProvider,
|
||||
Icon,
|
||||
RequestNumber,
|
||||
SubmitActions,
|
||||
useRequestSubmit
|
||||
} from '../../shared/ui';
|
||||
import {
|
||||
ApprovalMatrix,
|
||||
StatusBadge,
|
||||
useMatrixEditor,
|
||||
getPlannedMatrix,
|
||||
notifyActiveStep,
|
||||
REQUEST_STATUS,
|
||||
isEditableStatus,
|
||||
IApproverToWrite,
|
||||
findUnassignedStep
|
||||
} from '../../shared/approval';
|
||||
import { IRequestFormProps } from '../../models/types';
|
||||
import { IFormData, EMPTY_DATA, SetField } from './model';
|
||||
import {
|
||||
saveVacationRequest,
|
||||
vacationApprovalService,
|
||||
VACATION_REQUEST_TYPE_ID,
|
||||
DATA_LIST_TITLE,
|
||||
APPROVAL_LIST_TITLE
|
||||
} from './submit';
|
||||
import { loadVacationRequest } from './load';
|
||||
import { RequestSection } from './sections/RequestSection';
|
||||
|
||||
const VacationForm: React.FC<IRequestFormProps> = ({ requestType, context, onCancel, onSaved, editId }) => {
|
||||
const [data, setData] = useState<IFormData>(EMPTY_DATA);
|
||||
const [requestId, setRequestId] = useState<number | undefined>(editId);
|
||||
const [requestStatus, setRequestStatus] = useState<string | undefined>(undefined);
|
||||
const [requestCode, setRequestCode] = useState<string | undefined>(undefined);
|
||||
const submit = useRequestSubmit();
|
||||
|
||||
const readOnly = !isEditableStatus(requestStatus);
|
||||
const set: SetField = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
const approval = useMemo(() => vacationApprovalService(), []);
|
||||
|
||||
// Открыта СВОЯ заявка на редактирование (черновик/возврат) — подгружаем содержимое и статус.
|
||||
useEffect(() => {
|
||||
if (!editId) {
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
loadVacationRequest(editId)
|
||||
.then((loaded) => {
|
||||
if (alive) {
|
||||
setData(loaded.data);
|
||||
setRequestStatus(loaded.status);
|
||||
setRequestCode(loaded.code || undefined);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
if (alive) {
|
||||
submit.setError(`Не удалось загрузить заявку №${editId}: ${(e as Error).message}`);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [editId]);
|
||||
|
||||
// Новая заявка — по умолчанию на себя: подставляем текущего пользователя и его должность.
|
||||
useEffect(() => {
|
||||
if (editId) {
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
const user = context.pageContext.user;
|
||||
setData((prev) => ({ ...prev, Employee: prev.Employee || user.email }));
|
||||
approval
|
||||
.getJobTitle(user.loginName)
|
||||
.then((title) => {
|
||||
if (alive && title) {
|
||||
setData((prev) => ({ ...prev, Position: prev.Position || title }));
|
||||
}
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [editId]);
|
||||
|
||||
// Выбор другого сотрудника подтягивает его должность (как в исходной pto-tracker).
|
||||
const handleEmployeeChange = (login: string): void => {
|
||||
setData((prev) => ({ ...prev, Employee: login }));
|
||||
if (!login) {
|
||||
return;
|
||||
}
|
||||
approval
|
||||
.getJobTitle(login)
|
||||
.then((title) => setData((prev) => ({ ...prev, Position: title || prev.Position })))
|
||||
.catch(() => undefined);
|
||||
};
|
||||
|
||||
// Планируемый маршрут резолвится по e-mail ВЫБРАННОГО сотрудника (не текущего
|
||||
// пользователя) — так работает подача за другого. У заявки на редактировании
|
||||
// маршрут читается из уже записанных строк, чтобы не затереть правки инициатора.
|
||||
const loadMatrix = useCallback(
|
||||
() =>
|
||||
editId
|
||||
? approval.getMatrixForRequest(editId)
|
||||
: getPlannedMatrix(context, VACATION_REQUEST_TYPE_ID, data.Employee, approval, 'Approval'),
|
||||
[context, approval, editId, data.Employee]
|
||||
);
|
||||
const matrix = useMatrixEditor(
|
||||
loadMatrix,
|
||||
`${data.Employee}-${editId ?? 'new'}`,
|
||||
!readOnly,
|
||||
!!editId || !!data.Employee,
|
||||
(login) => approval.getJobTitle(login)
|
||||
);
|
||||
|
||||
const daysNum = Number(data.DaysCount);
|
||||
const isValid = !!(
|
||||
data.Employee &&
|
||||
data.Position.trim() &&
|
||||
data.StartDate &&
|
||||
Number.isFinite(daysNum) &&
|
||||
daysNum > 0
|
||||
);
|
||||
const validate = (): string | undefined =>
|
||||
isValid ? undefined : 'Заполните обязательные поля: сотрудник, должность, дата начала, количество дней (> 0).';
|
||||
|
||||
const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] =>
|
||||
rows.map((r) => ({
|
||||
email: r.email,
|
||||
position: r.position,
|
||||
allowReassign: r.allowReassign,
|
||||
order: r.order
|
||||
}));
|
||||
|
||||
const save = (status: string): (() => Promise<void>) => async (): Promise<void> => {
|
||||
const { id, code } = await saveVacationRequest(requestId, data, toApprovers(matrix.rows), status);
|
||||
setRequestId(id);
|
||||
setRequestStatus(status);
|
||||
if (code) {
|
||||
setRequestCode(code);
|
||||
}
|
||||
if (onSaved) {
|
||||
onSaved();
|
||||
}
|
||||
// Отправка на согласование — уведомляем первый активный шаг (поток оповещения).
|
||||
if (status === REQUEST_STATUS.onApproval) {
|
||||
await notifyActiveStep(context, approval, id, {
|
||||
requestTypeId: VACATION_REQUEST_TYPE_ID,
|
||||
dataListName: DATA_LIST_TITLE,
|
||||
approvalListName: APPROVAL_LIST_TITLE
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// На отправку (в отличие от черновика) маршрут должен быть полностью
|
||||
// укомплектован — иначе шаг без назначенного человека молча пропадёт при записи.
|
||||
const validateSubmit = (): string | undefined => {
|
||||
const formError = validate();
|
||||
if (formError) return formError;
|
||||
if (matrix.error) {
|
||||
return `Не удалось определить маршрут согласования: ${matrix.error}. Попробуйте ещё раз или обратитесь к администратору.`;
|
||||
}
|
||||
const unassigned = findUnassignedStep(matrix.rows);
|
||||
if (unassigned) {
|
||||
return `Шаг ${unassigned.order} маршрута согласования («${unassigned.position || 'без должности'}») без назначенного человека — выберите согласующего или удалите шаг.`;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const handleSaveDraft = (): Promise<void> => submit.run('draft', save(REQUEST_STATUS.draft), validate);
|
||||
const handleSubmit = (): Promise<void> => submit.run('submit', save(REQUEST_STATUS.onApproval), validateSubmit);
|
||||
|
||||
const sectionProps = { data, set, context, onEmployeeChange: handleEmployeeChange };
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button type="button" className={styles.back} onClick={onCancel}>
|
||||
<Icon name="arrow-left" size="sm" />
|
||||
<span>К списку заявок</span>
|
||||
</button>
|
||||
|
||||
<FormCard
|
||||
title={requestType.title}
|
||||
subtitle="Категория: Отдел кадров"
|
||||
headerRight={
|
||||
requestId || requestStatus ? (
|
||||
<>
|
||||
{requestStatus && <StatusBadge status={requestStatus} />}
|
||||
{requestCode && <RequestNumber code={requestCode} />}
|
||||
</>
|
||||
) : undefined
|
||||
}
|
||||
>
|
||||
{submit.savedKind && !submit.error && (
|
||||
<Alert variant="ok">
|
||||
{submit.savedKind === 'draft' ? 'Черновик сохранён.' : 'Заявка отправлена на согласование.'}
|
||||
</Alert>
|
||||
)}
|
||||
{submit.error && <Alert variant="err">{submit.error}</Alert>}
|
||||
|
||||
<FormModeProvider readOnly={readOnly}>
|
||||
<RequestSection {...sectionProps} />
|
||||
</FormModeProvider>
|
||||
|
||||
<ApprovalMatrix editor={matrix} search={(q) => approval.searchUsers(q)} />
|
||||
|
||||
<SubmitActions
|
||||
submit={submit}
|
||||
isValid={isValid}
|
||||
readOnly={readOnly}
|
||||
onCancel={onCancel}
|
||||
onSaveDraft={handleSaveDraft}
|
||||
onSubmit={handleSubmit}
|
||||
submitLabel="Отправить на согласование"
|
||||
/>
|
||||
</FormCard>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VacationForm;
|
||||
@@ -0,0 +1,14 @@
|
||||
@import '../../../../styles/design-tokens';
|
||||
|
||||
.state {
|
||||
padding: $sp-8;
|
||||
color: $gray-500;
|
||||
font-size: $fs-sm;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: $sp-4;
|
||||
}
|
||||
@@ -0,0 +1,139 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import type { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import styles from './VacationView.module.scss';
|
||||
import { Alert, FormCard, FormModeProvider, PrintButton } from '../../shared/ui';
|
||||
import {
|
||||
ApproverService,
|
||||
DecisionPanel,
|
||||
StatusBadge,
|
||||
ApprovalMatrix,
|
||||
useMatrixEditor,
|
||||
notifyActiveStep
|
||||
} from '../../shared/approval';
|
||||
import { IFormData, EMPTY_DATA, SetField } from './model';
|
||||
import { loadVacationRequest } from './load';
|
||||
import {
|
||||
vacationApprovalService,
|
||||
VACATION_REQUEST_TYPE_ID,
|
||||
DATA_LIST_TITLE,
|
||||
APPROVAL_LIST_TITLE
|
||||
} from './submit';
|
||||
import { RequestSection } from './sections/RequestSection';
|
||||
|
||||
interface IVacationViewProps {
|
||||
context: WebPartContext;
|
||||
itemId: number;
|
||||
}
|
||||
|
||||
// В режиме чтения поля не редактируются, поэтому обновление — пустышка.
|
||||
const NOOP_SET: SetField = () => undefined;
|
||||
|
||||
// Заявка на отпуск только для просмотра (режим согласующего). Переиспользует ту
|
||||
// же секцию, что и форма подачи; редактирование выключено через
|
||||
// <FormModeProvider readOnly> — поля сами становятся неизменяемыми.
|
||||
const VacationView: React.FC<IVacationViewProps> = ({ context, itemId }) => {
|
||||
const [data, setData] = useState<IFormData>(EMPTY_DATA);
|
||||
const [status, setStatus] = useState<string>('');
|
||||
const [code, setCode] = useState<string>('');
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const approval = useMemo(() => vacationApprovalService(), []);
|
||||
const approverService = useMemo(() => new ApproverService(approval, DATA_LIST_TITLE), [approval]);
|
||||
|
||||
// Матрица маршрута из фактических строк заявки (read-only). decisionSeq в
|
||||
// reloadKey: после решения строки на сервере меняются — перечитываем матрицу.
|
||||
const [decisionSeq, setDecisionSeq] = useState<number>(0);
|
||||
const loadApprovers = useCallback(() => approval.getMatrixForRequest(itemId), [approval, itemId]);
|
||||
const approvers = useMatrixEditor(loadApprovers, `a-${itemId}-${decisionSeq}`, false, true, (l) =>
|
||||
approval.getJobTitle(l)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
setLoading(true);
|
||||
loadVacationRequest(itemId)
|
||||
.then((loaded) => {
|
||||
if (alive) {
|
||||
setData(loaded.data);
|
||||
setStatus(loaded.status);
|
||||
setCode(loaded.code);
|
||||
setError(null);
|
||||
setLoading(false);
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
if (alive) {
|
||||
setError(`Не удалось загрузить заявку №${itemId}: ${(e as Error).message}`);
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [itemId]);
|
||||
|
||||
if (loading) {
|
||||
return <div className={styles.state}>Загрузка заявки…</div>;
|
||||
}
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles.state}>
|
||||
<Alert variant="err">{error}</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sectionProps = { data, set: NOOP_SET, context };
|
||||
|
||||
const notify = (): void => {
|
||||
notifyActiveStep(context, approval, itemId, {
|
||||
requestTypeId: VACATION_REQUEST_TYPE_ID,
|
||||
dataListName: DATA_LIST_TITLE,
|
||||
approvalListName: APPROVAL_LIST_TITLE
|
||||
}).catch(() => undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.toolbar} rp-no-print`}>
|
||||
<PrintButton />
|
||||
</div>
|
||||
|
||||
<div className="rp-print-root">
|
||||
<FormCard
|
||||
title="Заявка на отпуск"
|
||||
subtitle={`№${code || itemId}`}
|
||||
headerRight={status ? <StatusBadge status={status} /> : undefined}
|
||||
>
|
||||
<FormModeProvider readOnly>
|
||||
<RequestSection {...sectionProps} />
|
||||
</FormModeProvider>
|
||||
</FormCard>
|
||||
|
||||
<ApprovalMatrix editor={approvers} search={(q) => approval.searchUsers(q)} />
|
||||
</div>
|
||||
|
||||
{/* Панель решения — ВНЕ печати и FormModeProvider (комментарий редактируемый). */}
|
||||
<div className="rp-no-print">
|
||||
<DecisionPanel
|
||||
service={approverService}
|
||||
requestId={itemId}
|
||||
search={(q) => approval.searchUsers(q)}
|
||||
onDecided={(newStatus) => {
|
||||
setStatus(newStatus);
|
||||
setDecisionSeq((n) => n + 1);
|
||||
notify();
|
||||
}}
|
||||
onDelegated={() => {
|
||||
setDecisionSeq((n) => n + 1);
|
||||
notify();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VacationView;
|
||||
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"dataListTitle": "Заявка на отпуск — согласование",
|
||||
"columns": [
|
||||
{ "internalName": "TansuSiteApprover", "title": "Согласующий", "type": "User", "userSelectionMode": "PeopleOnly" },
|
||||
{ "internalName": "ApprovalStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "Ждёт очереди", "На согласовании", "На исполнении", "Согласовано", "Выполнено", "Отклонено", "Возвращена на доработку"] },
|
||||
{ "internalName": "Ticket", "title": "Заявка", "type": "Lookup", "lookupList": "Заявка на отпуск — данные", "lookupShowField": "Title" },
|
||||
{ "internalName": "Date", "title": "Дата", "type": "DateTime" },
|
||||
{ "internalName": "Comment", "title": "Комментарий", "type": "Note" },
|
||||
{ "internalName": "StepOrder", "title": "Порядок", "type": "Number" },
|
||||
{ "internalName": "AllowReassignToOtherApprovers", "title": "Можно перепоручать", "type": "Boolean" },
|
||||
{ "internalName": "Phase", "title": "Фаза", "type": "Choice", "choices": ["Согласование", "Исполнение"] },
|
||||
{ "internalName": "DelegatedBy", "title": "Кем переназначено", "type": "User", "userSelectionMode": "PeopleOnly" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
import { getSP } from '../../shared/pnp/pnpjs';
|
||||
import { IFormData, EMPTY_DATA } from './model';
|
||||
|
||||
const LIST_TITLE = 'Заявка на отпуск — данные';
|
||||
|
||||
export interface ILoadedRequest {
|
||||
data: IFormData;
|
||||
/** Ф.И.О. сотрудника из поля Employee (для заголовка режима чтения). */
|
||||
employeeName: string;
|
||||
status: string;
|
||||
/** Уникальный код заявки; '' — если запись создана до появления поля. */
|
||||
code: string;
|
||||
}
|
||||
|
||||
/** Прочитать заявку на отпуск по id: модель формы + статус (правка / просмотр). */
|
||||
export async function loadVacationRequest(itemId: number): Promise<ILoadedRequest> {
|
||||
const item = (await getSP()
|
||||
.web.lists.getByTitle(LIST_TITLE)
|
||||
.items.getById(itemId)
|
||||
.select(
|
||||
'Id',
|
||||
'Position',
|
||||
'StartDate',
|
||||
'DaysCount',
|
||||
'RequestStatus',
|
||||
'RequestUniqueCode',
|
||||
'Employee/Title',
|
||||
'Employee/EMail'
|
||||
)
|
||||
.expand('Employee')()) as Record<string, unknown>;
|
||||
|
||||
const employee = item.Employee as { Title?: string; EMail?: string } | undefined;
|
||||
const start = (item.StartDate as string) || '';
|
||||
const days = item.DaysCount;
|
||||
|
||||
const data: IFormData = {
|
||||
...EMPTY_DATA,
|
||||
Employee: employee?.EMail || '',
|
||||
Position: (item.Position as string) || '',
|
||||
StartDate: start.slice(0, 10), // ISO → YYYY-MM-DD для input type=date
|
||||
DaysCount: days === null || days === undefined ? '' : String(days)
|
||||
};
|
||||
|
||||
return {
|
||||
data,
|
||||
employeeName: employee?.Title || '',
|
||||
status: (item.RequestStatus as string) || '',
|
||||
code: (item.RequestUniqueCode as string) || ''
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
|
||||
/**
|
||||
* Данные формы «Заявка на отпуск». Ключи по возможности = internalName колонок
|
||||
* SP-списка «Заявка на отпуск — данные». Employee хранит e-mail выбранного
|
||||
* сотрудника (то, что отдаёт PeopleField) — по нему же резолвится маршрут
|
||||
* согласования, поэтому заявку можно подать и за другого сотрудника.
|
||||
* EndDate в форме не вводится: считается при сохранении как начало + (дни − 1).
|
||||
*/
|
||||
export interface IFormData {
|
||||
/** E-mail сотрудника, за которого заявка (People). Пусто = не выбран. */
|
||||
Employee: string;
|
||||
Position: string;
|
||||
/** ISO YYYY-MM-DD (input type=date). */
|
||||
StartDate: string;
|
||||
/** Строка из input type=number; при записи → number. */
|
||||
DaysCount: string;
|
||||
}
|
||||
|
||||
/** Обновление одного поля формы с сохранением типа значения. */
|
||||
export type SetField = <K extends keyof IFormData>(key: K, value: IFormData[K]) => void;
|
||||
|
||||
/** Пропсы секции формы: срез данных + колбэк обновления + контекст (people picker). */
|
||||
export interface ISectionProps {
|
||||
data: IFormData;
|
||||
set: SetField;
|
||||
context: WebPartContext;
|
||||
/**
|
||||
* Выбор сотрудника подтягивает его должность — поэтому у поля «Сотрудник»
|
||||
* отдельный обработчик. Если не передан (режим чтения) — правка через set.
|
||||
*/
|
||||
onEmployeeChange?: (login: string) => void;
|
||||
}
|
||||
|
||||
export const EMPTY_DATA: IFormData = {
|
||||
Employee: '',
|
||||
Position: '',
|
||||
StartDate: '',
|
||||
DaysCount: ''
|
||||
};
|
||||
|
||||
/** Плейсхолдер для поля выбора сотрудника. */
|
||||
export const EMPLOYEE_PLACEHOLDER = 'Начните вводить Ф.И.О. сотрудника…';
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"dataListTitle": "Заявка на отпуск — данные",
|
||||
"columns": [
|
||||
{ "internalName": "RequestUniqueCode", "title": "Уникальный код заявки", "type": "Text" },
|
||||
{ "internalName": "RequestStatus", "title": "Статус", "type": "Choice", "choices": ["Черновик", "На согласовании", "Согласовано", "Отклонено", "Возвращена на доработку", "Выполнение", "Закрыта"] },
|
||||
|
||||
{ "internalName": "Employee", "title": "Сотрудник", "type": "User", "userSelectionMode": "PeopleOnly", "required": true },
|
||||
{ "internalName": "Position", "title": "Должность", "type": "Text" },
|
||||
{ "internalName": "StartDate", "title": "Дата начала", "type": "DateTime", "dateOnly": true },
|
||||
{ "internalName": "EndDate", "title": "Дата окончания", "type": "DateTime", "dateOnly": true },
|
||||
{ "internalName": "DaysCount", "title": "Количество дней", "type": "Number" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import * as React from 'react';
|
||||
import { CollapseSection, FormField, TextInput, PeopleField } from '../../../shared/ui';
|
||||
import { ISectionProps, EMPLOYEE_PLACEHOLDER } from '../model';
|
||||
|
||||
/** Единственная секция формы «Заявка на отпуск»: сотрудник, должность, даты. */
|
||||
export const RequestSection: React.FC<ISectionProps> = ({ data, set, context, onEmployeeChange }) => (
|
||||
<CollapseSection title="Заявка на отпуск" icon="people">
|
||||
<FormField label="Сотрудник" htmlFor="Employee" required full>
|
||||
<PeopleField
|
||||
context={context}
|
||||
value={data.Employee}
|
||||
onChange={onEmployeeChange ?? ((v) => set('Employee', v))}
|
||||
placeholder={EMPLOYEE_PLACEHOLDER}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Должность" htmlFor="Position" required>
|
||||
<TextInput id="Position" value={data.Position} onChange={(v) => set('Position', v)} />
|
||||
</FormField>
|
||||
<FormField label="Дата начала" htmlFor="StartDate" required>
|
||||
<TextInput id="StartDate" type="date" value={data.StartDate} onChange={(v) => set('StartDate', v)} />
|
||||
</FormField>
|
||||
<FormField label="Количество дней" htmlFor="DaysCount" required>
|
||||
<TextInput id="DaysCount" type="number" value={data.DaysCount} onChange={(v) => set('DaysCount', v)} />
|
||||
</FormField>
|
||||
</CollapseSection>
|
||||
);
|
||||
@@ -0,0 +1,93 @@
|
||||
import { getSP } from '../../shared/pnp/pnpjs';
|
||||
import { ApprovalListService, IApproverToWrite, writeRoute } from '../../shared/approval';
|
||||
import { buildRequestUniqueCode } from '../../shared/requestCode';
|
||||
import { IFormData } from './model';
|
||||
|
||||
export const DATA_LIST_TITLE = 'Заявка на отпуск — данные';
|
||||
export const APPROVAL_LIST_TITLE = 'Заявка на отпуск — согласование';
|
||||
// Тип заявки «отпуск» во внешнем approval-route API (GET /api/request-types → id 11,
|
||||
// name «Заявка на отпуск», pageUrl «hr-vacation»). Захардкожен, как
|
||||
// HIRE_REQUEST_TYPE_ID=5 в RecruitingHire. NB: в старой web part pto-tracker было 1 —
|
||||
// при заведении типа в админке портала он получил новый id 11, берём его.
|
||||
export const VACATION_REQUEST_TYPE_ID = 11;
|
||||
|
||||
/** Экземпляр сервиса списка согласования этой формы. */
|
||||
export function vacationApprovalService(): ApprovalListService {
|
||||
return new ApprovalListService(APPROVAL_LIST_TITLE);
|
||||
}
|
||||
|
||||
/** email / claims-логин → пользователь сайта (Id для Person-поля + Title для заголовка). */
|
||||
async function ensureEmployee(login: string): Promise<{ Id: number; Title: string }> {
|
||||
const full = login.indexOf('|') >= 0 ? login : `i:0#.f|membership|${login}`;
|
||||
return getSP().web.ensureUser(full);
|
||||
}
|
||||
|
||||
function pad2(n: number): string {
|
||||
return n < 10 ? `0${n}` : `${n}`;
|
||||
}
|
||||
|
||||
/** «Дата окончания» в форме не вводится: начало + (дни − 1). Пусто → ''. */
|
||||
function computeEndDate(startIso: string, days: number): string {
|
||||
if (!startIso || !Number.isFinite(days) || days <= 0) return '';
|
||||
const endMs = new Date(startIso).getTime() + (days - 1) * 86400000;
|
||||
return new Date(endMs).toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
/** Осмысленный заголовок элемента (системная колонка Title). */
|
||||
function buildTitle(employeeName: string): string {
|
||||
const now = new Date();
|
||||
return `Отпуск — ${employeeName} — ${pad2(now.getDate())}.${pad2(now.getMonth() + 1)}.${now.getFullYear()}`;
|
||||
}
|
||||
|
||||
/** Поля элемента списка данных из модели формы (+ Employee по Id, + вычисленная EndDate). */
|
||||
function buildItem(data: IFormData, status: string, employeeId: number, employeeName: string): Record<string, unknown> {
|
||||
const days = Number(data.DaysCount);
|
||||
return {
|
||||
Title: buildTitle(employeeName),
|
||||
RequestStatus: status,
|
||||
EmployeeId: employeeId,
|
||||
Position: data.Position || null,
|
||||
StartDate: data.StartDate || null,
|
||||
DaysCount: Number.isFinite(days) && days > 0 ? days : null,
|
||||
EndDate: computeEndDate(data.StartDate, days) || null
|
||||
};
|
||||
}
|
||||
|
||||
export interface ISaveResult {
|
||||
id: number;
|
||||
/** Задан только при создании новой заявки (существующий код не меняется). */
|
||||
code?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Сохранить заявку на отпуск: содержимое + маршрут согласования.
|
||||
* existingId задан → обновляем ту же запись (черновик/доработка), иначе создаём новую.
|
||||
* Фазы исполнения у отпуска нет — writeRoute вызывается с пустым списком исполнителей.
|
||||
* Возвращает Id заявки (+ код при создании).
|
||||
*/
|
||||
export async function saveVacationRequest(
|
||||
existingId: number | undefined,
|
||||
data: IFormData,
|
||||
approvers: IApproverToWrite[],
|
||||
status: string
|
||||
): Promise<ISaveResult> {
|
||||
const list = getSP().web.lists.getByTitle(DATA_LIST_TITLE);
|
||||
const employee = await ensureEmployee(data.Employee);
|
||||
const item = buildItem(data, status, employee.Id, employee.Title || data.Employee);
|
||||
|
||||
let id: number;
|
||||
let code: string | undefined;
|
||||
if (existingId) {
|
||||
await list.items.getById(existingId).update(item);
|
||||
id = existingId;
|
||||
} else {
|
||||
const added = await list.items.add(item);
|
||||
id = (added as { Id: number }).Id;
|
||||
// Код известен только после создания элемента (нужен его Id).
|
||||
code = buildRequestUniqueCode(VACATION_REQUEST_TYPE_ID, id, new Date());
|
||||
await list.items.getById(id).update({ RequestUniqueCode: code });
|
||||
}
|
||||
|
||||
await writeRoute(vacationApprovalService(), id, approvers, [], status);
|
||||
return { id, code };
|
||||
}
|
||||
@@ -24,6 +24,9 @@ const formRegistry: Record<string, React.LazyExoticComponent<FormComponent>> = {
|
||||
),
|
||||
'it-1c-ticket': React.lazy(
|
||||
() => import(/* webpackChunkName: 'form-1c-ticket' */ './Ticket1C/Ticket1CForm')
|
||||
),
|
||||
'hr-vacation': React.lazy(
|
||||
() => import(/* webpackChunkName: 'form-vacation' */ './Vacation/VacationForm')
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
@@ -21,6 +21,9 @@ const viewRegistry: Record<string, React.LazyExoticComponent<ViewComponent>> = {
|
||||
),
|
||||
'it-1c-ticket': React.lazy(
|
||||
() => import(/* webpackChunkName: 'view-1c-ticket' */ './Ticket1C/Ticket1CView')
|
||||
),
|
||||
'hr-vacation': React.lazy(
|
||||
() => import(/* webpackChunkName: 'view-vacation' */ './Vacation/VacationView')
|
||||
)
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user