Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz> Reviewed-on: http://git.tnsu.kz/timur.gorodetskiy/request-portal/pulls/7
This commit was merged in pull request #7.
This commit is contained in:
@@ -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,236 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useMemo, useCallback, useEffect } from 'react';
|
||||
import styles from './ClearanceForm.module.scss';
|
||||
import {
|
||||
Alert,
|
||||
FormCard,
|
||||
InitiatorLine,
|
||||
FormModeProvider,
|
||||
Icon,
|
||||
RequestNumber,
|
||||
SubmitActions,
|
||||
useRequestSubmit
|
||||
} from '../../shared/ui';
|
||||
import {
|
||||
ApprovalMatrix,
|
||||
StatusBadge,
|
||||
useMatrixEditor,
|
||||
getPlannedMatrix,
|
||||
notifyActiveStep,
|
||||
useRequestTypeId,
|
||||
REQUEST_STATUS,
|
||||
isEditableStatus,
|
||||
IApproverToWrite,
|
||||
findUnassignedStep
|
||||
} from '../../shared/approval';
|
||||
import { IRequestFormProps } from '../../models/types';
|
||||
import { IFormData, EMPTY_DATA, SetField } from './model';
|
||||
import { saveClearanceRequest, clearanceApprovalService, DATA_LIST_TITLE, APPROVAL_LIST_TITLE } from './submit';
|
||||
import { loadClearanceRequest } from './load';
|
||||
import { RequestSection } from './sections/RequestSection';
|
||||
|
||||
const ClearanceForm: 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(() => clearanceApprovalService(), []);
|
||||
// pageUrl формы (requestType.id совпадает с ним по конвенции портала, см.
|
||||
// data/requests.ts) → числовой RequestTypeId, нужный approval-route API.
|
||||
const requestTypeIdState = useRequestTypeId(context, requestType.id);
|
||||
const requestTypeId = requestTypeIdState.id;
|
||||
|
||||
// Открыта СВОЯ заявка на редактирование (черновик/возврат) — подгружаем содержимое и статус.
|
||||
useEffect(() => {
|
||||
if (!editId) {
|
||||
return;
|
||||
}
|
||||
let alive = true;
|
||||
loadClearanceRequest(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;
|
||||
}
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
setData((prev) => ({ ...prev, TerminationDate: prev.TerminationDate || today }));
|
||||
}, [editId]);
|
||||
|
||||
// Должность/подразделение больше не вводятся вручную — подтягиваются из
|
||||
// SharePoint User Profile (SPS-JobTitle/SPS-Department) при выборе сотрудника.
|
||||
// Если профиль не синхронизирован и поле там пусто — пока просто остаётся
|
||||
// пустым (TODO: фолбэк на справочник api.tnsu.kz, если это окажется частой
|
||||
// проблемой на практике).
|
||||
const handleEmployeeChange = (login: string): void => {
|
||||
setData((prev) => ({ ...prev, Employee: login, Position: '', Department: '' }));
|
||||
if (!login) {
|
||||
return;
|
||||
}
|
||||
approval
|
||||
.getProfileFields(login)
|
||||
.then((profile) => setData((prev) => ({ ...prev, Position: profile.jobTitle, Department: profile.department })))
|
||||
.catch(() => undefined);
|
||||
};
|
||||
|
||||
// Планируемый маршрут резолвится по e-mail УВОЛЬНЯЕМОГО (data.Employee, не
|
||||
// текущего пользователя — форму подаёт HR, а не сам увольняемый), а условие
|
||||
// «IsManager» на бэкенде вычисляется из поля Position — передаём его в
|
||||
// fieldValues, иначе шаг с этим условием получит предупреждение «должность не
|
||||
// передана» (см. TemplateRouteService.ResolveAsync в approval-route).
|
||||
const loadMatrix = useCallback(
|
||||
() =>
|
||||
editId
|
||||
? approval.getMatrixForRequest(editId)
|
||||
: getPlannedMatrix(context, requestTypeId as number, data.Employee, approval, 'Approval', null, [
|
||||
{ fieldName: 'Position', value: data.Position }
|
||||
]),
|
||||
[context, approval, editId, data.Employee, data.Position, requestTypeId]
|
||||
);
|
||||
const matrix = useMatrixEditor(
|
||||
loadMatrix,
|
||||
`${data.Employee}-${editId ?? 'new'}-${data.Position}`,
|
||||
!readOnly,
|
||||
!!editId || (!!data.Employee && !!requestTypeId),
|
||||
(login) => approval.getJobTitle(login)
|
||||
);
|
||||
|
||||
const isValid = !!(data.Employee && data.Position.trim() && data.TerminationDate);
|
||||
const validate = (): string | undefined => {
|
||||
if (!isValid) return 'Заполните обязательные поля: сотрудник, должность, дата расторжения договора.';
|
||||
if (requestTypeIdState.error) return `Не удалось определить тип заявки: ${requestTypeIdState.error}`;
|
||||
if (!requestTypeId) return 'Тип заявки ещё определяется — подождите немного и повторите.';
|
||||
return undefined;
|
||||
};
|
||||
|
||||
const toApprovers = (rows: typeof matrix.rows): IApproverToWrite[] =>
|
||||
rows.map((r) => ({
|
||||
email: r.email,
|
||||
position: r.position,
|
||||
allowReassign: r.allowReassign,
|
||||
order: r.order,
|
||||
// Транзитом из маршрута в строку списка: наследование бэкенд применил
|
||||
// при resolve, форма только переносит значения (см. IMatrixRow.slaHours).
|
||||
slaHours: r.slaHours,
|
||||
askOverdueReason: r.askOverdueReason
|
||||
}));
|
||||
|
||||
const save = (status: string): (() => Promise<void>) => async (): Promise<void> => {
|
||||
// validate()/validateSubmit() уже гарантировали requestTypeId к моменту вызова
|
||||
// (см. useRequestSubmit.run — валидирует ДО save), но TS этого через границу
|
||||
// замыкания не видит — локальный const и явная проверка снимают both проблемы.
|
||||
const rtId = requestTypeId;
|
||||
if (!rtId) {
|
||||
throw new Error('Тип заявки не определён — обновите страницу и повторите.');
|
||||
}
|
||||
const { id, code } = await saveClearanceRequest(requestId, rtId, 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: rtId,
|
||||
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="Категория: Отдел кадров"
|
||||
belowSubtitle={<InitiatorLine listTitle={DATA_LIST_TITLE} itemId={requestId} />}
|
||||
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 ClearanceForm;
|
||||
@@ -0,0 +1,46 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
// Полоса «вы можете заполнить свои отметки» для профильного согласующего
|
||||
// (КДП / отдел подбора) — см. approverRights.ts.
|
||||
.reviewBar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $sp-3;
|
||||
margin-bottom: $sp-4;
|
||||
padding: $sp-3 $sp-4;
|
||||
border: 1px solid $gold-300;
|
||||
border-radius: $r-md;
|
||||
background: $gold-50;
|
||||
}
|
||||
|
||||
.reviewHint {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: $fs-sm;
|
||||
color: $navy-800;
|
||||
}
|
||||
|
||||
.savedNote {
|
||||
font-size: $fs-sm;
|
||||
color: $green-600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.saveError {
|
||||
font-size: $fs-sm;
|
||||
color: $red-500;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useEffect, useMemo, useCallback } from 'react';
|
||||
import type { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
import styles from './ClearanceView.module.scss';
|
||||
import { Alert, Button, FormCard, InitiatorLine, FormModeProvider, PrintButton } from '../../shared/ui';
|
||||
import {
|
||||
ApproverService,
|
||||
DecisionPanel,
|
||||
StatusBadge,
|
||||
ApprovalMatrix,
|
||||
useMatrixEditor,
|
||||
notifyActiveStep,
|
||||
useRequestTypeId,
|
||||
APPROVAL_PHASE
|
||||
} from '../../shared/approval';
|
||||
import { IFormData, EMPTY_DATA, SetField } from './model';
|
||||
import { loadClearanceRequest } from './load';
|
||||
import {
|
||||
clearanceApprovalService,
|
||||
updateApproverFields,
|
||||
IApproverEditableFields,
|
||||
DATA_LIST_TITLE,
|
||||
APPROVAL_LIST_TITLE
|
||||
} from './submit';
|
||||
import { canEditHrRecordsFields, canEditParkingField } from './approverRights';
|
||||
import { RequestSection } from './sections/RequestSection';
|
||||
|
||||
interface IClearanceViewProps {
|
||||
context: WebPartContext;
|
||||
itemId: number;
|
||||
/** pageUrl формы — см. IApprovalViewProps в forms/viewRegistry.ts. */
|
||||
formKey: string;
|
||||
}
|
||||
|
||||
type SaveState = 'idle' | 'saving' | 'saved' | 'error';
|
||||
|
||||
// Обходной лист в режиме согласующего. Форма read-only, КРОМЕ отметок, которые
|
||||
// заполняет профильный отдел на своём шаге: КДП — карта СКУД и сумма обучения,
|
||||
// отдел подбора — парковочная карта (см. approverRights.ts).
|
||||
const ClearanceView: React.FC<IClearanceViewProps> = ({ context, itemId, formKey }) => {
|
||||
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 [hrRecordsEditable, setHrRecordsEditable] = useState<boolean>(false);
|
||||
const [parkingEditable, setParkingEditable] = useState<boolean>(false);
|
||||
const [saveState, setSaveState] = useState<SaveState>('idle');
|
||||
|
||||
const set: SetField = (key, value) => setData((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
const approval = useMemo(() => clearanceApprovalService(), []);
|
||||
const { id: requestTypeId } = useRequestTypeId(context, formKey);
|
||||
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);
|
||||
loadClearanceRequest(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]);
|
||||
|
||||
// Права на отметки — по должности ТЕКУЩЕГО активного шага пользователя.
|
||||
// isDelegator намеренно не даёт прав: делегировавший не решает за делегата
|
||||
// (см. DecisionPanel), значит и отметки за него ставить не должен.
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
approverService
|
||||
.getPendingRowForCurrentUser(itemId)
|
||||
.then((pending) => {
|
||||
if (!alive) return;
|
||||
const active = !!pending && !pending.isDelegator && pending.phase !== APPROVAL_PHASE.execution;
|
||||
setHrRecordsEditable(active && canEditHrRecordsFields(pending?.position));
|
||||
setParkingEditable(active && canEditParkingField(pending?.position));
|
||||
})
|
||||
.catch(() => {
|
||||
if (alive) {
|
||||
setHrRecordsEditable(false);
|
||||
setParkingEditable(false);
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
// decisionSeq: после решения/делегирования активный шаг меняется — права пересчитываем.
|
||||
}, [itemId, approverService, decisionSeq]);
|
||||
|
||||
// Пишем ТОЛЬКО те отметки, на которые у согласующего есть права: иначе он
|
||||
// затёр бы чужие поля значениями, которые видел у себя на экране.
|
||||
const saveApproverFields = useCallback((): Promise<void> => {
|
||||
const fields: Partial<IApproverEditableFields> = {};
|
||||
if (hrRecordsEditable) {
|
||||
fields.AccessCard = data.AccessCard;
|
||||
fields.TrainingAmount = data.TrainingAmount;
|
||||
}
|
||||
if (parkingEditable) {
|
||||
fields.ParkingCard = data.ParkingCard;
|
||||
}
|
||||
return updateApproverFields(itemId, fields);
|
||||
}, [itemId, hrRecordsEditable, parkingEditable, data.AccessCard, data.TrainingAmount, data.ParkingCard]);
|
||||
|
||||
const handleSaveFields = async (): Promise<void> => {
|
||||
setSaveState('saving');
|
||||
try {
|
||||
await saveApproverFields();
|
||||
setSaveState('saved');
|
||||
} catch {
|
||||
setSaveState('error');
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className={styles.state}>Загрузка заявки…</div>;
|
||||
}
|
||||
if (error) {
|
||||
return (
|
||||
<div className={styles.state}>
|
||||
<Alert variant="err">{error}</Alert>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const canEditAnything = hrRecordsEditable || parkingEditable;
|
||||
const sectionProps = { data, set, context, hrRecordsEditable, parkingEditable };
|
||||
|
||||
const notify = (): void => {
|
||||
// requestTypeId ещё не резолвился — решение уже применилось (строка списка
|
||||
// обновлена), просто нечего уведомлять на следующем шаге; не проваливаем
|
||||
// весь UI ради необязательного оповещения.
|
||||
if (!requestTypeId) return;
|
||||
notifyActiveStep(context, approval, itemId, {
|
||||
requestTypeId,
|
||||
dataListName: DATA_LIST_TITLE,
|
||||
approvalListName: APPROVAL_LIST_TITLE
|
||||
}).catch(() => undefined);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={`${styles.toolbar} rp-no-print`}>
|
||||
<PrintButton />
|
||||
</div>
|
||||
|
||||
{canEditAnything && (
|
||||
<div className={`${styles.reviewBar} rp-no-print`}>
|
||||
<span className={styles.reviewHint}>
|
||||
{hrRecordsEditable
|
||||
? 'Как согласующий вы можете отметить карту СКУД и указать сумму за обучение.'
|
||||
: 'Как согласующий вы можете отметить парковочную карту.'}
|
||||
</span>
|
||||
<Button variant="secondary" onClick={handleSaveFields} disabled={saveState === 'saving'}>
|
||||
Сохранить
|
||||
</Button>
|
||||
{saveState === 'saved' && <span className={styles.savedNote}>Сохранено</span>}
|
||||
{saveState === 'error' && <span className={styles.saveError}>Ошибка сохранения</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rp-print-root">
|
||||
<FormCard
|
||||
title="Обходной лист"
|
||||
subtitle={`№${code || itemId}`}
|
||||
belowSubtitle={<InitiatorLine listTitle={DATA_LIST_TITLE} itemId={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)}
|
||||
// Отметки сохраняются вместе с решением — иначе согласующий, забывший
|
||||
// нажать «Сохранить», согласовал бы заявку со старыми значениями.
|
||||
onBeforeDecide={canEditAnything ? saveApproverFields : undefined}
|
||||
onDecided={(newStatus) => {
|
||||
setStatus(newStatus);
|
||||
setDecisionSeq((n) => n + 1);
|
||||
notify();
|
||||
}}
|
||||
onDelegated={() => {
|
||||
setDecisionSeq((n) => n + 1);
|
||||
notify();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClearanceView;
|
||||
@@ -0,0 +1,48 @@
|
||||
# Обходной лист (clearance-form)
|
||||
|
||||
**Назначение:** оформление увольнения — обход подразделений (склад, СКУД, обучение) с отметками и согласованием.
|
||||
**Категория:** Отдел кадров
|
||||
**Списки SP:** «Обходной лист — данные» / «Обходной лист — согласование»
|
||||
**RequestTypeId (внешний API маршрутов):** не хардкодится — резолвится в рантайме по
|
||||
`pageUrl` («clearance-form») через `useRequestTypeId` (см. «Формы больше не хардкодят
|
||||
RequestTypeId» в `docs/forms.md`). Тип уже зарегистрирован в админке approval-route
|
||||
(список данных «Обходной лист — данные», список SharePoint `/sites/requests/Lists/List10`).
|
||||
|
||||
## Маршрут
|
||||
- Фазы: только согласование. Фазы исполнения нет — после согласования заявка
|
||||
просто получает статус «Согласовано» (как у «Заявки на отпуск»).
|
||||
- **Матрица редактируема заявителем** при новой заявке / черновике / возврате:
|
||||
`useMatrixEditor(editable = !readOnly)`. Заявитель (HR) может добавлять/удалять/
|
||||
переставлять согласующих поверх планируемого маршрута.
|
||||
- Условие `IsManager` в маршруте (если настроено в админке) резолвится по полю
|
||||
**Position ЭТОЙ ЗАЯВКИ** — «должность» увольняемого сотрудника, а не должность
|
||||
того, кто заполняет форму. Поэтому `Position` передаётся в `fieldValues` при
|
||||
планировании маршрута (`getPlannedMatrix(..., [{ fieldName: 'Position', ... }])`).
|
||||
Если поле пустое, шаг с этим условием попадёт в маршрут с предупреждением
|
||||
«должность не передана» (см. approval-route `TemplateRouteService.ResolveAsync`).
|
||||
|
||||
## Особое поведение
|
||||
- **Заявку подаёт не сам увольняемый, а HR/руководитель — за другого сотрудника.**
|
||||
Поле «Сотрудник» — People-picker (колонка User `Employee`), содержит e-mail
|
||||
**увольняемого**. Планируемый маршрут резолвится по этому e-mail
|
||||
(`getPlannedMatrix(..., data.Employee, ...)`), а не по e-mail текущего
|
||||
пользователя — как в «Заявке на отпуск».
|
||||
- **Автоподстановка должности при выборе сотрудника** — только отправная точка:
|
||||
подтягивается текущая должность из профиля (`SPS-JobTitle` через
|
||||
`approval.getJobTitle`), но её можно поправить вручную (например, если
|
||||
человек занимал руководящую позицию до перевода на другую).
|
||||
- **Да/нет-поля** («Парковочная карта», «Карта СКУД») — `Toggle`, колонки
|
||||
`ParkingCard`/`AccessCard` (Boolean).
|
||||
- **Сумма обучения** — `MoneyInput` (разделитель тысяч в UI, в списке — «сырое»
|
||||
число), колонка `TrainingAmount` (Number, 2 знака), поле необязательное.
|
||||
- **Дата расторжения договора** — обычный `input type=date`, без вычислений
|
||||
(в отличие от `EndDate` в «Заявке на отпуск», которая считается).
|
||||
- **Заголовок элемента** (`Title`): `Обходной лист — {ФИО} — дд.мм.гггг`.
|
||||
|
||||
## Секции формы
|
||||
RequestSection (сотрудник · должность · подразделение · дата расторжения · сумма обучения · парковочная карта · карта СКУД)
|
||||
|
||||
## Точки входа
|
||||
- rptype: `clearance-form`
|
||||
- Режим согласующего (просмотр): есть (`ClearanceView`)
|
||||
- «Создать на основе»: нет
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Кто из согласующих какие поля обходного листа может править на своём шаге.
|
||||
*
|
||||
* Инициатор (HR) отправляет заявку с пустыми отметками — фактические данные знают
|
||||
* профильные подразделения, каждое своё:
|
||||
* - отдел кадрового делопроизводства — карта СКУД и сумма за обучение;
|
||||
* - отдел подбора и адаптации персонала — парковочная карта.
|
||||
*
|
||||
* Должность берётся из строки согласования (колонка Title, см. IApprovalRow.position),
|
||||
* то есть та, что подставил маршрут при планировании. Сравнение — по ключевым словам,
|
||||
* а не по точной строке: формулировки в справочнике различаются («Начальник отдела…»,
|
||||
* «Руководитель отдела…»), а тратить на это отдельную настройку в админке смысла нет.
|
||||
*
|
||||
* ВАЖНО про требование управленческого маркера (начальник/руководитель): без него
|
||||
* права получили бы и рядовые сотрудники этих отделов («Специалист по направлению
|
||||
* кадрового делопроизводства» в справочнике есть), оказавшиеся согласующими на любом
|
||||
* другом шаге. Если понадобится отдать права и специалистам — убрать MANAGER_MARKERS
|
||||
* из проверки.
|
||||
*/
|
||||
|
||||
const MANAGER_MARKERS = ['начальник', 'руководитель'];
|
||||
|
||||
/** Отдел кадрового делопроизводства (КДП) — правит карту СКУД и сумму обучения. */
|
||||
const HR_RECORDS_MARKERS = ['кадров', 'делопроизводств'];
|
||||
|
||||
/** Отдел подбора и адаптации персонала — правит парковочную карту. */
|
||||
const RECRUITING_MARKERS = ['подбор', 'адаптац'];
|
||||
|
||||
function normalize(position: string | undefined): string {
|
||||
return (position || '').toLowerCase();
|
||||
}
|
||||
|
||||
function matchesAll(position: string, markers: string[]): boolean {
|
||||
return markers.every((m) => position.indexOf(m) !== -1);
|
||||
}
|
||||
|
||||
function isManagerOf(position: string | undefined, departmentMarkers: string[]): boolean {
|
||||
const normalized = normalize(position);
|
||||
if (!normalized) return false;
|
||||
return (
|
||||
MANAGER_MARKERS.some((m) => normalized.indexOf(m) !== -1) && matchesAll(normalized, departmentMarkers)
|
||||
);
|
||||
}
|
||||
|
||||
/** Карта СКУД и сумма обучения — начальник отдела кадрового делопроизводства. */
|
||||
export function canEditHrRecordsFields(position: string | undefined): boolean {
|
||||
return isManagerOf(position, HR_RECORDS_MARKERS);
|
||||
}
|
||||
|
||||
/** Парковочная карта — начальник отдела подбора и адаптации персонала. */
|
||||
export function canEditParkingField(position: string | undefined): boolean {
|
||||
return isManagerOf(position, RECRUITING_MARKERS);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
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 loadClearanceRequest(itemId: number): Promise<ILoadedRequest> {
|
||||
const item = (await getSP()
|
||||
.web.lists.getByTitle(LIST_TITLE)
|
||||
.items.getById(itemId)
|
||||
.select(
|
||||
'Id',
|
||||
'Position',
|
||||
'Department',
|
||||
'TerminationDate',
|
||||
'ParkingCard',
|
||||
'AccessCard',
|
||||
'TrainingAmount',
|
||||
'RequestStatus',
|
||||
'RequestUniqueCode',
|
||||
'Employee/Title',
|
||||
'Employee/EMail'
|
||||
)
|
||||
.expand('Employee')()) as Record<string, unknown>;
|
||||
|
||||
const employee = item.Employee as { Title?: string; EMail?: string } | undefined;
|
||||
const termination = (item.TerminationDate as string) || '';
|
||||
const amount = item.TrainingAmount;
|
||||
|
||||
const data: IFormData = {
|
||||
...EMPTY_DATA,
|
||||
Employee: employee?.EMail || '',
|
||||
Position: (item.Position as string) || '',
|
||||
Department: (item.Department as string) || '',
|
||||
TerminationDate: termination.slice(0, 10), // ISO → YYYY-MM-DD для input type=date
|
||||
ParkingCard: !!item.ParkingCard,
|
||||
AccessCard: !!item.AccessCard,
|
||||
TrainingAmount: amount === null || amount === undefined ? '' : String(amount)
|
||||
};
|
||||
|
||||
return {
|
||||
data,
|
||||
employeeName: employee?.Title || '',
|
||||
status: (item.RequestStatus as string) || '',
|
||||
code: (item.RequestUniqueCode as string) || ''
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
import { WebPartContext } from '@microsoft/sp-webpart-base';
|
||||
|
||||
/**
|
||||
* Данные формы «Обходной лист». Ключи по возможности = internalName колонок
|
||||
* SP-списка «Обходной лист — данные». Employee хранит e-mail УВОЛЬНЯЕМОГО
|
||||
* сотрудника (то, что отдаёт PeopleField) — заявку подаёт HR/руководитель,
|
||||
* а не сам увольняемый, поэтому и маршрут согласования резолвится по email
|
||||
* из этого поля, а не по email инициатора (как в «Заявке на отпуск»).
|
||||
*/
|
||||
export interface IFormData {
|
||||
/** E-mail увольняемого сотрудника (People). Пусто = не выбран. */
|
||||
Employee: string;
|
||||
Position: string;
|
||||
Department: string;
|
||||
/** ISO YYYY-MM-DD (input type=date). */
|
||||
TerminationDate: string;
|
||||
ParkingCard: boolean;
|
||||
AccessCard: boolean;
|
||||
/** Сумма обучения — «сырые» цифры без пробелов (см. MoneyInput). Пусто = не указана. */
|
||||
TrainingAmount: 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: '',
|
||||
Department: '',
|
||||
TerminationDate: '',
|
||||
ParkingCard: false,
|
||||
AccessCard: false,
|
||||
TrainingAmount: ''
|
||||
};
|
||||
|
||||
/** Плейсхолдер для поля выбора сотрудника. */
|
||||
export const EMPLOYEE_PLACEHOLDER = 'Начните вводить Ф.И.О. увольняемого сотрудника…';
|
||||
@@ -0,0 +1,88 @@
|
||||
import * as React from 'react';
|
||||
import { CollapseSection, FormField, TextInput, MoneyInput, Toggle, PeopleField } from '../../../shared/ui';
|
||||
import { ISectionProps, EMPLOYEE_PLACEHOLDER } from '../model';
|
||||
|
||||
// Должность/подразделение подтягиваются автоматически при выборе сотрудника
|
||||
// (см. ClearanceForm.handleEmployeeChange — SharePoint User Profile) —
|
||||
// свободный ввод здесь намеренно убран, чтобы не расходиться с профилем.
|
||||
const NOOP = (): void => undefined;
|
||||
|
||||
interface IRequestSectionProps extends ISectionProps {
|
||||
/** Согласующий из КДП правит карту СКУД и сумму обучения даже в режиме просмотра. */
|
||||
hrRecordsEditable?: boolean;
|
||||
/** Согласующий из отдела подбора правит парковочную карту. */
|
||||
parkingEditable?: boolean;
|
||||
}
|
||||
|
||||
/** Единственная секция формы «Обходной лист»: увольняемый, должность, подразделение, даты, карты, обучение. */
|
||||
export const RequestSection: React.FC<IRequestSectionProps> = ({
|
||||
data,
|
||||
set,
|
||||
context,
|
||||
onEmployeeChange,
|
||||
hrRecordsEditable,
|
||||
parkingEditable
|
||||
}) => (
|
||||
<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={NOOP}
|
||||
readOnly
|
||||
placeholder="Подставится автоматически по выбранному сотруднику"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Подразделение" htmlFor="Department">
|
||||
<TextInput
|
||||
id="Department"
|
||||
value={data.Department}
|
||||
onChange={NOOP}
|
||||
readOnly
|
||||
placeholder="Подставится автоматически по выбранному сотруднику"
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Дата расторжения договора" htmlFor="TerminationDate" required>
|
||||
<TextInput
|
||||
id="TerminationDate"
|
||||
type="date"
|
||||
value={data.TerminationDate}
|
||||
onChange={(v) => set('TerminationDate', v)}
|
||||
/>
|
||||
</FormField>
|
||||
{/* Явный readOnly={false} перебивает read-only контекст просмотра (профильный
|
||||
согласующий правит своё поле); undefined — обычное поведение из FormMode. */}
|
||||
<FormField label="Обучение: сумма" htmlFor="TrainingAmount">
|
||||
<MoneyInput
|
||||
id="TrainingAmount"
|
||||
value={data.TrainingAmount}
|
||||
onChange={(v) => set('TrainingAmount', v)}
|
||||
readOnly={hrRecordsEditable ? false : undefined}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Парковочная карта">
|
||||
<Toggle
|
||||
checked={data.ParkingCard}
|
||||
onChange={(v) => set('ParkingCard', v)}
|
||||
onLabel="Да"
|
||||
readOnly={parkingEditable ? false : undefined}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Карта СКУД">
|
||||
<Toggle
|
||||
checked={data.AccessCard}
|
||||
onChange={(v) => set('AccessCard', v)}
|
||||
onLabel="Да"
|
||||
readOnly={hrRecordsEditable ? false : undefined}
|
||||
/>
|
||||
</FormField>
|
||||
</CollapseSection>
|
||||
);
|
||||
@@ -0,0 +1,112 @@
|
||||
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 = 'Обходной лист — согласование';
|
||||
|
||||
/** Экземпляр сервиса списка согласования этой формы. */
|
||||
export function clearanceApprovalService(): ApprovalListService {
|
||||
return new ApprovalListService(APPROVAL_LIST_TITLE);
|
||||
}
|
||||
|
||||
/** Отметки, которые проставляет не инициатор, а профильный согласующий (см. approverRights.ts). */
|
||||
export interface IApproverEditableFields {
|
||||
AccessCard: boolean;
|
||||
TrainingAmount: string;
|
||||
ParkingCard: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Обновить только те отметки, что заполняет согласующий на своём шаге.
|
||||
* Пишутся ровно переданные поля: у каждого отдела свой набор прав, и лишние
|
||||
* ключи затёрли бы чужие отметки значениями из формы этого согласующего.
|
||||
*/
|
||||
export async function updateApproverFields(
|
||||
id: number,
|
||||
fields: Partial<IApproverEditableFields>
|
||||
): Promise<void> {
|
||||
const item: Record<string, unknown> = {};
|
||||
if (fields.AccessCard !== undefined) item.AccessCard = fields.AccessCard;
|
||||
if (fields.ParkingCard !== undefined) item.ParkingCard = fields.ParkingCard;
|
||||
if (fields.TrainingAmount !== undefined) {
|
||||
const amount = Number(fields.TrainingAmount);
|
||||
item.TrainingAmount =
|
||||
Number.isFinite(amount) && fields.TrainingAmount.trim() !== '' ? amount : null;
|
||||
}
|
||||
if (Object.keys(item).length === 0) return;
|
||||
await getSP().web.lists.getByTitle(DATA_LIST_TITLE).items.getById(id).update(item);
|
||||
}
|
||||
|
||||
/** 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}`;
|
||||
}
|
||||
|
||||
/** Осмысленный заголовок элемента (системная колонка Title). */
|
||||
function buildTitle(employeeName: string): string {
|
||||
const now = new Date();
|
||||
return `Обходной лист — ${employeeName} — ${pad2(now.getDate())}.${pad2(now.getMonth() + 1)}.${now.getFullYear()}`;
|
||||
}
|
||||
|
||||
/** Поля элемента списка данных из модели формы (+ Employee по Id). */
|
||||
function buildItem(data: IFormData, status: string, employeeId: number, employeeName: string): Record<string, unknown> {
|
||||
const amount = Number(data.TrainingAmount);
|
||||
return {
|
||||
Title: buildTitle(employeeName),
|
||||
RequestStatus: status,
|
||||
EmployeeId: employeeId,
|
||||
Position: data.Position || null,
|
||||
Department: data.Department || null,
|
||||
TerminationDate: data.TerminationDate || null,
|
||||
ParkingCard: data.ParkingCard,
|
||||
AccessCard: data.AccessCard,
|
||||
TrainingAmount: Number.isFinite(amount) && data.TrainingAmount.trim() !== '' ? amount : null
|
||||
};
|
||||
}
|
||||
|
||||
export interface ISaveResult {
|
||||
id: number;
|
||||
/** Задан только при создании новой заявки (существующий код не меняется). */
|
||||
code?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Сохранить обходной лист: содержимое + маршрут согласования.
|
||||
* existingId задан → обновляем ту же запись (черновик/доработка), иначе создаём новую.
|
||||
* Фазы исполнения у обходного листа нет — writeRoute вызывается с пустым списком исполнителей.
|
||||
* Возвращает Id заявки (+ код при создании).
|
||||
*/
|
||||
export async function saveClearanceRequest(
|
||||
existingId: number | undefined,
|
||||
requestTypeId: number,
|
||||
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(requestTypeId, id, new Date());
|
||||
await list.items.getById(id).update({ RequestUniqueCode: code });
|
||||
}
|
||||
|
||||
await writeRoute(clearanceApprovalService(), id, approvers, [], status);
|
||||
return { id, code };
|
||||
}
|
||||
Reference in New Issue
Block a user