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

continew-org · May 11, 2024 · 1421412 · 1421412
1 parent fe656af
commit 1421412
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 193 deletions.
diff --git a/src/components/GiTable/index.vue b/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

diff --git a/src/hooks/modules/useTable.ts b/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 // 是否显示对话框

diff --git a/src/views/monitor/log/login/index.vue b/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 {

diff --git a/src/views/monitor/log/operation/index.vue b/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 {

diff --git a/src/views/monitor/online/index.vue b/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(() => {

diff --git a/src/views/system/dept/index.vue b/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
-                v-permission="['system:dept:delete']"
-                status="danger"
-                :title="record.isSystem ? '系统内置数据不能删除' : undefined"
-                :disabled="record.disabled"
-              >
-                删除
-              </a-link>
-            </a-popconfirm>
+              删除
+            </a-link>
           </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>
diff --git a/src/views/system/dict/index.vue b/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 })