feat: 增加 刷新列表 删除行 获取查询参数 方法

yudao-ui-admin-vue3/src/hooks/web/useVxeGrid.ts

@@ -1,4 +1,4 @@
-import { computed, reactive } from 'vue'
+import { computed, nextTick, reactive } from 'vue'
 import { SizeType, VxeGridProps } from 'vxe-table'
 import { useAppStore } from '@/store/modules/app'
 import { VxeAllSchemas } from './useVxeCrudSchemas'
@@ -112,17 +112,43 @@ export const useVxeGrid = <T = any>(config?: UseVxeGridConfig<T>) => {
     }
   })
 
-  const delList = (ids: string | number | string[] | number[]) => {
+  // 刷新列表
+  const getList = async (ref) => {
+    await nextTick()
+    ref.value?.commitProxy('query')
+  }
+
+  // 获取查询参数
+  const getSearchData = async (ref) => {
+    await nextTick()
+    const queryParams = Object.assign(
+      {},
+      JSON.parse(JSON.stringify(ref.value?.getProxyInfo()?.form))
+    )
+    return queryParams
+  }
+
+  // 删除
+  const delList = async (ref, ids: string | number | string[] | number[]) => {
+    await nextTick()
     return new Promise(async () => {
-      message.delConfirm().then(() => {
+      message
+        .delConfirm()
+        .then(() => {
           config?.delListApi && config?.delListApi(ids)
           message.success(t('common.delSuccess'))
         })
+        .finally(async () => {
+          // 刷新列表
+          ref.value?.commitProxy('query')
+        })
     })
   }
 
   return {
     gridOptions,
+    getList,
+    getSearchData,
     delList
   }
 }

yudao-ui-admin-vue3/src/views/system/operatelog/index.vue

@@ -57,7 +57,7 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions } = useVxeGrid<OperateLogApi.OperateLogVO>({
+const { gridOptions, getSearchData } = useVxeGrid<OperateLogApi.OperateLogVO>({
   allSchemas: allSchemas,
   getListApi: OperateLogApi.getOperateLogPageApi
 })
@@ -77,10 +77,7 @@ const handleDetail = (row: OperateLogApi.OperateLogVO) => {
 // 导出操作
 const handleExport = async () => {
   message.exportConfirm().then(async () => {
-    const queryParams = Object.assign(
-      {},
-      JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data)) // TODO @星语：这个有没办法，封装个 util 获取哈？
-    )
+    const queryParams = await getSearchData(xGrid)
     const res = await OperateLogApi.exportOperateLogApi(queryParams)
     download.excel(res, '岗位列表.xls')
   })

yudao-ui-admin-vue3/src/views/system/post/index.vue

@@ -90,9 +90,10 @@ const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 // 列表相关的变量
 const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
-const { gridOptions } = useVxeGrid<PostApi.PostVO>({
+const { gridOptions, getList, delList, getSearchData } = useVxeGrid<PostApi.PostVO>({
   allSchemas: allSchemas,
-  getListApi: PostApi.getPostPageApi
+  getListApi: PostApi.getPostPageApi,
+  delListApi: PostApi.deletePostApi
 })
 // 弹窗相关的变量
 const dialogVisible = ref(false) // 是否显示弹出层
@@ -116,10 +117,7 @@ const handleCreate = () => {
 
 // 导出操作
 const handleExport = async () => {
-  const queryParams = Object.assign(
-    {},
-    JSON.parse(JSON.stringify(xGrid.value?.getRefMaps().refForm.value.data))
-  )
+  const queryParams = await getSearchData(xGrid)
   const res = await PostApi.exportPostApi(queryParams)
   download.excel(res, '岗位列表.xls')
 }
@@ -141,16 +139,7 @@ const handleDetail = async (rowId: number) => {
 
 // 删除操作
 const handleDelete = async (rowId: number) => {
-  message
-    .delConfirm()
-    .then(async () => {
-      await PostApi.deletePostApi(rowId)
-      message.success(t('common.delSuccess'))
-    })
-    .finally(() => {
-      // 刷新列表
-      xGrid.value?.commitProxy('query')
-    })
+  delList(xGrid, rowId)
 }
 
 // 提交新增/修改的表单
@@ -174,7 +163,7 @@ const submitForm = async () => {
       } finally {
         actionLoading.value = false
         // 刷新列表
-        xGrid.value?.commitProxy('query')
+        getList(xGrid)
       }
     }
   })