封装获取列表数据hook

src/components/upload/index.vue

@@ -15,10 +15,10 @@
 		<!-- 上传多长图片 需增加limit属性，设定图片最多张数 -->
     <!-- <uploadVue @set-imgs="youImgs=$event" :limit="2"></uploadVue> -->
 
-    <!-- 上传单张图片，可以恢复表单图片显示 -->
+    <!-- 上传单张图片，img属性可以恢复表单图片显示 -->
     <!-- <uploadVue img="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" @set-img="youImg=$event"></uploadVue> -->
 
-    <!-- 上传多张图片，可以恢复表单图片显示 需增加limit属性，设定图片最多张数 -->
+    <!-- 上传多张图片，imgs属性可以恢复表单图片多图显示 需增加limit属性，设定图片最多张数 -->
     <!-- <uploadVue :imgs="['https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png']" @set-imgs="youImgs=$event" :limit="2"></uploadVue> -->
 		
   </div>

src/hooks/useCommon.ts

@@ -8,8 +8,17 @@ export default function () {
   return { statusParams }
 }
 
-export function useSearch<T>(expandParams?: any) {
-  //  <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList" />
+export function useSearch<T>(api: any, resKey: string, expandParams?: any) {
+
+  //  <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList()" />
+
+  // import api from '/@/api/system';
+  // import { ApiRow } from '/@/api/model/system/menu';
+  // import { useSearch } from '/@/hooks/useCommon';
+
+  // const { params, tableData, getList } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '' });
+  // getList() // 获取列表数据
+
   interface SearchParams {
     status: -1 | 0 | 1,
     pageNum: number;
@@ -17,6 +26,7 @@ export function useSearch<T>(expandParams?: any) {
     total: number;
     [key: string]: any;
   }
+
   const params = reactive<SearchParams>({
     status: -1,
     pageNum: 1,
@@ -27,5 +37,14 @@ export function useSearch<T>(expandParams?: any) {
 
   const tableData = ref<T | []>([])
 
-  return { params, tableData }
+  const getList = async (pageNum?: number) => {
+    pageNum && (params.pageNum = pageNum);
+    tableData.value = [];
+    params.total = 0;
+    let res = await api(params)
+    tableData.value = (resKey ? (res[resKey]) : (res)) || [];
+    params.total = res.total;
+  };
+
+  return { params, tableData, getList }
 }

src/views/system/api/index.vue

@@ -64,15 +64,8 @@ import { ElMessageBox, ElMessage } from 'element-plus';
 import { useSearch } from '/@/hooks/useCommon';
 
 const editFormRef = ref();
-const { params, tableData } = useSearch<ApiRow[]>({ name: '', address: '' });
 
-const getList = async (pageNum?: number) => {
-	pageNum && (params.pageNum = pageNum);
-	tableData.value = [];
-	let res = await api.api.getList(params);
-	tableData.value = res.Info || [];
-	params.total = res.total;
-};
+const { params, tableData, getList } = useSearch<ApiRow[]>(api.api.getList, 'Info', { name: '', address: '' });
 
 getList();