99 lines
2.2 KiB
Vue
99 lines
2.2 KiB
Vue
|
<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>
|