# Глава 4: Плагины задач и комментариев

<iframe width="800" height="436" src="https://player.bilibili.com/player.html?isOutside=true&aid=113532393752067&bvid=BV16XB2YqERC&cid=26937593203&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe

## Возвращаясь к предыдущей главе

Помните задание из прошлой главы? Нам нужно было настроить поля **Статус** и **Вложение** в таблице задач и отобразить их в списке задач. Без лишних слов раскрываем ответ!

1. **Настройка поля «Статус»**:
   - Выберите тип поля [**Выпадающий список (одиночный выбор)**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/choices/select), укажите варианты: **Не начато, В работе, На проверке, Выполнено, Отменено, В архиве**. Цвета настройте на свой вкус — добавьте задачам красок!

![Настройка поля статуса](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162341275.png)

2. **Настройка поля «Вложение»**:
   - Создайте поле [**Вложение**](https://docs-cn.nocobase.com/handbook/file-manager/field-attachment), задайте ему имя, например «Вложение», и подтвердите — готово.

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162343470.png)

3. **Показ полей «Создатель» и «Статус» в списке задач**:
   - В табличном блоке отметьте поля «Создатель», «Статус» и «Вложение», чтобы список задач стал информативнее.

![Поля в списке задач](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162344570.png)

4. **Отображение полей в формах «Добавить» и «Редактировать»**:
   - В модальной форме не забудьте отметить поля «Статус» и «Вложение», чтобы они были доступны при добавлении и редактировании задачи.

![Поля в форме](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162345053.gif)

Получилось здорово, правда? Повторите эти действия несколько раз — и Вы постепенно освоите ключевые приёмы работы с NocoBase. Каждое действие закладывает прочный фундамент для последующего управления задачами. Идём дальше!

---

## 4.1 Содержимое задач и комментарии: интерактивное управление задачами

К этому моменту Ваша система может хранить базовую информацию о задачах. Однако, как Вы понимаете, управление задачами — это не только пара строк описания. Иногда нужно более насыщенное содержимое и возможность общения участников в реальном времени.

### 4.1.1 Markdown(Vditor): обогащаем содержимое задач

Возможно, Вы уже заметили в NocoBase редакторы [**Богатый текст**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/media/rich-text) и [**Markdown**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/media/markdown), но их возможностей может оказаться недостаточно.
Возможности редактора богатого текста ограничены, а Markdown-редактор хорош, но не поддерживает предпросмотр в реальном времени.

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162346447.png)

Существует ли редактор, который и предпросмотр в реальном времени поддерживает, и обладает богатой функциональностью? Да! [**Markdown(Vditor)**](https://docs-cn.nocobase.com/handbook/field-markdown-vditor) — самый мощный текстовый редактор в NocoBase: поддерживает предпросмотр в реальном времени, загрузку изображений и даже запись звука. Он встроен в систему и полностью бесплатен!

> **О плагинах:** Plugin — одна из ключевых возможностей NocoBase, позволяющая добавлять собственный функционал или интегрировать сторонние сервисы под нужды проекта.
> С их помощью можно реализовать удобные или неожиданные интеграции, что упрощает Вашу работу и разработку.

Сейчас мы шаг за шагом включим этот мощный редактор. Помните Менеджер плагинов? Точно — он там и находится.

> **Markdown(Vditor)**: используется для хранения Markdown и рендерится редактором Vditor. Поддерживает стандартный синтаксис Markdown — списки, код, цитаты и т. п., — а также загрузку изображений, запись аудио и т. д. Обеспечивает мгновенный рендеринг в стиле WYSIWYG.

1. **Включение плагина Markdown(Vditor)**:
   - Откройте **Менеджер плагинов** в правом верхнем углу, введите в поиске «markdown» и включите [**Markdown(Vditor)**](https://docs-cn.nocobase.com/handbook/field-markdown-vditor). Не пугайтесь короткой перезагрузки страницы — через несколько секунд всё вернётся в норму.

![Включение плагина Markdown](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162348237.png)

2. **Создание поля Markdown**:

   - Вернитесь в таблицу задач, нажмите «Создать поле» — в списке появился наш «Markdown Pro Plus»!

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162349275.png)

- Дайте ему имя, например «Детали задачи (task_detail)», и отметьте все доступные функции.

3. Возможно, Вы заметили опцию «Таблица данных файлов». Если её не выбрать — пострадает ли работа с файлами? Не волнуйтесь: файлы будут сохраняться в хранилище по умолчанию, можете спокойно использовать поле.

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162350389.gif)

4. **Тестирование поля Markdown**:
   - Вернитесь на страницу управления задачами и напишите свой первый текст в Markdown! Попробуйте вставить изображение или загрузить файл — впечатляюще, не правда ли?

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162351380.gif)

Таблица задач становится всё богаче! Каждый шаг расширяет возможности системы. Теперь посмотрим, как настроить расположение полей, чтобы UI выглядел аккуратнее.

### 4.1.2 Настройка расположения полей

С увеличением количества полей макет страницы может выглядеть беспорядочно — но гибкость NocoBase позволяет легко его перестраивать.

**Перемещение поля**:

- Наведите курсор на иконку-крест в правом верхнем углу поля, зажмите её и перетащите поле в нужное место. Отпустите — готово! Попробуйте: страница сразу станет аккуратнее.

![Перемещение поля](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162352077.gif)

После таких настроек макет лучше соответствует Вашим потребностям. Теперь добавим к задачам функцию комментариев, чтобы участники могли удобнее взаимодействовать.

## 4.2 Комментарии

Только описаний задач недостаточно — нужно, чтобы команда могла оставлять комментарии, обсуждать вопросы и фиксировать обратную связь. Приступим к реализации.

### 4.2.1 Способ 1: использовать плагин комментариев

#### 4.2.1.1 Установка плагина комментариев

> **Плагин комментариев (коммерческий):** предоставляет шаблон таблицы комментариев и блок, позволяющий добавлять комментарии к данным любой таблицы.
>
> Внимание: при добавлении комментариев нужно использовать связь по полю отношения с целевой таблицей, чтобы избежать конфликтов данных.

В [**Менеджере плагинов**](https://docs-cn.nocobase.com/handbook/plugin-manager) загрузите и включите **Плагин комментариев**. После активации в источнике данных появится новый пункт «Таблица комментариев».
Нажмите «Добавить» > «Загрузить плагин» > перетащите архив > подтвердите.
Найдите «Comments» — плагин уже доступен! Включите его, перейдите в источник данных — пункт «Таблица комментариев» появился, установка выполнена!

![Установка плагина комментариев](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162353550.gif)

#### 4.2.1.2 Создание таблицы комментариев

Перейдите в источник данных и создайте таблицу комментариев — **Таблица комментариев (Comments)**.

#### 4.2.1.3 Связь между таблицей комментариев и таблицей задач

Мы создали **Таблицу комментариев (Comments)**. Возможно, Вы подумаете: можно ли сразу нарисовать на странице блок комментариев? Не торопитесь, давайте подумаем: **у каждой задачи свой раздел комментариев**, и связь между комментариями и задачами должна быть **многие-к-одному**. Как же связать их?

**Здесь нам нужно [«поле отношения»](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations)!**

NocoBase позволяет с помощью полей отношений выстраивать связи между таблицами на уровне данных, словно мосты, соединяющие связанные данные.

![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162355370.gif)

**Почему именно многие-к-одному?**

Почему мы выбираем связь [**многие-к-одному**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations/m2o), а не [**один-ко-многим**](https://docs-cn.nocobase.com/handbook/data-modeling/collection-fields/associations/o2m) или другую? Вспомните: **у одной задачи много комментариев**, поэтому несколько комментариев могут указывать на одну задачу. В этом случае в таблице комментариев нужно создать поле **многие-к-одному**, ссылающееся на задачу в таблице задач.

> Сообразительный читатель уже подумал:
> Если связь комментариев и задач — многие-к-одному, нельзя ли в таблице задач завести поле **один-ко-многим**, указывающее на таблицу комментариев?
> **Совершенно верно, поздравляем!** Один-ко-многим и многие-к-одному — взаимно обратные связи. В таблице задач можно создать поле один-ко-многим, ссылающееся на комментарии. Молодец!

#### 4.2.1.4 Настройка поля отношения многие-к-одному

Теперь создадим в таблице комментариев поле отношения многие-к-одному, связанное с таблицей задач. Назовём его **Принадлежит задаче (belong_task)**. При настройке важно учесть несколько ключевых параметров:

1. **Исходная таблица**: откуда строим отношение? Здесь это **Таблица комментариев**.
2. **Целевая таблица**: с какой таблицей выстраиваем связь? Здесь — **Таблица задач**.

> **Внешний ключ и идентификатор поля целевой таблицы — пример:**
> Дальше — самое важное: **внешний ключ** и **идентификатор поля целевой таблицы**.
> Звучит сложно? Не пугайтесь, разберём на детальном примере.
>
> **Представьте сценарий**: у Вас на руках множество ведомостей с результатами вступительных экзаменов, и нужно сопоставить каждую ведомость соответствующему студенту. Как это сделать?
> На ведомости такие данные:
>
> - **Имя**: Чжан Сань
> - **Класс**: 15-й класс старшей школы (выпускной)
> - **Номер экзаменационного билета**: 202300000001
> - **Номер удостоверения личности**: 111111111111
>   Допустим, Вы хотите найти Чжан Саня по **имени** и **классу**. Но в школе много однофамильцев — только в этом классе **20 студентов с именем Чжан Сань**! По имени и классу однозначно понять, какой именно Чжан Сань нам нужен, не получится.
>   **Нужен более уникальный идентификатор**. Например, **номер экзаменационного билета** уникален для каждого студента: по нему можно точно найти владельца ведомости. Например, Вы отправили запрос с номером 202300000001 — школа отвечает: «Эта ведомость принадлежит Чжан Саню, тому самому, который сидит в 3-м ряду нашего 15-го выпускного класса в очках!»
>   **По той же логике** в сценарии с комментариями: возьмём в таблице задач уникальное поле (например, **id**) и сохраним его в комментарии — так мы определим, к какой задаче относится каждый комментарий.
>   В этом и состоит ключевая идея связи многие-к-одному — **внешний ключ**. Всё просто, верно?

В таблице комментариев сохраним этот уникальный id задачи в поле, которое назовём **task_id**. Теперь по task_id комментарий и задача связаны.

#### 4.2.1.5 Стратегии обработки внешнего ключа при удалении

Настроив связь многие-к-одному в NocoBase, нужно подумать, как обрабатывать комментарии при удалении задачи. Возможны варианты:

- **CASCADE**: при удалении задачи будут удалены все связанные комментарии.
- **SET NULL** (по умолчанию): задача удаляется, но комментарии остаются, а внешний ключ обнуляется.
- **RESTRICT и NO ACTION**: пока у задачи есть связанные комментарии, система не позволит её удалить — это защищает комментарии от потери.

#### 4.2.1.7 Создание обратной связи в таблице задач

Наконец, поставим галочку **«Создавать обратное поле в целевой таблице»** — это позволит просматривать все связанные комментарии прямо из задачи, что упростит работу с данными.

В NocoBase место хранения поля отношения определяет способ получения данных. Чтобы видеть комментарии в таблице задач, нам нужно поле **один-ко-многим**, связывающее задачу с таблицей комментариев.

При следующем открытии таблицы задач Вы увидите автоматически созданное поле комментариев с пометкой «один-ко-многим» — теперь можно удобно просматривать и управлять комментариями!

## 4.3 Сборка страницы

### 4.3.1 Подключение таблицы комментариев

Долгожданный момент: возвращаемся в окно редактирования задачи, создаём блок таблицы комментариев и отмечаем нужные функции — готово!

![demov3N-16.gif](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162357118.gif)

### 4.3.2 Настройка страницы

Немного облагородим макет: наведите курсор на правый верхний угол кнопки «Редактировать» и выберите более широкое модальное окно. Затем перетащите блок комментариев в правую часть окна — отлично!

![demov3N-17.gif](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412162358300.gif)

Кто-то из читателей уже мог подумать: «Я тоже хочу комментарии!» Не волнуйтесь, для Вас есть и второй, бесплатный вариант.

### 4.2.2 Способ 2: собственная таблица комментариев

Если плагин комментариев Вы не покупали, можно реализовать аналогичную функциональность через обычную таблицу.

1. **Создание таблицы комментариев**:

   - Создайте **Таблицу комментариев (comments2)**, добавьте поле **Содержимое комментария (content)** (тип Markdown) и поле **Принадлежит задаче (belong_task)** (тип многие-к-одному).
     ![](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412170001040.gif)
2. **Создание блока списка комментариев на странице**:

   - В модальном окне редактирования задачи добавьте [**блок «Список»**](https://docs-cn.nocobase.com/handbook/ui/blocks/data-blocks/list) (это уже третий тип блока в наших уроках; список умеет показывать детали полей записи), выберите комментарии и протестируйте:
     ![Создание блока списка комментариев](https://static-docs.nocobase.com/nocobase_tutorials_zh/202412170003544.gif)

## Итог

Вы научились обогащать содержимое задач с помощью Markdown(Vditor) и добавили к задачам функцию комментариев! У системы управления задачами уже есть полноценный набор базовой функциональности — кажется, до настоящего профессионального инструмента остался один шаг!

Не забывайте экспериментировать — возможностей у NocoBase огромное множество. Если возникнут трудности — не паникуйте, я буду рядом и проведу Вас через каждый шаг.

В [следующей главе (Глава 5: Вкладки и блоки — насыщенные представления, яркая картина)](https://www.nocobase.com/cn/tutorials/task-tutorial-tabs-blocks) мы глубже погрузимся в возможности блоков NocoBase и поднимем систему на новый уровень. Не сбавляйте темп!

---

Продолжайте экспериментировать! Если возникнут вопросы — не забывайте о [официальной документации NocoBase](https://docs-cn.nocobase.com/) и [сообществе NocoBase](https://forum.nocobase.com/).
