Модель представления CRUD обеспечивает размещение данных, состояний и операций, таких как submit()
/ form.name
, что позволяет разработчикам loading.table
создавать представление CRUD.
Cruda предоставляет унифицированные API для различных UIFramework с помощью адаптеров Cruda.
<!-- $crud.query (query data hosting) -->
< el-input v-model =" $crud.query.xxx " > </ el-input >
<!-- $crud.table.data (table data hosting) -->
< el-table v-model =" $crud.table.data " > </ el-table >
<!-- $crud.form (form data hosting) -->
< el-form :model =" $crud.form " > </ el-form >
<!-- $crud.table.data (tree data hosting) -->
< el-tree :model =" $crud.table.data " > </ el-tree >
$crud . submit ( formEl ) //submit form
$crud . reload ( ) //reload table
$crud . cancel ( ) //cancel form
<!-- loading.query will be set automatically when reload() is called -->
< button class =" ... " :loading =" $crud.loading.query " @click =" $crud.reload() " >
查询
</ button >
/* when you call the toQuery(), Cruda will
1. set loading.query to True
2. package query, pagination, order, ...
3. emit hooks
4. catch exceptions
5. ...
*/
$crud . toQuery ( )
$crud . toQuery ( ) //GET
$crud . toDelete ( ) //DELETE
$crud . doUpdate ( ) //PUT
Вы можете установить глобальные настройки Cruda по умолчанию, если все сцены в вашем проекте ведут себя одинаково.
//what properties does 'rs' have depends on the backend return value
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs ) {
crud . pagination . total = rs . data . total
crud . table . data = rs . data . records || [ ]
}
CRUD . defaults . pagination . pageSize = 10
CRUD . defaults . view . opQuery = true
CRUD . defaults . table . rowKey = 'id'
Вы можете изменить URL/метод для адаптации к серверной службе.
CRUD . RESTAPI = {
QUERY : { url : "" , method : "GET" } ,
QUERY_DETAILS : { url : "/{id}" , method : "GET" } , //(v1.20+)
ADD : { url : "" , method : "POST" } ,
UPDATE : { url : "" , method : "PUT" } ,
DELETE : { url : "" , method : "DELETE" } ,
EXPORT : { url : "/export" , method : "GET" } ,
IMPORT : { url : "/import" , method : "POST" } ,
SORT : { url : "/sort" , method : "PUT" } ,
COPY : { url : "/copy" , method : "POST" } ,
ADD_OR_UPDATE : { url : "/addorupdate" , method : "POST" } , //(v1.20+)
}
Или установите API только для экземпляра при активации.
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )
* Обратите внимание, что ключ API должен быть в верхнем регистре.
CRUD.xApi(apiName, apiUrl, config)
используется для расширения пользовательского RESTAPI CRUD. Ниже приведен пример
//1. Extends an API. After that it will
/**
* a. Attach a method 'toClone' to the CRUD instance
* b. Add 'BEFORE_CLONE' and 'AFTER_CLONE' to CRUD.HOOK
*/
CRUD . xApi ( 'clone' , '/clone' , { method : 'POST' } )
//2. Add listener
onHook ( this , CRUD . HOOK . AFTER_CLONE , ( crud , rs ) => {
console . log ( 'xApi-->' , rs . data )
} )
//3. Call toClone
this . $crud . toClone ( { x : 1 , y : 2 } ) ;
Мы можем настроить autoResponse
для автоматического обновления представления таблицы, это может помочь вам избежать потери состояния страницы, если вы reload()
страницу после добавления/обновления/удаления/копирования отправки раньше. Типичный случай: вы можете потерять все иерархии TreeTable, которые вы открывали ранее, при reload()
. Ниже приведен конфиг
//1. Set a response validator to check if the response is valid
$crud . autoResponse . validator = ( response : { status : number } ) => {
return response . status === 200
}
//2. For such an Add-Oper like add/copy/import/..., it must set a getter in order to obtain new records with primary key from backend
CRUD . defaults . autoResponse . getter = ( response : any ) => {
return [ response . data ]
}
//2. If primary keys are generated at frontend, you can either return submitRows
CRUD . defaults . autoResponse . getter = ( response : any , submitRows ?: any [ ] ) => {
return submitRows
}
//3. For TreeTable, you need set parentKeyField in order to find parentNode. Default 'pid'
CRUD . defaults . autoResponse . parentKeyField = 'pid'
//4. Set insert position with 'head/tail'. Default 'head'
CRUD . defaults . autoResponse . position = 'head'
//4. For TreeTable, you need set childrenKeyField in order to find childNodes. Default 'children'
CRUD . defaults . autoResponse . childrenKeyField = 'children'
После этого представление таблицы будет обновлено CRUDA. Если вы хотите обновить вручную, вы можете вызвать autoProcess()
в крючке ниже.
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} )
Мы можем настроить pagination.frontend
, чтобы включить разбиение на страницы интерфейса.
useCrud ( {
...
pagination : {
//enable
frontend : true ,
}
} )
//Set global cache hook(Optional)
CRUD . defaults [ CRUD . HOOK . BEFORE_CACHE ] = function ( crud , rs , cache ) {
//cache custom data
cache ( {
data : {
rows : rs . data . rows ,
total : rs . data . total
}
} )
}
CRUD . defaults [ CRUD . HOOK . AFTER_QUERY ] = function ( crud , rs , params , slice ) {
//filter cache data
const keyword = params . keyword
let list = filter ( defaultTo ( rs . data . rows , [ ] ) , ( item : any ) => {
return test ( item . email , keyword ) ||
test ( item . uname , keyword ) ||
test ( item . ip , keyword ) ||
test ( item . domain , keyword )
} )
crud . pagination . total = defaultTo ( list . length , 0 ) ;
//use slice() to slice list. If pagination.frontend is disabled, slice() will return the list directly
crud . table . data = slice ( list ) ;
}
После включения pagination.frontend метод toQuery/reload
больше не запрашивает бэкэнд, вместо этого используйте reset
Переключатель отображения компонентов
- оп-запрос
- опДобавить
- опОбновление
- опделете
- опэкспорт
- опимпорт
- опсортировка
- опкопировать
Переключить состояние загрузки
- запрос
- стол
- дель
- представлять на рассмотрение
- форма
- экспорт
- импортировать
- сортировать
- копировать
Контейнер данных запроса
Сортировать контейнер данных
Контейнер табличных данных
- данные
- выбор
- всестолбцы
- заказы
- строкаКлюч ✅
Контейнер нумерации страниц
- Размер страницы ✅
- текущая страница
- общий
- внешний интерфейс
Контейнер данных формы
формировать состояние. 0: Обычный; 1: Добавить; 2: Обновление; 3: Просмотр; 4: AddOrUpdate.
активные параметры crud
crud error msg{имя, сообщение, статус}
редактирование идентификатора
table.row
ключ crud в нескольких экземплярах
включить/выключить редактирование снимка
карта снимка. Ключ —
table.row[rowKey]
нарушит проверку после первого улова
автоматически обновит представление таблицы после добавления/обновления/удаления/копирования
crud.table.data
Будет объединено с запросом GET.
Экземпляр API, который восстановит
8. RESTAPI
Включите кэш запросов и пользовательские данные кэша с помощью перехватчика
BEFORE_CACHE
или используйте ответ серверной части по умолчанию в качестве данных кэша. Это свойство будет иметь значение true, если включенpagination.frontend
.
✅ Указывает, что поддерживаются глобальные настройки по умолчанию . ⚡ Указывает, что поддерживается активация в форме объекта.
(Когда
frontend
имеет значение false) Запрос экземпляра. Отправьте запрос GET на серверную часть. Аргумент «запрос» объединится с $crud.query.
Экземпляр дель. Отправьте запрос DELETE на серверную часть
Экспорт экземпляра. Отправьте GET-запрос на серверную часть
Импорт экземпляра. Используйте
fieldName
, чтобы указать имя файла запроса сервера. Отправьте POST-запрос на серверную часть.
Установите
formStatus
на «Добавить»
Установите для
formStatus
значение «Обновить» и отправьте запрос GET (по умолчанию) на серверную часть.
Установите для
formStatus
«AddOrUpdate» и отправьте запрос GET (по умолчанию) на серверную часть.
Установите для
formStatus
значение «Просмотр» и отправьте запрос GET (по умолчанию) на серверную часть.
Сортировка экземпляров. Отправить запрос PUT (по умолчанию) на серверную часть
Копия экземпляра. Отправить запрос POST (по умолчанию) на серверную часть
Установите для
formStatus
значение «Нормальный».
Передать аргументы
BEFORE_SUBMIT
То же, что
submit()
, но не проверяетformStatus
То же, что
submit()
, но не проверяетformStatus
То же, что
submit()
, но не проверяетformStatus
* Зависит от адаптеров . Будет проверена одна или несколько форм или CustomComponent (у которых есть метод validate()), а затем вызовется
submit()
Сбросьте нумерацию страниц и вызовите toQuery()
Вернуть restUrl экземпляра
Установить параметры URL
Возврат данных строки
Обычно используется в событии выбора строки, например
selection-change
element-ui
Обычно используется в событии сортировки таблицы, например
sort-change
вelement-ui
, он автоматически вызываетtoQuery()
Вернуть контекст crud
Очистите данные кэша и вызовите reload().
Выдать перед запросом. Можно изменить параметры перед отправкой запроса. Отменяется, в случае отмены
AFTER_QUERY
не будет генерировать
Выдавать после запроса. Можно установить данные таблицы по «rs». Если
pagination.frontend
включен, параметры и срез() можно использовать для фильтрации и фрагментации данных кэша.
Выпустить перед удалением. Отменяется, в случае отмены
AFTER_DELETE
не будет генерировать
Выдавать после удаления. Используйте
autoProcess()
для обновления представления таблицы.
Emit перед добавлением. Можно очистить данные формы или сгенерировать UUID. Отменяется, если отменить,
formStatus
не изменится. ...аргументы изtoAdd()
Выдает после добавления и до
AFTER_SUBMIT
. ИспользуйтеautoProcess()
для обновления представления таблицы.
Выдать перед обновлением. Отменяется, если отменить,
formStatus
не изменится. Используйтеskip()
чтобы остановить подробный запрос, иAFTER_DETAILS
не будет выдавать
Выдавать после обновления и до
AFTER_SUBMIT
. ИспользуйтеautoProcess()
для обновления представления таблицы.
Выпускайте перед добавлением/обновлением. Отменяется, если отменить,
formStatus
не изменится. ИспользуйтеdoView()
для запроса деталей
Выдавать после добавления/обновления и до
AFTER_SUBMIT
. ИспользуйтеautoProcess()
для обновления представления таблицы.
Эмиссия перед просмотром. Отменяется, если отменить,
formStatus
не изменится. Используйтеskip()
чтобы остановить подробный запрос, иAFTER_DETAILS
не будет выдавать
Испускается после
toUpdate/toView
и не пропускается с помощьюskip()
Выдать после
toUpdate
иAFTER_DETAILS
Выдать после
toView
иAFTER_DETAILS
Emit перед отправкой формы. Отменяется, в случае отмены
AFTER_SUBMIT
не будет выдаваться. ИспользуйтеsetForm(formObject)
для установки данных формы для отправки.
Emit после отправки формы. Можно перезагрузить страницу, отправить уведомление сюда. Используйте
autoProcess()
для обновления представления таблицы.
Эмиссия перед экспортом. Отменяется, в случае отмены
AFTER_EXPORT
не будет генерировать
Выдать после завершения экспорта
Эмитировать перед импортом. Можно изменить параметры перед отправкой запроса. Отменяется, в случае отмены
AFTER_IMPORT
не будет генерировать
Выдать после завершения импорта
Выдать перед сортировкой. Отменяется, в случае отмены
AFTER_SORT
не будет генерировать
Выдать после завершения сортировки
Эмитировать перед копированием. Можно отменить, в случае отмены
AFTER_COPY
не будет генерировать
Выдать после завершения копирования. Используйте
autoProcess()
для обновления представления таблицы.
Выдавать при ошибке
Emit после вызова метода cancel()
Emit после вызова submitForm()
Emit перед восстановлением снимка
Выдавать после запроса и включения
cache
. Используйтеcache(data)
для настройки данных кэша.
Необходимо указать crudName при обнаружении нескольких экземпляров.
Rx 【Пользовательский компонент】
проверка формы ххх
Rx 【проверить правила проверки】
Не могу найти [запрос] в вариантах установки.
Прием 【Установить】
table.rowKey — это пустое значение «Xxx», это может вызвать ошибку — toDelete/Update/View()
Rx 【установить для rowKey непустое значение】