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 의 데이터는 기본적으로 MIME 유형으로 application/json 사용합니다. multipart/form-data 사용해야 하는 경우:
Axios 에 대한 transformRequest 및 headers['Content-Type'] 구성
list.read , list.search , list.reset , form.open , form.delete , form.switch 및 form.submit 의 매개변수 1은 모두 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
axiosConfig.list.read 호출되면 값은 true 이고, 그렇지 않으면 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에서는 템플릿이 ?. 구문을 지원하지 않습니다. 템플릿에서 null을 확인하려면 코드 작성이 매우 중복됩니다.
예를 들어 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
axiosConfig.form.read 호출되면 값은 true 이고, 그렇지 않으면 false 입니다.
목록 데이터를 재사용할 때 axiosConfig.r이 호출되지 않으므로 이 값은 echo 형식의 끝을 나타내는 기호로 사용할 수 없습니다.
<! -- 示例 -->
<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
axiosConfig.form.create 또는 axiosConfig.form.update 호출되면 값은 true 이고, 그렇지 않으면 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를 사용하고 있습니다.
예
각 버전의 자세한 변경 사항은 릴리스 노트를 참조하세요.
