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> |