hooks

⭐⭐⭐⭐⭐

针对列表页、详情页、弹窗组件提供了三个hooks，返回的数据均为响应式

useList

集成通用列表页的常用变量和方法，根据控制器名称自动拼接接口地址，一劳永逸

接收的参数

名称	类型	是否必填	默认值	说明
controller	string	必填	/	控制器名称，用于拼接后端接口路径和详情页路径
autoQueryList	boolean	选填	true	是否自动请求列表，true 的情况下将在页面 onMounted 中自动发起列表数据请求
key	string	选填	'id'	主键字段名，用于勾选数据时指定行项的主键

返回的数据

名称	类型	说明
query	object	查询对象，对象内包含 pageIndex（当前页，默认为1），pageSize（每页数据量，默认为15）
total	number	总数据量
list	array	数据列表
listLoading	boolean	数据列表是否正在加载中
selectedRows	array	选中的行项，例如：[{id: 1, title: 标题1}, {id: 2, title: 标题2}]
keyList	array	选中的行项的主键列表，例如：[1, 2, 3]
queryList	function	列表的查询方法，自动拼接接口地址：/${controller}/queryList
deleteList	function	列表的批量删除方法，删除已勾选数据，自动拼接接口地址：/${controller}/delete
changeStart	function(row)	该条数据是否启用的方法，接收一个参数：当前行，自动拼接接口地址：/${controller}/changeStart
browse	function(id)	跳转到浏览详情，接收一个参数：主键id
addNew	function	跳转到新增详情
selectionChange	function	选中项改变事件

使用方法

import useList from '@/hooks/useList'

const opt = {
  controller: 'siteNotice'
}
const { query, total, list, listLoading, queryList, deleteList, changeStart, selectionChange } = useList(opt)

useList 的使用模版请看这里

useForm

集成通用详情页的常用变量和方法，根据控制器名称自动拼接接口地址

接收的参数

名称	类型	是否必填	默认值	说明
controller	string	必填	/	控制器名称，用于拼接后端接口路径和详情页路径
autoBrowse	boolean	选填	true	是否自动请求列表，true 的情况下将在页面 onMounted 中自动发起详情数据请求
key	string	选填	'id'	主键字段名，用于指定当前数据的主键
beforeSave	function	选填	/	保存前调用的函数，常用于保存前的判断，通过抛出异常 throw new Error() 来终止后续的保存动作

返回的数据

名称	类型	说明
id	number	主键值
row	object	表单数据
isAddNew	boolean	是否新增
isBrowse	boolean	是否浏览
browse	function	详情数据的查询方法，自动拼接接口地址：/${controller}/browse
doDelete	function	删除当前数据，自动拼接接口地址：/${controller}/delete
doSave	function	保存当前数据
doBack	function	返回列表页

使用方法

import useForm from '@/hooks/useForm'

const opt = {
  controller: 'article'
}
const { row, doDelete, doSave, doBack, isAddNew } = useForm(opt)

useForm 的使用模版请看这里

useDialog

集成通用弹窗组件的常用变量和方法，根据控制器名称自动拼接接口地址

接收的参数

名称	类型	是否必填	默认值	说明
controller	string	必填	/	控制器名称，用于拼接后端接口路径和详情页路径
key	string	选填	'id'	主键字段名，用于指定当前数据的主键

返回的数据

名称	类型	说明
saving	boolean	是否正在保存中
save	function	保存方法，接收三个参数：1.表单数据，2.表单ref，3.成功的回调函数

使用方法

import useDialog from '@/hooks/useDialog'

const opt = {
  controller: 'siteNotice'
}
const { saving, save } = useDialog(opt)
save.value()

useDialog 的使用模版请看这里