cruda
1.0.0
خام يوفر نموذج عرض CRUD استضافة البيانات والحالات والعمليات مثل submit() form.name loading.table ، مما يجعل المطورين ينشئون عرض CRUD بشكل أسرع.
توفر Cruda واجهات برمجة التطبيقات الموحدة لأنظمة UIFrameworks المختلفة بواسطة محولات 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+)
} أو قم بتعيين واجهة برمجة التطبيقات للمثيل فقط عند التنشيط
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() الصفحة بعد إضافة/تحديث/حذف/نسخ الإرسال من قبل. الحالة النموذجية هي أنك قد تفقد جميع التسلسلات الهرمية لـ 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 بدلاً من ذلك
عرض التبديل للمكونات
- opQuery
- إضافة
- تحديث
- opDelete
- opExport
- opImport
- opSort
- نسخة
تبديل حالة التحميل
- استفسار
- طاولة
- ديل
- يُقدِّم
- استمارة
- يصدّر
- يستورد
- نوع
- ينسخ
حاوية بيانات الاستعلام
فرز حاوية البيانات
حاوية بيانات الجدول
- بيانات
- اختيار
- allColumns
- طلبات
- مفتاح الصف ✅
حاوية ترقيم الصفحات
- حجم الصفحة ✅
- الصفحة الحالية
- المجموع
- الواجهة الأمامية
حاوية بيانات النموذج
حالة النموذج. 0: عادي؛ 1: إضافة؛ 2: تحديث؛ 3: عرض؛ 4: AddOrUpdate
المعلمات النشطة الخام
خطأ فادح في الرسالة {الاسم، الرسالة، الحالة}
معرف التحرير
table.row
مفتاح الخام في مثيل متعدد
تمكين/تعطيل تحرير اللقطة
خريطة لقطة. المفتاح هو
table.row[rowKey]
سوف يكسر التحقق من الصحة بعد الصيد الأول
سيتم تحديث عرض الجدول تلقائيًا بعد إضافة/تحديث/حذف/نسخ
crud.table.data
سيتم دمجها في طلب GET
مثيل واجهة برمجة التطبيقات التي ستستعيد
8. RESTAPI
قم بتمكين ذاكرة التخزين المؤقت للاستعلام وبيانات ذاكرة التخزين المؤقت المخصصة عن طريق ربط
BEFORE_CACHEأو استخدم استجابة الواجهة الخلفية الافتراضية كبيانات ذاكرة التخزين المؤقت. ستكون هذه الدعامة صحيحة إذا تم تمكينpagination.frontend.
✅ يشير إلى أن الإعدادات الافتراضية العامة مدعومة ⚡ يشير إلى أن التنشيط في شكل كائن مدعوم
(عندما تكون
frontendخاطئة) استعلام مثيل. أرسل طلب GET إلى الواجهة الخلفية. سيتم دمج الوسيطة "الاستعلام" مع $crud.query
مثيل ديل. أرسل طلب الحذف إلى الواجهة الخلفية
تصدير المثيل. أرسل طلب GET إلى الواجهة الخلفية
استيراد المثيل. استخدم
fieldNameلتحديد اسم ملف طلب الخادم. أرسل طلب POST إلى الواجهة الخلفية
اضبط
formStatusعلى "إضافة"
اضبط
formStatusعلى "تحديث" وأرسل طلب GET (الافتراضي) إلى الواجهة الخلفية
قم بتعيين
formStatusعلى "AddOrUpdate" وأرسل طلب GET (الافتراضي) إلى الواجهة الخلفية
اضبط
formStatusعلى "عرض" وأرسل طلب GET (الافتراضي) إلى الواجهة الخلفية
فرز المثيل. أرسل طلب PUT (الافتراضي) إلى الواجهة الخلفية
نسخة المثيل. أرسل طلب POST (افتراضي) إلى الواجهة الخلفية
اضبط
formStatusعلى "عادي"
قم بتمرير الوسائط إلى
BEFORE_SUBMIT
نفس طريقة
submit()ولكنها لن تتحقق منformStatus
نفس طريقة
submit()ولكنها لن تتحقق منformStatus
نفس طريقة
submit()ولكنها لن تتحقق منformStatus
*يعتمد على المحولات . سيتم التحقق من صحة نموذج واحد أو أكثر أو مكون مخصص (الذي يحتوي على طريقة التحقق من الصحة () ثم استدعاء
submit()
إعادة تعيين ترقيم الصفحات والاتصال بـ toQuery()
إرجاع RestUrl للمثيل
تعيين معلمات URL
إرجاع بيانات الصف
يُستخدم عادةً في حدث تحديد الصف مثل
selection-changeفيelement-ui
يُستخدم عادةً في حدث فرز الجدول مثل
sort-changeفيelement-ui، وسوف يستدعيtoQuery()تلقائيًا
إرجاع سياق الخام
مسح بيانات ذاكرة التخزين المؤقت وإعادة تحميل المكالمة ()
تنبعث قبل الاستعلام. يمكن تعديل المعلمات قبل إرسال الطلب. قابل للإلغاء، إذا تم إلغاؤه فلن يصدر
AFTER_QUERY
تنبعث بعد الاستعلام. يمكن ضبط بيانات الجدول بواسطة "rs". إذا تم تمكين
pagination.frontend، فيمكن استخدام المعلمات و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()لتحديث طريقة عرض الجدول
تنبعث على الخطأ
تنبعث بعد أن يتم استدعاء الإلغاء ().
تنبعث بعد استدعاء SubmitForm()
تنبعث قبل استعادة اللقطة
تنبعث بعد تمكين الاستعلام وذاكرة
cacheالمؤقت. استخدمcache(data)لتخصيص بيانات ذاكرة التخزين المؤقت
يجب تحديد "crudName" عند اكتشاف مثيلات متعددة
Rx [مكون مخصص]
التحقق من صحة النموذج Xxx
Rx [تحقق من قواعد التحقق من الصحة]
لا يمكن العثور على [الطلب] في خيارات التثبيت
آر إكس [تثبيت]
table.rowKey عبارة عن قيمة فارغة 'Xxx'، وقد تتسبب في حدوث خطأ - toDelete/Update/View()
Rx [قم بتعيين قيمة غير فارغة لمفتاح الصف]
