AdminSpringCloud.vue 中添加批量选择行功能

src/router/background_backend.js

@@ -28,14 +28,6 @@ export default {
       icon: 'el-icon-loading',
       meta: { needAuth: true, roles: ['tnb_admin'] }
     },
-    {
-      path: '/bg/backend/dubbo_service',
-      name: 'DubboService',
-      title: 'Dubbo服务',
-      icon: 'el-icon-loading',
-      component: AdminDubbo,
-      meta: { needAuth: true, roles: ['tnb_admin'] }
-    },
     {
       path: '/bg/backend/springcloud_service',
       name: 'SpringCloudService',
@@ -44,6 +36,14 @@ export default {
       component: AdminSpringCloud,
       meta: { needAuth: true, roles: ['tnb_admin'] }
     },
+    {
+      path: '/bg/backend/dubbo_service',
+      name: 'DubboService',
+      title: 'Dubbo服务',
+      icon: 'el-icon-loading',
+      component: AdminDubbo,
+      meta: { needAuth: true, roles: ['tnb_admin'] }
+    },
     {
       path: '/bg/backend/access_log',
       name: 'AccessLog',

src/views/admin/backend/AdminDubbo.vue

@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import {getDubboList, getZkList} from '@/api/tnb'
+import { getDubboList, getZkList } from '@/api/tnb'
 
 export default {
   name: 'AdminDubboService',

src/views/admin/backend/AdminGateway.vue

@@ -17,15 +17,15 @@
         />
         <el-table-column
           prop="id"
-          label="应用"
+          label="路由 ID"
         />
         <el-table-column
           prop="upstreamUrl"
-          label="节点数量"
+          label="上游服务"
         />
         <el-table-column
           prop="routeUrl"
-          label="节点地址"
+          label="匹配 URL"
         />
         <el-table-column
           fixed="right"

src/views/admin/backend/AdminSpringCloud.vue

@@ -1,19 +1,47 @@
 <template>
   <el-container>
-    <el-header height="220">
+    <el-header height="120">
       <h3>SpringCloud 服务</h3>
-      <el-button icon="el-icon-refresh" class="btn-reset" @click="onRefresh">刷新</el-button>
+      <el-row style="margin-top: 10px">
+        <el-button icon="el-icon-refresh" class="btn-reset" @click="onRefresh">刷新</el-button>
+
+        <el-button
+          type="success"
+          icon="el-icon-check"
+          :disabled="multipleSelection.length === 0"
+          @click="handleBatch"
+        >
+          选择服务 (已选 {{ multipleSelection.length }} 项)
+        </el-button>
+
+        <el-button
+          v-if="multipleSelection.length > 0"
+          size="small"
+          type="text"
+          @click="clearSelection"
+        >
+          取消选择
+        </el-button>
+      </el-row>
     </el-header>
     <el-main>
       <el-table
+        ref="multipleTable"
         :data="dataList"
         border
         style="width: 100%"
+        @selection-change="handleSelectionChange"
       >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+        />
         <el-table-column
           fixed="left"
           label="No"
           type="index"
+          width="60"
         />
         <el-table-column
           prop="serviceName"
@@ -30,7 +58,7 @@
         <el-table-column
           fixed="right"
           label="操作"
-          width="280"
+          width="180"
         >
           <template slot-scope="scope">
             <el-button
@@ -50,23 +78,22 @@
       width="70%"
       center
     >
-      <template>
-        <el-table
-          :data="serviceList"
-          border
-          style="width: 100%"
-        >
-          <el-table-column
-            fixed="left"
-            label="No"
-            type="index"
-          />
-          <el-table-column
-            prop="instanceAddr"
-            label="实例地址"
-          />
-        </el-table>
-      </template>
+      <el-table
+        :data="serviceList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          fixed="left"
+          label="No"
+          type="index"
+          width="60"
+        />
+        <el-table-column
+          prop="instanceAddr"
+          label="实例地址"
+        />
+      </el-table>
     </el-dialog>
   </el-container>
 </template>
@@ -82,7 +109,6 @@ export default {
         scope: null,
         pn: 1
       },
-      // 屏幕宽度, 为了控制分页条的大小
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
@@ -96,7 +122,9 @@ export default {
       form: {
         videoId: null,
         scope: 1
-      }
+      },
+      // 🌟 新增：存放被勾选的行数据
+      multipleSelection: []
     }
   },
   created() {
@@ -104,6 +132,36 @@ export default {
     this.getData()
   },
   methods: {
+    // 🌟 新增：多选框勾选变化时的回调
+    handleSelectionChange(val) {
+      this.multipleSelection = val
+      // val 的结构是一个数组：[{ serviceName: 'xxx', healthyCount: 1, ... }, ...]
+    },
+
+    // 🌟 新增：一键清空选择项
+    clearSelection() {
+      this.$refs.multipleTable.clearSelection()
+    },
+
+    // 🌟 新增：模拟批量操作（如批量下线服务）
+    handleBatch() {
+      // 从选中的行对象中提取出所有的服务名
+      const serviceNames = this.multipleSelection.map(item => item.serviceName)
+
+      this.$confirm(`确定要批量处理以下 ${serviceNames.length} 个服务吗？\n[${serviceNames.join(', ')}]`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        // 在这里调用你的批量接口，例如: batchOfflineServices(serviceNames).then(...)
+        this.$message.success('批量操作成功，参数为: ' + JSON.stringify(serviceNames))
+
+        // 操作成功后建议清空勾选状态
+        this.clearSelection()
+        this.getData()
+      }).catch(() => {})
+    },
+
     getData() {
       this.dataList = []
       getSpringCloudServices().then(resp => {
@@ -120,7 +178,6 @@ export default {
     handleCurrentChange(pageNumber) {
       this.currentPage = pageNumber
       this.getData()
-      // 回到顶部
       scrollTo(0, 0)
     },
     handleEdit(row) {
@@ -145,5 +202,9 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
+/* 推荐加入：使 Dialog 中的表格有更好的排版，或者批量按钮间距 */
+.el-button + .el-button {
+  margin-left: 10px;
+}
 </style>

src/views/admin/oss/AdminUploadTask.vue

@@ -47,7 +47,7 @@
         <el-table-column
           prop="size"
           label="文件大小"
-        ></el-table-column>
+        />
         <el-table-column
           prop="status"
           label="状态"