Vue CRUD for Yii2 REST
Новые фичи:
- Фильтры добавляют параметры в URL после редактирования, и ссылку с фильтрами можно использовать, чтобы получить готовую отфильтрованную страницу!
Установка
npm i flamecrud --save
Импортируем компонент:
import Vue from 'vue';
import vuecrud from 'flamecrud';
Vue.use(vuecrud);
Текущая версия так же требует Bootstrap
, т.к. в ней сейчас нет дизайна (вообще)
npm i bootstrap
И в src/main.js
объявить:
import 'bootstrap/dist/css/bootstrap.min.css';
Используем в шаблоне с параметрами:
<vuecrud host="http://rest" selectedtable = "objects"></vuecrud>
-
host
: endpoint для REST сервиса (обязателен) -
selectedtable
таблица по-умолчанию (обязательно на текущий момент) -
columnsupdated
коллбек после получения колонок, до их вставки -
rowsupdated
коллбек после получения записей, перед их вставкой -
beforeGetRows
коллбек позволяет настроить get-запрос перед применением запроса -
opts
- доп параметры-
canAdd
bool - CRUD может добавлять записи -
canEdit
bool - CRUD может редактировать записи -
canRemove
bool - CRUD может удалять записи -
where
obj - предустановленные условия для фильтрации (добавляются к фильтрам автоматически) -
filterRowMargin
int - отступ между строками фильтров (по-вертикали)
-
FLAMEREST
так же регистрируется и для window
Быстрая работа с колонками
Изменение/добавление набора параметров:
// функция-реплейсер колонок
columnsupdated: function (cols) {
// Изменить колонку ID
cols.set('id',{label: 'TRUST ID', editDesc: 'User ID'});
// Удалить колонку name при выводе
cols.delete('name');
// Добавить новую колонку, которой нет в выдаче
cols.new('newColumn',{label: 'TRUST ID', editDesc: 'User ID', representedAs: row=> row.name + ' ' + row.nickname, interpolate: true});
}
Формат колонок
{
label: 'ЗАГОЛОВОК',
field: 'Имя столбца',
// Стандартное значение колонки при вставке нового элемента, если оно не было заполнено
defaultValue: undefined,
editName: 'Имя элемента при добавлении/редактировании',
editDesc: 'Описание элемента при добавлении/редактировании',
// Наличие выносного фильтра для колонки
hasFilter: false,
// Тип фильтрации для поля, выясняется автоматически на основе типа записи, но может быть переопределён
// text - поиск через частичное совпадение (LIKE %%)
// fulltext - поиск через частичное совпадение (FULLTEXT in boolean mode *)
// number - числовой поиск в диапазоне от - до
// fixed - точное совпадение
type: 'text'
// Технические параметры, устанавливать по необходимости
filter: 'Текстовый фильтр',
filterRange: {from: '', to: ''}, // Ренжовый фильтр для значений
// включить фильтр для колонки
hasFilter: false,
// Минимальное число символов в строке фильтра, после которого будет произведён запрос
filterMinSymbolsRequest: 0,
// Позиция фильтра на странице (автоматическое распределение)
filterRow: 0,
filterColumn: 0,
// Тип элемента в попапе
// string - обычная строка или селектор строк
// text - text area
// file - file select
// image - select image, crop & resize
popupType: 'string',
// Загружать поле из REST в таблицу (мгновенная загрузка)
isLoadToTable: true,
// Загружать поле из REST в попап (ленивая загрузка, если isLoadToTable=false)
// если isLoadToTable=false и isLoadToPopup=false, поле вообще никогда загружено из базы не будет
isLoadToPopup: true,
// Связи с другими таблицами
// Справочно: к какой таблице и полю текущее поле прикреплено
linkedto: {table: 'objects', field: 'id'},
// Справочно: загруженные значения для связанного поля
selectResults = [],
// Загружать ли связанные поля (foreign keys) в списки select, или оставить просто значение ключа (классический вариант)
isLoadKeys: false,
// Возможность управлять загрузкой связанных ключей
loadKeysParams: {
where: null,
expand: null,
fields: null,
sortfields: null,
page: 1,
perPage: 9999
},
// Функция, которая приводит формат поля связанного списка в select к кастомному
selectRepresentAs: column => 'Foreign key ' + column.id
// Показывать поле в таблице
isShow: true,
// Показывать поле при добавлении\редактировании
isShowOnPopup: true,
// Поле разрешено редактировать
// Если isEdit=false и isShowOnPopup=true, оно будет выключено, но показано
isEdit: true,
popupImage: {
// прогружать ли кнопки
buttons: false
}
}
Дополнительные параметры колонок, которые предустановлены из vue-datatable
// Специфичный формат одной колонки
representedAs: row=> row.name,
// Преобразовать колонку в html: true
interpolate: true
Остальные параметры в: https://gerkindev.github.io/vuejs-datatable/classes/column.html
Шаблоны
Все примеры на Pug
Свой Popup
Можно установить через слот popup
template(v-slot:popup)
div(style="width: 100%; min-height:100%; flex-direction:row; flex-grow: 2; background:#FFF; overflow-y:scroll;") Hello
Кастомный шаблон строки таблицы
template(v-slot:row="binds")
tr
td {{binds.row.name}}
td {{binds.columns[0].name}}
Строка кнопки добавить и сама кнопка
Слот для поля с кнопками над таблицей
template(v-slot:Buttons)
Слот кнопки добавления отдельно
template(v-slot:AddButton)
Ленивая загрузка паджинации
Нужна, т.к. запрос на Count(*) занимает значительно большее время, нежели SELECT LIMIT, что для ёмких запросов критично
opts: {
lazyLoadPagination: true
}