服务配置

sf-ui/src/router/index.js

@@ -92,12 +92,12 @@ export const constantRoutes = [
     path: '/gateway',
     component: Layout,
     hidden: true,
-    redirect: 'service-config',
+    redirect: 'server-config',
     children: [
       {
-        path: 'service-config',
+        path: 'server-config',
-        component: () => import('@/views/gateway/serviceManage/config'),
+        component: () => import('@/views/gateway/server/config/index'),
-        name: 'ServiceConfigAdd',
+        name: 'serverConfig',
         meta: { title: '新增服务配置', breadcrumb: false, }
       }
     ]

sf-ui/src/views/gateway/server/config/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="app-container">
+    <el-container>
+      <el-header>
+        <div><span>服务ID：</span>{{ detail.id }}<span class="ml20">服务名称：{{ detail.serverName }}</span></div>
+        <el-divider/>
+      </el-header>
+      <el-main>
+        <el-steps class="step" :active="active" finish-status="success" :space="200">
+          <el-step v-for="item in setpList" :key="item.value" :title="item.title">
+            <template #description>
+              {{ item.title.substring(2) }} xxx
+            </template>
+          </el-step>
+        </el-steps>
+
+        <div class="mt10">
+          <RouteConfig :serverId="detail.id" />
+        </div>
+      </el-main>
+      <el-footer style="text-align: center;">
+        <el-button type="primary" @click="prev">上一步</el-button>
+        <el-button type="primary" @click="next">{{nextBtn}}</el-button>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import { getServer, } from "@/api/gateway/server";
+import RouteConfig from './routeConfig.vue';
+export default {
+  components: {
+    RouteConfig,
+  },
+  data() {
+    return {
+      detail: {},
+      active: 1,
+      setpList: [
+        { title: '添加路由', value: '0' },
+        { title: '添加策略', value: '1' },
+        { title: '添加接口', value: '2' },
+        { title: '高级配置', value: '3' },
+      ]
+    }
+  },
+  computed: {
+    nextBtn() {
+      return this.active == 3 ? '保存' : '下一步'
+    }
+  },
+  created() {
+    this.getDetail();
+  },
+  methods: {
+    // 获取详情
+    getDetail() {
+      const { id } = this.$route.query;
+      getServer(id).then(response => {
+        const { code, data } = response;
+        if (code === 200) {
+          this.detail = data
+        }
+      });
+    },
+    // 上一步
+    prev() {
+      if (this.active == 0) {
+        return
+      }
+      this.active--;
+    },
+    // 下一步
+    next() {
+      if (this.active == 3) {
+        return
+      }
+      this.active++;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.step {
+  ::v-deep .el-step__line {
+    display: none;
+  }
+  ::v-deep .el-step__title {
+    position: absolute;
+    top: -6px;
+    left: 40px;
+  }
+  ::v-deep .el-step__description {
+    margin-top: 10px;
+  }
+}
+</style>

sf-ui/src/views/gateway/server/config/routeConfig.vue

@@ -0,0 +1,124 @@
+<template>
+  <div>
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="open = true"
+        >添加</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" :data="routeList" @selection-change="handleSelectionChange">
+      <!-- <el-table-column type="selection" width="55" align="center" /> -->
+      <el-table-column label="路由ID" align="center" prop="id" />
+      <el-table-column label="路由名称" align="center" prop="routerName" />
+      <el-table-column label="请求路径" align="center" prop="requestPath" />
+      <el-table-column label="请求方式" align="center" prop="requestMethod">
+        <template slot-scope="scope">
+          <dict-tag :options="dict.type.http_request_method" :value="scope.row.requestMethod"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="服务地址" align="center" prop="serverAddress" />
+      <el-table-column label="服务器端口" align="center" prop="serverPort" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template slot-scope="scope">
+          <el-button
+            circle
+            icon="el-icon-plus"
+            @click="handleAdd(scope.row)"
+            v-hasPermi="['gateway:route:edit']"
+          ></el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog title="添加路由" :visible.sync="open" width="1200px" append-to-body draggable>
+      <el-form :model="dialogQuery" ref="queryForm" size="small" :inline="true" label-width="68px">
+        <el-form-item label="路由名称" prop="routerName">
+          <el-input
+            v-model="dialogQuery.routerName"
+            placeholder="请输入路由名称"
+            clearable
+            @keyup.enter.native="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listRoute } from '@/api/gateway/route'
+export default {
+  props: {
+    serverId: {
+      type: String | Number,
+      default: '',
+    }
+  },
+  dicts: ['http_request_method',],
+  data() {
+    return {
+      loading: false,
+      total: 0,
+      routeList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+
+      // 弹出框相关
+      open: false,
+      dialogQuery: {
+        routerName: '',
+      },
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    /** 查询路由管理列表 */
+    getList() {
+      this.loading = true;
+      listRoute(this.queryParams).then(response => {
+        this.routeList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    handleSelectionChange() {
+
+    },
+    handleAdd(row) {
+      // 添加到路由配置
+    },
+    handleQuery() {
+
+    },
+    resetQuery() {
+
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

sf-ui/src/views/gateway/server/index.vue

@@ -126,6 +126,13 @@
       </el-table-column>
       <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
         <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleConfig(scope.row)"
+            v-hasPermi="['gateway:server:config']"
+          >服务配置</el-button>
           <el-button
             size="mini"
             type="text"
@@ -299,6 +306,15 @@ export default {
         this.title = "修改服务管理";
       });
     },
+    /** 服务配置 */
+    handleConfig(row) {
+      this.$router.push({
+        path: '/gateway/server-config',
+        query: {
+          id: row.id
+        }
+      })
+    },
     /** 提交按钮 */
     submitForm() {
       this.$refs["form"].validate(valid => {