350 lines
12 KiB
Vue
350 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<div class="app-container-flex">
|
|||
|
|
<el-container>
|
|||
|
|
<el-header>
|
|||
|
|
{{titleName}}
|
|||
|
|
<el-divider/>
|
|||
|
|
</el-header>
|
|||
|
|
<el-main v-loading="loading">
|
|||
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="130px" label-position="right" :disabled="!editable">
|
|||
|
|
<el-row>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="策略类型" prop="strategyType">
|
|||
|
|
<el-radio-group v-model="form.strategyType" @input="strategyTypeChange">
|
|||
|
|
<el-radio
|
|||
|
|
v-for="dict in dict.type.gateway_strategy_type"
|
|||
|
|
:key="dict.value"
|
|||
|
|
:label="dict.value"
|
|||
|
|
:disabled="disabledType(dict.value)"
|
|||
|
|
>{{dict.label}}</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="策略名称" prop="strategyName">
|
|||
|
|
<el-input v-model="form.strategyName" clearable placeholder="描述性的名称，用于识别和管理该策略" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="策略描述" prop="description">
|
|||
|
|
<el-input v-model="form.description" type="textarea" placeholder="请输入策略描述" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
|
|||
|
|
<!-- 认证策略 start -->
|
|||
|
|
<!-- 认证策略 end -->
|
|||
|
|
|
|||
|
|
<!-- 鉴权策略 start -->
|
|||
|
|
<!-- 鉴权策略 end -->
|
|||
|
|
|
|||
|
|
<!-- 限流策略 start-->
|
|||
|
|
<template v-if="form.strategyType === 'CURRENT_LIMITING'">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="限流阈值" prop="currentLimitingThreshold">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>限流阈值</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
width="280"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">设置限流的阈值，即允许通过的请求次数或者并发连接数</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="form.currentLimitingThreshold"
|
|||
|
|
placeholder="请输入限流阈值"
|
|||
|
|
:min="0"
|
|||
|
|
:controls="false"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="限流时间窗口" prop="currentLimitingTimeWindow">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>限流时间窗口</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">限流时间窗口，单位s</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="form.currentLimitingTimeWindow"
|
|||
|
|
placeholder="请输入限流时间窗口"
|
|||
|
|
:min="0"
|
|||
|
|
:controls="false"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="限流响应" prop="currentLimitingResponse">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>限流响应</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">限流响应，JSON字符串</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.currentLimitingResponse"
|
|||
|
|
:autosize="{ minRows: 4}"
|
|||
|
|
type="textarea"
|
|||
|
|
placeholder="请输入限流响应"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</template>
|
|||
|
|
<!-- 限流策略 end -->
|
|||
|
|
<!-- 熔断策略 start -->
|
|||
|
|
<template v-if="form.strategyType === 'CIRCUIT_BREAKER'">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="熔断阈值" prop="circuitBreakerThreshold">
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="form.circuitBreakerThreshold"
|
|||
|
|
placeholder="请输入熔断阈值"
|
|||
|
|
:min="0"
|
|||
|
|
:controls="false"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="熔断时间窗口" prop="circuitBreakerTimeWindow">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>熔断时间窗口</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">调用失败阈值对应的时间窗口，单位s</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="form.circuitBreakerTimeWindow"
|
|||
|
|
placeholder="请输入熔断时间窗口"
|
|||
|
|
:min="0"
|
|||
|
|
:controls="false"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-form-item label="恢复时间间隔" prop="circuitBreakerRecoveryInterval">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>恢复时间间隔</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">熔断后的恢复时间间隔，单位s</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input-number
|
|||
|
|
v-model="form.circuitBreakerRecoveryInterval"
|
|||
|
|
placeholder="请输入恢复时间间隔"
|
|||
|
|
:min="0"
|
|||
|
|
:controls="false"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="24">
|
|||
|
|
<el-form-item label="熔断响应" prop="circuitBreakerResponse">
|
|||
|
|
<template slot="label">
|
|||
|
|
<span>熔断响应</span>
|
|||
|
|
<el-popover
|
|||
|
|
placement="top-start"
|
|||
|
|
trigger="hover"
|
|||
|
|
>
|
|||
|
|
<span slot="reference"><i class="el-icon-info ml10"></i></span>
|
|||
|
|
<p class="tip">熔断响应，JSON字符串</p>
|
|||
|
|
</el-popover>
|
|||
|
|
</template>
|
|||
|
|
<el-input
|
|||
|
|
v-model="form.circuitBreakerResponse"
|
|||
|
|
type="textarea"
|
|||
|
|
:autosize="{ minRows: 4}"
|
|||
|
|
placeholder="请输入熔断响应"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</template>
|
|||
|
|
<!-- 熔断策略 end -->
|
|||
|
|
</el-row>
|
|||
|
|
</el-form>
|
|||
|
|
</el-main>
|
|||
|
|
<el-footer class="footer">
|
|||
|
|
<el-button :disabled="btnLoading" @click="close">取消</el-button>
|
|||
|
|
<el-button v-if="editable" type="primary" :loading="btnLoading" @click="submitForm">保存</el-button>
|
|||
|
|
</el-footer>
|
|||
|
|
</el-container>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import EventBus from '@/utils/eventBus'
|
|||
|
|
import { deepClone } from '@/utils'
|
|||
|
|
import { updateStrategy, getStrategy, addStrategy } from "@/api/gateway/strategy";
|
|||
|
|
let CACHEFOEM;
|
|||
|
|
export default {
|
|||
|
|
components: { },
|
|||
|
|
dicts: ['gateway_strategy_type'],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loading: false,
|
|||
|
|
btnLoading: false,
|
|||
|
|
form: {
|
|||
|
|
id: void 0,
|
|||
|
|
strategyType: 'CURRENT_LIMITING',
|
|||
|
|
strategyName: void 0,
|
|||
|
|
description: void 0,
|
|||
|
|
currentLimitingThreshold: void 0,
|
|||
|
|
currentLimitingTimeWindow: void 0,
|
|||
|
|
currentLimitingResponse: '{"msg":"到达限流阈值，请稍后重试！","code":500}',
|
|||
|
|
circuitBreakerThreshold: void 0,
|
|||
|
|
circuitBreakerTimeWindow: void 0,
|
|||
|
|
circuitBreakerRecoveryInterval: void 0,
|
|||
|
|
circuitBreakerResponse: '{"msg":"到达熔断阈值，请稍后重试！","code":500}',
|
|||
|
|
},
|
|||
|
|
rules: {
|
|||
|
|
strategyType: [
|
|||
|
|
{ required: true, message: '策略类型不能为空', trigger: 'change' }
|
|||
|
|
],
|
|||
|
|
strategyName:[
|
|||
|
|
{ required: true, message: '策略名称不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
currentLimitingThreshold: [
|
|||
|
|
{ required: true, message: '限流阈值不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
currentLimitingTimeWindow: [
|
|||
|
|
{ required: true, message: '限流时间窗口不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
currentLimitingResponse: [
|
|||
|
|
{ required: true, message: '限流响应不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
circuitBreakerThreshold: [
|
|||
|
|
{ required: true, message: '熔断阈值不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
circuitBreakerTimeWindow: [
|
|||
|
|
{ required: true, message: '熔断时间窗口不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
circuitBreakerRecoveryInterval: [
|
|||
|
|
{ required: true, message: '恢复时间间隔不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
circuitBreakerResponse: [
|
|||
|
|
{ required: true, message: '熔断响应不能为空', trigger: 'blur' }
|
|||
|
|
],
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
editable() {
|
|||
|
|
return this.$route.query.type !== 'detail'
|
|||
|
|
},
|
|||
|
|
titleName() {
|
|||
|
|
if (!this.editable) {
|
|||
|
|
return '策略详情'
|
|||
|
|
}
|
|||
|
|
return this.$route.query.id ? '编辑策略' : '新增策略'
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.getDetail()
|
|||
|
|
},
|
|||
|
|
activated() {
|
|||
|
|
this.getDetail()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
disabledType(type) {
|
|||
|
|
return !(['CURRENT_LIMITING', 'CIRCUIT_BREAKER'].includes(type)) || !!(this.form.id);
|
|||
|
|
},
|
|||
|
|
async getDetail() {
|
|||
|
|
const { id } = this.$route.query
|
|||
|
|
if (id) {
|
|||
|
|
this.loading = true;
|
|||
|
|
try {
|
|||
|
|
const { data } = await getStrategy(id)
|
|||
|
|
this.form = data;
|
|||
|
|
CACHEFOEM = deepClone(data);
|
|||
|
|
} catch (error) {
|
|||
|
|
this.$message.error(error.message || '请求失败')
|
|||
|
|
}
|
|||
|
|
this.loading = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 表单重置
|
|||
|
|
reset() {
|
|||
|
|
this.form = {
|
|||
|
|
id: void 0,
|
|||
|
|
strategyType: 'CURRENT_LIMITING',
|
|||
|
|
strategyName: void 0,
|
|||
|
|
description: void 0,
|
|||
|
|
currentLimitingThreshold: void 0,
|
|||
|
|
currentLimitingTimeWindow: void 0,
|
|||
|
|
currentLimitingResponse: '{"msg":"到达限流阈值，请稍后重试！","code":500}',
|
|||
|
|
circuitBreakerThreshold: void 0,
|
|||
|
|
circuitBreakerTimeWindow: void 0,
|
|||
|
|
circuitBreakerRecoveryInterval: void 0,
|
|||
|
|
circuitBreakerResponse: '{"msg":"到达熔断阈值，请稍后重试！","code":500}',
|
|||
|
|
};
|
|||
|
|
this.resetForm("form");
|
|||
|
|
},
|
|||
|
|
strategyTypeChange() {
|
|||
|
|
const { id, strategyType } = this.form;
|
|||
|
|
this.reset();
|
|||
|
|
if (CACHEFOEM && strategyType === CACHEFOEM.strategyType) {
|
|||
|
|
Object.keys(this.form).forEach((key) => {
|
|||
|
|
this.form[key] = CACHEFOEM[key];
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
this.form.id = id;
|
|||
|
|
this.form.strategyType = strategyType;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async submitForm() {
|
|||
|
|
const request = this.form.id != null ? updateStrategy : addStrategy;
|
|||
|
|
const msg = this.form.id != null ? '修改' : '新增';
|
|||
|
|
await this.$refs.form.validate();
|
|||
|
|
try {
|
|||
|
|
this.btnLoading = true;
|
|||
|
|
await request(this.form);
|
|||
|
|
this.$modal.msgSuccess(`${msg}成功`);
|
|||
|
|
EventBus.$emit('reloadStratefyList');
|
|||
|
|
this.close();
|
|||
|
|
} catch (error) {
|
|||
|
|
this.$modal.msgError(`${msg}失败`);
|
|||
|
|
}
|
|||
|
|
this.btnLoading = false;
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.$tab.closePage();
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.footer {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
::v-deep.el-input-number .el-input__inner{
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
.el-icon-info {
|
|||
|
|
color: #959595;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.tip {
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
</style>
|