增加批量删除功能 调节分页器样式

server/api/v1/sys_api.go

@@ -147,3 +147,23 @@ func GetAllApis(c *gin.Context) {
 		response.OkWithDetailed(response.SysAPIListResponse{Apis: apis}, "获取成功", c)
 	}
 }
+
+
+// @Tags SysApi
+// @Summary 删除选中Api
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body request.IdsReq true "ID"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /api/deleteApisByIds [delete]
+func DeleteApisByIds(c *gin.Context) {
+	var ids request.IdsReq
+	_ = c.ShouldBindJSON(&ids)
+	if err := service.DeleteApisByIds(ids); err != nil {
+		global.GVA_LOG.Error("删除失败!", zap.Any("err", err))
+		response.FailWithMessage("删除失败", c)
+	} else {
+		response.OkWithMessage("删除成功",c)
+	}
+}

server/router/sys_api.go

@@ -15,5 +15,6 @@ func InitApiRouter(Router *gin.RouterGroup) {
 		ApiRouter.POST("getApiById", v1.GetApiById) // 获取单条Api消息
 		ApiRouter.POST("updateApi", v1.UpdateApi)   // 更新api
 		ApiRouter.POST("getAllApis", v1.GetAllApis) // 获取所有api
+		ApiRouter.DELETE("deleteApisByIds", v1.DeleteApisByIds) // 删除选中api
 	}
 }

server/service/sys_api.go

@@ -129,3 +129,17 @@ func UpdateApi(api model.SysApi) (err error) {
 	}
 	return err
 }
+
+
+
+//@author: [piexlmax](https://github.com/piexlmax)
+//@function: DeleteApis
+//@description: 删除选中API
+//@param: apis []model.SysApi
+//@return: err error
+
+func DeleteApisByIds(ids request.IdsReq) (err error) {
+	err = global.GVA_DB.Delete(&[]model.SysApi{},"id in ?",ids.Ids).Error
+	return err
+	return
+}

server/source/api.go

@@ -85,8 +85,11 @@ var apis = []model.SysApi{
 	{global.GVA_MODEL{ID: 82, CreatedAt: time.Now(), UpdatedAt: time.Now()}, "/excel/loadExcel", "下载excel", "excel", "GET"},
 	{global.GVA_MODEL{ID: 83, CreatedAt: time.Now(), UpdatedAt: time.Now()}, "/excel/exportExcel", "导出excel", "excel", "POST"},
 	{global.GVA_MODEL{ID: 84, CreatedAt: time.Now(), UpdatedAt: time.Now()}, "/excel/downloadTemplate", "下载excel模板", "excel", "GET"},
+	{global.GVA_MODEL{ID: 85, CreatedAt: time.Now(), UpdatedAt: time.Now()}, "/api/deleteApisByIds", "批量删除api", "api", "DELETE"},
 }
 
+
+
 //@author: [SliverHorn](https://github.com/SliverHorn)
 //@description: sys_apis 表数据初始化
 func (a *api) Init() error {

server/source/casbin.go

@@ -84,6 +84,7 @@ var carbines = []gormadapter.CasbinRule{
 	{PType: "p", V0: "888", V1: "/excel/loadExcel", V2: "GET"},
 	{PType: "p", V0: "888", V1: "/excel/exportExcel", V2: "POST"},
 	{PType: "p", V0: "888", V1: "/excel/downloadTemplate", V2: "GET"},
+	{PType: "p", V0: "888", V1: "/api/deleteApisByIds", V2: "DELETE"},
 	{PType: "p", V0: "8881", V1: "/base/login", V2: "POST"},
 	{PType: "p", V0: "8881", V1: "/user/register", V2: "POST"},
 	{PType: "p", V0: "8881", V1: "/api/createApi", V2: "POST"},

web/src/api/api.js

@@ -115,4 +115,20 @@ export const deleteApi = (data) => {
         method: 'post',
         data
     })
+}
+
+// @Tags SysApi
+// @Summary 删除选中Api
+// @Security ApiKeyAuth
+// @accept application/json
+// @Produce application/json
+// @Param data body request.IdsReq true "ID"
+// @Success 200 {string} string "{"success":true,"data":{},"msg":"删除成功"}"
+// @Router /api/deleteApisByIds [delete]
+export const deleteApisByIds = (data) => {
+    return service({
+        url: "/api/deleteApisByIds",
+        method: 'delete',
+        data
+    })
 }

web/src/style/base.scss

@@ -57,4 +57,14 @@
 
 .title-3 {
     text-align: center;
+}
+
+.el-pager li.active{
+    color: #409EFF !important;
+    border: 1px solid #409EFF;
+}
+
+.el-pager li:hover{
+    color: #409EFF !important;
+    border: 1px solid #409EFF;
 }

web/src/view/superAdmin/api/api.vue

@@ -27,9 +27,23 @@
         <el-form-item>
           <el-button @click="openDialog('addApi')" type="primary">新增api</el-button>
         </el-form-item>
+        <el-form-item>
+          <el-popover placement="top" v-model="deleteVisible" width="160">
+            <p>确定要删除吗？</p>
+              <div style="text-align: right; margin: 0">
+                <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
+                <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
+              </div>
+            <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>
+          </el-popover>
+        </el-form-item>
       </el-form>
     </div>
-    <el-table :data="tableData" @sort-change="sortChange" border stripe>
+    <el-table :data="tableData" @sort-change="sortChange" border stripe @selection-change="handleSelectionChange">
+       <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
       <el-table-column label="id" min-width="60" prop="ID" sortable="custom"></el-table-column>
       <el-table-column label="api路径" min-width="150" prop="path" sortable="custom"></el-table-column>
       <el-table-column label="api分组" min-width="150" prop="apiGroup" sortable="custom"></el-table-column>
@@ -112,7 +126,8 @@ import {
   getApiList,
   createApi,
   updateApi,
-  deleteApi
+  deleteApi,
+  deleteApisByIds
 } from "@/api/api";
 import infoList from "@/mixins/infoList";
 import { toSQLLine } from "@/utils/stringFun";
@@ -144,9 +159,11 @@ export default {
   mixins: [infoList],
   data() {
     return {
+      deleteVisible:false,
       listApi: getApiList,
       dialogFormVisible: false,
       dialogTitle: "新增Api",
+      apis:[],
       form: {
         path: "",
         apiGroup: "",
@@ -170,6 +187,26 @@ export default {
     };
   },
   methods: {
+    //  选中api
+      handleSelectionChange(val) {
+        this.apis = val;
+      },
+      async onDelete(){
+        const ids = this.apis.map(item=>item.ID)
+        debugger
+        const res = await deleteApisByIds({ids})
+        if(res.code==0){
+          this.$message({
+            type:"success",
+            message:res.msg
+          })
+         if (this.tableData.length == ids.length) {
+              this.page--;
+          }
+          this.deleteVisible = false
+          this.getTableData()
+        }
+      },
     // 排序
     sortChange({ prop, order }) {
       if (prop) {