cruda
1.0.0
kasar Model tampilan CRUD menyediakan hosting data, status, dan operasi seperti submit() / form.name / loading.table , yang membuat pengembang membuat tampilan CRUD lebih cepat.
Cruda menyediakan API terpadu untuk UIFramework yang berbeda oleh adaptor 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 ( ) //PUTAnda dapat menyetel default global Cruda jika semua adegan memiliki perilaku yang sama di proyek Anda.
//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'Anda dapat mengubah URL/Metode untuk beradaptasi dengan layanan backend
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+)
} Atau atur API khusus instance saat Aktivasi
const $crud = useCrud ( {
url : '/api/single' ,
restApi : {
//支持对象格式或字符串格式(仅能设置url)
ADD : { url : '/add-batch' , method : 'POST' } ,
COPY : '/copy2'
}
} )* Perhatikan bahwa kunci api harus huruf besar
CRUD.xApi(apiName, apiUrl, config) digunakan untuk memperluas CRUD RESTAPI khusus. Di bawah ini adalah contohnya
//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 } ) ; Kita dapat mengonfigurasi autoResponse untuk menyegarkan tampilan tabel secara otomatis, ini dapat membantu Anda menghindari kehilangan status halaman jika Anda reload() halaman setelah menambahkan/memperbarui/menghapus/menyalin pengiriman sebelumnya. Kasus yang umum terjadi adalah Anda mungkin kehilangan semua hierarki TreeTable yang Anda buka sebelumnya saat Anda reload() . Di bawah ini adalah konfigurasinya
//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' Setelah itu, tampilan tabel akan di-refresh oleh CRUDA. Jika Anda ingin menyegarkan secara manual, Anda dapat memanggil autoProcess() pada kait di bawah
// Other hooks which can invode autoProcess please see the doc below
onHook ( CRUD . HOOK . AFTER_DELETE , ( crud , rs , rows , autoProcess ) => {
autoProcess ( )
} ) Kita dapat mengonfigurasi pagination.frontend untuk mengaktifkan 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 ) ;
} Setelah mengaktifkan pagination.frontend, metode toQuery/reload tidak lagi meminta backend, gunakan reset sebagai gantinya
Sakelar tampilan Komponen
- opQuery
- opTambahkan
- opPerbarui
- opHapus
- opEkspor
- opImpor
- opSort
- opSalin
Alihkan status pemuatan
- pertanyaan
- meja
- del
- kirim
- membentuk
- ekspor
- impor
- menyortir
- menyalin
Wadah data kueri
Urutkan wadah data
Wadah data tabel
- data
- pilihan
- semua Kolom
- pesanan
- kunci baris✅
Wadah penomoran halaman
- Ukuran halaman✅
- Halaman saat ini
- total
- bagian depan
Formulir wadah data
bentuk negara. 0：Normal；1：Tambahkan；2：Perbarui；3：Lihat；4：Tambah Atau Perbarui
param aktif mentah
pesan kesalahan kasar{nama, pesan, status}
mengedit id dari
table.row
kunci kasar dalam multi-instance
mengaktifkan/menonaktifkan pengeditan snapshot
peta cuplikan. Kuncinya adalah
table.row[rowKey]
akan merusak validasi setelah tangkapan pertama
akan memperbarui tampilan tabel secara otomatis setelah Anda menambahkan/memperbarui/menghapus/menyalin
crud.table.data
Akan bergabung ke dalam permintaan GET
Instance api yang akan memulihkan
8. RESTAPI
Aktifkan cache kueri dan data cache khusus dengan menghubungkan
BEFORE_CACHEatau gunakan respons backend default sebagai data cache. Prop ini akan menjadi kenyataan jikapagination.frontenddiaktifkan.
✅ Menunjukkan bahwa default global didukung ⚡ Menunjukkan bahwa aktivasi dalam bentuk objek didukung
(Ketika
frontendsalah) Permintaan contoh. Kirim permintaan GET ke backend。Argumen 'query' akan digabungkan dengan $crud.query
Contoh del. Kirim permintaan DELETE ke backend
Ekspor contoh. Kirim permintaan GET ke backend
Impor contoh. Gunakan
fieldNameuntuk menentukan nama file permintaan server。 Kirim permintaan POST ke backend
Setel
formStatuske 'Tambahkan'
Setel
formStatuske 'Perbarui' dan kirim permintaan GET (default) ke backend
Setel
formStatuske 'AddOrUpdate' dan kirim permintaan GET (default) ke backend
Setel
formStatuske 'Lihat' dan kirim permintaan GET (default) ke backend
Pengurutan contoh. Kirim permintaan PUT (default) ke backend
Salinan contoh. Kirim permintaan POST (default) ke backend
Setel
formStatuske 'Normal'
Berikan argumen ke
BEFORE_SUBMIT
Sama seperti
submit()tetapi tidak akan memeriksaformStatus
Sama seperti
submit()tetapi tidak akan memeriksaformStatus
Sama seperti
submit()tetapi tidak akan memeriksaformStatus
*Tergantung pada adaptor 。Akan memvalidasi satu atau lebih Formulir atau Komponen Khusus (yang memiliki metode validasi()) lalu memanggil
submit()
Setel ulang penomoran halaman dan panggil toQuery()
Kembalikan restUrl misalnya
Tetapkan parameter url
Kembalikan data baris
Biasanya digunakan dalam acara pemilihan baris seperti
selection-changedielement-ui
Biasanya digunakan dalam acara pengurutan tabel seperti
sort-changedielement-ui, ia akan memanggiltoQuery()secara otomatis
Kembalikan konteks mentahnya
Hapus data cache dan panggil reload()
Keluarkan sebelum permintaan. Dapat mengubah parameter sebelum mengirim permintaan. Dapat dibatalkan, jika dibatalkan
AFTER_QUERYtidak akan keluar
Keluarkan setelah permintaan. Dapat mengatur data tabel dengan 'rs'. Jika
pagination.frontenddiaktifkan, params dan slice() dapat digunakan untuk memfilter dan mengiris data cache
Keluarkan sebelum dihapus. Dapat dibatalkan, jika dibatalkan
AFTER_DELETEtidak akan muncul
Keluarkan setelah dihapus. Gunakan
autoProcess()untuk memperbarui tampilan tabel
Keluarkan sebelum menambahkan. Dapat menghapus data formulir atau menghasilkan UUID. Dapat dibatalkan, jika dibatalkan maka
formStatustidak akan berubah. ...argumen daritoAdd()
Keluarkan setelah add dan sebelum
AFTER_SUBMIT. GunakanautoProcess()untuk memperbarui tampilan tabel
Keluarkan sebelum pembaruan. Dapat dibatalkan, jika dibatalkan maka
formStatustidak akan berubah. Gunakanskip()untuk menghentikan kueri detail danAFTER_DETAILStidak akan muncul
Keluarkan setelah pembaruan dan sebelum
AFTER_SUBMIT. GunakanautoProcess()untuk memperbarui tampilan tabel
Keluarkan sebelum menambah/memperbarui. Dapat dibatalkan, jika dibatalkan maka
formStatustidak akan berubah. GunakandoView()untuk menanyakan detail
Keluarkan setelah tambah/perbarui dan sebelum
AFTER_SUBMIT. GunakanautoProcess()untuk memperbarui tampilan tabel
Keluarkan sebelum dilihat. Dapat dibatalkan, jika dibatalkan maka
formStatustidak akan berubah. Gunakanskip()untuk menghentikan kueri detail danAFTER_DETAILStidak akan muncul
Dipancarkan setelah
toUpdate/toViewdan tidak dilewati olehskip()
Keluarkan setelah
toUpdatedanAFTER_DETAILS
Keluarkan setelah
toViewdanAFTER_DETAILS
Keluarkan sebelum formulir dikirimkan. Dapat dibatalkan, jika dibatalkan
AFTER_SUBMITtidak akan keluar. GunakansetForm(formObject)untuk mengatur data formulir yang akan dikirimkan
Keluarkan setelah formulir dikirimkan. Dapat memuat ulang halaman, kirim pemberitahuan ke sini. Gunakan
autoProcess()untuk memperbarui tampilan tabel
Emisikan sebelum diekspor. Dapat dibatalkan, jika dibatalkan
AFTER_EXPORTtidak akan keluar
Keluarkan setelah ekspor selesai
Emisikan sebelum impor. Dapat mengubah parameter sebelum mengirim permintaan. Dapat dibatalkan, jika dibatalkan
AFTER_IMPORTtidak akan keluar
Keluarkan setelah impor selesai
Keluarkan sebelum disortir. Dapat dibatalkan, jika dibatalkan
AFTER_SORTtidak akan keluar
Keluarkan setelah penyortiran selesai
Keluarkan sebelum disalin. Dapat dibatalkan, jika dibatalkan
AFTER_COPYtidak akan keluar
Keluarkan setelah penyalinan selesai. Gunakan
autoProcess()untuk memperbarui tampilan tabel
Memancarkan jika ada kesalahan
Keluarkan setelah cancel() dipanggil
Keluarkan setelah submitForm() dipanggil
Keluarkan sebelum memulihkan snapshot
Keluarkan setelah kueri dan
cachediaktifkan. Gunakancache(data)untuk menyesuaikan data cache
Harus menentukan 'crudName' ketika beberapa instance terdeteksi
Rx 【Komponen khusus】
validasi formulir XXX
Rx 【periksa aturan validasi】
Tidak dapat menemukan [permintaan] dalam opsi instalasi
Rx 【Instal】
table.rowKey adalah nilai kosong 'xxx', ini dapat menyebabkan kesalahan - toDelete/Update/View()
Rx 【setel rowKey nilai yang tidak kosong】
