优化接口管理页面列表查询功能提取全局hooks，优化分页组件

package.json

@@ -7,9 +7,10 @@
   "scripts": {
     "dev": "vite --force",
     "build": "vite build",
-    "deploy": "npm run build && npm run deploy:rm && npm run deploy:scp",
+    "deploy": "npm run build && npm run deploy:rm && npm run deploy:scp && npm run deploy:auth",
     "deploy:rm": "ssh iot 'rm -rf /www/wwwroot/zhgy.sagoo.cn-copy/* && rm -rf /www/wwwroot/zhgy.sagoo.cn-pre/*'",
     "deploy:scp": "scp -r ./dist/* iot:/www/wwwroot/zhgy.sagoo.cn-pre/ && ssh iot 'mv /www/wwwroot/zhgy.sagoo.cn/* /www/wwwroot/zhgy.sagoo.cn-copy && mv /www/wwwroot/zhgy.sagoo.cn-pre/* /www/wwwroot/zhgy.sagoo.cn'",
+    "deploy:auth": "ssh iot 'chown -R www /www/wwwroot/zhgy.sagoo.cn/'",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
@@ -81,4 +82,4 @@
     "type": "git",
     "url": "https://gitee.com/lyt-top/vue-next-admin.git"
   }
-}
+}

src/api/system/index.ts

@@ -10,6 +10,7 @@ export default {
   api: {
     getList: (params?: object) => get('/system/api/list', params),
     getAll: () => get('/system/api/GetAll'),
+    detail: (id: number) => get('/system/api/detail', { id }),
     add: (data: object) => post('/system/api/add', data),
     del: (id: number) => del('/system/api/del', { id }),
     edit: (data: object) => put('/system/api/edit', data),

src/components/pagination/index.vue

@@ -74,7 +74,8 @@ export default defineComponent({
         emit('update:limit', val)
       }
     });
-    const handleSizeChange = (val:number) => {
+    const handleSizeChange = (val: number) => {
+      currentPage.value = 1
       emit('pagination', { page: currentPage.value, limit: val })
     };
     const handleCurrentChange=(val:number) => {

src/hooks/useCommon.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 
 export default function () {
   const statusParams = reactive({
@@ -7,3 +7,25 @@ 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" />
+  interface SearchParams {
+    status: -1 | 0 | 1,
+    pageNum: number;
+    pageSize: number;
+    total: number;
+    [key: string]: any;
+  }
+  const params = reactive<SearchParams>({
+    status: -1,
+    pageNum: 1,
+    pageSize: 10,
+    total: 0,
+    ...expandParams
+  })
+
+  const tableData = ref<T | []>([])
+
+  return { params, tableData }
+}

src/views/system/api/component/edit.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, nextTick } from 'vue';
 import api from '/@/api/system';
 import { ApiRow } from '/@/api/model/system/menu';
 import { ruleRequired } from '/@/utils/validator';
@@ -41,6 +41,7 @@ const menuData = ref<any[]>([]);
 
 const baseForm: ApiRow = {
 	menuIds: [],
+	id: undefined,
 	name: '',
 	address: '',
 	remark: '',
@@ -82,9 +83,10 @@ const resetForm = async () => {
 
 const open = async (row: any) => {
 	resetForm();
-	Object.assign(formData, { ...row });
 	showDialog.value = true;
-	// console.log(row);
+	nextTick(() => {
+		Object.assign(formData, { ...row });
+	});
 };
 
 defineExpose({ open });

src/views/system/api/index.vue

@@ -30,6 +30,7 @@
           </template>
         </el-table-column>
       </el-table>
+      <pagination v-if="params.total" :total="params.total" v-model:page="params.pageNum" v-model:limit="params.pageSize" @pagination="getList" />
     </el-card>
     <EditForm ref="editFormRef" @getList="getList"></EditForm>
   </div>
@@ -41,20 +42,28 @@ import EditForm from './component/edit.vue';
 import { ApiRow } from '/@/api/model/system/menu';
 import api from '/@/api/system';
 import { ElMessageBox, ElMessage } from 'element-plus';
+import { useSearch } from '/@/hooks/useCommon';
 
-const tableData = ref<ApiRow[]>([]);
 const editFormRef = ref();
+const { params, tableData } = useSearch<ApiRow[]>({ name: '' });
 
 const getList = async () => {
 	tableData.value = [];
-	let res = await api.api.getList();
-	tableData.value = res || [];
+	let res = await api.api.getList(params);
+	tableData.value = res.Info || [];
+	params.total = res.total;
 };
 
 getList();
 
-const addOrEdit = (row?: ApiRow) => {
-	editFormRef.value.open(row);
+const addOrEdit = async (row?: ApiRow) => {
+	if (row) {
+		let res = await api.api.detail(row.id as number).then();
+		editFormRef.value.open(res);
+		return;
+	} else {
+		editFormRef.value.open();
+	}
 };
 
 const onDel = (row: ApiRow) => {