Интерфейсный дизайн сложного отчета

внешний интерфейс

Потребности бизнеса

Общий бюджет на нужды шоу

Общий бюджетный анализ точек спроса

  • Первым соображением при техническом выборе является визуализация таблиц с собственными таблицами и компонентами таблиц для общих компонентов пользовательского интерфейса в компании. Использование нативных таблиц приведет к высокой сложности бизнес-кода, сложности в обслуживании в будущем и дополнительным затратам на разработку, таким как сдвиг и исправление на правой стороне. В конце концов, я выбрал табличный компонент в компании для разработки, который больше соответствует дизайну, уменьшив некоторые изменения, такие как цветовые поля пользовательского интерфейса, и повысив эффективность разработки.
  • Затем правила рендеринга анализируются из структуры данных, которая разделена на три слоя: самый внешний слой — это категория, второй слой — категория продукта, а третий слой — конкретный продукт. Сначала я рассматривал, можно ли это отобразить в древовидной структуре, но структура данных анализа - нет. Крайние категории несовместимы со структурами данных второго и третьего слоев. Достаточно расширенной строки, предоставляемой mtd-table, который удовлетворяет функциональным требованиям для расширения.
  • Последующий анализ показал, что каждый столбец должен быть разделен на три строки. Здесь я использую три элемента div, чтобы разделить каждый столбец на три строки, отменить заполнение таблицы и увеличить границу для достижения цели. Это в основном контролируется CSS.
  • Следующий момент — исправить правую сторону, это можно сделать с помощью API, предоставляемого компонентом, и напрямую с помощью свойства fixed, что более удобно.

Требования к редактору суббюджета

  • Рендеринг этой таблицы может относиться к логике рендеринга и методу общего бюджета.
  • Так же есть логика, которая должна поддерживать редактирование таблицы.Необходимо судить, редактируется ли она через интерфейс, а затем проверять, совпадают ли пункты, заполненные пользователем.Если они не совпадают, выполнить отмену операция.
  • Далее следует, что пользователю необходимо отправить каждое поле ввода в базу данных в режиме реального времени после заполнения каждого поля ввода, что может в основном избежать проблемы наложения друг друга, когда несколько человек редактируют одну и ту же форму.Кроме того, следует отметить что нет необходимости отправлять число каждый раз, и это ленивый механизм обновления.Когда пользователь теряет фокус и меняет значение, оно будет отправлено снова, что может значительно снизить нагрузку на сервер.
  • Еще нужно обратить внимание на необходимость автоматического расчета в зависимости от суммы и суммы, а также автоматического расчета общей суммы, общей суммы и пропорции. Каждое поле ввода нуждается в элементе рендеринга данных v-model, поэтому обработке структуры данных также необходимо уделить внимание, и используется волна сокращения.

Суммировать

  • Запишите немного развития бизнеса в некоторых из нужд анализа и решения, существует лучшая реализация метода, мы приветствуем щедрое руководство.