#Действие JS

#Введение

Действие JS используется для выполнения JavaScript при нажатии кнопки, позволяя настраивать любое бизнес-поведение. Его можно применять в панелях инструментов форм, панелях инструментов таблиц (на уровне коллекции), строках таблиц (на уровне записи) и других местах для выполнения таких операций, как валидация, отображение уведомлений, вызовы API, открытие всплывающих окон/боковых панелей и обновление данных.

#API контекста выполнения (часто используемые)

• ctx.api.request(options): Выполняет HTTP-запрос.

• ctx.openView(viewUid, options): Открывает настроенное представление (боковую панель/диалоговое окно/страницу).

• ctx.message / ctx.notification: Глобальные сообщения и уведомления.

• ctx.t() / ctx.i18n.t(): Интернационализация.

• ctx.resource: Ресурс данных для контекста уровня коллекции (например, панель инструментов таблицы), включающий такие методы, как getSelectedRows() и refresh().

• ctx.record: Текущая запись строки для контекста уровня записи (например, кнопка в строке таблицы).

• ctx.form: Экземпляр AntD Form для контекста уровня формы (например, кнопка на панели инструментов формы).

• ctx.collection: Метаинформация текущей коллекции.

• Редактор кода поддерживает фрагменты Snippets и предварительное выполнение Run (см. ниже).

• ctx.requireAsync(url): Асинхронно загружает библиотеку AMD/UMD по URL.

• ctx.importAsync(url): Динамически импортирует модуль ESM по URL.

Фактически доступные переменные могут отличаться в зависимости от расположения кнопки. Выше представлен обзор общих возможностей.

#Редактор и фрагменты кода

• Snippets: Открывает список встроенных фрагментов кода, которые можно найти и вставить в текущую позицию курсора одним щелчком.
• Run: Непосредственно выполняет текущий код и выводит логи выполнения на нижнюю панель Logs; поддерживает console.log/info/warn/error и подсветку ошибок для удобства их обнаружения.

• Вы можете использовать AI-сотрудников для генерации/изменения скриптов: AI-сотрудник · Натан: Фронтенд-инженер

#Распространенные сценарии использования (упрощенные примеры)

#1) API-запрос и уведомление

const resp = await ctx.api.request({ url: 'users:list', method: 'get', params: { pageSize: 10 } });
ctx.message.success(ctx.t('Запрос завершен'));
console.log(ctx.t('Данные ответа:'), resp?.data);

#2) Кнопка коллекции: Валидация выбора и обработка

const rows = ctx.resource?.getSelectedRows?.() || [];
if (!rows.length) {
  ctx.message.warning(ctx.t('Пожалуйста, выберите записи'));
  return;
}
// TODO: Выполнить бизнес-логику…
ctx.message.success(ctx.t('Выбрано {n} элементов', { n: rows.length }));

#3) Кнопка записи: Чтение текущей записи строки

if (!ctx.record) {
  ctx.message.error(ctx.t('Нет записи'));
} else {
  ctx.message.success(ctx.t('ID записи: {id}', { id: ctx.record.id }))
}

#4) Открытие представления (боковая панель/диалоговое окно)

const popupUid = ctx.model.uid + '-open'; // Привязка к текущей кнопке для стабильности
await ctx.openView(popupUid, { mode: 'drawer', title: ctx.t('Подробности'), size: 'large' });

#5) Обновление данных после отправки

// Общее обновление: приоритет отдается ресурсам таблицы/списка, затем ресурсу блока, содержащего форму.
if (ctx.resource?.refresh) await ctx.resource.refresh();
else if (ctx.blockModel?.resource?.refresh) await ctx.blockModel.resource.refresh();

#Важные замечания

• Идемпотентность действий: Чтобы избежать многократной отправки из-за повторных нажатий, вы можете добавить флаг состояния в логику или отключить кнопку.
• Обработка ошибок: Добавляйте блоки try/catch для вызовов API и предоставляйте пользователю соответствующие уведомления.
• Взаимодействие представлений: При открытии всплывающего окна/боковой панели с помощью ctx.openView рекомендуется явно передавать параметры и, при необходимости, активно обновлять родительский ресурс после успешной отправки.

#Связанные документы

• Переменные и контекст
• Правила связывания
• Представления и всплывающие окна