5.0

sop-admin/sop-admin-frontend/src/api/permGroupPermission.ts

@@ -1,10 +1,11 @@
 import { createUrl, http } from "@/utils/http";
-import type { Result } from "@/model";
+import type { PageResult, Result } from "@/model";
 
 // 后端请求接口
 const apiUrl: any = createUrl({
-  listGroupApiId: "perm/group/permission/list",
-  setting: "perm/group/permission/setting"
+  page: "perm/group/permission/page",
+  setting: "perm/group/permission/setting",
+  del: "perm/group/permission/delete"
 });
 
 /**
@@ -14,13 +15,10 @@ export const api: any = {
   /**
    * 查询分组权限
    *
-   * @param groupId groupId
+   * @param params params
    */
-  listGroupApiId(groupId: number): Promise<Result<any>> {
-    const params = {
-      groupId: groupId
-    };
-    return http.get<Result<any>, any>(apiUrl.listGroupApiId, { params });
+  page(params): Promise<PageResult> {
+    return http.get<PageResult, any>(apiUrl.page, { params });
   },
   /**
    * 设置接口权限
@@ -34,5 +32,12 @@ export const api: any = {
       apiIdList: apiIdList
     };
     return http.post<Result<any>, any>(apiUrl.setting, { data });
+  },
+  /**
+   * 删除
+   * @param data 表单内容
+   */
+  del(data: object) {
+    return http.post<Result<any>, any>(apiUrl.del, { data });
   }
 };

sop-admin/sop-admin-frontend/src/components/ApiSelect/index.ts

@@ -1,5 +1,5 @@
 import { ref } from "vue";
-import { type PlusColumn, useTable } from "plus-pro-components";
+import { type PageInfo, type PlusColumn, useTable } from "plus-pro-components";
 import { withInstall } from "@pureadmin/utils";
 import apiSelect from "./index.vue";
 import { StatusEnum } from "@/model/enums";
@@ -15,8 +15,9 @@ export const handleSaveApi = ref((_: Array<number>) => {});
 export const searchFormData = ref({
   apiName: "",
   status: "",
+  isPermission: null,
   pageIndex: 1,
-  pageSize: 999999
+  pageSize: 10
 });
 
 // 查询表单字段定义
@@ -48,13 +49,11 @@ export const searchFormColumns: PlusColumn[] = [
 // ========= table =========
 
 // 表格对象
-export const { tableData } = useTable<any[]>();
+export const { tableData, total, pageInfo } = useTable<any[]>();
+// 默认每页条数,默认10
+pageInfo.value.pageSize = 10;
 
-interface TableRow {
-  id: number;
-}
-
-const multipleSelection = ref<TableRow[]>([]);
+const multipleSelection = ref([]);
 export const selectable = (row: any) => row.status === StatusEnum.ENABLE;
 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
@@ -122,18 +121,9 @@ export const tableColumns: PlusColumn[] = [
   }
 ];
 
-export const handleAuthApi = apiList => {
+export const openDlg = () => {
   dlgApiSelectShow.value = true;
-  const arr = [];
-  for (let apiId of apiList) {
-    for (let row of tableData.value) {
-      if (apiId === row.id) {
-        arr.push(row);
-      }
-    }
-  }
-  multipleSelection.value = arr;
-  console.log(arr);
+  search();
 };
 
 export const handleConfirm = () => {
@@ -145,8 +135,7 @@ export const handleClose = () => {
   dlgApiSelectShow.value = false;
 };
 
-export const handleSelectionChange = (rows: TableRow[]) => {
-  console.log(rows);
+export const handleSelectionChange = (rows: any) => {
   multipleSelection.value = rows;
 };
 
@@ -155,18 +144,29 @@ export const handleSearch = () => {
   search();
 };
 
+// 分页事件
+export const handlePaginationChange = (_pageInfo: PageInfo): void => {
+  pageInfo.value = _pageInfo;
+  search();
+};
+
 // 查询
 export const search = async () => {
   try {
     const { data } = await doSearch();
-    tableData.value = data;
+    tableData.value = data.list;
+    total.value = data.total;
   } catch (error) {}
 };
 // 请求接口
 const doSearch = async () => {
   // 查询参数
   const data = searchFormData.value;
-  return serveApi.listAll(data);
+  // 添加分页参数
+  data.pageIndex = pageInfo.value.page;
+  data.pageSize = pageInfo.value.pageSize;
+
+  return serveApi.page(data);
 };
 
 // 页面加载

sop-admin/sop-admin-frontend/src/components/ApiSelect/index.vue

@@ -9,7 +9,10 @@ import {
   handleSearch,
   searchFormColumns,
   searchFormData,
-  tableData
+  tableData,
+  pageInfo,
+  total,
+  handlePaginationChange
 } from "@/components/ApiSelect/index";
 </script>
 
@@ -40,7 +43,14 @@ import {
         :selectionTableColumnProps="{
           selectable: selectable
         }"
+        :pagination="{
+          total,
+          modelValue: pageInfo,
+          pageSizeList: [10, 20, 50, 100],
+          align: 'right'
+        }"
         adaptive
+        @paginationChange="handlePaginationChange"
         @selection-change="handleSelectionChange"
       />
     </el-card>

sop-admin/sop-admin-frontend/src/views/isv/perm/permGroup.ts

@@ -6,8 +6,6 @@ import {
 } from "plus-pro-components";
 import { ElMessage } from "element-plus";
 import { api } from "@/api/permGroup";
-import { api as permApi } from "@/api/permGroupPermission";
-import { handleSaveApi, handleClose } from "@/components/ApiSelect";
 import { searchTable } from "@/views/isv/perm/permGroupApi";
 
 const isAdd = ref(false);
@@ -29,17 +27,6 @@ export const searchFormColumns: PlusColumn[] = [
 
 // ========= table =========
 
-handleSaveApi.value = apiIdList => {
-  const groupId = selectedGroupId.value;
-  if (groupId > 0) {
-    permApi.setting(groupId, apiIdList).then(() => {
-      ElMessage.success("保存成功");
-      handleClose();
-      search();
-    });
-  }
-};
-
 // 表格对象
 export const { tableData, buttons: actionButtons } = useTable<any[]>();
 
@@ -61,12 +48,6 @@ actionButtons.value = [
     props: {
       type: "primary"
     },
-    // onClick: withModifiers((params: ButtonsCallBackParams) => {
-    //   isAdd.value = false;
-    //   editFormData.value = Object.assign({}, params.row);
-    //   dlgTitle.value = "修改";
-    //   dlgShow.value = true;
-    // }, ['stop', 'self']),
     onClick(params: ButtonsCallBackParams) {
       params.e.stopPropagation();
       isAdd.value = false;

sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.ts

@@ -1,9 +1,21 @@
 import { ref } from "vue";
-import { type PlusColumn, useTable } from "plus-pro-components";
+import {
+  type ButtonsCallBackParams,
+  type PageInfo,
+  type PlusColumn,
+  useTable
+} from "plus-pro-components";
 import { withInstall } from "@pureadmin/utils";
 import permGroupApi from "./permGroupApi.vue";
 import { StatusEnum } from "@/model/enums";
-import { api as serveApi } from "@/api/serveApi";
+import { api as permApi, api } from "@/api/permGroupPermission";
+import {
+  handleClose,
+  handleSaveApi,
+  openDlg,
+  searchFormData as apiSearFormData
+} from "@/components/ApiSelect";
+import { ElMessage } from "element-plus";
 
 // ========= search form =========
 
@@ -11,7 +23,9 @@ import { api as serveApi } from "@/api/serveApi";
 export const searchFormData = ref({
   groupId: 0,
   apiName: "",
-  status: ""
+  status: "",
+  pageIndex: 1,
+  pageSize: 10
 });
 
 // 查询表单字段定义
@@ -42,9 +56,26 @@ export const searchFormColumns: PlusColumn[] = [
 
 // ========= table =========
 
-// 表格对象
-export const { tableData } = useTable<any[]>();
+handleSaveApi.value = apiIdList => {
+  const groupId = searchFormData.value.groupId;
+  if (groupId > 0) {
+    permApi.setting(groupId, apiIdList).then(() => {
+      ElMessage.success("保存成功");
+      handleClose();
+      search();
+    });
+  }
+};
 
+// 表格对象
+export const {
+  tableData,
+  total,
+  pageInfo,
+  buttons: actionButtons
+} = useTable<any[]>();
+// 默认每页条数,默认10
+pageInfo.value.pageSize = 10;
 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
   {
@@ -110,6 +141,35 @@ export const tableColumns: PlusColumn[] = [
     ]
   }
 ];
+// 表格按钮定义
+actionButtons.value = [
+  {
+    // 删除
+    text: "删除",
+    code: "delete",
+    props: {
+      type: "danger"
+    },
+    confirm: {
+      options: { draggable: false }
+    },
+    onConfirm(params: ButtonsCallBackParams) {
+      const data = {
+        groupId: searchFormData.value.groupId,
+        apiIdList: [params.row.id]
+      };
+      api.del(data).then(() => {
+        ElMessage.success("删除成功");
+        search();
+      });
+    }
+  }
+];
+
+export const handleOpenDlg = () => {
+  apiSearFormData.value.isPermission = 1;
+  openDlg();
+};
 
 export const searchTable = groupId => {
   searchFormData.value.groupId = groupId;
@@ -121,18 +181,29 @@ export const handleSearch = () => {
   search();
 };
 
+// 分页事件
+export const handlePaginationChange = (_pageInfo: PageInfo): void => {
+  pageInfo.value = _pageInfo;
+  search();
+};
+
 // 查询
 export const search = async () => {
   try {
     const { data } = await doSearch();
-    tableData.value = data;
+    tableData.value = data.list;
+    total.value = data.total;
   } catch (error) {}
 };
 // 请求接口
 const doSearch = async () => {
   // 查询参数
   const data = searchFormData.value;
-  return serveApi.listAll(data);
+  // 添加分页参数
+  data.pageIndex = pageInfo.value.page;
+  data.pageSize = pageInfo.value.pageSize;
+
+  return api.page(data);
 };
 
 const PermGroupApi = withInstall(permGroupApi);

sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.vue

@@ -4,9 +4,14 @@ import {
   handleSearch,
   searchFormColumns,
   searchFormData,
-  tableData
+  tableData,
+  total,
+  pageInfo,
+  handleOpenDlg,
+  handlePaginationChange
 } from "./permGroupApi";
 import { ApiSelect } from "@/components/ApiSelect/index";
+import { actionButtons } from "./permGroupApi";
 </script>
 
 <template>
@@ -21,7 +26,22 @@ import { ApiSelect } from "@/components/ApiSelect/index";
         @search="handleSearch"
       />
     </template>
-    <PlusTable :columns="tableColumns" :table-data="tableData" adaptive />
+    <PlusTable
+      :columns="tableColumns"
+      :table-data="tableData"
+      :action-bar="{ buttons: actionButtons, width: 80 }"
+      :pagination="{
+        total,
+        modelValue: pageInfo,
+        pageSizeList: [10, 20, 50, 100],
+        align: 'right'
+      }"
+      @paginationChange="handlePaginationChange"
+    >
+      <template #title>
+        <el-button type="primary" @click="handleOpenDlg">授权接口</el-button>
+      </template>
+    </PlusTable>
     <ApiSelect />
   </el-card>
 </template>

sop-admin/sop-admin-frontend/src/views/serve/api/index.ts

@@ -213,7 +213,6 @@ actionButtons.value = [
       };
       api.updateStatus(data).then(() => {
         ElMessage.success("修改成功");
-        dlgShow.value = false;
         search();
       });
     }
@@ -234,7 +233,7 @@ const editFormDataGen = () => {
     status: 1,
     isPermission: 0,
     description: "",
-    regSource: 1,
+    regSource: RegSource.CUSTOM,
     isNeedToken: 0
   };
 };