переработано переназначение

src/webparts/requestPortal/shared/approval/ui/DecisionPanel.module.scss

@@ -31,6 +31,92 @@
   border-top: 1px solid $gray-200;
 }
 
+// Выбранные, но ещё не записанные делеганты. Список нумерованный: номер — это
+// очерёдность согласования, а не просто маркер, поэтому он рисуется явно, а не
+// через list-style (его вид не настраивается достаточно предсказуемо).
+.pickedList {
+  list-style: none;
+  margin: 12px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.pickedItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 1px solid $gray-200;
+  border-radius: $r-sm;
+  background: $gray-50;
+}
+
+.pickedOrder {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: $gold-500;
+  color: $navy-950;
+  font-size: $fs-caption;
+  font-weight: 600;
+}
+
+.pickedName {
+  flex: 1 1 auto;
+  min-width: 0; // иначе длинный email распирает строку и ломает выравнивание кнопки
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  font-size: $fs-sm;
+  color: $gray-900;
+}
+
+.pickedEmail {
+  font-size: $fs-caption;
+  color: $gray-500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pickedRemove {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  border-radius: $r-sm;
+  background: transparent;
+  color: $gray-500;
+  cursor: pointer;
+  transition: .16s;
+
+  &:hover:not(:disabled) {
+    background: $white;
+    color: $red-500;
+  }
+
+  &:disabled {
+    opacity: .4;
+    cursor: default;
+  }
+}
+
+.delegateHint {
+  margin-top: 10px;
+  font-size: $fs-caption;
+  color: $gray-500;
+  line-height: 1.45;
+}
+
 .state {
   margin-top: 16px;
   padding: 24px;

src/webparts/requestPortal/shared/approval/ui/DecisionPanel.tsx

@@ -39,8 +39,11 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
   const [comment, setComment] = useState<string>('');
   const [submitting, setSubmitting] = useState<boolean>(false);
   const [resultStatus, setResultStatus] = useState<string | undefined>(undefined);
-  const [delegated, setDelegated] = useState<boolean>(false);
+  const [delegated, setDelegated] = useState<number>(0);
   const [showDelegate, setShowDelegate] = useState<boolean>(false);
+  // Выбранные делеганты копятся здесь и пишутся одной пачкой по кнопке — иначе
+  // добавить второго человека можно было бы только переоткрыв заявку.
+  const [picked, setPicked] = useState<ISiteUser[]>([]);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
@@ -91,15 +94,30 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
     }
   }
 
-  async function handleDelegate(user: ISiteUser): Promise<void> {
-    if (!pendingRow) {
+  // Выбор в пикере только копит список; запись — в handleDelegate по кнопке.
+  // Дубли отсекаем по email: одного человека дважды в маршрут ставить незачем.
+  function pickDelegate(user: ISiteUser): void {
+    setPicked((prev) => (prev.some((p) => p.email === user.email) ? prev : [...prev, user]));
+  }
+
+  function unpickDelegate(index: number): void {
+    setPicked((prev) => prev.filter((_, i) => i !== index));
+  }
+
+  function cancelDelegate(): void {
+    setPicked([]);
+    setShowDelegate(false);
+  }
+
+  async function handleDelegate(): Promise<void> {
+    if (!pendingRow || picked.length === 0) {
       return;
     }
     setError(null);
     setSubmitting(true);
     try {
-      await service.delegate(requestId, pendingRow.id, user);
-      setDelegated(true);
+      await service.delegate(requestId, pendingRow.id, picked);
+      setDelegated(picked.length);
       setSubmitting(false);
       if (onDelegated) {
         onDelegated();
@@ -123,10 +141,15 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
     return null;
   }
 
-  if (delegated) {
+  if (delegated > 0) {
     return (
       <div className={styles.panel}>
-        <Alert variant="ok">Шаг переназначен — заявка передана выбранному сотруднику.</Alert>
+        <Alert variant="ok">
+          {delegated === 1
+            ? 'Согласующий добавлен перед вами — он рассмотрит заявку раньше вас. Ваш шаг остаётся в маршруте.'
+            : `Согласующих добавлено: ${delegated}. Они рассмотрят заявку раньше вас, в порядке добавления. ` +
+              'Ваш шаг остаётся в маршруте.'}
+        </Alert>
       </div>
     );
   }
@@ -146,13 +169,55 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
   const delegateBlock = canDelegate ? (
     <div className={styles.delegate}>
       {showDelegate ? (
-        <FormField label="Кому переназначить">
-          <UserPicker
-            search={search}
-            onPick={handleDelegate}
-            placeholder="Начните вводить ФИО сотрудника…"
-          />
-        </FormField>
+        <>
+          <FormField label="Кого добавить перед собой">
+            <UserPicker
+              search={search}
+              onPick={pickDelegate}
+              placeholder="Начните вводить ФИО сотрудника…"
+            />
+          </FormField>
+          {picked.length > 0 && (
+            <ul className={styles.pickedList}>
+              {picked.map((u, i) => (
+                <li className={styles.pickedItem} key={u.email || u.id}>
+                  <span className={styles.pickedOrder}>{i + 1}</span>
+                  <span className={styles.pickedName}>
+                    {u.name}
+                    {u.email && <span className={styles.pickedEmail}>{u.email}</span>}
+                  </span>
+                  <button
+                    type="button"
+                    className={styles.pickedRemove}
+                    disabled={submitting}
+                    aria-label={`Убрать ${u.name}`}
+                    onClick={() => unpickDelegate(i)}
+                  >
+                    <Icon name="close" size="sm" />
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+          <div className={styles.delegateHint}>
+            {picked.length === 0
+              ? 'Выберите одного или нескольких сотрудников. Они согласуют заявку до вас, в порядке добавления; ваш шаг остаётся в маршруте.'
+              : 'Согласуют до вас в этом порядке. Ваш шаг остаётся в маршруте.'}
+          </div>
+          <div className={styles.actions}>
+            <Button
+              variant="accent"
+              disabled={submitting || picked.length === 0}
+              onClick={handleDelegate}
+            >
+              <Icon name="people" size="sm" />
+              {picked.length > 1 ? `Добавить (${picked.length})` : 'Добавить'}
+            </Button>
+            <Button variant="ghost" disabled={submitting} onClick={cancelDelegate}>
+              Отмена
+            </Button>
+          </div>
+        </>
       ) : (
         <Button variant="secondary" disabled={submitting} onClick={() => setShowDelegate(true)}>
           <Icon name="people" size="sm" />
@@ -169,8 +234,9 @@ export const DecisionPanel: React.FC<IDecisionPanelProps> = ({
       <div className={styles.panel}>
         <div className={styles.title}>{isExecution ? 'Исполнение' : 'Ваше решение'}</div>
         <Alert variant="warn">
-          Этот шаг сейчас у сотрудника, которому вы его переназначили. Если он недоступен —
-          переназначьте шаг ещё раз.
+          Заявку сейчас рассматривает сотрудник, которого вы добавили перед собой. Ваш шаг никуда
+          не делся — он вернётся к вам, когда очередь дойдёт. Если добавленный сотрудник
+          недоступен, можно добавить ещё.
         </Alert>
         {error && <Alert variant="err">{error}</Alert>}
         {delegateBlock}