admate
v0.10.2
เฟรมเวิร์กองค์ประกอบฟรอนต์เอนด์ CRUD ระดับกลางและแบ็กเอนด์นั้นเรียบง่ายอย่างยิ่ง และไม่กระทบต่อความยืดหยุ่น
มุ่งมั่นที่จะเอาชนะจุดเจ็บปวดของ "การทำสำเนาหน้าสูงและความยากลำบากในการแยกรหัสสาธารณะในขณะที่คำนึงถึงความต้องการในการปรับแต่ง"
เทมเพลตระดับกลางและแบ็คเอนด์ เช่น vue-pure-admin, vue-vben-admin, yudao-ui-admin-vue3 ฯลฯ อยู่ในตำแหน่งที่เป็นชุดโซลูชันระดับกลางและแบ็คเอนด์ที่สมบูรณ์ ซึ่งมีการเชื่อมโยงกันสูง ด้วยกรอบงาน UI และกรอบงาน CSS
เทคโนโลยีระดับการมองเห็นกำลังแข่งขันกันและเปลี่ยนแปลงไปในแต่ละวัน แต่ตรรกะของ CRUD ยังคงไม่เปลี่ยนแปลง นี่คือจุดสนใจของ Admate
Admate มุ่งเน้นไปที่ระดับตรรกะ มีน้ำหนักเบา และมีการบุกรุกต่ำ สามารถใช้งานได้อย่างอิสระหรือใช้กับเทมเพลตระดับกลางและส่วนหลังก็ได้
npm i admateสร้างเลเยอร์การปรับตัวระดับโลก
ตัวอย่าง: src/utils/useAdmateAdapter.js
นำเข้าและใช้งานในหน้า
ตัวอย่าง: src/views/Page.vue
แบ่งชั้นการปรับตัวตามโมดูล แต่ละโมดูลจะมีชั้นการปรับตัวของตัวเอง
ตัวอย่างเช่น:
นำเข้าเลเยอร์การปรับเปลี่ยนของโมดูลที่เกี่ยวข้องลงในเพจ
const { list , listFilterRef , form , faFormDialogRef } = useAdmateAdapter ( {
// ...Admate 配置
} , {
// ...Admate 适配层配置
} )ตัวอย่าง: การกำหนดค่าคำขอระดับอินเทอร์เฟซ
useAdmate ( {
// Axios 或 Axios 实例
// 用于调用接口
axios ,
} ) useAdmate ( {
// Axios 配置
axiosConfig : {
// 各接口的 URL 前缀
urlPrefix : ` ${ import . meta . env . VITE_BASE_URL } /module` ,
// 列表相关接口
list : {
// 读取列表
read : { } ,
} ,
// 表单相关接口
form : {
// 新增
create : { } ,
// 读取
read : { } ,
// 编辑
update : { } ,
// 删除
delete : { } ,
// 切换状态
switch : { } ,
} ,
} ,
} ) // 示例: URL 前缀不统一
useAdmate ( {
axiosConfig : {
urlPrefix : 'module1' ,
list : {
read : {
// 如果某个接口的前缀不是 'somepage'，可以在 URL 前面加斜线，即可忽略该前缀
url : '/module2/selectOne' ,
}
}
}
} ) // src/http/index.js
const axiosInstance = axios . create ( {
headers : {
xxx : 'xxx' ,
} ,
} ) const headers = {
xxx : 'xxx' ,
}
const { list , listFilterRef , form , faFormDialogRef } = useAdmateAdapter ( {
axiosConfig : {
urlPrefix ,
list : {
read : {
url : 'page' ,
headers ,
} ,
} ,
form : {
create : {
url : 'create' ,
headers ,
} ,
read : {
url : 'get' ,
headers ,
} ,
update : {
url : 'update' ,
headers ,
} ,
delete : {
url : 'delete' ,
headers ,
} ,
} ,
} ,
} ) const { list , listFilterRef , form , faFormDialogRef } = useAdmateAdapter ( {
axiosConfig : {
urlPrefix ,
form : {
create : {
url : 'create' ,
headers : {
xxx : 'xxx' ,
} ,
} ,
} ,
} ,
} )หากจำเป็นต้องเชื่อมต่อที่อยู่อินเทอร์เฟซแบบไดนามิก
// 配置
const { list , form } = useAdmate ( {
axiosConfig : {
urlPrefix : ` ${ import . meta . env . VITE_BASE_URL } /module` ,
form : {
read : ( { id } ) => ( {
method : 'GET' ,
url : id ,
} ) ,
update : ( { id } ) => ( {
method : 'PUT' ,
url : id ,
} ) ,
delete : ( { id } ) => ( {
method : 'DELETE' ,
url : id ,
} ) ,
switch : ( { id } ) => ( {
method : 'PUT' ,
url : id ,
} ) ,
} ,
}
} )
// 使用
form . open ( { id : 1 } , 'config' )
form . read ( { id : 1 } , 'config' )
form . update ( { id : 1 } , 'config' )
form . delete ( { id : 1 } , 'config' )
form . switch ( { id : 1 } , 'config' ) Axios ' data ใช้ application/json เป็นประเภท MIME ตามค่าเริ่มต้น หากคุณต้องการใช้ multipart/form-data :
กำหนดค่า transformRequest และ headers['Content-Type'] สำหรับ Axios ของคุณ
พารามิเตอร์ 1 ของ list.read , list.search , list.reset , form.open , form.delete , form.switch และ form.submit ทั้งหมดรองรับประเภท FormData
<! -- 示例: 局部配置 -->
<script setup>
import useAdmateAdapter from '@/utils/useAdmateAdapter'
// 过滤 list.value.filter 并转换为 FormData 格式
FormData.from = (json) => {
const formData = new FormData()
for (const k in json) {
if (![Number.NaN, null, undefined].includes(json[k])) {
formData.append(k, json[k])
}
}
return formData
}
useAdmateAdapter({
list: {
proxy: {
read(readList, trigger) {
readList(FormData.from(list.value.filter))
},
}
}
})
const FormData = window.FormData
</script>
<template>
<el-table>
<el-table-column label="操作">
<template #default="{ row: { id } }">
<el-button @click="form.read(FormData.from({ id }))">
查看
</el-button>
<el-button @click="form.update(FormData.from({ id }))">
编辑
</el-button>
<el-button @click="form.delete(FormData.from({ id }))">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog>
<template #footer>
<el-button @click="() => form.submit(FormData.from(form.data))">
确 定
</el-button>
</template>
</el-dialog>
</template> list.filter
useAdmate ( {
list : {
// 页码的参数名称或路径，必填
// 支持属性名，如 `'pageNo'`
// 支持属性路径，如 `'page.pageNo'`
pageNumberAt : undefined ,
// 可以在这里提供筛选参数的默认值
filter : {
'pageNumberAt 生成的页码参数名称' : 1
} ,
} ,
} ) useAdmate ( {
list : {
watchFilter : false ,
}
} ) useAdmate ( {
list : {
watchFilter : true , // 默认值
// 防抖间隔，单位毫秒
// 如果筛选参数不含 input 类型，可以设置为 0，即不防抖
// 翻页不会触发防抖
// watchFilter 开启时有效
debounce : 300 , // 默认值
}
} ) list.data
useAdmate ( {
list : {
// 列表数据
data : [ ] ,
// 指定接口返回值中列表数据的位置
// 支持属性名，如 `'data'`
// 支持属性路径，如 `'data[0].records'`
// 支持 symbol 类型的属性名
// 支持 Function，如 `response => response.data`
dataAt : undefined ,
// 指定接口返回值中记录总数的位置
// 支持属性名，如 `'total'`
// 支持属性路径，如 `'data[0].total'`
// 支持 symbol 类型的属性名
// 支持 Function，如 `response => response.total`
totalAt : undefined ,
}
} )อ่านรายการซึ่งจะถูกเรียกหลังจากเข้าสู่หน้าครั้งแรก การเปลี่ยนแปลงพารามิเตอร์การกรองรายการ และเพิ่ม ลบ ตรวจสอบ หรือแก้ไขบันทึกเดียว
const { list } = useAdmate ( )
/**
* PS: 以下为原始函数签名，如果你配置了 list.proxy.read ，则以 list.proxy.read 为准
*
* @param {any} [payload = list.filter]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* @returns {Promise<any>} 接口返回值
*/
list . read ( ) // 手动读取 ดำเนินการ list.read หลังจากรีเซ็ตหมายเลขหน้า ซึ่งใช้เพื่อดึงข้อมูลรายการหลังจากมีการเปลี่ยนแปลงเงื่อนไขตัวกรอง
const { list } = useAdmate ( )
/**
* PS: 以下为原始函数签名，如果你配置了 list.proxy.read ，则以 list.proxy.read 为准
*
* @param {any} [payload = list.filter]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* @returns {Promise<any>} 接口返回值
*/
list . search ( ) // 手动检索 ดำเนินการ list.read หลังจากรีเซ็ตเงื่อนไขตัวกรอง
const { list } = useAdmate ( )
/**
* PS: 以下为原始函数签名，如果你配置了 list.proxy.reset ，则以 list.proxy.reset 为准
*
* @param {any} [payload = list.filter]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* @returns {Promise<any>} 接口返回值
*/
list . reset ( ) // 手动重置 คุณสามารถใช้ list.proxy.read กับพร็อกซี list.read เพื่อดำเนินการบางอย่างก่อนและหลัง list.read หรือเพื่อเปลี่ยนพฤติกรรมของ list.read
useAdmate ( {
list : {
proxy : {
/**
* @param {Function} readList 被代理的原始 readList
* @param {string} trigger 调用动机 可能的值：
* 'immediate': 初始化立即查询列表
* 'pageNumberChange': 页码改变触发查询列表
* 'filterChange': 筛选项（含分页大小）改变触发查询列表
* 'create': 表单新增触发查询列表
* 'update': 表单编辑触发查询列表
* 'delete': 表单删除触发查询列表
* 'switch': 表单状态变更触发查询列表
*/
read ( readList , trigger ) { } ,
} ,
} ,
} ) // 示例: 读取列表之前，校验参数
useAdmate ( {
list : {
proxy : {
read ( readList , trigger ) {
if ( trigger === 'filterChange' ) {
listFilterRef . value . validate ( ) . then ( ( ) => {
readList ( )
} )
}
else {
readList ( )
}
} ,
}
}
} ) // 示例: 单条记录操作成功后，弹出提示
useAdmate ( {
list : {
proxy : {
read ( readList , trigger ) {
readList ( )
if ( [ 'create' , 'upadte' , 'delete' , 'switch' ] . includes ( trigger ) ) {
currentInstance . value . $message . success ( '操作成功' )
}
} ,
}
}
} ) // 示例: 读取列表后，修改列表数据
const { list } = useAdmate ( {
list : {
proxy : {
read ( readList , trigger ) {
readList ( ) . then ( ( response ) => {
// response 为 axiosConfig.list.read 的接口返回值
list . data = response . data ?. filter ( v => ! v . disabled )
} )
} ,
}
}
} ) คุณสามารถใช้ list.proxy.reset กับพร็อกซี list.reset เพื่อดำเนินการบางอย่างก่อนและหลัง list.reset หรือเพื่อเปลี่ยนพฤติกรรมของ list.reset
useAdmate ( {
list : {
proxy : {
/**
* @param {Function} resetList 被代理的原始 resetList
*/
reset ( resetList ) { } ,
} ,
} ,
} ) // 示例: 使用 UI 组件库的表单重置函数来重置筛选条件
useAdmate ( {
list : {
proxy : {
reset ( resetList ) {
listFilterElFormRef . value . resetFields ( )
// 如果分页组件不归属于表单，则表单重置时页码不会被重置，需调用 list.search
if ( ! list . watchFilter ) {
list . search ( )
}
} ,
}
}
} ) list.loading
ค่าจะเป็น true เมื่อมีการเรียก axiosConfig.list.read มิฉะนั้นจะเป็น false
<! -- 示例 -->
<script setup>
import useAdmate from 'admate'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const { list } = useAdmate()
function handleTable() {
list.value.loading = true
proxy.$POST('').finally(() => {
list.value.loading = false
})
}
</script>
<template>
<el-table v-loading="list.loading" />
</template>แบบฟอร์มมีค่าเริ่มต้นเป็นรูปแบบกล่องโต้ตอบ/ลิ้นชัก แต่ยังรองรับสไตล์เพจอิสระด้วย
ตัดกัน
form.show: boolean
เคล็ดลับ
เมื่อปิดแบบฟอร์ม ข้อมูลแบบฟอร์มจะถูกเรียกคืนสู่สถานะเริ่มต้นโดยอัตโนมัติ (ไม่ได้ล้างโดยตรง)
form.data
useAdmate ( {
form : {
// 可以在这里提供表单数据的默认值
data : { } ,
// 在查看、编辑表单时，可能需要调用接口（axiosConfig.form.read）回显表单的数据
// dataAt 用于指定接口返回值中表单数据的位置
// 支持属性名，如 `'detail'`
// 支持属性路径，如 `'data[0].detail'`
// 支持 symbol 类型的属性名
// 支持 Function，如 `response => response.detail`
dataAt : undefined ,
// 接口（axiosConfig.form.read）返回值与 form.data 合并的方式
mergeData : 'deep' ,
} ,
} )ผสานข้อมูล:
'deep' : ผสานลึก (ค่าเริ่มต้น)'shallow' : การรวมตื้น(newFormData: any) => any : วิธีการผสานแบบกำหนดเองfalse : อย่ารวม, แทนที่โดยตรงเหตุใดการผสานแบบลึกจึงเป็นค่าเริ่มต้น
ใน Vue 2 เทมเพลตไม่รองรับ ?. หากต้องการตรวจสอบค่าว่างในเทมเพลต โค้ดจะซ้ำซ้อนมากในการเขียน
ตัวอย่างเช่น ระบุค่าเริ่มต้นสำหรับ form.data:
< script setup>
import useAdmate from ' admate '
const { form } = useAdmate ({
form : {
data : {
a : {
b : {}
}
}
}
})
</ script >
< template >
{{ form.data.a.b.c }}
</ template > หากค่าที่ส่งคืนของ axiosConfig.form.read คือ: { a: {} }
หาก รวมเข้ากับค่าเริ่มต้นอย่างตื้นเขิน คุณจะได้รับ: { a: {} } - อ็อบเจ็กต์ b ในค่าเริ่มต้นจะหายไป ทำให้เกิดข้อยกเว้นตัวชี้โมฆะ
หาก คุณผสานเข้ากับค่าเริ่มต้นอย่างลึกซึ้ง คุณจะได้รับ: { a: { b: {} } } - โค้ดทำงานได้ดี
// 示例: 自定义合并方式
import { mergeWith } from 'lodash'
function defaultFormData ( ) {
return {
a : {
b : { }
}
}
}
const { form } = useAdmate ( {
form : {
data : defaultFormData ( ) ,
// 接口返回值中嵌套的对象可能为 null，会覆盖默认值中的空对象
mergeData (
// 接口返回值在通过 form.dataAt 计算过后的值
newFormData
) {
// Vue 3 中不需要赋值，mergeWith 的改动是响应式的
form . data = mergeWith (
defaultFormData ( ) ,
newFormData ,
( oldObj , newObj ) => [ undefined , null ] . includes ( newObj ) ? oldObj : undefined
)
} ,
} ,
} ) form.status: 'create' | 'read' | 'update'
form.title: string
// 示例: 根据表态形态生成对应的标题
import { computed } from 'vue'
const { form } = useAdmate ( {
form : {
title : computed ( ( ) => ( { create : '新增' , read : '查看' , update : '编辑' } [ form . status ] ) ) ,
} ,
} ) เปิดแบบฟอร์มและ axiosConfig.form.create จะถูกเรียกเมื่อส่ง
const { form } = useAdmate ( )
form . create ( )
// 等价于：将表单形态设置为“新增”，然后打开表单
form . status = 'create'
form . open ( )ข้อมูลเริ่มต้นของแบบฟอร์มไม่ว่างเปล่า แต่คัดลอกบันทึกที่มีอยู่
const { form } = useAdmate ( )
form . create ( row )
// 等价于：将表单形态设置为“新增”，然后打开表单并传参
form . status = 'create'
form . open ( row ) เปิดแบบฟอร์มและเรียก axiosConfig.form.read เพื่อสะท้อนเนื้อหาของแบบฟอร์ม
const { form } = useAdmate ( )
form . read ( )
// 等价于：将表单形态设置为“查看”，然后打开表单
form . status = 'read'
/**
* PS: 以下为原始 openForm 的函数签名，如果你配置了 form.proxy.open ，则以 form.proxy.open 为准
*
* @param {any} [payload] 如果 payload 不为空，则会调用 axiosConfig.form.read
* @param {'data'|'params'|'config'|'cache'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* 'cache': 将 payload 直接用作表单数据（不调用读取单条记录的接口）
* @returns {Promise<any>} axiosConfig.form.read 的返回值
*/
form . open ( ) เปิดแบบฟอร์มและเรียก axiosConfig.form.read เพื่อสะท้อนเนื้อหาของแบบฟอร์ม เมื่อส่ง axiosConfig.form.update จะถูกเรียก
const { form } = useAdmate ( )
form . update ( )
// 等价于：将表单形态设置为“编辑”，然后打开表单
form . status = 'update'
/**
* PS: 以下为原始 form.open 的函数签名，如果你配置了 form.proxy.open ，则以 form.proxy.open 为准
*
* @param {any} [payload] 如果 payload 不为空，则会调用 axiosConfig.form.read
* @param {'data'|'params'|'config'|'cache'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* 'cache': 将 payload 直接用作表单数据（不调用读取单条记录的接口）
* @returns {Promise<any>} axiosConfig.form.read 的返回值
*/
form . open ( ) const { form } = useAdmate ( )
/**
* @param {any} [payload]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* @returns {Promise<any>} axiosConfig.form.delete 的返回值
*/
form . delete ( ) เคล็ดลับ
เมื่อลบบันทึกล่าสุดที่ไม่อยู่ในหน้าแรก ให้สลับไปยังหน้าก่อนหน้าโดยอัตโนมัติ
มีสามวิธีในการเปลี่ยนสถานะ:
< script setup>
import useAdmate from ' admate '
const { form } = useAdmate ()
/**
* @param {any} [payload]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* @returns {Promise<any>} axiosConfig.form.switch 的返回值
*/
form . switch ()
</ script >
< template >
< el-table >
< el-table-column
label = "操作"
align = " center "
>
< template # default = " { row: { id , status } } " >
< el-switch @change = " form.switch({ id, status: status ^ 1 }) " />
</ template >
</ el-table-column >
</ el-table >
</ template >< script setup>
import useAdmate from ' admate '
const { form } = useAdmate ({
axiosConfig : {
form : {
switch : ({ id, status }) => ({
method : ' PUT ' ,
url : ` ${ status === 1 ? ' enable ' : ` disable ` } / ${ id } ` ,
}),
}
},
})
/**
* @param {any} [payload]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* @returns {Promise<any>} axiosConfig.form.switch 的返回值
*/
form . switch ()
</ script >
< template >
< el-table >
< el-table-column
label = "操作"
align = " center "
>
< template # default = " { row: { id , status } } " >
< el-switch @change = " form.switch({ id, status: status ^ 1 }, 'config') " />
</ template >
</ el-table-column >
</ el-table >
</ template >< script setup>
import useAdmate from ' admate '
const { form } = useAdmate ({
axiosConfig : {
form : {
update : {
// ...
},
switch : {
// 按编辑接口进行配置
},
}
},
})
/**
* @param {any} [payload]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* 'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默 认）
* 'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
* 'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
* @returns {Promise<any>} axiosConfig.form.switch 的返回值
*/
form . switch ()
</ script >
< template >
< el-table >
< el-table-column
label = "操作"
align = " center "
>
< template # default = " { row } " >
< el-switch @change = " form.switch({ ...row, status: row.status ^ 1 }) " />
</ template >
</ el-table-column >
</ el-table >
</ template >เปิดแบบฟอร์ม ลายเซ็นของฟังก์ชันขึ้นอยู่กับสถานการณ์:
คุณสามารถใช้ form.proxy.open กับพร็อกซี form.open เพื่อดำเนินการบางอย่างก่อนและหลัง form.open หรือเพื่อเปลี่ยนพฤติกรรมของ form.open
useAdmate ( {
form : {
proxy : {
/**
* @param {Function} openForm 被代理的原始 openForm
* @returns {Promise<object> | object | void} object 为打开表单后 form 的终态
*/
open ( openForm ) { } ,
}
}
} ) // 示例: 回显表单后，修改表单数据
const { form } = useAdmate ( {
form : {
proxy : {
open ( openForm ) {
// 新增时 openForm 没有返回值
return new Promise ( ( resolve , reject ) => {
openForm ( ) ?. then ( ( response ) => {
// response 为 axiosConfig.r 的接口返回值
// 修改表单数据
form . data . status = 1
resolve ( )
} ) . catch ( ( e ) => {
reject ( e )
} )
} )
} ,
}
}
} ) // 示例: 回显表单后，清除校验
useAdmate ( {
form : {
proxy : {
open ( openForm ) {
return new Promise ( ( resolve , reject ) => {
openForm ( ) ?. finally ( ( ) => {
formRef . value . clearValidate ( )
} ) . then ( ( ) => {
resolve ( )
} ) . catch ( ( e ) => {
reject ( e )
} )
} )
} ,
}
}
} ) // 示例: 回显表单后，自定义表单的开闭和读取状态
useAdmate ( {
form : {
proxy : {
open ( openForm ) {
return new Promise ( ( resolve , reject ) => {
// 可以在 finally 中 resolve
openForm ( ) . then ( ( ) => {
// 回显成功后，默认停止加载
resolve ( {
loading : false ,
} )
} ) . catch ( ( ) => {
// 回显失败后，默认关闭表单并停止加载
resolve ( {
show : false ,
loading : false ,
} )
} )
} )
}
}
}
} )
// 也可以返回一个对象（如果没有异步操作）
useAdmate ( {
form : {
proxy : {
open ( openForm ) {
return {
loading : false
}
}
}
}
} ) form.loading
ค่าจะเป็น true เมื่อมีการเรียก axiosConfig.form.read มิฉะนั้นจะเป็น false
ค่านี้ไม่สามารถใช้เป็นเครื่องหมายของการสิ้นสุดของแบบฟอร์ม echo ได้ เนื่องจาก axiosConfig.r จะไม่ถูกเรียกเมื่อนำข้อมูลรายการกลับมาใช้ใหม่
<! -- 示例 -->
<script setup>
import useAdmate from 'admate'
const { form } = useAdmate()
</script>
<template>
<el-dialog>
<el-form v-loading="form.loading" />
</el-dialog>
</template> ส่งแบบฟอร์ม เรียก axiosConfig.form.create เมื่อเพิ่ม และเรียก axiosConfig.form.update เมื่อแก้ไข
const { form } = useAdmate ( )
/**
* PS: 以下为原始 form.submit 的函数签名，如果你配置了 form.proxy.submit ，则以 form.proxy.submit 为准
*
* @param {any} [payload = form.data]
* @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
* @returns {Promise<any>} 接口返回值
*/
form . submit ( ) คุณสามารถใช้ form.proxy.submit เพื่อพร็อกซี form.submit เพื่อดำเนินการบางอย่างก่อนและหลัง form.submit หรือเพื่อเปลี่ยนพฤติกรรมของ form.submit
useAdmate ( {
form : {
proxy : {
/**
* @param {Function} submitForm 被代理的原始 submitForm
* @returns {Promise<object> | object | void} object 为提交表单后 form 的终态
*/
submit ( submitForm ) { }
}
}
} ) // 示例: 指定提交参数
form . submit ( {
... form . data ,
status : 1 ,
} )
// form.submit 被代理时
useAdmate ( {
form : {
proxy : {
submit ( submitForm ) {
return new Promise ( ( resolve , reject ) => {
submitForm ( {
... form . data ,
status : 1 ,
} ) . then ( ( ) => {
resolve ( )
} ) . catch ( ( e ) => {
reject ( e )
} )
} )
}
}
}
} ) // 示例: 提交前校验表单
useAdmate ( {
form : {
proxy : {
submit ( submitForm ) {
return new Promise ( ( resolve , reject ) => {
formRef . value . validate ( ) . then ( ( ) => {
submitForm ( ) . then ( ( ) => {
resolve ( )
} ) . catch ( ( e ) => {
reject ( e )
} )
} )
} )
}
}
}
} ) // 示例: 提交表单后，自定义表单的开闭和提交状态
// 返回一个 promise
useAdmate ( {
form : {
proxy : {
submit ( submitForm ) {
return new Promise ( ( resolve , reject ) => {
formRef . value . validate ( ) . then ( ( ) => {
submitForm ( ) . then ( ( ) => {
// 提交成功后，默认关闭表单，并停止加载
resolve ( {
show : false ,
submitting : false ,
} )
} ) . catch ( ( ) => {
// 提交失败后，默认仅停止加载
resolve ( {
show : true ,
submitting : false ,
} )
} )
} )
} )
}
}
}
} )
// 也可以返回一个对象（如果没有异步操作）
useAdmate ( {
form : {
proxy : {
submit ( submitForm ) {
return {
show : false ,
submitting : false ,
}
}
}
}
} ) form.submitting
ค่าจะเป็น true เมื่อมีการเรียก axiosConfig.form.create หรือ axiosConfig.form.update มิฉะนั้นจะเป็น false
<! -- 示例 -->
<script setup>
import useAdmate from 'admate'
const { form } = useAdmate()
</script>
<template>
<el-dialog>
<template #footer>
<el-button :loading="form.submitting">
确 定
</el-button>
</template>
</el-dialog>
</template> useAdmateAdapter ( { } , {
onListRead ( res , trigger ) {
// res 为接口返回值，trigger 为调用动机
// 可访问 this（组件实例）
}
} ) watch ( ( ) => form . value . show , ( n ) => {
if ( n ) {
// 打开表单
}
} ) // 示例: 适配层提供 onFormOpened
useAdmateAdapter ( { } , {
onFormOpened ( res ) {
// res 为接口返回值（新增时为空）
// 可访问 this（组件实例）
}
} ) // 示例: 适配层提供 onFormRead
useAdmateAdapter ( { } , {
onFormRead ( res ) {
// res 为接口返回值
// 可访问 this（组件实例）
}
} ) useAdmateAdapter ( { } , {
onFormSubmit ( form ) {
// 可访问 this（组件实例）
}
} ) useAdmateAdapter ( { } , {
onFormSubmitted ( res ) {
// res 为接口返回值
// 可访问 this（组件实例）
}
} ) watch ( ( ) => form . value . show , ( n ) => {
if ( ! n ) {
// 关闭表单
}
} ) แยกแบบฟอร์มออกเป็นส่วนประกอบย่อย
ตัวอย่าง
เมื่อดำเนินการกับเรกคอร์ดเดียว ให้ข้ามไปยังหน้าแบบฟอร์มเฉพาะและกลับมาหลังจากการดำเนินการเสร็จสิ้น
ตัวอย่าง
แบบฟอร์มจะเปิดตามค่าเริ่มต้นและไม่สามารถปิดได้ โดยปกติจะใช้ในสถานการณ์ที่มีข้อมูลเพียงชิ้นเดียวในรายการ ดังนั้นจึงละเว้นรายการ
ตัวอย่าง
กล่องโต้ตอบของหน้าปัจจุบันยังใช้ Admate
ตัวอย่าง
โปรดดูบันทึกประจำรุ่นสำหรับการเปลี่ยนแปลงโดยละเอียดในแต่ละเวอร์ชัน
