服务配置
This commit is contained in:
yin fuxian
parent
86240708eb
commit
4a24397f08
@ -92,12 +92,12 @@ export const constantRoutes = [
|
||||
path: '/gateway',
|
||||
component: Layout,
|
||||
hidden: true,
|
||||
redirect: 'service-config',
|
||||
redirect: 'server-config',
|
||||
children: [
|
||||
{
|
||||
path: 'service-config',
|
||||
component: () => import('@/views/gateway/serviceManage/config'),
|
||||
name: 'ServiceConfigAdd',
|
||||
path: 'server-config',
|
||||
component: () => import('@/views/gateway/server/config/index'),
|
||||
name: 'serverConfig',
|
||||
meta: { title: '新增服务配置', breadcrumb: false, }
|
||||
}
|
||||
]
|
||||
|
||||
99
sf-ui/src/views/gateway/server/config/index.vue
Normal file
99
sf-ui/src/views/gateway/server/config/index.vue
Normal file
@ -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>
|
||||
124
sf-ui/src/views/gateway/server/config/routeConfig.vue
Normal file
124
sf-ui/src/views/gateway/server/config/routeConfig.vue
Normal file
@ -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>
|
||||
@ -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 => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user