admate
v0.10.2
Das Middle- und Backend-CRUD-Frontend-Element-Framework ist äußerst einfach und geht keine Kompromisse bei der Flexibilität ein.
Engagiert für die Überwindung des Problems der „hohen Seitenduplizierung und der Schwierigkeit, öffentlichen Code zu extrahieren und dabei Anpassungsanforderungen zu berücksichtigen“.
Mid- und Back-End-Vorlagen wie vue-pure-admin, vue-vben-admin, yudao-ui-admin-vue3 usw. werden als vollständiger Satz von Mid- und Back-End-Lösungen positioniert, die stark gekoppelt sind mit dem UI-Framework und dem CSS-Framework.
Die Technologie auf Ansichtsebene konkurriert miteinander und verändert sich mit jedem Tag, aber die CRUD-Logik bleibt unverändert. Dies ist der Schwerpunkt von Admate.
Admate konzentriert sich auf die Logikebene, ist leichtgewichtig und weist einen geringen Eingriff auf. Es kann unabhängig oder mit beliebigen Mid- und Back-End-Vorlagen verwendet werden.
npm i admateErstellen Sie eine globale Anpassungsschicht
Beispiel: src/utils/useAdmateAdapter.js
Importieren und auf der Seite verwenden
Beispiel: src/views/Page.vue
Teilen Sie die Anpassungsschicht nach Modul auf. Jedes Modul verfügt über eine eigene Anpassungsschicht
Zum Beispiel:
Importieren Sie die Anpassungsschicht des entsprechenden Moduls in die Seite
const { list , listFilterRef , form , faFormDialogRef } = useAdmateAdapter ( {
// ...Admate 配置
} , {
// ...Admate 适配层配置
} )Beispiel: Anforderungskonfiguration auf Schnittstellenebene
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' ,
} ,
} ,
} ,
} ,
} )Wenn die Schnittstellenadresse dynamisch gespleißt werden muss
// 配置
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 -Daten verwenden standardmäßig application/json als MIME-Typ. Wenn Sie multipart/form-data verwenden müssen:
Konfigurieren Sie transformRequest und headers['Content-Type'] für Ihr Axios
Parameter 1 von list.read , list.search , list.reset , form.open , form.delete , form.switch und form.submit unterstützen alle den FormData-Typ
<! -- 示例: 局部配置 -->
<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 ,
}
} )Lesen Sie die Liste, die nach dem ersten Aufrufen der Seite, dem Ändern der Listenfilterparameter und dem Hinzufügen, Löschen, Überprüfen oder Ändern eines einzelnen Datensatzes aufgerufen wird.
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 ( ) // 手动读取 Führen Sie list.read aus, nachdem Sie die Seitenzahl zurückgesetzt haben, die zum Abrufen der Liste verwendet wird, nachdem die Filterbedingungen geändert wurden.
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 ( ) // 手动检索 Führen Sie list.read aus, nachdem Sie die Filterbedingungen zurückgesetzt haben
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 ( ) // 手动重置 Sie können list.proxy.read als Proxy für list.read verwenden, um einige Vorgänge vor und nach list.read auszuführen oder das Verhalten von list.read zu ändern
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 )
} )
} ,
}
}
} ) Sie können list.proxy.reset als Proxy für list.reset verwenden, um einige Vorgänge vor und nach list.reset auszuführen oder das Verhalten von list.reset zu ändern
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
Der Wert ist true , wenn axiosConfig.list.read aufgerufen wird, andernfalls ist er 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>Das Formular verwendet standardmäßig den Dialog-/Schubladenstil, unterstützt aber auch einen unabhängigen Seitenstil.
Kontrast
form.show: boolean
Tipp
Beim Schließen des Formulars werden die Formulardaten automatisch in den Ausgangszustand zurückversetzt (nicht direkt gelöscht).
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' ,
} ,
} )mergeData:
'deep' : Tiefe Zusammenführung (Standard)'shallow' : Flache Zusammenführung(newFormData: any) => any : Angepasste Zusammenführungsmethodefalse : nicht zusammenführen, direkt ersetzenWarum ist Deep Merge die Standardeinstellung?
In Vue 2 unterstützt die Vorlage keine ?. -Syntax. Um in der Vorlage auf Null zu prüfen, ist das Schreiben von Nullobjekten in der Regel sehr schwierig.
Geben Sie beispielsweise einen Standardwert für form.data an:
< script setup>
import useAdmate from ' admate '
const { form } = useAdmate ({
form : {
data : {
a : {
b : {}
}
}
}
})
</ script >
< template >
{{ form.data.a.b.c }}
</ template > Wenn der Rückgabewert von axiosConfig.form.read ist: { a: {} }
Bei einer flachen Zusammenführung mit dem Standardwert erhalten Sie: { a: {} } – das Objekt b im Standardwert geht verloren, was zu einer Nullzeigerausnahme führt.
Wenn Sie eine tiefe Zusammenführung mit dem Standardwert durchführen, erhalten Sie: { a: { b: {} } } – der Code funktioniert einwandfrei.
// 示例: 自定义合并方式
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 ] ) ) ,
} ,
} ) Öffnen Sie das Formular und axiosConfig.form.create wird beim Absenden aufgerufen.
const { form } = useAdmate ( )
form . create ( )
// 等价于：将表单形态设置为“新增”，然后打开表单
form . status = 'create'
form . open ( )Die Anfangsdaten des Formulars sind nicht leer, sondern kopieren einen vorhandenen Datensatz.
const { form } = useAdmate ( )
form . create ( row )
// 等价于：将表单形态设置为“新增”，然后打开表单并传参
form . status = 'create'
form . open ( row ) Öffnen Sie das Formular und rufen Sie axiosConfig.form.read auf, um den Formularinhalt wiederzugeben
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 ( ) Öffnen Sie das Formular und rufen Sie axiosConfig.form.read auf, um den Formularinhalt wiederzugeben. Beim Absenden wird axiosConfig.form.update aufgerufen.
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 ( ) Tipp
Beim Löschen des letzten Datensatzes, der sich nicht auf der Startseite befindet, wird automatisch zur vorherigen Seite gewechselt
Es gibt drei Möglichkeiten, den Status zu ändern:
< 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 >Öffnen Sie das Formular. Die Funktionssignatur hängt von der Situation ab:
Sie können form.proxy.open als Proxy für form.open verwenden, um einige Vorgänge vor und nach form.open auszuführen oder das Verhalten von form.open zu ändern
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
Der Wert ist true , wenn axiosConfig.form.read aufgerufen wird, andernfalls ist er false
Dieser Wert kann nicht als Zeichen für das Ende des Formularechos verwendet werden, da axiosConfig.r bei der Wiederverwendung von Listendaten nicht aufgerufen wird.
<! -- 示例 -->
<script setup>
import useAdmate from 'admate'
const { form } = useAdmate()
</script>
<template>
<el-dialog>
<el-form v-loading="form.loading" />
</el-dialog>
</template> Senden Sie das Formular, rufen Sie axiosConfig.form.create beim Hinzufügen auf und rufen Sie axiosConfig.form.update beim Bearbeiten auf.
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 ( ) Sie können form.proxy.submit als Proxy für form.submit verwenden, um einige Vorgänge vor und nach form.submit auszuführen oder das Verhalten von form.submit zu ändern
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
Der Wert ist true , wenn axiosConfig.form.create oder axiosConfig.form.update aufgerufen wird, andernfalls ist er 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 ) {
// 关闭表单
}
} ) Extrahieren Sie das Formular in Unterkomponenten
Beispiel
Wenn Sie einen einzelnen Datensatz bearbeiten, springen Sie zu einer speziellen Formularseite und kehren Sie zurück, nachdem der Vorgang abgeschlossen ist.
Beispiel
Das Formular ist standardmäßig geöffnet und kann nicht geschlossen werden. Es wird normalerweise in Szenarien verwendet, in denen nur ein Datenelement in der Liste vorhanden ist, sodass die Liste weggelassen wird.
Beispiel
Das Dialogfeld der aktuellen Seite verwendet ebenfalls Admate
Beispiel
Detaillierte Änderungen in jeder Version finden Sie in den Versionshinweisen.
