5.0

2025-08-11 21:57:56 +08:00 · 2024-10-23 10:39:08 +08:00
parent d06a13df4a
commit 054c86a450
21 changed files with 646 additions and 130 deletions
--- a/sop-admin/sop-admin-frontend/src/api/permGroupPermission.ts
+++ b/sop-admin/sop-admin-frontend/src/api/permGroupPermission.ts
@@ -0,0 +1,38 @@
+import { createUrl, http } from "@/utils/http";
+import type { Result } from "@/model";
+
+// 后端请求接口
+const apiUrl: any = createUrl({
+  listGroupApiId: "perm/group/permission/list",
+  setting: "perm/group/permission/setting"
+});
+
+/**
+ * 接口管理
+ */
+export const api: any = {
+  /**
+   * 查询分组权限
+   *
+   * @param groupId groupId
+   */
+  listGroupApiId(groupId: number): Promise<Result<any>> {
+    const params = {
+      groupId: groupId
+    };
+    return http.get<Result<any>, any>(apiUrl.listGroupApiId, { params });
+  },
+  /**
+   * 设置接口权限
+   *
+   * @param groupId groupId
+   * @param apiIdList apiIdList
+   */
+  setting(groupId, apiIdList) {
+    const data = {
+      groupId: groupId,
+      apiIdList: apiIdList
+    };
+    return http.post<Result<any>, any>(apiUrl.setting, { data });
+  }
+};
--- a/sop-admin/sop-admin-frontend/src/api/serveApi.ts
+++ b/sop-admin/sop-admin-frontend/src/api/serveApi.ts
@@ -4,6 +4,7 @@ import type { PageResult, Result } from "@/model";
 // 后端请求接口
 const apiUrl: any = createUrl({
  page: "/serve/api/page",
+  listAll: "/serve/api/listAll",
  add: "/serve/api/add",
  update: "/serve/api/update",
  del: "/serve/api/delete",
@@ -21,6 +22,13 @@ export const api: any = {
  page(params: object): Promise<PageResult> {
    return http.get<PageResult, any>(apiUrl.page, { params });
  },
+  /**
+   * 查询全部
+   * @param params
+   */
+  listAll(params: object): Promise<PageResult> {
+    return http.get<Result<any>, any>(apiUrl.listAll, { params });
+  },
  /**
   * 新增
   * @param data 表单内容
--- a/sop-admin/sop-admin-frontend/src/components/ApiSelect/index.ts
+++ b/sop-admin/sop-admin-frontend/src/components/ApiSelect/index.ts
@@ -1,14 +1,61 @@
 import { ref } from "vue";
-import { type PlusColumn } from "plus-pro-components";
+import { type PlusColumn, useTable } from "plus-pro-components";
 import { withInstall } from "@pureadmin/utils";
 import apiSelect from "./index.vue";
 import { StatusEnum } from "@/model/enums";
+import { api as serveApi } from "@/api/serveApi";

 export const dlgApiSelectShow = ref(false);
 export const dlgWidth = ref(1100);
+export const handleSaveApi = ref((_: Array<number>) => {});
+
+// ========= search form =========
+
+// 查询表单对象
+export const searchFormData = ref({
+  apiName: "",
+  status: "",
+  pageIndex: 1,
+  pageSize: 999999
+});
+
+// 查询表单字段定义
+export const searchFormColumns: PlusColumn[] = [
+  {
+    label: "接口名称",
+    prop: "apiName"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    width: 80,
+    valueType: "select",
+    options: [
+      {
+        label: "启用",
+        value: StatusEnum.ENABLE,
+        color: "green"
+      },
+      {
+        label: "禁用",
+        value: StatusEnum.DISABLE,
+        color: "red"
+      }
+    ]
+  }
+];

 // ========= table =========

+// 表格对象
+export const { tableData } = useTable<any[]>();
+
+interface TableRow {
+  id: number;
+}
+
+const multipleSelection = ref<TableRow[]>([]);
+export const selectable = (row: any) => row.status === StatusEnum.ENABLE;
 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
  {
@@ -75,10 +122,56 @@ export const tableColumns: PlusColumn[] = [
  }
 ];

-export const handleConfirm = () => {
-  console.log(1);
+export const handleAuthApi = apiList => {
+  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);
 };

+export const handleConfirm = () => {
+  const idList = multipleSelection.value.map(row => row.id);
+  handleSaveApi.value(idList);
+};
+
+export const handleClose = () => {
+  dlgApiSelectShow.value = false;
+};
+
+export const handleSelectionChange = (rows: TableRow[]) => {
+  console.log(rows);
+  multipleSelection.value = rows;
+};
+
+// 点击查询按钮
+export const handleSearch = () => {
+  search();
+};
+
+// 查询
+export const search = async () => {
+  try {
+    const { data } = await doSearch();
+    tableData.value = data;
+  } catch (error) {}
+};
+// 请求接口
+const doSearch = async () => {
+  // 查询参数
+  const data = searchFormData.value;
+  return serveApi.listAll(data);
+};
+
+// 页面加载
+search();
+
 const ApiSelect = withInstall(apiSelect);

 export { ApiSelect };
--- a/sop-admin/sop-admin-frontend/src/components/ApiSelect/index.vue
+++ b/sop-admin/sop-admin-frontend/src/components/ApiSelect/index.vue
@@ -3,17 +3,14 @@ import {
  handleConfirm,
  dlgApiSelectShow,
  tableColumns,
-  dlgWidth
-} from "@/components/ApiSelect/index";
-import {
-  handlePaginationChange,
+  dlgWidth,
+  selectable,
+  handleSelectionChange,
  handleSearch,
-  pageInfo,
  searchFormColumns,
  searchFormData,
-  total,
  tableData
-} from "@/views/serve/api/index";
+} from "@/components/ApiSelect/index";
 </script>

 <template>
@@ -39,14 +36,12 @@ import {
      <PlusTable
        :columns="tableColumns"
        :table-data="tableData"
-        :pagination="{
-          total,
-          modelValue: pageInfo,
-          pageSizeList: [10, 20, 50, 100],
-          align: 'right'
+        :is-selection="true"
+        :selectionTableColumnProps="{
+          selectable: selectable
        }"
        adaptive
-        @paginationChange="handlePaginationChange"
+        @selection-change="handleSelectionChange"
      />
    </el-card>
  </PlusDialog>
--- a/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroup.ts
+++ b/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroup.ts
@@ -1,14 +1,14 @@
 import { ref } from "vue";
 import {
  type ButtonsCallBackParams,
-  type PageInfo,
  type PlusColumn,
  useTable
 } from "plus-pro-components";
 import { ElMessage } from "element-plus";
 import { api } from "@/api/permGroup";
-import { dlgApiSelectShow } from "@/components/ApiSelect";
-import { search as searchApi } from "@/views/serve/api";
+import { api as permApi } from "@/api/permGroupPermission";
+import { handleSaveApi, handleClose } from "@/components/ApiSelect";
+import { searchTable } from "@/views/isv/perm/permGroupApi";

 const isAdd = ref(false);

@@ -16,9 +16,7 @@ const isAdd = ref(false);

 // 查询表单对象
 export const searchFormData = ref({
-  groupName: "",
-  pageIndex: 1,
-  pageSize: 10
+  groupName: ""
 });

 // 查询表单字段定义
@@ -31,46 +29,31 @@ 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,
-  total,
-  pageInfo,
-  buttons: actionButtons
-} = useTable<any[]>();
-// 默认每页条数,默认10
-pageInfo.value.pageSize = 10;
+export const { tableData, buttons: actionButtons } = useTable<any[]>();
+
+export const selectedGroupId = ref(0);

 // 表格字段定义
 export const tableColumns: PlusColumn[] = [
  {
    label: "分组名称",
    prop: "groupName"
-  },
-  {
-    width: 160,
-    label: "添加时间",
-    prop: "addTime"
-  },
-  {
-    width: 160,
-    label: "修改时间",
-    prop: "updateTime"
  }
 ];
 // 表格按钮定义
 actionButtons.value = [
-  {
-    text: "接口授权",
-    code: "edit",
-    props: {
-      type: "warning"
-    },
-    onClick() {
-      dlgApiSelectShow.value = true;
-      searchApi();
-    }
-  },
  {
    // 修改
    text: "修改",
@@ -78,7 +61,14 @@ 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;
      editFormData.value = Object.assign({}, params.row);
      dlgTitle.value = "修改";
@@ -96,6 +86,7 @@ actionButtons.value = [
      options: { draggable: false }
    },
    onConfirm(params: ButtonsCallBackParams) {
+      params.e.stopPropagation();
      api.del(params.row).then(() => {
        ElMessage({
          message: "删除成功",
@@ -135,6 +126,13 @@ export const editFormColumns: PlusColumn[] = [

 // ========= event =========

+// 点击行
+export const handleRowClick = row => {
+  const groupId = row.id;
+  selectedGroupId.value = groupId;
+  searchTable(groupId);
+};
+
 // 添加按钮事件
 export const handleAdd = () => {
  isAdd.value = true;
@@ -156,13 +154,6 @@ export const handleSave = () => {

 // 点击查询按钮
 export const handleSearch = () => {
-  pageInfo.value.page = 1;
-  search();
-};
-
-// 分页事件
-export const handlePaginationChange = (_pageInfo: PageInfo): void => {
-  pageInfo.value = _pageInfo;
  search();
 };

@@ -170,19 +161,14 @@ export const handlePaginationChange = (_pageInfo: PageInfo): void => {
 const search = async () => {
  try {
    const { data } = await doSearch();
-    tableData.value = data.list;
-    total.value = data.total;
+    tableData.value = data;
  } catch (error) {}
 };
 // 请求接口
 const doSearch = async () => {
  // 查询参数
  const data = searchFormData.value;
-  // 添加分页参数
-  data.pageIndex = pageInfo.value.page;
-  data.pageSize = pageInfo.value.pageSize;
-
-  return api.page(data);
+  return api.listAll(data);
 };

 // 页面加载
--- a/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroup.vue
+++ b/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroup.vue
@@ -7,60 +7,66 @@ import {
  editFormData,
  editFormRules,
  handleAdd,
-  handlePaginationChange,
+  handleRowClick,
  handleSave,
  handleSearch,
-  pageInfo,
  searchFormColumns,
  searchFormData,
+  selectedGroupId,
  tableColumns,
-  tableData,
-  total
+  tableData
 } from "./permGroup";
-import { ApiSelect } from "@/components/ApiSelect/index";
+import PermGroupApi from "./permGroupApi.vue";
 </script>
 <template>
  <el-card shadow="never">
-    <template #header>
-      <PlusSearch
-        v-model="searchFormData"
-        :columns="searchFormColumns"
-        :show-number="2"
-        label-position="right"
-        :has-reset="false"
-        @search="handleSearch"
-      />
-    </template>
-    <PlusTable
-      :columns="tableColumns"
-      :table-data="tableData"
-      :action-bar="{ buttons: actionButtons, width: 200 }"
-      :pagination="{
-        total,
-        modelValue: pageInfo,
-        pageSizeList: [10, 20, 50, 100],
-        align: 'right'
-      }"
-      adaptive
-      @paginationChange="handlePaginationChange"
-    >
-      <template #title>
-        <el-button type="primary" @click="handleAdd">新增</el-button>
-      </template>
-    </PlusTable>
-    <PlusDialogForm
-      v-model:visible="dlgShow"
-      v-model="editFormData"
-      :dialog="{ title: dlgTitle }"
-      :form="{
-        columns: editFormColumns,
-        rules: editFormRules,
-        labelWidth: '100px',
-        labelPosition: 'right'
-      }"
-      :hasErrorTip="false"
-      @confirm="handleSave"
-    />
-    <ApiSelect />
+    <el-container>
+      <el-aside width="300px">
+        <template #header>
+          <PlusSearch
+            v-model="searchFormData"
+            :columns="searchFormColumns"
+            :show-number="2"
+            label-position="right"
+            :has-reset="false"
+            @search="handleSearch"
+          />
+        </template>
+        <PlusTable
+          :columns="tableColumns"
+          :table-data="tableData"
+          :action-bar="{ buttons: actionButtons, width: 100 }"
+          adaptive
+          @row-click="handleRowClick"
+        >
+          <template #title>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
+          </template>
+        </PlusTable>
+        <PlusDialogForm
+          v-model:visible="dlgShow"
+          v-model="editFormData"
+          :dialog="{ title: dlgTitle }"
+          :form="{
+            columns: editFormColumns,
+            rules: editFormRules,
+            labelWidth: '100px',
+            labelPosition: 'right'
+          }"
+          :hasErrorTip="false"
+          @confirm="handleSave"
+        />
+      </el-aside>
+      <el-main>
+        <el-card v-show="selectedGroupId > 0" shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>组权限</span>
+            </div>
+          </template>
+          <PermGroupApi />
+        </el-card>
+      </el-main>
+    </el-container>
  </el-card>
 </template>
--- a/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.ts
+++ b/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.ts
@@ -0,0 +1,140 @@
+import { ref } from "vue";
+import { 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";
+
+// ========= search form =========
+
+// 查询表单对象
+export const searchFormData = ref({
+  groupId: 0,
+  apiName: "",
+  status: ""
+});
+
+// 查询表单字段定义
+export const searchFormColumns: PlusColumn[] = [
+  {
+    label: "接口名称",
+    prop: "apiName"
+  },
+  {
+    label: "状态",
+    prop: "status",
+    width: 80,
+    valueType: "select",
+    options: [
+      {
+        label: "启用",
+        value: StatusEnum.ENABLE,
+        color: "green"
+      },
+      {
+        label: "禁用",
+        value: StatusEnum.DISABLE,
+        color: "red"
+      }
+    ]
+  }
+];
+
+// ========= table =========
+
+// 表格对象
+export const { tableData } = useTable<any[]>();
+
+// 表格字段定义
+export const tableColumns: PlusColumn[] = [
+  {
+    label: "所属应用",
+    prop: "application",
+    tableColumnProps: {
+      showOverflowTooltip: true
+    }
+  },
+  {
+    label: "接口名称",
+    prop: "apiName",
+    tableColumnProps: {
+      showOverflowTooltip: true
+    }
+  },
+  {
+    label: "版本号",
+    prop: "apiVersion",
+    width: 80
+  },
+  {
+    label: "接口描述",
+    prop: "description",
+    tableColumnProps: {
+      showOverflowTooltip: true
+    }
+  },
+  {
+    label: "注册来源",
+    prop: "regSource",
+    width: 100,
+    valueType: "select",
+    options: [
+      {
+        label: "系统",
+        value: 1,
+        color: "blue"
+      },
+      {
+        label: "手动",
+        value: 2,
+        color: "green"
+      }
+    ]
+  },
+  {
+    label: "状态",
+    prop: "status",
+    width: 80,
+    valueType: "select",
+    options: [
+      {
+        label: "启用",
+        value: StatusEnum.ENABLE,
+        color: "green"
+      },
+      {
+        label: "禁用",
+        value: StatusEnum.DISABLE,
+        color: "red"
+      }
+    ]
+  }
+];
+
+export const searchTable = groupId => {
+  searchFormData.value.groupId = groupId;
+  search();
+};
+
+// 点击查询按钮
+export const handleSearch = () => {
+  search();
+};
+
+// 查询
+export const search = async () => {
+  try {
+    const { data } = await doSearch();
+    tableData.value = data;
+  } catch (error) {}
+};
+// 请求接口
+const doSearch = async () => {
+  // 查询参数
+  const data = searchFormData.value;
+  return serveApi.listAll(data);
+};
+
+const PermGroupApi = withInstall(permGroupApi);
+
+export { PermGroupApi };
--- a/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.vue
+++ b/sop-admin/sop-admin-frontend/src/views/isv/perm/permGroupApi.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import {
+  tableColumns,
+  handleSearch,
+  searchFormColumns,
+  searchFormData,
+  tableData
+} from "./permGroupApi";
+import { ApiSelect } from "@/components/ApiSelect/index";
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <PlusSearch
+        v-model="searchFormData"
+        :columns="searchFormColumns"
+        :show-number="2"
+        label-position="right"
+        :has-reset="false"
+        @search="handleSearch"
+      />
+    </template>
+    <PlusTable :columns="tableColumns" :table-data="tableData" adaptive />
+    <ApiSelect />
+  </el-card>
+</template>