Admate

管理后台助手，用简洁而不失灵活的方式开发管理后台页面，
致力于解决「页面重复度高，提取公共代码又难以兼顾定制化需求」的痛点。

特性

• 🕶 Vue 2.6/2.7/3 通用 - 零成本升级
• 🤝 不限制 UI 框架 - 只要技术栈是 Vue + Axios 便可使用，提供主流 UI 框架示例代码 (Vuetify，Element，AntDesignVue，Quasar，PrimeVue)
• 🌐 规范统一的页面代码风格 - 避免了每个页面的代码风格五花八门、难以维护
• 🥥 模块级别的请求配置 - 虽然 Axios 支持全局配置，由于同模块内请求配置相似，接口前缀通常是一致的，所以往往还需要模块级别的配置
• 🪝 量身打造的生命周期 - 代理模式 + 控制反转，定制属于你的生命周期行为
• 🍪 贴心而不武断的 CRUD 封装
  • 列表筛选：支持监听筛选参数 (防抖控制接口调用频率) 的方式，也支持点击读取按钮触发的方式
  • 表单展现风格：支持对话框的风格，也支持独立页面的风格
  • 单条记录状态：支持调用 “编辑接口” 改变状态，也支持调用独立的 “更新状态接口” 指定新状态，也支持分别调用 “启用接口” 和 “停用接口” 改变状态
  • 加载状态：提供列表读取状态、表单读取状态、表单提交状态的响应式变量
• 🧹 缜密周全的收尾工作，没有 “后顾之忧”
  • 关闭表单时，自动将表单绑定的数据恢复至初始状态 (不是直接清空)
  • 删除当前分页最后一条记录时，自动切换至上一页 (如果当前不在第一页)
• 🔌 开箱即用的
  • 列表筛选参数重置 & 参数校验
  • 支持 URL 传参指定筛选项默认值
  • 支持动态生成筛选项默认值，使用场景举例：日期/时间类的参数，如果其默认值为当前最新时刻，重置筛选项时会重置到已过期的时刻

架构

安装

1npm i yj-admate

外置依赖

• vue
• axios
• @vue/composition-api：仅 Vue 2.6 或更早版本需要

搭配 ElementPlus

 

ElementPlus (Vue 3) 示例

搭配 Element

 

Element (Vue 2.7) 示例

Element (Vue 2.6) 示例

请求配置

axios

1useAdmate({
2  // Axios 或 Axios 实例
3  // 用于调用接口
4  axios
5})

axiosConfig

1useAdmate({
2  // Axios 配置
3  axiosConfig: {
4    // 读取列表
5    getList: {
6      method: 'GET'
7    },
8    // 新增一条记录（submitForm 在新增时调用）
9    c: {
10      method: 'POST'
11    },
12    // 读取一条记录（openForm 在查看、编辑时调用）
13    r: {
14      method: 'GET'
15    },
16    // 编辑一条记录（submitForm 在编辑时调用）
17    u: {
18      method: 'PUT'
19    },
20    // 删除一条记录
21    d: {
22      method: 'DELETE'
23    },
24    // 启用一条记录
25    enable: {
26      method: 'PUT'
27    },
28    // 禁用一条记录
29    disable: {
30      method: 'PUT'
31    },
32    // 变更一条记录的状态
33    updateStatus: {
34      method: 'PUT'
35    }
36  }
37})

urlPrefix

1useAdmate({
2  // axiosConfig 中各个接口的 URL 前缀
3  urlPrefix: ''
4})

1// 示例: URL 前缀不统一
2
3useAdmate({
4  urlPrefix: 'somepage',
5  axiosConfig: {
6    r: {
7      // 如果某个接口的前缀不是 'somepage'，可以在 URL 前面加斜线，即可忽略该前缀
8      url: '/anotherpage/selectOne'
9    }
10  }
11})

RESTful

如果接口地址需要进行动态拼接

1<!-- 示例 -->
2
3// 配置
4const { openForm, d, enable, disable, updateStatus } = useAdmate({

5  axiosConfig: {
6    // 读取列表

7    getList: payload => ({

8      method: 'GET',

9      url: 'module/' + payload.xxx
10    }),
11    // 读取一条记录（openForm 在查看、编辑时调用）

12    r: payload => ({

13      method: 'GET',

14      url: 'module/' + payload.id
15    }),
16    // 编辑一条记录（submitForm 在编辑时调用）

17    u: payload => ({

18      method: 'PUT',

19      url: 'module/' + payload.id
20    }),
21    // 删除一条记录

22    d: payload => ({

23      method: 'DELETE',

24      url: 'module/' + payload.id
25    }),
26    // 启用一条记录

27    enable: payload => ({

28      method: 'PUT',

29      url: 'module/' + payload.id
30    }),
31    // 禁用一条记录

32    disable: payload => ({

33      method: 'PUT',

34      url: 'module/' + payload.id
35    }),
36    // 变更一条记录的状态

37    updateStatus: payload => ({

38      method: 'PUT',

39      url: 'module/' + payload.id
40    }),
41  }
42})
43
44// 使用
45openForm({ id: 1 }, 'config')
46d({ id: 1 }, 'config')
47enable({ id: 1 }, 'config')
48disable({ id: 1 }, 'config')
49updateStatus({ id: 1 }, 'config')

FormData

Axios 的 data 默认以 application/json 作为 MIME type，如果你需要使用 multipart/form-data：

• 全局配置

给你的 Axios 配置 transformRequest、headers['Content-Type']

• 局部配置

getList、openForm、d、updateStatus、enable、disable、submitForm 的参数 1 均支持 FormData 类型

1<!-- 示例: 局部配置 -->
2
3<template>
4  <el-table>
5    <el-table-column label="操作">
6      <template #default="{ row: { id } }">
7        <el-button @click="r(FormData.from({ id }))"> 查看 </el-button>
8        <el-button @click="u(FormData.from({ id }))"> 编辑 </el-button>
9        <el-button @click="d(FormData.from({ id }))"> 删除 </el-button>
10      </template>
11    </el-table-column>
12  </el-table>
13
14  <el-dialog>
15    <template #footer>
16      <el-button @click="() => submitForm(FormData.from(form.data))"> 确 定 </el-button>
17    </template>
18  </el-dialog>
19</template>
20
21<script setup>
22import { jsonToFormData, pickDeepBy } from 'kayran'
23import useAdmateAdapter from '@/utils/useAdmateAdapter'
24
25// 过滤 list.value.filter 并转换为 FormData 格式
26FormData.from = (json) => {
27  const formData = new FormData()
28  for (const k in json) {
29    if (![NaN, null, undefined].includes(json[k])) {
30      formData.append(k, json[k])
31    }
32  }
33  return formData
34}
35
36useAdmateAdapter({
37  getListProxy(getList, trigger) {
38    getList(FormData.from(list.value.filter))
39  }
40})
41
42const FormData = window.FormData
43</script>

列表

筛选参数

list.filter

1useAdmate({
2  list: {
3    // 可以在这里提供筛选参数的默认值
4    filter: {
5      [list.pageNumberKey]: 1
6    },
7
8    // 必填
9    // 页码的参数名
10    pageNumberKey: undefined
11  }
12})

触发读取

• 点击专用的读取按钮触发
  • ❌ 操作相对繁琐。
  • ❌ 列表数据与筛选条件可能是无关的。可能产生 “当前的列表数据是否基于筛选项？” 的顾虑，导致徒增点击读取按钮的次数。
  • ✔️ 想同时设置多个筛选条件时，只调用一次接口，不会造成资源浪费。

1useAdmate({
2  list: {
3    watchFilter: false
4  }
5})

---

• 改变筛选条件后即时触发
  • ✔️ 操作相对简便。
  • ✔️ 列表数据与筛选条件即时绑定。
  • ✔️ 想同时设置多个筛选条件时，接口会被多次调用，造成资源浪费 (Admate 已优化)。

1useAdmate({
2  list: {
3    watchFilter: true, // 默认值
4
5    // 防抖间隔，单位毫秒
6    // 如果筛选参数不含 input 类型，可以设置为 0，即不防抖
7    // 翻页不会触发防抖
8    // watchFilter 开启时有效
9    debounceInterval: 300 // 默认值
10  }
11})

列表数据

list.data

1useAdmate({
2  list: {
3    // 列表数据
4    data: [],
5
6    // 指定接口返回值中列表数据的位置
7    // 支持属性名，如 `'data'`
8    // 支持属性路径，如 `'data[0].records'`
9    // 支持 symbol 类型的属性名
10    // 支持 Function，如 `response => response.data`
11    dataAt: undefined,
12
13    // 指定接口返回值中记录总数的位置
14    // 支持属性名，如 `'total'`
15    // 支持属性路径，如 `'data[0].total'`
16    // 支持 symbol 类型的属性名
17    // 支持 Function，如 `response => response.total`
18    totalAt: undefined
19  }
20})

读取列表

getList

获取列表，在首次进入页面、列表筛选参数改变、单条记录增删查改后会被调用

1const {
2  /**
3   * PS: 以下为原始 getList 的函数签名，如果你配置了 getListProxy，则以 getListProxy 为准
4   *
5   * @param {any} [payload = list.filter]
6   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
7   * @returns {Promise<any>} 接口返回值
8   */
9  getList
10} = useAdmate()
11
12getList() // 手动读取

getListProxy

你可以使用 getListProxy 来代理 getList，以便在 getList 前后做一些操作，或改变 getList 的行为

1useAdmate({
2  /**
3   * @param {Function} getList 被代理的原始 getList
4   * @param {string} trigger 调用动机 可能的值: 'init' 'pageNumberChange' 'filterChange' 'c' 'r' 'u' 'd' 'updateStatus' 'enable' 'disable'
5   */
6  getListProxy(getList, trigger) {}
7})

1// 示例: 获取列表之前，校验参数
2
3useAdmate({
4  getListProxy(getList, trigger) {
5    if (trigger === 'filterChange') {
6      listFilterRef.value.validate().then(() => {
7        getList()
8      })
9    } else {
10      getList()
11    }
12  }
13})

1// 示例: 单条记录操作成功后，弹出提示
2
3useAdmate({
4  getListProxy(getList, trigger) {
5    getList()
6    if (['c', 'u', 'd', 'updateStatus', 'enable', 'disable'].includes(trigger)) {
7      currentInstance.value.$message.success('操作成功')
8    }
9  }
10})

1// 示例: 读取列表后，修改列表数据
2
3const { list } = useAdmate({
4  getListProxy(getList, trigger) {
5    getList().then((response) => {
6      // response 为 axiosConfig.getList 的接口返回值
7      list.data = response.data?.filter((v) => !v.disabled)
8    })
9  }
10})

读取状态

list.loading

axiosConfig.getList 被调用时值为 true，否则为 false

1<!-- 示例 -->
2
3<template>
4  <el-table v-loading="list.loading" />
5</template>
6
7<script setup>
8import useAdmate from 'admate'
9
10const { list } = useAdmate()
11
12function handleTable() {
13  list.value.loading = true
14  Vue.prototype.$POST('').finally(() => {
15    list.value.loading = false
16  })
17}
18</script>

表单

表单风格

表单默认是对话框的风格，但也支持独立页面的风格

对比

• 对话框：体验好，割裂感低，表单的开闭不影响父页面状态
• 独立页面：体验较差，从表单返回父页面时，父页面的状态会丢失，比如列表筛选状态

表单显隐

form.show: boolean

表单数据

form.data

1useAdmate({
2  form: {
3    // 可以在这里提供表单数据的默认值
4    data: {},
5
6    // 在查看、编辑表单时，可能需要调用接口（axiosConfig.r）回显表单的数据
7    // dataAt 用于指定接口返回值中表单数据的位置
8    // 支持属性名，如 `'detail'`
9    // 支持属性路径，如 `'data[0].detail'`
10    // 支持 symbol 类型的属性名
11    // 支持 Function，如 `response => response.detail`
12    dataAt: undefined,
13
14    // 接口（axiosConfig.r）返回值与 form.data 合并的方式
15    mergeData: 'deep'
16  }
17})

mergeData：

• 'deep'：深合并 (默认)
• 'shallow'：浅合并
• (newFormData: any) => any：自定义合并方式
• false：不合并，直接替换

为什么默认是深合并？

在 Vue 2 中，template 不支持 ?. 语法，要在 template 中判空，代码写起来会非常冗余，通常的做法是在 data 中声明空对象

比如给 form.data 提供默认值：

1<template>
2  {{ form.data.a.b.c }}
3</template>
4
5<script setup>
6import useAdmate from 'admate'
7
8const { form } = useAdmate({
9  form: {
10    data: {
11      a: {
12        b: {}
13      }
14    }
15  }
16})
17</script>

如果 axiosConfig.r 的返回值为： { a: {} }

如果与默认值浅合并后将得到： { a: {} } —— 默认值中的对象 b 丢失了，引发空指针异常。

如果与默认值深合并后将得到： { a: { b: {} } } —— 代码正常工作。

1// 示例: 自定义合并方式
2
3import { mergeWith } from 'lodash'
4
5const defaultFormData = () => ({
6  a: {
7    b: {}
8  }
9})
10
11const { form } = useAdmate({
12  form: {
13    data: defaultFormData(),
14    // 接口返回值中嵌套的对象可能为 null，会覆盖默认值中的空对象
15    mergeData(
16      // 接口返回值在通过 form.dataAt 计算过后的值
17      newFormData
18    ) {
19      // Vue 3 中不需要赋值，mergeWith 的改动是响应式的
20      form.data = mergeWith(defaultFormData(), newFormData, (oldObj, newObj) =>
21        [undefined, null].includes(newObj) ? oldObj : undefined
22      )
23    }
24  }
25})

表单形态

form.status: StatusType

新增

打开表单，提交时会调用 axiosConfig.c

1const { form, openForm } = useAdmate()
2
3// 将表单形态设置为“新增”，然后打开表单
4form.status = 'c'
5openForm()

复制新增

表单的初始数据不是空白，而是复制一条已有的记录

1. 打开表单时，和查看/编辑一样，需要调接口回显
2. 提交表单时调用的是新增的接口
3. 表单名称显示为 “复制新增”

复制新增属于一种交叉状态，这种情况没有必要专门增加一种表单形态，可以借助一个辅助变量如 isCopy，用 isCopy && form.status ==='c' 来判断是不是复制新增，然后给 openForm 传参即可回显。

查看

打开表单，并调用 axiosConfig.r 回显表单内容

1const { form, openForm } = useAdmate()
2
3// 将表单形态设置为“查看”，然后打开表单
4form.status = 'r'
5/**
6 * PS: 以下为原始 openForm 的函数签名，如果你配置了 openFormProxy ，则以 openFormProxy 为准
7 *
8 * @param {any} [payload] 如果 payload 不为空，则会调用 axiosConfig.r
9 * @param {'data'|'params'|'config'|'cache'} [payloadAs] 指定 payload 的用途
10 *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
11 *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
12 *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
13 *   'cache': 将 payload 直接用作表单数据（不调用读取单条记录的接口）
14 * @returns {Promise<any>} axiosConfig.r 的返回值
15 */
16openForm()

编辑

打开表单，并调用 axiosConfig.r 回显表单内容，提交时会调用 axiosConfig.u

1const { form, openForm } = useAdmate()
2
3// 将表单形态设置为“编辑”，然后打开表单
4form.status = 'u'
5/**
6 * PS: 以下为原始 openForm 的函数签名，如果你配置了 openFormProxy，则以 openFormProxy 为准
7 *
8 * @param {any} [payload] 如果 payload 不为空，则会调用 axiosConfig.r
9 * @param {'data'|'params'|'config'|'cache'} [payloadAs] 指定 payload 的用途
10 *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
11 *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
12 *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
13 *   'cache': 将 payload 直接用作表单数据（不调用读取单条记录的接口）
14 * @returns {Promise<any>} axiosConfig.r 的返回值
15 */
16openForm()

删除

1const {
2  /**
3   * @param {any} [payload]
4   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
5   *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
6   *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
7   *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
8   * @returns {Promise<any>} axiosConfig.d 的返回值
9   */
10  d
11} = useAdmate()

状态变更

状态变更有三种方式：

1. 后端提供一个统一的接口，传参指定新的状态

使用 updateStatus

1<template>
2  <el-table>
3    <el-table-column label="操作" align="center">
4      <template #default="{ row: { id, status } }">
5        <el-switch @change="updateStatus({ id, status: status ^ 1 })" />
6      </template>
7    </el-table-column>
8  </el-table>
9</template>
10
11<script setup>
12import useAdmate from 'admate'
13
14const {
15  /**
16   * @param {any} [payload]
17   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
18   *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
19   *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
20   *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
21   * @returns {Promise<any>} axiosConfig.updateStatus 的返回值
22   */
23  updateStatus
24} = useAdmate()
25</script>

2. 后端提供启用和停用两个接口

使用 enable 和 disable

1<template>
2  <el-table>
3    <el-table-column label="操作" align="center">
4      <template #default="{ row: { id, status } }">
5        <el-switch @change=";[enable, disable][status]({ id })" />
6      </template>
7    </el-table-column>
8  </el-table>
9</template>
10
11<script setup>
12import useAdmate from 'admate'
13
14const {
15  /**
16   * @param {any} [payload]
17   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
18   *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
19   *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
20   *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
21   * @returns {Promise<any>} axiosConfig.enable 的返回值
22   */
23  enable,
24  /**
25   * @param {any} [payload]
26   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
27   *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
28   *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
29   *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
30   * @returns {Promise<any>} axiosConfig.disable 的返回值
31   */
32  disable
33} = useAdmate()
34</script>

3. 后端未提供独立的接口，使用编辑接口改变状态

把 updateStatus 当作 u 来使用

1<template>
2  <el-table>
3    <el-table-column label="操作" align="center">
4      <template #default="{ row }">
5        <el-switch @change="updateStatus({ ...row, status: row.status ^ 1 })" />
6      </template>
7    </el-table-column>
8  </el-table>
9</template>
10
11<script setup>
12import useAdmate from 'admate'
13
14const {
15  /**
16   * @param {any} [payload]
17   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
18   *   'data': 将 payload 用作请求配置的 `data` 参数（请求方式为 POST / PATCH / PUT / DELETE 时默认）
19   *   'params': 将 payload 用作请求配置的 `params` 参数（请求方式为 GET / HEAD 时默认）
20   *   'config': 将 payload 仅用于构建请求配置（详见 RESTful 章节）
21   * @returns {Promise<any>} axiosConfig.updateStatus 的返回值
22   */
23  updateStatus
24} = useAdmate({
25  axiosConfig: {
26    updateStatus: {
27      // 按编辑接口进行配置
28    }
29  }
30})
31</script>

打开表单

openForm

打开表单，函数签名要分情况：

• 新增时
• 查看时
• 编辑时

openFormProxy

你可以使用 openFormProxy 来代理 openForm，以便在 openForm 前后做一些操作，或改变 openForm 的行为

1useAdmate({
2  /**
3   * @param {Function} openForm 被代理的原始 openForm
4   * @returns {Promise<object> | object | void} object 为打开表单后 form 的终态
5   */
6  openFormProxy(openForm) {}
7})

1// 示例: 回显表单后，修改表单数据
2
3const { form } = useAdmate({
4  openFormProxy(openForm) {
5    // 新增时 openForm 没有返回值
6    return new Promise((resolve, reject) => {
7      openForm()
8        ?.then((response) => {
9          // response 为 axiosConfig.r 的接口返回值
10          // 修改表单数据
11          form.data.status = 1
12          resolve()
13        })
14        .catch(() => {
15          reject()
16        })
17    })
18  }
19})

1// 示例: 回显表单后，清除校验
2
3useAdmate({
4  openFormProxy(openForm) {
5    return new Promise((resolve, reject) => {
6      openForm()
7        ?.finally(() => {
8          formRef.value.clearValidate()
9        })
10        .then(() => {
11          resolve()
12        })
13        .catch(() => {
14          reject()
15        })
16    })
17  }
18})

1// 示例: 回显表单后，自定义表单的开闭和读取状态
2useAdmate({
3  openFormProxy(openForm) {
4    return new Promise((resolve, reject) => {
5      // 可以在 finally 中 resolve
6      openForm()
7        .then(() => {
8          // 回显成功后，默认停止加载
9          resolve({
10            loading: false
11          })
12        })
13        .catch(() => {
14          // 回显失败后，默认关闭表单并停止加载
15          reject({
16            show: false,
17            loading: false
18          })
19        })
20    })
21  }
22})
23
24// 也可以返回一个对象（如果没有异步操作）
25useAdmate({
26  openFormProxy(openForm) {
27    return {
28      loading: false
29    }
30  }
31})

读取状态

form.loading

axiosConfig.r 被调用时值为 true，否则为 false

不能将该值当作表单回显结束的标志，因为复用列表数据时不会调用 axiosConfig.r

1<!-- 示例 -->
2
3<template>
4  <el-dialog>
5    <el-form v-loading="form.loading" />
6  </el-dialog>
7</template>
8
9<script setup>
10import useAdmate from 'admate'
11
12const { form } = useAdmate()
13</script>

提交表单

submitForm

提交表单，新增时调用 axiosConfig.c，编辑时调用 axiosConfig.u

1const {
2  /**
3   * PS: 以下为原始 submitForm 的函数签名，如果你配置了 submitFormProxy ，则以 submitFormProxy 为准
4   *
5   * @param {any} [payload = form.data]
6   * @param {'data'|'params'|'config'} [payloadAs] 指定 payload 的用途
7   * @returns {Promise<any>} 接口返回值
8   */
9  submitForm
10} = useAdmate()

submitFormProxy

你可以使用 submitFormProxy 来代理 submitForm，以便在 submitForm 前后做一些操作，或改变 submitForm 的行为

1useAdmate({
2  /**
3   * @param {Function} submitForm 被代理的原始 submitForm
4   * @returns {Promise<object> | object | void} object 为提交表单后 form 的终态
5   */
6  submitFormProxy(submitForm) {}
7})

1// 示例: 指定提交参数
2
3submitForm({
4  ...form.data,
5  status: 1
6})
7
8// submitForm 被代理时
9useAdmate({
10  submitFormProxy(submitForm) {
11    return new Promise((resolve, reject) => {
12      submitForm({
13        ...form.data,
14        status: 1
15      })
16        .then(() => {
17          resolve()
18        })
19        .catch(() => {
20          reject()
21        })
22    })
23  }
24})

1// 示例: 提交前校验表单
2
3useAdmate({
4  submitFormProxy(submitForm) {
5    return new Promise((resolve, reject) => {
6      formRef.value.validate().then(() => {
7        submitForm()
8          .then(() => {
9            resolve()
10          })
11          .catch(() => {
12            reject()
13          })
14      })
15    })
16  }
17})

1// 示例: 提交表单后，自定义表单的开闭和提交状态
2
3// 返回一个 promise
4useAdmate({
5  submitFormProxy(submitForm) {
6    return new Promise((resolve, reject) => {
7      formRef.value.validate().then(() => {
8        submitForm()
9          .then(() => {
10            // 提交成功后，默认关闭表单，并停止加载
11            resolve({
12              show: false,
13              submitting: false
14            })
15          })
16          .catch(() => {
17            // 提交失败后，默认仅停止加载
18            reject({
19              show: true,
20              submitting: false
21            })
22          })
23      })
24    })
25  }
26})
27
28// 也可以返回一个对象（如果没有异步操作）
29useAdmate({
30  submitFormProxy(submitForm) {
31    return {
32      show: false,
33      submitting: false
34    }
35  }
36})

提交状态

form.submitting

axiosConfig.c 或 axiosConfig.u 被调用时值为 true，否则为 false

1<!-- 示例 -->
2
3<template>
4  <el-dialog>
5    <template #footer>
6      <el-button :loading="form.submitting"> 确 定 </el-button>
7    </template>
8  </el-dialog>
9</template>
10
11<script setup>
12import useAdmate from 'admate'
13
14const { form } = useAdmate()
15</script>

生命周期

读取列表

1// 示例: 适配层提供 afterGetList
2
3useAdmateAdapter({}, {
4  afterGetList (res, trigger) {
5    // res 为接口返回值，trigger 为调用动机
6    // 可访问 this（组件实例）
7  }
8}

打开 / 读取表单

• 读取表单前

1watch(
2  () => form.value.show,
3  (n) => {
4    if (n) {
5      // 打开表单
6    }
7  }
8)

• 读取表单后

1// 示例: 适配层提供 afterOpenForm
2
3useAdmateAdapter(
4  {},
5  {
6    afterOpenForm(res) {
7      // res 为接口返回值（新增时为空）
8      // 可访问 this（组件实例）
9    }
10  }
11)

• 读取表单后 (不含新增)

1// 示例: 适配层提供 afterRetrieve
2
3useAdmateAdapter(
4  {},
5  {
6    afterRetrieve(res) {
7      // res 为接口返回值
8      // 可访问 this（组件实例）
9    }
10  }
11)

提交表单

• 提交表单前

1// 示例: 适配层提供 beforeSubmit
2
3useAdmateAdapter(
4  {},
5  {
6    beforeSubmit(form) {
7      // 可访问 this（组件实例）
8    }
9  }
10)

• 提交表单后

1// 示例: 适配层提供 afterSubmit
2
3useAdmateAdapter(
4  {},
5  {
6    afterSubmit(res) {
7      // res 为接口返回值
8      // 可访问 this（组件实例）
9    }
10  }
11)

关闭表单

1watch(
2  () => form.value.show,
3  (n) => {
4    if (!n) {
5      // 关闭表单
6    }
7  }
8)

类型

1type StatusType = '' | 'c' | 'r' | 'u' | string

场景

表单是子组件

将表单抽离为子组件

示例

表单是独立页面

操作单条记录时，跳转到专用的表单页面，操作完毕后返回

示例

只有表单没有列表

表单默认打开，且无法关闭，通常用于列表中只有一条数据，故列表被省略的场景

示例

嵌套使用

当前页面的对话框也使用 Admate

示例

开发

1. 安装 Deno
2. 执行 npm i -g @cloydlau/scripts
3. 执行 cl i 并选择 pnpm
4. 执行 cl dev3 / cl dev2.7 / cl dev2.6