feat: useTable 支持 “无分页” 列表

src/components/GiTable/index.vue

@@ -18,11 +18,7 @@
             </a-button>
           </a-tooltip>
           <template #content>
-            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">
-{{
-              item.label
-            }}
-</a-doption>
+            <a-doption v-for="item in sizeList" :key="item.value" :value="item.value" :active="item.value === size">{{ item.label }}</a-doption>
           </template>
         </a-dropdown>
         <a-popover

src/hooks/modules/useTable.ts

@@ -10,28 +10,29 @@ interface Options<T> {
 }
 
 type PaginationParams = { page: number, size: number }
-type Api<T> = (params: PaginationParams) => Promise<ApiRes<PageRes<T[]>>>
+type Api<T> = (params: PaginationParams) => Promise<ApiRes<PageRes<T[]>>> | Promise<ApiRes<T[]>>
 
 export function useTable<T>(api: Api<T>, options?: Options<T>) {
   const { formatResult, onSuccess, immediate, rowKey } = options || {}
-  // eslint-disable-next-line ts/no-use-before-define
   const { pagination, setTotal } = usePagination(() => getTableData())
   const loading = ref(false)
   const tableData = ref<T[]>([])
 
-  const getTableData = async () => {
+  async function getTableData() {
     try {
       loading.value = true
       const res = await api({ page: pagination.current, size: pagination.pageSize })
-      tableData.value = formatResult ? formatResult(res.data.list) : res.data.list
-      setTotal(res.data.total)
+      const data = !Array.isArray(res.data) ? res.data.list : res.data
+      tableData.value = formatResult ? formatResult(data) : data
+      const total = !Array.isArray(res.data) ? res.data.total : data.length
+      setTotal(total)
       onSuccess && onSuccess()
     } finally {
       loading.value = false
     }
   }
 
-  // 是否立即出发
+  // 是否立即触发
   const isImmediate = immediate ?? true
   isImmediate && getTableData()
 
@@ -67,9 +68,9 @@ export function useTable<T>(api: Api<T>, options?: Options<T>) {
           selectedKeys.value = []
           getTableData()
         }
-        return true
+        return res.success
       } catch (error) {
-        return true
+        return false
       }
     }
     const flag = options?.showModal ?? true // 是否显示对话框

src/views/monitor/log/login/index.vue

@@ -69,18 +69,6 @@ const {
   search
 } = useTable((p) => listLog({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.ip = undefined
-  queryForm.createUserString = undefined
-  queryForm.createTime = [
-    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  ]
-  queryForm.status = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -118,6 +106,18 @@ const columns: TableInstanceColumns[] = [
   { title: '终端系统', dataIndex: 'os', ellipsis: true, tooltip: true }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.ip = undefined
+  queryForm.createUserString = undefined
+  queryForm.createTime = [
+    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  ]
+  queryForm.status = undefined
+  search()
+}
+
 // 过滤查询
 const filterChange = (dataIndex, filteredValues) => {
   try {

src/views/monitor/log/operation/index.vue

@@ -80,19 +80,6 @@ const {
   search
 } = useTable((p) => listLog({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  queryForm.ip = undefined
-  queryForm.createUserString = undefined
-  queryForm.createTime = [
-    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
-    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
-  ]
-  queryForm.status = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -130,6 +117,19 @@ const columns: TableInstanceColumns[] = [
   { title: '终端系统', dataIndex: 'os', ellipsis: true, tooltip: true }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.ip = undefined
+  queryForm.createUserString = undefined
+  queryForm.createTime = [
+    dayjs().subtract(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
+    dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
+  ]
+  queryForm.status = undefined
+  search()
+}
+
 // 过滤查询
 const filterChange = (dataIndex, filteredValues) => {
   try {

src/views/monitor/online/index.vue

@@ -69,13 +69,6 @@ const {
   search
 } = useTable((p) => listOnlineUser({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.nickname = undefined
-  queryForm.loginTime = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -98,6 +91,13 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.nickname = undefined
+  queryForm.loginTime = undefined
+  search()
+}
+
 // 强退
 const handleKickout = (token: string) => {
   kickout(token).then(() => {

src/views/system/dept/index.vue

@@ -55,21 +55,15 @@
           <a-space>
             <a-link v-permission="['system:dept:update']" @click="onUpdate(record)">修改</a-link>
             <a-link v-permission="['system:dept:add']" @click="onAdd(record.id)">新增</a-link>
-            <a-popconfirm
-              type="warning"
-              content="是否确定删除该条数据？"
-              :ok-button-props="{ status: 'danger' }"
-              @ok="onDelete(record)"
-            >
             <a-link
               v-permission="['system:dept:delete']"
               status="danger"
               :title="record.isSystem ? '系统内置数据不能删除' : undefined"
               :disabled="record.disabled"
+              @click="onDelete(record)"
             >
               删除
             </a-link>
-            </a-popconfirm>
           </a-space>
         </template>
       </GiTable>
@@ -80,12 +74,11 @@
 </template>
 
 <script setup lang="ts">
-import { Message } from '@arco-design/web-vue'
 import DeptAddModal from './DeptAddModal.vue'
 import { type DeptQuery, type DeptResp, deleteDept, exportDept, listDept } from '@/apis'
 import type GiTable from '@/components/GiTable/index.vue'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
-import { useDownload } from '@/hooks'
+import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
 import { DisEnableStatusList } from '@/constant/common'
@@ -116,27 +109,20 @@ const queryForm = reactive<DeptQuery>({
   sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
 })
 
-const dataList = ref<DeptResp[]>([])
-const loading = ref(false)
 const tableRef = ref<InstanceType<typeof GiTable>>()
-// 查询列表数据
-const getDataList = async (query: DeptQuery = { ...queryForm }) => {
-  try {
-    loading.value = true
-    const res = await listDept(query)
-    dataList.value = res.data
-    await nextTick(() => {
+const {
+  tableData: dataList,
+  loading,
+  search,
+  handleDelete
+} = useTable(() => listDept(queryForm), {
+  immediate: true,
+  onSuccess: () => {
+    nextTick(() => {
       tableRef.value?.tableRef?.expandAll(true)
     })
-  } finally {
-    loading.value = false
-  }
-}
-
-// 查询
-const search = () => {
-  getDataList()
   }
+})
 
 // 重置
 const reset = () => {
@@ -146,10 +132,11 @@ const reset = () => {
 }
 
 // 删除
-const onDelete = async (item: DeptResp) => {
-  await deleteDept(item.id)
-  Message.success('删除成功')
-  search()
+const onDelete = (item: DeptResp) => {
+  return handleDelete(() => deleteDept(item.id), {
+    content: `是否确定删除 [${item.name}]？`,
+    showModal: true
+  })
 }
 
 // 导出
@@ -167,10 +154,6 @@ const onAdd = (parentId?: string) => {
 const onUpdate = (item: DeptResp) => {
   DeptAddModalRef.value?.onUpdate(item.id)
 }
-
-onMounted(() => {
-  search()
-})
 </script>
 
 <style lang="scss" scoped></style>

src/views/system/dict/index.vue

@@ -13,17 +13,17 @@
         @refresh="search"
       >
         <template #custom-left>
-          <a-button v-permission="['system:dict:add']" type="primary" @click="onAdd">
-            <template #icon><icon-plus /></template>
-            <span>新增</span>
-          </a-button>
-        </template>
-        <template #custom-right>
           <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
             <template #prefix><icon-search /></template>
           </a-input>
           <a-button @click="reset">重置</a-button>
         </template>
+        <template #custom-right>
+          <a-button v-permission="['system:dict:add']" type="primary" @click="onAdd">
+            <template #icon><icon-plus /></template>
+            <span>新增</span>
+          </a-button>
+        </template>
         <template #isSystem="{ record }">
           <a-tag v-if="record.isSystem" color="red">是</a-tag>
           <a-tag v-else color="arcoblue">否</a-tag>
@@ -74,12 +74,6 @@ const {
   handleDelete
 } = useTable((p) => listDict({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -105,6 +99,12 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  search()
+}
+
 // 删除
 const onDelete = (item: DictResp) => {
   return handleDelete(() => deleteDict(item.id), { content: `是否确定删除字典 [${item.name}]？`, showModal: true })

src/views/system/dict/item/index.vue

@@ -22,17 +22,17 @@
       @refresh="search"
     >
       <template #custom-left>
-        <a-button type="primary" @click="onAdd">
-          <template #icon><icon-plus /></template>
-          <span>新增</span>
-        </a-button>
-      </template>
-      <template #custom-right>
         <a-input v-model="queryForm.description" placeholder="请输入关键词" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
         <a-button @click="reset">重置</a-button>
       </template>
+      <template #custom-right>
+        <a-button v-permission="['system:dict:item:add']" type="primary" @click="onAdd">
+          <template #icon><icon-plus /></template>
+          <span>新增</span>
+        </a-button>
+      </template>
       <template #label="{ record }">
         <a-tag :color="record.color">{{ record.label }}</a-tag>
       </template>
@@ -41,17 +41,14 @@
       </template>
       <template #action="{ record }">
         <a-space>
-          <template #split>
-            <a-divider direction="vertical" :margin="0" />
-          </template>
-          <a-link @click="onUpdate(record)">修改</a-link>
+          <a-link v-permission="['system:dict:item:update']" @click="onUpdate(record)">修改</a-link>
           <a-popconfirm
             type="warning"
             content="是否确定删除该条数据？"
             :ok-button-props="{ status: 'danger' }"
             @ok="onDelete(record)"
           >
-            <a-link status="danger">删除</a-link>
+            <a-link v-permission="['system:dict:item:delete']" status="danger">删除</a-link>
           </a-popconfirm>
         </a-space>
       </template>
@@ -68,12 +65,12 @@ import { type DictItemQuery, type DictItemResp, deleteDictItem, listDictItem } f
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useTable } from '@/hooks'
 import { isMobile } from '@/utils'
+import has from '@/utils/has'
 
 const { width } = useWindowSize()
 
-const dictId = ref('')
-
 const queryForm = reactive<DictItemQuery>({
+  dictId: '',
   sort: ['createTime,desc']
 })
 
@@ -83,16 +80,7 @@ const {
   pagination,
   search,
   handleDelete
-} = useTable((p) => listDictItem({ ...queryForm, dictId: dictId.value, page: p.page, size: p.size }), {
-  immediate: true
-})
-
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  queryForm.status = undefined
-  search()
-}
+} = useTable((p) => listDictItem({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
 const columns: TableInstanceColumns[] = [
   {
@@ -119,15 +107,29 @@ const columns: TableInstanceColumns[] = [
   { title: '创建时间', dataIndex: 'createTime', width: 180 },
   { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
   { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
-  { title: '操作', slotName: 'action', width: 130, align: 'center', fixed: !isMobile() ? 'right' : undefined }
+  {
+    title: '操作',
+    slotName: 'action',
+    width: 130,
+    align: 'center',
+    fixed: !isMobile() ? 'right' : undefined,
+    show: has.hasPermOr(['system:dict:item:update', 'system:dict:item:delete'])
+  }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
 const dictCode = ref('')
 const visible = ref(false)
 // 打开
 const open = (id: string, code: string) => {
   dataList.value = []
-  dictId.value = id
+  queryForm.dictId = id
   dictCode.value = code
   visible.value = true
   search()
@@ -142,7 +144,7 @@ const onDelete = (item: DictItemResp) => {
 const DictItemAddModalRef = ref<InstanceType<typeof DictItemAddModal>>()
 // 新增
 const onAdd = () => {
-  DictItemAddModalRef.value?.onAdd(dictId.value)
+  DictItemAddModalRef.value?.onAdd(queryForm.dictId)
 }
 
 // 修改

src/views/system/menu/index.vue

@@ -74,14 +74,7 @@
             <a-link v-if="[1, 2].includes(record.type)" v-permission="['system:menu:add']" @click="onAdd(record.id)">
               新增
             </a-link>
-            <a-popconfirm
-              type="warning"
-              content="是否确定删除该条数据？"
-              :ok-button-props="{ status: 'danger' }"
-              @ok="onDelete(record)"
-            >
-              <a-link v-permission="['system:menu:delete']" status="danger">删除</a-link>
-            </a-popconfirm>
+            <a-link v-permission="['system:menu:delete']" status="danger" @click="onDelete(record)">删除</a-link>
           </a-space>
         </template>
       </GiTable>
@@ -92,7 +85,6 @@
 </template>
 
 <script setup lang="ts">
-import { Message } from '@arco-design/web-vue'
 import MenuAddModal from './MenuAddModal.vue'
 import { type MenuQuery, type MenuResp, deleteMenu, listMenu } from '@/apis'
 import type GiTable from '@/components/GiTable/index.vue'
@@ -100,9 +92,21 @@ import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { DisEnableStatusList } from '@/constant/common'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
+import { useTable } from '@/hooks'
 
 defineOptions({ name: 'SystemMenu' })
 
+const queryForm = reactive<MenuQuery>({
+  sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
+})
+
+const {
+  tableData: dataList,
+  loading,
+  search,
+  handleDelete
+} = useTable(() => listMenu(queryForm), { immediate: true })
+
 const columns: TableInstanceColumns[] = [
   { title: '菜单标题', dataIndex: 'title', slotName: 'title', width: 170, fixed: !isMobile() ? 'left' : undefined },
   { title: '类型', slotName: 'type', align: 'center' },
@@ -129,28 +133,6 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
-const queryForm = reactive<MenuQuery>({
-  sort: ['parentId,asc', 'sort,asc', 'createTime,desc']
-})
-
-const dataList = ref<MenuResp[]>([])
-const loading = ref(false)
-// 查询列表数据
-const getDataList = async (query: MenuQuery = { ...queryForm }) => {
-  try {
-    loading.value = true
-    const res = await listMenu(query)
-    dataList.value = res.data
-  } finally {
-    loading.value = false
-  }
-}
-
-// 查询
-const search = () => {
-  getDataList()
-}
-
 // 重置
 const reset = () => {
   queryForm.title = undefined
@@ -159,10 +141,11 @@ const reset = () => {
 }
 
 // 删除
-const onDelete = async (item: MenuResp) => {
-  await deleteMenu(item.id)
-  Message.success('删除成功')
-  search()
+const onDelete = (item: MenuResp) => {
+  return handleDelete(() => deleteMenu(item.id), {
+    content: `是否确定删除 [${item.title}]？`,
+    showModal: true
+  })
 }
 
 const isExpanded = ref(false)
@@ -183,10 +166,6 @@ const onAdd = (parentId?: string) => {
 const onUpdate = (item: MenuResp) => {
   MenuAddModalRef.value?.onUpdate(item.id)
 }
-
-onMounted(() => {
-  search()
-})
 </script>
 
 <style lang="scss" scoped></style>

src/views/system/notice/index.vue

@@ -83,13 +83,6 @@ const {
   handleDelete
 } = useTable((p) => listNotice({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.title = undefined
-  queryForm.type = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -114,6 +107,13 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.title = undefined
+  queryForm.type = undefined
+  search()
+}
+
 // 删除
 const onDelete = (item: NoticeResp) => {
   return handleDelete(() => deleteNotice(item.id), {

src/views/system/role/index.vue

@@ -82,12 +82,6 @@ const {
   handleDelete
 } = useTable((p) => listRole({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -115,9 +109,15 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  search()
+}
+
 // 删除
 const onDelete = (item: RoleResp) => {
-  return handleDelete(() => deleteRole(item.id), { content: `是否确定删除角色 [${item.name}]？`, showModal: true })
+  return handleDelete(() => deleteRole(item.id), { content: `是否确定删除 [${item.name}]？`, showModal: true })
 }
 
 const RoleAddModalRef = ref<InstanceType<typeof RoleAddModal>>()

src/views/system/storage/index.vue

@@ -93,13 +93,6 @@ const {
   handleDelete
 } = useTable((p) => listStorage({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  queryForm.status = undefined
-  search()
-}
-
 const columns: TableInstanceColumns[] = [
   {
     title: '序号',
@@ -130,6 +123,13 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
 // 删除
 const onDelete = (item: StorageResp) => {
   return handleDelete(() => deleteStorage(item.id), { content: `是否确定删除存储 [${item.name}]？`, showModal: true })

src/views/system/user/index.vue

@@ -131,14 +131,7 @@ const {
   pagination,
   search,
   handleDelete
-} = useTable((p) => listUser({ ...queryForm, page: p.page, size: p.size }), { immediate: false })
-
-// 重置
-const reset = () => {
-  queryForm.description = undefined
-  queryForm.status = undefined
-  search()
-}
+} = useTable((p) => listUser({ ...queryForm, page: p.page, size: p.size }), { immediate: true })
 
 const columns: TableInstanceColumns[] = [
   {
@@ -178,10 +171,17 @@ const columns: TableInstanceColumns[] = [
   }
 ]
 
+// 重置
+const reset = () => {
+  queryForm.description = undefined
+  queryForm.status = undefined
+  search()
+}
+
 // 删除
 const onDelete = (item: UserResp) => {
   return handleDelete(() => deleteUser(item.id), {
-    content: `是否确定删除用户 [${item.nickname}(${item.username})]？`,
+    content: `是否确定删除 [${item.nickname}(${item.username})]？`,
     showModal: true
   })
 }