<template>
|
<a-drawer
|
:title="title"
|
:maskClosable="true"
|
width="45%"
|
placement="right"
|
v-if="visible"
|
:closable="true"
|
@close="handleCancel"
|
:visible="visible"
|
style="overflow: auto; padding-bottom: 53px"
|
>
|
<a-form-model ref="form" :layout="layout" :label-col="labelCol" :wrapper-col="wrapperCol" :model="router">
|
<a-form-model-item label="路由ID">
|
<a-input v-model="router.routerId" placeholder="路由唯一ID" />
|
</a-form-model-item>
|
<a-form-model-item label="路由名称">
|
<a-input v-model="router.name" placeholder="路由名称" />
|
</a-form-model-item>
|
<a-form-model-item label="路由URI">
|
<a-input v-model="router.uri" placeholder="路由URL" />
|
</a-form-model-item>
|
<a-form-model-item label="路由状态" prop="status">
|
<a-switch default-checked v-model="router.status" />
|
</a-form-model-item>
|
|
<a-form-model-item prop="predicates" label="路由条件">
|
<div v-for="(item, index) in router.predicates">
|
<a-divider
|
>{{ item.name }}
|
<a-icon type="delete" size="22" @click="removePredicate(router, index)" />
|
</a-divider>
|
<div>
|
<template v-for="(tag, index) in item.args">
|
<a-input
|
v-if="index == currentTagIndex"
|
ref="input"
|
type="text"
|
size="small"
|
:style="{ width: '190px' }"
|
:value="tag"
|
@change="handleInputChange"
|
@blur="handleInputEditConfirm(item, tag, index)"
|
@keyup.enter="handleInputEditConfirm(item, tag, index)"
|
/>
|
<a-tag
|
v-else
|
:key="tag"
|
:closable="true"
|
@close="() => removeTag(item, tag)"
|
@click="editTag(tag, index)"
|
>
|
{{ tag }}
|
</a-tag>
|
</template>
|
<a-input
|
v-if="inputVisible && index == currentNameIndex"
|
ref="input"
|
type="text"
|
size="small"
|
:style="{ width: '100px' }"
|
:value="inputValue"
|
@change="handleInputChange"
|
@blur="handleInputConfirm(item)"
|
@keyup.enter="handleInputConfirm(item)"
|
/>
|
<a-tag v-else style="background: #fff; borderstyle: dashed" @click="showInput(item, index)">
|
<a-icon type="plus" />
|
新建{{ item.name }}
|
</a-tag>
|
</div>
|
</div>
|
<p class="btn" style="padding-top: 10px">
|
<a-dropdown>
|
<a-menu slot="overlay" class="ant-dropdown-bordered" @click="predicatesHandleMenuClick">
|
<a-menu-item :key="item" v-for="item in tagArray">{{ item }}</a-menu-item>
|
</a-menu>
|
<a-button type="dashed" style="margin-left: 8px; width: 100%">
|
添加路由条件
|
<a-icon type="down" />
|
</a-button>
|
</a-dropdown>
|
</p>
|
</a-form-model-item>
|
<a-form-model-item prop="predicates" label="过滤器">
|
<div v-for="(item, index) in router.filters">
|
<a-divider
|
>{{ item.name }}
|
<a-icon type="delete" size="22" @click="removeFilter(router, index)" />
|
</a-divider>
|
<div v-for="(tag, index) in item.args" :key="tag.key">
|
<a-input v-model="tag.key" placeholder="参数键" style="width: 45%; margin-right: 8px" />
|
<a-input v-model="tag.value" placeholder="参数值" style="width: 40%; margin-right: 8px" />
|
<a-icon class="dynamic-delete-button" type="minus-circle-o" @click="removeFilterParams(item, index)" />
|
</div>
|
<a-button type="dashed" style="margin-left: 28%; width: 30%" size="small" @click="addFilterParams(item)">
|
<a-icon type="plus" />
|
添加参数
|
</a-button>
|
</div>
|
<p class="btn" style="padding-top: 10px">
|
<a-dropdown>
|
<a-menu slot="overlay" class="ant-dropdown-bordered" @click="filterHandleMenuClick">
|
<a-menu-item :key="item.key" :name="item.name" v-for="item in filterArray">{{ item.name }}</a-menu-item>
|
</a-menu>
|
<a-button type="dashed" style="margin-left: 8px; width: 100%">
|
添加过滤器
|
<a-icon type="down" />
|
</a-button>
|
</a-dropdown>
|
</p>
|
</a-form-model-item>
|
<a-row :style="{ textAlign: 'right' }" class="drawer-bottom-button">
|
<a-button :style="{ marginRight: '8px' }" @click="handleCancel"> 关闭 </a-button>
|
<a-button @click="handleSubmit" type="primary">确定</a-button>
|
</a-row>
|
</a-form-model>
|
</a-drawer>
|
</template>
|
<script>
|
import { postAction } from '@tievd/cube-block/lib/api/manage'
|
|
export default {
|
name: 'GateWayRouteModal',
|
components: {},
|
data() {
|
return {
|
layout: 'horizontal',
|
labelCol: { span: 3 },
|
wrapperCol: { span: 14 },
|
currentNameIndex: 0,
|
currentTagIndex: -1,
|
predicates: {},
|
filterArray: [
|
{ key: 0, name: '熔断器' },
|
{ key: 1, name: '限流过滤器' },
|
],
|
tagArray: ['Path', 'Host', 'Cookie', 'Header', 'Method', 'Query', 'After', 'Before', 'Between', 'RemoteAddr'],
|
inputVisible: false,
|
inputValue: '',
|
url: {
|
update: '/sys/gateway/route/updateAll',
|
clear: '/sys/gateway/route/clearRedis',
|
},
|
router: this.getRouter(),
|
title: '路由编辑',
|
visible: false,
|
loading: false,
|
}
|
},
|
methods: {
|
getRouter() {
|
return {
|
routerId: '',
|
name: '',
|
uri: '',
|
predicates: [],
|
filters: [],
|
}
|
},
|
show(router) {
|
if (router) {
|
router.status = Boolean(router.status)
|
this.router = router
|
} else {
|
this.router = this.getRouter()
|
this.inputValue = ''
|
}
|
this.visible = true
|
this.currentTagIndex = -1
|
this.currentNameIndex = -1
|
},
|
close() {
|
this.reset()
|
this.$emit('close')
|
this.$refs['form'].resetFields()
|
this.visible = false
|
},
|
//删除路由条件配置项
|
removeTag(item, removedTag) {
|
const tags = item.args.filter((tag) => tag !== removedTag)
|
item.args = tags
|
},
|
//添加路由选项
|
predicatesHandleMenuClick(e) {
|
this.router.predicates.push({
|
args: [],
|
name: e.key,
|
})
|
},
|
editTag(tag, index) {
|
this.currentTagIndex = index
|
},
|
//显示输入框
|
showInput(item, index) {
|
this.inputVisible = true
|
this.currentNameIndex = index
|
},
|
//路由选项输入框失去焦点事件
|
handleInputChange(e) {
|
this.inputValue = e.target.value
|
},
|
//删除路由条件
|
removePredicate(item, index) {
|
item.predicates.splice(index, 1)
|
},
|
//删除过滤器参数
|
removeFilterParams(item, index) {
|
item.args.splice(index, 1)
|
},
|
//删除过滤器
|
removeFilter(item, index) {
|
item.filters.splice(index, 1)
|
},
|
//添加过滤器参数
|
addFilterParams(item) {
|
item.args.push({
|
key: 'key' + item.args.length + 1,
|
value: '',
|
})
|
},
|
//过滤器添加事件
|
filterHandleMenuClick(e) {
|
if (e.key == 0) {
|
this.router.filters.push({
|
args: [
|
{
|
key: 'name',
|
value: 'default',
|
},
|
{
|
key: 'fallbackUri',
|
value: 'forward:/fallback',
|
},
|
],
|
name: 'Hystrix',
|
title: this.filterArray[0].name,
|
})
|
}
|
if (e.key == 1) {
|
this.router.filters.push({
|
args: [
|
{
|
key: 'key-resolver',
|
value: '#{@ipKeyResolver}',
|
},
|
{
|
key: 'redis-rate-limiter.replenishRate',
|
value: 20,
|
},
|
{
|
key: 'redis-rate-limiter.burstCapacity',
|
value: 20,
|
},
|
],
|
name: 'RequestRateLimiter',
|
title: this.filterArray[1].name,
|
})
|
}
|
},
|
//输入框确认
|
handleInputConfirm(item) {
|
const inputValue = this.inputValue
|
let tags = item.args
|
if (inputValue && tags.indexOf(inputValue) === -1) {
|
item.args = [...tags, inputValue]
|
}
|
console.log(tags)
|
Object.assign(this, {
|
tags,
|
inputVisible: false,
|
inputValue: '',
|
})
|
this.currentTagIndex = -1
|
},
|
//输入框确认
|
handleInputEditConfirm(item, tag, index) {
|
if (this.inputValue) {
|
const inputValue = this.inputValue
|
item.args[index] = inputValue
|
}
|
this.currentTagIndex = -1
|
},
|
reset() {
|
this.expandedKeysss = []
|
this.checkedKeys = []
|
this.defaultCheckedKeys = []
|
this.loading = false
|
},
|
//关闭弹窗
|
handleCancel() {
|
this.close()
|
},
|
//提交路由
|
handleSubmit() {
|
let { predicates, filters, ...other } = this.router
|
let router = other
|
router.predicates = JSON.stringify(this.router.predicates)
|
router.filters = JSON.stringify(this.router.filters)
|
postAction(this.url.update, {
|
router,
|
}).then((res) => {
|
if (res.success) {
|
this.close()
|
this.$emit('ok')
|
this.$message.success(res.message)
|
} else {
|
this.$message.error(res.message)
|
}
|
})
|
},
|
},
|
}
|
</script>
|
<style lang="less" scoped></style>
|
