chenzihao/sac
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gateway基本功能页面

Browse Source
This commit is contained in:
yin fuxian 2024-04-24 17:24:58 +08:00
parent e922dfbc4a
commit 87f61bc4d8
14 changed files with 953 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
sf-ui/src/api/gateway/interface.js
View File

@ -42,3 +42,12 @@ export function delInterface(id) {
method: 'delete'
})
}
// 禁用/启用接口管理
export function changeInterfaceStatus(data) {
return request({
url: '/gateway/interface/status',
method: 'put',
data: data
})
}

9
sf-ui/src/api/gateway/server.js
View File

@ -42,3 +42,12 @@ export function delServer(id) {
method: 'delete'
})
}
// 启用/停用接口信息（支持批量）
export function changeServerStatus(data) {
return request({
url: '/gateway/server/status',
method: 'put',
data: data
})
}

9
sf-ui/src/api/gateway/strategy.js
View File

@ -42,3 +42,12 @@ export function delStrategy(id) {
method: 'delete'
})
}
// 禁用/启用策略管理
export function changeStrategyStatus(data) {
return request({
url: '/gateway/strategy/status',
method: 'put',
data: data
})
}

100
sf-ui/src/views/gateway/components/BaseSearch.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<el-form ref="queryForm" :inline="true" :model="queryParams" label-width="90px" size="small">
<el-form-item
v-for="item in queryOptions"
:key="item.value"
:label="item.label"
:prop="item.prop"
>
<template v-if="item.type === 'input'">
<el-input
v-model="queryParams[item.prop]"
clearable
:placeholder="`请输入${item.label}`"
@keyup.enter.native="handleQuery"
/>
</template>
<template v-else-if="item.type === 'select'">
<el-select v-model="queryParams[item.prop]" clearable :placeholder="`请选择${item.label}`">
<el-option
v-for="dict in item.dicts"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</template>
<template v-else-if="item.type === 'daterange'">
<el-date-picker
v-model="queryParams[item.prop]"
end-placeholder="结束日期"
range-separator="-"
start-placeholder="开始日期"
style="width: 240px"
type="daterange"
value-format="yyyy-MM-dd"
/>
</template>
</el-form-item>
<el-form-item>
<el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
props: {
defaultValue: {
type: Object,
default: () => {}
},
queryOptions: {
type: Array,
default: () => []
}
},
data() {
return {
queryParams: {}
}
},
created() {
this.initValue();
},
watch: {
defaultValue: {
handler(val) {
Object.keys(val).forEach(key => {
if (val[key]) {
this.$set(this.queryParams, key, val[key]);
}
});
},
deep: true,
immediate: true
}
},
methods: {
initValue() {
this.queryOptions.forEach(item => {
if (item.prop && this.queryParams[item.prop] === void 0) {
this.$set(this.queryParams, item.prop, void 0)
}
})
},
handleQuery() {
this.$emit('query', this.queryParams)
},
resetQuery() {
this.resetForm('queryForm')
this.handleQuery();
}
}
}
</script>
<style lang="scss" scoped>
</style>

78
sf-ui/src/views/gateway/components/BaseTable.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<div>
<el-table v-loading="loading" :data="tableData" max-height="500" @selection-change="handleSelectionChange">
<el-table-column align="center" type="selection" width="55"/>
<template v-for="item in tableOptions">
<el-table-column
v-if="item.type === 'slot'"
:key="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
>"
<template slot-scope="scope">
<slot :name="item.prop" :row="scope.row" />
</template>
</el-table-column>
<el-table-column
v-else
:key="item.prop"
:label="item.label"
:prop="item.prop"
:width="item.width"
:fixed="item.fixed"
/>
</template>
</el-table>
</div>
</template>
<script>
export default {
props: {
loading: {
type: Boolean,
default: false
},
tableOptions: {
type: Array,
default: () => []
},
tableData: {
type: Array,
default: () => []
},
},
data() {
return {
// loading: false,
// tableData: [
// {
// serviceId: 'shgj34',
// serviceName: '服务名称1',
// address: '上海市普陀区金沙江路 1518 弄',
// status: '1',
// version: '1.0.0',
// creator: 'admin',
// createTime: '2024-04-20',
// updateTime: '2024-04-20',
// }
// ],
multipleSelection: [],
}
},
created() {
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
this.$emit('chooseChange', val);
}
}
}
</script>
<style lang="scss" scoped>
</style>

52
sf-ui/src/views/gateway/interface/index.vue
View File

@ -53,10 +53,10 @@
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
:disabled="multiple"
@click="handleStatus()"
v-hasPermi="['gateway:interface:edit']"
>修改</el-button>
>批量启用</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -67,7 +67,7 @@
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['gateway:interface:remove']"
>删除</el-button>
>批量删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -84,24 +84,31 @@
<el-table v-loading="loading" :data="interfaceList" @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="interfaceName" />
<el-table-column label="接口路径" align="center" prop="interfacePath" />
<el-table-column label="请求方式" align="center" prop="requestMethod">
<el-table-column label="接口ID" width="60" align="center" prop="id" />
<el-table-column label="接口名称" align="center" show-overflow-tooltip prop="interfaceName" />
<el-table-column label="接口路径" align="center" show-overflow-tooltip prop="interfacePath" />
<el-table-column label="接口描述" align="center" show-overflow-tooltip prop="description" />
<el-table-column label="接口文档" align="center" show-overflow-tooltip prop="document" />
<el-table-column label="请求方式" width="80" 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="description" />
<el-table-column label="接口版本" align="center" prop="version" />
<el-table-column label="接口状态" align="center" prop="status">
<el-table-column label="接口版本" width="100" align="center" prop="version" />
<el-table-column label="接口状态" width="80" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.gateway_data_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="接口文档" align="center" prop="document" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleStatus(scope.row)"
v-hasPermi="['gateway:interface:edit']"
>{{scope.row === '0' ? '启用' : '禁用' }}</el-button>
<el-button
size="mini"
type="text"
@ -129,7 +136,7 @@
/>
<!-- 添加或修改接口管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="接口名称" prop="interfaceName">
<el-input v-model="form.interfaceName" placeholder="请输入接口名称" />
@ -165,7 +172,7 @@
</template>
<script>
import { listInterface, getInterface, delInterface, addInterface, updateInterface } from "@/api/gateway/interface";
import { listInterface, getInterface, delInterface, addInterface, updateInterface, changeInterfaceStatus } from "@/api/gateway/interface";
export default {
name: "Interface",
@ -293,6 +300,21 @@ export default {
this.title = "修改接口管理";
});
},
/** 启用/禁用按钮操作 */
handleStatus(row) {
const ids = row?.id ? [row.id] : this.ids;
let status = '1'
if (row) {
status = row.status == '1' ? '0' : '1'
}
const params = {ids, status};
changeInterfaceStatus(params).then(({code, msg}) => {
if (code === 200) {
this.$message.success(msg);
this.getList();
}
})
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {

41
sf-ui/src/views/gateway/server/config/advancedConfig.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<div class="advanced-container">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="重试策略" prop="retry">
<el-input v-model="form.retry" placeholder="设置在请求失败时的重试次数" />
</el-form-item>
<el-form-item label="超时设置" prop="timeout">
<el-input v-model="form.timeout" placeholder="设想响应数据的缓存策略" />
</el-form-item>
<el-form-item label="压缩配置" prop="cache">
<el-input v-model="form.cache" placeholder="响应数据的压缩方式" />
</el-form-item>
<el-form-item label="监控指标" prop="alarm">
<el-input v-model="form.alarm" placeholder="监控的指标、阈值和告警规则" />
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
retry: '',
timeout: '',
cache: '',
alarm: '',
},
rules: {},
}
},
}
</script>
<style lang="scss" scoped>
.advanced-container {
width: 600px;
margin: 40px auto 0;
}
</style>

142
sf-ui/src/views/gateway/server/config/chooseDialog.vue Normal file
View File

@ -0,0 +1,142 @@
<template>
<div>
<el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="1200px" append-to-body destroy-on-close>
<BaseSearch
:defaultValue="queryParams"
:queryOptions="queryOptions"
@query="handleQuery"
/>
<BaseTable
v-loading="loading"
:tableData="tableData"
:tableOptions="tableOptions"
@chooseChange="chooseChange"
>
<template v-for="item in tableSolts" :slot="item.prop" slot-scope="scope">
<slot :name="item.prop" :row="scope.row" />
</template>
</BaseTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="pages.pageNum"
:limit.sync="pages.pageSize"
@pagination="getList"
/>
<div slot="footer" class="dialog-footer">
<el-button @click="open = false">取 消</el-button>
<el-button type="primary" @click="chooseEnd">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import BaseSearch from '@/views/gateway/components/BaseSearch';
import BaseTable from '@/views/gateway/components/BaseTable';
export default {
components: {
BaseSearch,
BaseTable,
},
props: {
visible: {
type: Boolean,
default: false
},
title: {
type: String,
default: ''
},
queryParams: {
type: Object,
default: () => {
return {}
}
},
queryOptions: {
type: Array,
default: () => {
return []
}
},
tableOptions: {
type: Array,
default: () => {
return []
}
},
request: {
type: Function,
}
},
computed: {
open: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
},
tableSolts() {
return this.tableOptions.filter((item) => item.type === 'slot');
},
},
data() {
return {
loading: false,
tableData: [],
total: 0,
pages: {
pageNum: 1,
pageSize: 10,
},
multipleSelection: []
}
},
created() {
this.getList();
console.log(this.tableSolts)
},
methods: {
async getList(param) {
try {
this.loading = true;
const params = {
...this.queryParams,
...this.pages,
...param,
}
const { code, rows, total } = await this.request(params);
if (code === 200) {
this.tableData = rows;
this.total = total;
}
this.loading = false;
} catch (error) {
this.loading = false;
}
},
handleQuery(form) {
console.log(form)
this.getList(form);
},
chooseChange(rows) {
this.multipleSelection = rows;
},
chooseEnd() {
this.$emit('chooseEnd', this.multipleSelection);
this.open = false;
},
}
}
</script>
<style lang="scss" scoped>
</style>

27
sf-ui/src/views/gateway/server/config/index.vue
View File

@ -15,7 +15,12 @@
</el-steps>
<div class="mt10">
<RouteConfig :serverId="detail.id" />
<StrategyConfig v-show="active == 0" :serverId="detail.id" />
<InterfaceConfig v-show="active == 1" :serverId="detail.id" />
<AdvancedConfig v-show="active == 2" :serverId="detail.id" />
<!-- <RouteConfig :serverId="detail.id" /> -->
</div>
</el-main>
<el-footer style="text-align: center;">
@ -29,25 +34,31 @@
<script>
import { getServer, } from "@/api/gateway/server";
import RouteConfig from './routeConfig.vue';
import StrategyConfig from './strategyConfig.vue';
import InterfaceConfig from './interfaceConfig.vue';
import AdvancedConfig from './advancedConfig.vue';
export default {
components: {
RouteConfig,
StrategyConfig,
InterfaceConfig,
AdvancedConfig,
},
data() {
return {
detail: {},
active: 1,
active: 0,
setpList: [
{ title: '添加路由', value: '0' },
{ title: '添加策略', value: '1' },
{ title: '添加接口', value: '2' },
{ title: '高级配置', value: '3' },
// { title: '添加路由', value: '0' },
{ title: '添加策略', value: '0' },
{ title: '添加接口', value: '1' },
{ title: '高级配置', value: '2' },
]
}
},
computed: {
nextBtn() {
return this.active == 3 ? '保存' : '下一步'
return this.active == 2 ? '保存' : '下一步'
}
},
created() {
@ -73,7 +84,7 @@ export default {
},
// 下一步
next() {
if (this.active == 3) {
if (this.active == 2) {
return
}
this.active++;

115
sf-ui/src/views/gateway/server/config/interfaceConfig.vue Normal file
View File

@ -0,0 +1,115 @@
<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>
<BaseTable
ref="table"
:loading="loading"
:tableOptions="tableOptions"
:tableData="tableData"
>
<template #action="{ row }">
<el-button
circle
icon="el-icon-minus"
@click="handleMinus(row)"
></el-button>
</template>
</BaseTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<ChooseDialog
title="添加接口"
:visible.sync="open"
:queryOptions="queryOptions"
:tableOptions="chooseTableOptions"
:request="listInterface"
@chooseEnd="chooseEnd"
/>
</div>
</template>
<script>
import BaseTable from '@/views/gateway/components/BaseTable';
import ChooseDialog from './chooseDialog.vue'
import { listInterface } from "@/api/gateway/interface";
export default {
components: {
BaseTable,
ChooseDialog,
},
dicts: ['gateway_data_status', 'gateway_strategy_type'],
data() {
return {
listInterface,
tableOptions: [
{ label: '接口ID', prop: 'id', width: '80' },
{ label: '接口名称', prop: 'interfaceName' },
{ label: '接口路劲', prop: 'interfacePath' },
{ label: '接口描述', prop: 'description' },
{ label: '接口版本', prop: 'version', width: '120' },
{ type: 'slot', prop: 'action', label: '操作', fixed: 'right', width: '100px' }
],
loading: false,
tableData: [],
total: 1,
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 弹出框相关
open: false,
}
},
computed: {
chooseTableOptions() {
return this.tableOptions.filter(item => item.prop !== 'action');
},
queryOptions() {
return [
{ label: '接口名称', prop: 'interfaceName', type: 'input' },
]
},
},
created() {
this.getList();
},
methods: {
async getList() {
console.log('getList');
// 调用配置详情接口
this.tableData = []
},
handleMinus(row) {
console.log(row);
this.tableData = this.tableData.filter(item => item.id !== row.id);
},
chooseEnd(rows) {
// TODO 调用接口 管理策略到该服务 并刷新列表
this.tableData = this.tableData.concat(rows);
}
}
}
</script>
<style lang="scss" scoped>
</style>

53
sf-ui/src/views/gateway/server/config/routeConfig.vue
View File

@ -28,8 +28,8 @@
<template slot-scope="scope">
<el-button
circle
icon="el-icon-plus"
@click="handleAdd(scope.row)"
icon="el-icon-minus"
@click="handleMinus(scope.row)"
v-hasPermi="['gateway:route:edit']"
></el-button>
</template>
@ -44,28 +44,24 @@
@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"
<ChooseDialog
title="添加路由"
:visible.sync="open"
:queryOptions="queryOption"
:tableOptions="tableOptions"
:request="listRoute"
@chooseEnd="chooseEnd"
/>
</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'
import ChooseDialog from './chooseDialog.vue'
export default {
components: {
ChooseDialog
},
props: {
serverId: {
type: String | Number,
@ -75,6 +71,7 @@ export default {
dicts: ['http_request_method',],
data() {
return {
listRoute,
loading: false,
total: 0,
routeList: [],
@ -88,10 +85,21 @@ export default {
dialogQuery: {
routerName: '',
},
queryOption: [
{ label: '路由名称', prop: 'routerName', type: 'input' },
],
tableOptions: [
{ label: '路由ID', prop: 'id' },
{ label: '路由名称', prop: 'routerName' },
{ label: '请求路径', prop: 'requestPath' },
{ label: '请求方式', prop: 'requestMethod' },
{ label: '服务地址', prop: 'serverAddress' },
{ label: '服务器端口', prop: 'serverPort' },
],
}
},
created() {
this.getList()
// this.getList()
},
methods: {
/** 查询路由管理列表 */
@ -106,8 +114,8 @@ export default {
handleSelectionChange() {
},
handleAdd(row) {
// 添加到路由配置
handleMinus(row) {
this.routeList = this.routeList.filter(item => item.id !== row.id);
},
handleQuery() {
@ -115,6 +123,11 @@ export default {
resetQuery() {
},
chooseEnd(data) {
console.log(data);
this.routeList = data;
// 调用配置路由接口、同时刷新表格
},
}
}
</script>

131
sf-ui/src/views/gateway/server/config/strategyConfig.vue Normal file
View File

@ -0,0 +1,131 @@
<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>
<BaseTable
ref="table"
:loading="loading"
:tableOptions="tableOptions"
:tableData="tableData"
>
<template #strategyType="{ row }">
<dict-tag :options="dict.type.gateway_strategy_type" :value="row.strategyType"/>
</template>
<template #action="{ row }">
<el-button
circle
icon="el-icon-minus"
@click="handleMinus(row)"
></el-button>
</template>
</BaseTable>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<ChooseDialog
title="添加策略"
:visible.sync="open"
:queryOptions="queryOptions"
:tableOptions="chooseTableOptions"
:request="listStrategy"
@chooseEnd="chooseEnd"
>
<template #strategyType="{ row }">
<dict-tag :options="dict.type.gateway_strategy_type" :value="row.strategyType"/>
</template>
</ChooseDialog>
</div>
</template>
<script>
import BaseTable from '@/views/gateway/components/BaseTable';
import ChooseDialog from './chooseDialog.vue'
import { listStrategy } from "@/api/gateway/strategy";
export default {
components: {
BaseTable,
ChooseDialog,
},
dicts: ['gateway_data_status', 'gateway_strategy_type'],
data() {
return {
listStrategy,
tableOptions: [
{ label: '策略ID', prop: 'id', width: '80' },
{ type: 'slot', label: '策略类型', prop: 'strategyType', width: '120' },
{ label: '策略名称', prop: 'strategyName' },
{ label: '策略描述', prop: 'description' },
{ type: 'slot', prop: 'action', label: '操作', fixed: 'right', width: '100px' }
// { label: '服务器端口', prop: 'serverPort' },
],
loading: false,
tableData: [],
total: 1,
queryParams: {
pageNum: 1,
pageSize: 10,
},
// 弹出框相关
open: false,
}
},
computed: {
chooseTableOptions() {
return this.tableOptions.filter(item => item.prop !== 'action');
},
queryOptions() {
return [
{ label: '策略名称', prop: 'strategyName', type: 'input' },
{ label: '策略类型', prop: 'strategyType', type: 'select', dicts: this.dict.type.gateway_strategy_type },
// { label: '策略描述', prop: 'description', type: 'input' },
]
},
},
created() {
this.getList();
},
methods: {
async getList() {
console.log('getList');
// 调用配置详情接口
this.tableData = [{
id: 'xxx',
strategyName: '策略名称',
strategyType: 'AUTHENTICATION',
description: '策略描述',
}
]
},
handleMinus(row) {
console.log(row);
this.tableData = this.tableData.filter(item => item.id !== row.id);
},
chooseEnd(rows) {
console.log(rows)
// TODO 调用接口 管理策略到该服务 并刷新列表
this.tableData = this.tableData.concat(rows);
}
}
}
</script>
<style lang="scss" scoped>
</style>

84
sf-ui/src/views/gateway/server/index.vue
View File

@ -55,28 +55,16 @@
v-hasPermi="['gateway:server:add']"
>新增</el-button>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
v-hasPermi="['gateway:server:edit']"
>修改</el-button>
</el-col> -->
<!-- <el-col :span="1.5">
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-position"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['gateway:server:remove']"
@click="handleStatus()"
>批量发布</el-button>
</el-col> -->
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
@ -84,7 +72,7 @@
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
@click="handleDelete()"
v-hasPermi="['gateway:server:remove']"
>批量删除</el-button>
</el-col>
@ -103,23 +91,23 @@
<el-table v-loading="loading" :data="serverList" @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="serverName" />
<el-table-column label="服务地址" align="center" prop="serverAddress" />
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="接口版本" align="center" prop="version" />
<el-table-column label="服务状态" align="center" prop="status">
<el-table-column label="服务ID" width="60" align="center" prop="id" />
<el-table-column label="服务名称" align="center" show-overflow-tooltip prop="serverName" />
<el-table-column label="服务地址" align="center" show-overflow-tooltip prop="serverAddress" />
<el-table-column label="备注" align="center" show-overflow-tooltip prop="remark" />
<!-- <el-table-column label="接口版本" align="center" prop="version" /> -->
<el-table-column label="服务状态" width="100" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.gateway_data_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建者" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column label="创建者" width="100" align="center" prop="createBy" />
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
<el-table-column label="更新时间" align="center" prop="updateTime" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
</template>
@ -129,21 +117,24 @@
<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"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['gateway:server:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleConfig(scope.row)"
v-hasPermi="['gateway:server:config']"
>服务配置</el-button>
<el-button
size="mini"
type="text"
@click="handleStatus(scope.row)"
v-hasPermi="['gateway:server:config']"
>{{scope.row.status == '1' ? '停止' : '启用'}}</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
v-hasPermi="['gateway:server:remove']"
>删除</el-button>
@ -181,7 +172,7 @@
</template>
<script>
import { listServer, getServer, delServer, addServer, updateServer } from "@/api/gateway/server";
import { listServer, getServer, delServer, addServer, updateServer, changeServerStatus } from "@/api/gateway/server";
export default {
name: "Server",
@ -339,7 +330,7 @@ export default {
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
const ids = row.id || this.ids.join(",");
this.$modal.confirm('是否确认删除服务管理编号为"' + ids + '"的数据项？').then(function() {
return delServer(ids);
}).then(() => {
@ -347,6 +338,27 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 停用/启用按钮操作 */
handleStatus(row) {
const ids = row?.id ? [row.id] : this.ids;
let status = '1';
if (row) {
status = row.status === '0' ? '1' : '0';
}
const params = {
ids,
status: status
}
changeServerStatus(params).then((res) => {
console.log(res)
if (res.code === 200) {
this.getList();
this.$modal.msgSuccess(row.status === '1' ? "停用成功" : "启用成功");
} else {
this.$modal.msgError(row.status === '1' ? "停用失败" : "启用失败");
}
})
},
/** 导出按钮操作 */
handleExport() {
this.download('gateway/server/export', {

228
sf-ui/src/views/gateway/strategy/index.vue
View File

@ -19,14 +19,6 @@
/>
</el-select>
</el-form-item>
<el-form-item label="请求方式" prop="requestMethod">
<el-input
v-model="queryParams.requestMethod"
placeholder="请输入请求方式"
clearable
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="策略状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择策略状态" clearable>
<el-option
@ -71,10 +63,10 @@
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
:disabled="multiple"
@click="handleStatus()"
v-hasPermi="['gateway:strategy:edit']"
>修改</el-button>
>批量启用</el-button>
</el-col>
<el-col :span="1.5">
<el-button
@ -102,32 +94,39 @@
<el-table v-loading="loading" :data="strategyList" @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="strategyName" />
<el-table-column label="策略类型" align="center" prop="strategyType">
<el-table-column label="策略ID" width="60" align="center" prop="id" />
<el-table-column label="策略类型" width="120" align="center" prop="strategyType">
<template slot-scope="scope">
<dict-tag :options="dict.type.gateway_strategy_type" :value="scope.row.strategyType"/>
</template>
</el-table-column>
<el-table-column label="策略描述" align="center" prop="description" />
<el-table-column label="请求方式" align="center" prop="requestMethod" />
<el-table-column label="策略状态" align="center" prop="status">
<el-table-column label="策略名称" align="left" show-overflow-tooltip prop="strategyName" />
<el-table-column label="策略描述" align="left" show-overflow-tooltip prop="description" />
<!-- <el-table-column label="请求方式" align="center" prop="requestMethod" /> -->
<el-table-column label="策略状态" width="80" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :options="dict.type.gateway_data_status" :value="scope.row.status"/>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
<el-table-column label="创建时间" align="center" prop="createTime" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" width="180">
<el-table-column label="更新时间" align="center" prop="updateTime" width="100">
<template slot-scope="scope">
<span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleStatus(scope.row)"
v-hasPermi="['gateway:strategy:edit']"
>{{scope.row === '0' ? '启用' : '禁用' }}</el-button>
<el-button
size="mini"
type="text"
@ -155,31 +154,80 @@
/>
<!-- 添加或修改策略管理对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="策略名称" prop="strategyName">
<el-input v-model="form.strategyName" placeholder="请输入策略名称" />
</el-form-item>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" :validate-on-rule-change="false" label-width="100px">
<el-form-item label="策略类型" prop="strategyType">
<el-select v-model="form.strategyType" placeholder="请选择策略类型">
<el-option
<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.label"
:value="dict.value"
></el-option>
</el-select>
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="策略名称" prop="strategyName">
<el-input v-model="form.strategyName" clearable placeholder="描述性的名称，用于识别和管理该策略" />
</el-form-item>
<el-form-item label="策略描述" prop="description">
<el-input v-model="form.description" placeholder="请输入策略描述" />
</el-form-item>
<el-form-item label="请求方式" prop="requestMethod">
<el-input v-model="form.requestMethod" placeholder="请输入请求方式" />
<!-- 认证策略 -->
<template v-if="form.strategyType === 'AUTHENTICATION'">
<!-- 缺 认证方式 -->
<!-- 缺 认证配置 针对选定的认证方式，需要相应的配置信息，如秘钥、证书、令牌有效期等 -->
<!-- 缺 生效范围 -->
</template>
<!-- 认证策略 -->
<!-- 鉴权策略 -->
<template v-if="form.strategyType === 'PERMISSION'">
<!-- 缺 角色授权 指定用户或角色是否具有访问接口或资源的权限-->
<!-- 缺 角色列表 指定哪些角色拥有访问接口或资源的权限-->
<!-- 缺 用户ID 标识请求中的用户身份信息-->
<!-- 缺 IP地址 允许访问接口或资源的IP地址范围，限制请求来源-->
<el-form-item label="请求方法" prop="requestMethod">
<el-radio-group v-model="form.requestMethod">
<el-radio
v-for="dict in dict.type.http_request_method"
:key="dict.value"
:label="dict.value"
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="加密算法" prop="encryptionAlgorithm">
<el-input v-model="form.encryptionAlgorithm" placeholder="请输入加密算法" />
<!-- 缺 请求路劲 允许访问的接口路劲或URL -->
<!-- 缺 访问频率限制 设置允许用户或角色在一定时间内访问接口的次数限制 -->
<!-- 缺 访问时间限制 允许用户或者角色访问接口的时间段 -->
<!-- 缺 访问来源 访问接口的来源 -->
<!-- 缺 有限期 -->
<!-- 缺 授权范围 指定用户或角色 -->
</template>
<!-- 鉴权策略 -->
<!-- 限流策略 -->
<template v-if="form.strategyType == 'CURRENT_LIMITING'">
<el-form-item label="限流算法" prop="currentLimitingAlgorithm">
<el-input v-model="form.currentLimitingAlgorithm" placeholder="选择具体的限流算法，如令牌桶算法、楼桶算法、计数器算法等" />
</el-form-item>
<el-form-item label="策略状态" prop="status">
<el-form-item label="限流阈值" prop="currentLimitingThreshold">
<el-input v-model="form.currentLimitingThreshold" placeholder="设置限流的预制，即允许通过的请求次数或者并发连接数" />
</el-form-item>
<el-form-item label="限流周期" prop="currentLimitingPeriod">
<el-input v-model="form.currentLimitingPeriod" placeholder="设置限流的时间周期，如每秒限流、没分钟限流等" />
</el-form-item>
<!-- 缺 生效范围 -->
<el-form-item label="限流处理方式" prop="currentLimitingProcessingMethod">
<el-input v-model="form.currentLimitingProcessingMethod" placeholder="请输入限流处理方式" />
</el-form-item>
<!-- 缺 超限处理策略 -->
<!-- 缺 监控和警告 -->
<!-- 缺 限流日志 -->
</template>
<!-- 限流策略 -->
<!-- 数据加密策略 -->
<template v-if="form.strategyType == 'DATA_ENCRYPTION'">
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
v-for="dict in dict.type.gateway_data_status"
@ -188,24 +236,22 @@
>{{dict.label}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="私钥" prop="privateKey">
<el-input v-model="form.privateKey" placeholder="请输入私钥" />
<el-form-item label="加密算法" prop="encryptionAlgorithm">
<el-radio-group v-model="form.encryptionAlgorithm" @input="changeEncryptionAlgorithm">
<!-- ECC、RSA、SM2（国密） -->
<el-radio label="ECC">ECC</el-radio>
<el-radio label="RSA">RSA</el-radio>
<el-radio label="SM2">国密</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="公钥" prop="publicKey">
<el-input v-model="form.publicKey" placeholder="请输入公钥" />
<el-form-item label="私钥内容" prop="privateKey">
<el-input v-model="form.privateKey" type="textarea" placeholder="请输入私钥" />
</el-form-item>
<el-form-item label="限流算法" prop="currentLimitingAlgorithm">
<el-input v-model="form.currentLimitingAlgorithm" placeholder="请输入限流算法" />
</el-form-item>
<el-form-item label="限流阈值" prop="currentLimitingThreshold">
<el-input v-model="form.currentLimitingThreshold" placeholder="请输入限流阈值" />
</el-form-item>
<el-form-item label="限流周期" prop="currentLimitingPeriod">
<el-input v-model="form.currentLimitingPeriod" placeholder="请输入限流周期" />
</el-form-item>
<el-form-item label="限流处理方式" prop="currentLimitingProcessingMethod">
<el-input v-model="form.currentLimitingProcessingMethod" placeholder="请输入限流处理方式" />
<el-form-item v-if="publicKeyRequired" label="公钥内容" prop="publicKey">
<el-input v-model="form.publicKey" type="textarea" placeholder="请输入公钥" />
</el-form-item>
</template>
<!-- 数据加密策略 -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
@ -216,11 +262,11 @@
</template>
<script>
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy } from "@/api/gateway/strategy";
import { listStrategy, getStrategy, delStrategy, addStrategy, updateStrategy, changeStrategyStatus } from "@/api/gateway/strategy";
export default {
name: "Strategy",
dicts: ['gateway_data_status', 'gateway_strategy_type'],
dicts: ['gateway_data_status', 'gateway_strategy_type', 'http_request_method'],
data() {
return {
// 遮罩层
@ -254,20 +300,54 @@ export default {
createTime: null,
},
// 表单参数
form: {},
form: {
id: null,
strategyName: null,
strategyType: null,
description: null,
requestMethod: null,
encryptionAlgorithm: null,
status: null,
privateKey: null,
publicKey: null,
currentLimitingAlgorithm: null,
currentLimitingThreshold: null,
currentLimitingPeriod: null,
currentLimitingProcessingMethod: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
},
};
},
computed: {
publicKeyRequired() {
return this.form.encryptionAlgorithm === 'RSA';
},
// 表单校验
rules: {
rules() {
return {
strategyName: [
{ required: true, message: "策略名称不能为空", trigger: "blur" }
{ required: this.form.strategyType === 'DATA_ENCRYPTION', message: "策略名称不能为空", trigger: "blur" }
],
strategyType: [
{ required: true, message: "策略类型不能为空", trigger: "change" }
],
requestMethod: [
{ required: true, message: "请求方式不能为空", trigger: "blur" }
// requestMethod: [
// { required: true, message: "请求方式不能为空", trigger: "blur" }
// ],
encryptionAlgorithm: [
{ required: true, message: "加密算法不能为空", trigger: "blur" }
],
privateKey: [
{ required: true, message: "私钥内容不能为空", trigger: "blur" }
],
publicKey: [
{ required: this.publicKeyRequired, message: "公钥内容不能为空", trigger: "blur" }
],
}
};
}
},
created() {
this.getList();
@ -351,8 +431,23 @@ export default {
this.title = "修改策略管理";
});
},
strategyTypeChange() {
const { id, strategyName, strategyType } = this.form;
this.reset();
this.form.id = id;
this.form.strategyName = strategyName;
this.form.strategyType = strategyType;
},
changeEncryptionAlgorithm(val) {
// 非RSA，清空公钥
if (val === 'RSA') {
this.form.publicKey = null;
};
},
/** 提交按钮 */
submitForm() {
console.log(this.form)
// return;
this.$refs["form"].validate(valid => {
if (valid) {
if (this.form.id != null) {
@ -383,6 +478,21 @@ export default {
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 启用/禁用按钮操作 */
handleStatus(row) {
const ids = row?.id ? [row.id] : this.ids;
let status = '1'
if (row) {
status = row.status == '1' ? '0' : '1'
}
const params = {ids, status};
changeStrategyStatus(params).then(({code, msg}) => {
if (code === 200) {
this.$message.success(msg);
this.getList();
}
})
},
/** 导出按钮操作 */
handleExport() {
this.download('gateway/strategy/export', {