Этот модуль отображает вашу бинарную команду в виде визуального дерева с возможностью просмотра, поиска и расстановки нижестоящих аккаунтов.
В модуле также есть дополнительная секция для управления направлением перелива, которая определяет направление размещения аккаунтов в бинарном дереве - авто, лево или право.
1) В левом верхнем углу расположена строка поиска, который осуществляется по имени аккаунта, его ID или электронной почте.
Если в поиске выбран аккаунт, дерево раскроется, начиная с него.
2) При нажатии на любой аккаунт, всплывает окно с настраиваемым списком его маркетинговых свойств - объёмы, статус, ранги и тд.
3) Нажатие на знак «+» в дереве вызывает еще одно всплывающее окно, позволяющее пользователю вручную перемещать аккаунты из своего фронтлайна в нужное ему место в его бинаре.
4) И наконец, цветовая палитра легко настраивается и устанавливается при первой кастомизации личного кабинета.
Конфигурирование:
<ui-visual-binary-treeid="vt0" :tree-id="2" :initial-fetch="4" :short-fetch="1" :long-fetch="5" :upline-limit="10" :properties="[ 'm.AccountStatus', ]" :popup-properties="[ 'p.email', 'm.PV', ]" :colors="{ self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)', }" :header-titles="{ 'm.AccountStatus': 'Status', }" :frontline-tree-id="0" :frontline-filter="[ { field: 'm.BinaryPositions', operation: '=', value: '0' }, { field: 'm.AccountStatus', operation: '=', value: '1' } ]" :frontline-properties="['s.id', 'p.firstname']" background-color="rgb(196, 201, 250, 0.5)" :editable-properties="['m.SpilloverDirection']" :edit-сhildren="false" show-inactive="only_disabled" ></ui-visual-binary-tree>
| props |
default |
type |
description |
| id= |
"vt0" |
String |
Произвольный ID, обязателен если производится настройка через личный кабинет |
| :tree-id= |
"0" |
Number |
ID дерева, которое будет использовано для просмотра |
| :initial-fetch= |
"4" |
Number |
На сколько уровней вниз раскроется древо при открытии страницы |
| :short-fetch= |
"1" |
Number |
На сколько уровней раскроется древо при нажатии на > символ |
| :long-fetch= |
"5" |
Number |
На сколько уровней раскроется древо при нажатии на >> символ |
| :upline-limit= |
"10" |
Number |
Сколько уровней вверх видно при открытии страницы |
| :propeties= |
"['m.PV', 'm.Status']" |
String |
Массив свойств, которые видны под аватаром на общем визуальном древе |
| :popup-properties= |
"['m.PV', 'm.Status']" |
String |
Массив свойств в списке, открывающимся при клике на аватар |
| :colors= |
"{self: 'rgba(10, 230, 10, 0.3)', front: 'rgba(10, 230, 10, 0.1)', deadend: 'rgba(255, 10, 10, 0.1)',}" |
String |
Self - цвет твоего аккаунта, front - цвет твоего фронтлайна, deadend - цвет аккаунтов без нижестоящих аккаунтов в выбранном древе |
| :header-titles= |
"{'m.PV': 'Personal sales', 'm.Status': 'Account status'}" |
String |
Локальное переименование свойств, например "Личный объём" можно переименовать в "Чужой объём" |
| :frontline-tree-id= |
"0" |
Number |
ID древа из которого будет выбран фронтлайн для отображения в окне ручной расстановки при клике на "+" |
| :frontline-filter= |
"[{ field: 'm.BinaryPositions', operation: '=', value: '0' }, { field: 'm.AccountStatus', operation: '=', value: '1' }]" |
String |
Массив фильтров, который применяется к доступным аккаунтам из :frontline-tree-id= |
| :frontline-properties= |
"['m.PV', 'm.Status']" |
String |
Какие свойства будут видны у аккаунтов при клике на "+" |
| background-color= |
"rgb(196, 201, 250, 0.5)" |
String |
Цвет задника модуля |
| :editable-properties= |
"['m.SpilloverDirection']" |
String |
Какие свойства можно редактировать из модуля |
| :edit-сhildren= |
"false" |
String |
Определяет, можно ли редактировать какие-либо поля/свойства у нижестоящих аккаунтов |
| show-inactive= |
"only_disabled" |
String |
Определяет, должны ли быть видны удалённые или заблокированные аккаунты. |
Опциональная панель управления направлением перелива:
добавьте этот код между <ui-visual-binary-tree> и </ui-visual-binary-tree>, чтобы предоставить вашим партнерам возможность контролировать направление размещения новых аккаунтов в бинарном дереве:
<template #above="{ item, canEdit, loading }">
<div class="elevation-4 rounded mb-2">
<div class="v-container">
<div class="v-row align-center">
<ui-avatar-box class="v-col-md-6" :account-id="item?.accountId()" :position-id="item?.positionId()" :tree-id="2" :include-tree="0"></ui-avatar-box>
<ui-properties-box class="v-col-md-6" :properties="['m.SpilloverDirection']" mode="grid" :account-id="item?.accountId()" :position-id="item?.positionId()" :tree-id="2" :include-tree="0" :editable-properties="canEdit ? ['m.SpilloverDirection'] : undefined" :force-loading="loading"></ui-properties-box>
</div>
</div>
</div></template>
Важно: настройки могут быть изменены как из панели администратора, вручную отредактировав код, так и внутри личного кабинета, нажав на иконку шестерёнки в левом верхнем углу страницы или около самого модуля (доступно только при наличии флага «Online office admin» в НРМ).
Dmitri K
Комментарии