cruda
1.0.0
크루다 CRUD 뷰 모델은 submit() / form.name / loading.table 과 같은 데이터, 상태 및 작업 호스팅을 제공하므로 개발자는 CRUD 뷰를 더 빠르게 구축할 수 있습니다.
Cruda는 Cruda 어댑터를 통해 다양한 UIFrameworks에 대한 통합 API를 제공합니다.
<!-- $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) 는 사용자 정의 CRUD RESTAPI를 확장하는 데 사용됩니다. 아래는 예시입니다
//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() 경우 페이지 상태 손실을 방지하는 데 도움이 될 수 있습니다. 일반적인 경우는 reload() 수행할 때 이전에 열었던 TreeTable의 모든 계층 구조가 손실될 수 있다는 것입니다. 아래는 구성입니다
//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 사용하세요.
컴포넌트 표시 스위치
- 연산 쿼리
- opAdd
- op업데이트
- 삭제
- opExport
- opImport
- opSort
- opCopy
로드 상태 전환
- 질문
- 테이블
- 델
- 제출하다
- 형태
- 내보내다
- 수입
- 종류
- 복사
쿼리 데이터 컨테이너
데이터 컨테이너 정렬
테이블 데이터 컨테이너
- 데이터
- 선택
- 모든 열
- 명령
- rowKey✅
페이지 매김 컨테이너
- 페이지크기✅
- 현재 페이지
- 총
- 프런트엔드
양식 데이터 컨테이너
상태를 형성합니다. 0：보통; 1：추가; 2：업데이트; 3：보기; 4：추가또는업데이트
크루드 활성 매개변수
crud 오류 메시지{이름，메시지，상태}
table.row의 편집 ID
다중 인스턴스의 crud 키
스냅샷 편집 활성화/비활성화
스냅샷 지도. 키는
table.row[rowKey]입니다.
첫 번째 캐치 후 유효성 검사가 중단됩니다.
crud.table.data추가/업데이트/삭제/복사한 후 자동으로 테이블 뷰를 업데이트합니다.
GET 요청에 병합됩니다.
8. RESTAPI복구할 인스턴스 API
BEFORE_CACHE후크하여 쿼리 캐시 및 사용자 정의 캐시 데이터를 활성화하거나 기본 백엔드 응답을 캐시 데이터로 사용합니다. 이 소품은pagination.frontend가 활성화된 경우 true가 됩니다.
✅ 전역 기본값이 지원됨을 나타냅니다 . ⚡ 개체 형식의 활성화가 지원됨을 나타냅니다.
(
frontend가 false인 경우) 인스턴스 쿼리입니다. 백엔드에 GET 요청을 보냅니다. 인수 'query'는 $crud.query와 병합됩니다.
인스턴스 델. 백엔드에 DELETE 요청 보내기
인스턴스 내보내기. 백엔드에 GET 요청 보내기
인스턴스 가져오기.
fieldName사용하여 서버 요청의 fileName을 지정합니다. POST 요청을 백엔드로 보냅니다.
formStatus'추가'로 설정하세요.
formStatus'Update'로 설정하고 백엔드에 GET (기본값) 요청을 보냅니다.
formStatus'AddOrUpdate'로 설정하고 백엔드에 GET (기본값) 요청을 보냅니다.
formStatus'View'로 설정하고 백엔드에 GET (기본값) 요청을 보냅니다.
인스턴스 정렬. 백엔드에 PUT (기본값) 요청 보내기
인스턴스 사본. 백엔드에 POST (기본값) 요청 보내기
formStatus'Normal'로 설정합니다.
BEFORE_SUBMIT에 인수 전달
submit()과 동일하지만formStatus확인하지 않습니다.
submit()과 동일하지만formStatus확인하지 않습니다.
submit()과 동일하지만formStatus확인하지 않습니다.
*어댑터에 따라 다릅니다 . 하나 이상의 Form 또는 CustomComponent(validate() 메소드가 있음)의 유효성을 검사한 다음
submit()을 호출합니다.
페이지 매김을 재설정하고 Query()를 호출하세요.
인스턴스의 RestUrl을 반환합니다.
URL 매개변수 설정
행 데이터 반환
일반적으로
element-ui의selection-change과 같은 행 선택 이벤트에 사용됩니다.
일반적으로
element-ui의sort-change와 같은 테이블 정렬 이벤트에 사용되며 자동으로toQuery()호출합니다.
crud의 컨텍스트를 반환합니다.
캐시 데이터를 지우고 reload()를 호출하세요.
쿼리 전에 내보냅니다. 요청을 보내기 전에 매개변수를 수정할 수 있습니다. 취소 가능. 취소하면
AFTER_QUERY가 내보내지지 않습니다.
쿼리 후 내보냅니다. 'rs'로 테이블 데이터를 설정할 수 있습니다.
pagination.frontend활성화된 경우 params 및 Slice()를 사용하여 캐시 데이터를 필터링하고 조각화할 수 있습니다.
삭제하기 전에 내보냅니다. 취소 가능. 취소하면
AFTER_DELETE가 발생하지 않습니다.
삭제 후 내보냅니다.
autoProcess()사용하여 테이블 뷰 업데이트
추가하기 전에 내보냅니다. 양식 데이터를 지우거나 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이후에 방출
양식을 제출하기 전에 내보냅니다. 취소 가능합니다. 취소하면
AFTER_SUBMIT이 발생하지 않습니다. 제출할 양식 데이터를 설정하려면setForm(formObject)사용하세요.
양식 제출 후 내보냅니다. 페이지를 다시 로드할 수 있으며 여기로 알림을 보낼 수 있습니다.
autoProcess()사용하여 테이블 뷰 업데이트
내보내기 전에 내보냅니다. 취소 가능. 취소하면
AFTER_EXPORT가 방출되지 않습니다.
내보내기 완료 후 내보내기
가져오기 전에 내보냅니다. 요청을 보내기 전에 매개변수를 수정할 수 있습니다. 취소 가능. 취소하면
AFTER_IMPORT가 방출되지 않습니다.
가져오기 완료 후 내보내기
정렬 전에 내보냅니다. 취소 가능. 취소하면
AFTER_SORT가 방출되지 않습니다.
정렬 완료 후 방출
복사하기 전에 내보냅니다. 취소 가능. 취소하면
AFTER_COPY가 방출되지 않습니다.
복사가 완료된 후 내보냅니다.
autoProcess()사용하여 테이블 뷰 업데이트
오류 발생 시 방출
cancel()이 호출된 후 방출
submitForm()이 호출된 후 방출
스냅샷을 복구하기 전에 내보내기
쿼리 및
cache활성화된 후 내보냅니다.cache(data)사용하여 캐시 데이터 사용자 정의
여러 인스턴스가 감지되면 'crudName'을 지정해야 합니다.
Rx 【커스텀 컴포넌트】
양식 확인 Xxx
Rx 【검증 규칙 확인】
설치 옵션에서 [요청]을 찾을 수 없습니다
RX 【설치】
table.rowKey는 빈 값 'Xxx'이므로 오류가 발생할 수 있습니다. - toDelete/Update/View()
Rx 【rowKey를 비어 있지 않은 값으로 설정】
