mirror of
https://gitee.com/durcframework/SOP.git
synced 2025-08-11 21:57:56 +08:00
4.0.3
This commit is contained in:
tanghc
@@ -63,3 +63,6 @@ div:focus {
|
||||
.app-container {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.cell .el-button {padding: 0;}
|
||||
span.tip {color: #909399;font-size: 12px;}
|
||||
|
||||
@@ -94,6 +94,18 @@ Object.assign(Vue.prototype, {
|
||||
}
|
||||
}).catch(function() {})
|
||||
},
|
||||
downloadText(filename, text) {
|
||||
const element = document.createElement('a')
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
|
||||
element.setAttribute('download', filename)
|
||||
|
||||
element.style.display = 'none'
|
||||
document.body.appendChild(element)
|
||||
|
||||
element.click()
|
||||
|
||||
document.body.removeChild(element);
|
||||
},
|
||||
/**
|
||||
* 重置表单
|
||||
* @param formName 表单元素的ref
|
||||
|
||||
@@ -15,14 +15,9 @@
|
||||
fit
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="appKey"
|
||||
label="appId"
|
||||
label="AppId"
|
||||
width="250"
|
||||
/>
|
||||
<el-table-column
|
||||
@@ -37,11 +32,11 @@
|
||||
<el-table-column
|
||||
prop="roleList"
|
||||
label="角色"
|
||||
width="100"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="roleRender(scope.row)"></div>
|
||||
<span v-html="roleRender(scope.row)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@@ -59,24 +54,20 @@
|
||||
label="添加时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gmtModified"
|
||||
label="修改时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
width="120"
|
||||
width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="150"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button>
|
||||
<el-button type="text" size="mini" @click="onKeysUpdate(scope.row)">秘钥管理</el-button>
|
||||
<el-button type="text" size="mini" @click="onExportKeys(scope.row)">导出秘钥</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -281,6 +272,20 @@ export default {
|
||||
onKeysUpdate: function(row) {
|
||||
this.$router.push({ path: `keys?appKey=${row.appKey}` })
|
||||
},
|
||||
onExportKeys: function(row) {
|
||||
this.post('isv.keys.get', { appKey: row.appKey }, function(resp) {
|
||||
const data = resp.data
|
||||
const appId = data.appKey
|
||||
const privateKeyIsv = data.privateKeyIsv
|
||||
const publicKeyPlatform = data.publicKeyPlatform
|
||||
let content = `AppId：${appId}\n\n开发者私钥：\n${privateKeyIsv}\n\n`
|
||||
if (publicKeyPlatform) {
|
||||
content = content + `平台公钥：\n${publicKeyPlatform}`
|
||||
}
|
||||
const filename = `${appId}.txt`
|
||||
this.downloadText(filename, content)
|
||||
})
|
||||
},
|
||||
onSizeChange: function(size) {
|
||||
this.searchFormData.pageSize = size
|
||||
this.loadTable()
|
||||
|
||||
@@ -1,229 +1,215 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-container>
|
||||
<el-aside style="min-height: 300px;width: 250px;">
|
||||
<el-input v-model="filterText" prefix-icon="el-icon-search" placeholder="搜索服务..." style="margin-bottom:20px;" size="mini" clearable />
|
||||
<el-tree
|
||||
ref="tree2"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
empty-text="无数据"
|
||||
node-key="id"
|
||||
class="filter-tree"
|
||||
default-expand-all
|
||||
@node-click="onNodeClick"
|
||||
<div v-if="tabsData.length === 0">
|
||||
无服务
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tabs v-model="tabsActive" type="card" @tab-click="selectTab">
|
||||
<el-tab-pane v-for="tabName in tabsData" :key="tabName" :label="tabName" :name="tabName" />
|
||||
</el-tabs>
|
||||
<el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini">
|
||||
<el-form-item label="路由ID">
|
||||
<el-input v-model="searchFormData.routeId" placeholder="接口名，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="AppId">
|
||||
<el-input v-model="searchFormData.appKey" placeholder="AppId，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="searchFormData.limitIp" placeholder="ip，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="onSearchTable">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" style="margin-bottom: 10px;" @click="onAdd">新增限流</el-button>
|
||||
<el-table
|
||||
:data="pageInfo.list"
|
||||
border
|
||||
>
|
||||
<el-table-column
|
||||
prop="limitKey"
|
||||
label="限流维度"
|
||||
width="400"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<div>
|
||||
<el-tooltip v-show="data.custom" content="自定义服务" class="item" effect="light" placement="left">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
<span v-if="data.label.length < serviceTextLimitSize">{{ data.label }}</span>
|
||||
<span v-else>
|
||||
<el-tooltip :content="data.label" class="item" effect="light" placement="right">
|
||||
<span>{{ data.label.substring(0, serviceTextLimitSize) + '...' }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<el-button
|
||||
v-if="data.custom === 1"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
title="删除服务"
|
||||
@click.stop="() => onDelService(data)"/>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
<el-main style="padding-top:0">
|
||||
<el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini">
|
||||
<el-form-item label="路由ID">
|
||||
<el-input v-model="searchFormData.routeId" placeholder="接口名，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="AppId">
|
||||
<el-input v-model="searchFormData.appKey" placeholder="AppId，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="IP">
|
||||
<el-input v-model="searchFormData.limitIp" placeholder="ip，支持模糊查询" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="onSearchTable">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" size="mini" icon="el-icon-plus" style="margin-bottom: 10px;" @click="onAdd">新增限流</el-button>
|
||||
<el-table
|
||||
:data="pageInfo.list"
|
||||
border
|
||||
<template slot-scope="scope">
|
||||
<div v-html="limitRender(scope.row)"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="limitType"
|
||||
label="限流策略"
|
||||
width="120"
|
||||
>
|
||||
<el-table-column
|
||||
prop="limitKey"
|
||||
label="限流维度"
|
||||
width="400"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<div v-html="limitRender(scope.row)"></div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="limitType"
|
||||
label="限流策略"
|
||||
width="120"
|
||||
>
|
||||
<template slot="header" slot-scope>
|
||||
限流策略 <i class="el-icon-question" style="cursor: pointer" @click="onLimitTypeTipClick"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.limitType === 1">窗口策略</span>
|
||||
<span v-if="scope.row.limitType === 2">令牌桶策略</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="info"
|
||||
label="限流信息"
|
||||
width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-html="infoRender(scope.row)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="limitStatus"
|
||||
label="状态"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.limitStatus === 1" style="color:#67C23A">已开启</span>
|
||||
<span v-if="scope.row.limitStatus === 0" style="color:#909399">已关闭</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orderIndex"
|
||||
label="排序"
|
||||
width="80"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gmtCreate"
|
||||
label="创建时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gmtModified"
|
||||
label="修改时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
style="margin-top: 5px"
|
||||
:current-page="searchFormData.pageIndex"
|
||||
:page-size="searchFormData.pageSize"
|
||||
:page-sizes="[5, 10, 20, 40]"
|
||||
:total="pageInfo.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onPageIndexChange"
|
||||
<template slot="header" slot-scope>
|
||||
限流策略
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="top"
|
||||
title="限流策略"
|
||||
width="500"
|
||||
trigger="hover">
|
||||
<div>
|
||||
<p>窗口策略：每秒处理固定数量的请求，超出请求数量返回错误信息。</p>
|
||||
<p>令牌桶策略：每秒放置固定数量的令牌数，每个请求进来后先去拿令牌，拿到了令牌才能继续，拿不到则等候令牌重新生成了再拿。</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
<i v-popover:popover class="el-icon-question" style="cursor: pointer"></i>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.limitType === 1">窗口策略</span>
|
||||
<span v-if="scope.row.limitType === 2">令牌桶策略</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="info"
|
||||
label="限流信息"
|
||||
width="250"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-html="infoRender(scope.row)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="limitStatus"
|
||||
label="状态"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.limitStatus === 1" style="color:#67C23A">已开启</span>
|
||||
<span v-if="scope.row.limitStatus === 0" style="color:#909399">已关闭</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orderIndex"
|
||||
label="排序"
|
||||
width="80"
|
||||
/>
|
||||
<!-- dialog -->
|
||||
<el-dialog
|
||||
:title="dlgTitle"
|
||||
:visible.sync="limitDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
@close="onLimitDialogClose"
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gmtCreate"
|
||||
label="创建时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="gmtModified"
|
||||
label="修改时间"
|
||||
width="160"
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
fixed="right"
|
||||
width="80"
|
||||
>
|
||||
<el-form
|
||||
ref="limitDialogForm"
|
||||
:model="limitDialogFormData"
|
||||
:rules="rulesLimit"
|
||||
label-width="150px"
|
||||
size="mini"
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
style="margin-top: 5px"
|
||||
:current-page="searchFormData.pageIndex"
|
||||
:page-size="searchFormData.pageSize"
|
||||
:page-sizes="[5, 10, 20, 40]"
|
||||
:total="pageInfo.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onPageIndexChange"
|
||||
/>
|
||||
</div>
|
||||
<!-- dialog -->
|
||||
<el-dialog
|
||||
:title="dlgTitle"
|
||||
:visible.sync="limitDialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
@close="onLimitDialogClose"
|
||||
>
|
||||
<el-form
|
||||
ref="limitDialogForm"
|
||||
:model="limitDialogFormData"
|
||||
:rules="rulesLimit"
|
||||
label-width="150px"
|
||||
size="mini"
|
||||
>
|
||||
<el-form-item label="限流维度" prop="typeKey">
|
||||
<el-checkbox-group v-model="limitDialogFormData.typeKey">
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[0]" :label="1" name="typeKey">路由ID</el-checkbox>
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[1]" :label="2" name="typeKey">AppId</el-checkbox>
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[2]" :label="3" name="typeKey">IP</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(1)" prop="routeId" label="路由ID" :rules="checkTypeKey(1) ? rulesLimit.routeId : []">
|
||||
<el-select v-model="limitDialogFormData.routeId" filterable placeholder="可筛选" style="width: 300px;">
|
||||
<el-option
|
||||
v-for="item in routeList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
<span style="float: left">{{ item.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.version }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(2)" prop="appKey" label="AppId" :rules="checkTypeKey(2) ? rulesLimit.appKey : []">
|
||||
<el-input v-model="limitDialogFormData.appKey" placeholder="需要限流的AppId" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(3)" label="限流IP" prop="limitIp" :rules="checkTypeKey(3) ? rulesLimit.ip : []">
|
||||
<el-input v-model="limitDialogFormData.limitIp" type="textarea" :rows="2" placeholder="多个用英文逗号隔开" />
|
||||
</el-form-item>
|
||||
<el-form-item label="限流策略">
|
||||
<el-radio-group v-model="limitDialogFormData.limitType">
|
||||
<el-radio :label="1">窗口策略</el-radio>
|
||||
<el-radio :label="2">令牌桶策略</el-radio>
|
||||
</el-radio-group>
|
||||
<el-popover
|
||||
ref="popover"
|
||||
placement="top"
|
||||
title="限流策略"
|
||||
width="500"
|
||||
trigger="hover">
|
||||
<div>
|
||||
<p>窗口策略：每秒处理固定数量的请求，超出请求数量返回错误信息。</p>
|
||||
<p>令牌桶策略：每秒放置固定数量的令牌数，每个请求进来后先去拿令牌，拿到了令牌才能继续，拿不到则等候令牌重新生成了再拿。</p>
|
||||
</div>
|
||||
</el-popover>
|
||||
<i v-popover:popover class="el-icon-question" style="cursor: pointer"></i>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启状态">
|
||||
<el-switch
|
||||
v-model="limitDialogFormData.limitStatus"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
>
|
||||
<el-form-item label="限流维度" prop="typeKey">
|
||||
<el-checkbox-group v-model="limitDialogFormData.typeKey">
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[0]" :label="1" name="typeKey">路由ID</el-checkbox>
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[1]" :label="2" name="typeKey">AppId</el-checkbox>
|
||||
<el-checkbox v-model="limitDialogFormData.typeKey[2]" :label="3" name="typeKey">IP</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(1)" prop="routeId" label="路由ID" :rules="checkTypeKey(1) ? rulesLimit.routeId : []">
|
||||
<el-select v-model="limitDialogFormData.routeId" filterable placeholder="可筛选" style="width: 300px;">
|
||||
<el-option
|
||||
v-for="item in routeList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
:value="item.id"
|
||||
>
|
||||
<span style="float: left">{{ item.name }}</span>
|
||||
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.version }}</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(2)" prop="appKey" label="AppId" :rules="checkTypeKey(2) ? rulesLimit.appKey : []">
|
||||
<el-input v-model="limitDialogFormData.appKey" placeholder="需要限流的AppId" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="checkTypeKey(3)" label="限流IP" prop="limitIp" :rules="checkTypeKey(3) ? rulesLimit.ip : []">
|
||||
<el-input v-model="limitDialogFormData.limitIp" type="textarea" :rows="2" placeholder="多个用英文逗号隔开" />
|
||||
</el-form-item>
|
||||
<el-form-item label="限流策略">
|
||||
<el-radio-group v-model="limitDialogFormData.limitType">
|
||||
<el-radio :label="1">窗口策略</el-radio>
|
||||
<el-radio :label="2">令牌桶策略</el-radio>
|
||||
</el-radio-group>
|
||||
<i class="el-icon-question limit-tip" @click="onLimitTypeTipClick"></i>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启状态">
|
||||
<el-switch
|
||||
v-model="limitDialogFormData.limitStatus"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
:active-value="1"
|
||||
:inactive-value="0"
|
||||
>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="orderIndex">
|
||||
<el-input-number v-model="limitDialogFormData.orderIndex" controls-position="right" :min="0" />
|
||||
<el-tooltip class="item" content="值小优先执行" placement="top">
|
||||
<i class="el-icon-question limit-tip"></i>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="isWindowType()" label="请求数" prop="execCountPerSecond" :rules="isWindowType() ? rulesLimit.execCountPerSecond : []">
|
||||
每 <el-input-number v-model="limitDialogFormData.durationSeconds" controls-position="right" :min="1" /> 秒可处理
|
||||
<el-input-number v-model="limitDialogFormData.execCountPerSecond" controls-position="right" :min="1" /> 个请求
|
||||
</el-form-item>
|
||||
<el-form-item v-show="isTokenType()" label="令牌桶容量" prop="tokenBucketCount" :rules="isTokenType() ? rulesLimit.tokenBucketCount : []">
|
||||
<el-input-number v-model="limitDialogFormData.tokenBucketCount" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="limitDialogFormData.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="limitDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onLimitDialogSave">保 存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序" prop="orderIndex">
|
||||
<el-input-number v-model="limitDialogFormData.orderIndex" controls-position="right" :min="0" />
|
||||
<span class="tip" style="margin-left: 10px">值小优先执行</span>
|
||||
</el-form-item>
|
||||
<el-form-item v-show="isWindowType()" label="请求数" prop="execCountPerSecond" :rules="isWindowType() ? rulesLimit.execCountPerSecond : []">
|
||||
每 <el-input-number v-model="limitDialogFormData.durationSeconds" controls-position="right" :min="1" /> 秒可处理
|
||||
<el-input-number v-model="limitDialogFormData.execCountPerSecond" controls-position="right" :min="1" /> 个请求
|
||||
</el-form-item>
|
||||
<el-form-item v-show="isTokenType()" label="令牌桶容量" prop="tokenBucketCount" :rules="isTokenType() ? rulesLimit.tokenBucketCount : []">
|
||||
<el-input-number v-model="limitDialogFormData.tokenBucketCount" controls-position="right" :min="1" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="remark">
|
||||
<el-input v-model="limitDialogFormData.remark" type="textarea" :rows="2" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="limitDialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="onLimitDialogSave">保 存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<style>
|
||||
@@ -242,6 +228,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsData: [],
|
||||
tabsActive: '',
|
||||
serviceTextLimitSize: 20,
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
@@ -320,9 +308,20 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTree()
|
||||
this.loadTabs()
|
||||
},
|
||||
methods: {
|
||||
loadTabs() {
|
||||
this.post('registry.service.list', {}, function(resp) {
|
||||
this.tabsData = resp.data
|
||||
this.$nextTick(() => {
|
||||
if (this.tabsData.length > 0) {
|
||||
this.tabsActive = this.tabsData[0]
|
||||
this.loadLimitData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 加载树
|
||||
loadTree: function() {
|
||||
this.post('registry.service.list', {}, function(resp) {
|
||||
@@ -344,6 +343,15 @@ export default {
|
||||
this.loadRouteList(this.serviceId)
|
||||
}
|
||||
},
|
||||
selectTab() {
|
||||
this.loadLimitData()
|
||||
},
|
||||
loadLimitData() {
|
||||
this.serviceId = this.tabsActive
|
||||
this.searchFormData.serviceId = this.serviceId
|
||||
this.loadTable()
|
||||
this.loadRouteList(this.serviceId)
|
||||
},
|
||||
/**
|
||||
* 数组转成树状结构
|
||||
* @param data 数据结构 [{
|
||||
@@ -506,9 +514,3 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.limit-tip {
|
||||
cursor: pointer;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -54,11 +54,9 @@
|
||||
>
|
||||
<template slot="header">
|
||||
最大耗时(ms)
|
||||
<i
|
||||
class="el-icon-question"
|
||||
style="cursor: pointer"
|
||||
@click="$alert('耗时计算：签名验证成功后开始，微服务返回结果后结束')"
|
||||
></i>
|
||||
<el-tooltip effect="dark" content="耗时计算：签名验证成功后开始，微服务返回结果后结束" placement="top">
|
||||
<i class="el-icon-question" style="cursor: pointer"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@@ -88,11 +86,9 @@
|
||||
>
|
||||
<template slot="header">
|
||||
失败次数
|
||||
<i
|
||||
class="el-icon-question"
|
||||
style="cursor: pointer"
|
||||
@click="$alert('只统计微服务返回的未知错误，JSR-303验证错误算作成功')"
|
||||
></i>
|
||||
<el-tooltip effect="dark" content="只统计微服务返回的未知错误，JSR-303验证错误算作成功" placement="top-end">
|
||||
<i class="el-icon-question" style="cursor: pointer"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-link
|
||||
|
||||
@@ -1,176 +1,121 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-container>
|
||||
<el-aside style="min-height: 300px;width: 250px;">
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
style="display: none;"
|
||||
@click.stop="addService"
|
||||
<div v-if="tabsData.length === 0">
|
||||
无服务
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-tabs v-model="tabsActive" type="card" @tab-click="selectTab">
|
||||
<el-tab-pane v-for="tabName in tabsData" :key="tabName" :label="tabName" :name="tabName" />
|
||||
</el-tabs>
|
||||
<el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini" @submit.native.prevent>
|
||||
<el-form-item label="路由名称">
|
||||
<el-input v-model="searchFormData.id" :clearable="true" placeholder="输入接口名或版本号" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="searchFormData.permission">授权接口</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="searchFormData.needToken">需要token</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" native-type="submit" @click="onSearchTable">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
v-show="isCustomService"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="addRoute"
|
||||
>
|
||||
新建路由
|
||||
</el-button>
|
||||
<el-table
|
||||
:data="pageInfo.rows"
|
||||
border
|
||||
highlight-current-row
|
||||
style="margin-top: 10px;"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="接口名 (版本号)"
|
||||
>
|
||||
新建服务
|
||||
</el-button>
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
prefix-icon="el-icon-search"
|
||||
placeholder="搜索服务..."
|
||||
style="margin-bottom:10px;margin-top:10px;"
|
||||
size="mini"
|
||||
clearable
|
||||
/>
|
||||
<el-tree
|
||||
ref="serviceTree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
:filter-node-method="filterNode"
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
empty-text="无数据"
|
||||
node-key="serviceId"
|
||||
class="filter-tree"
|
||||
default-expand-all
|
||||
@node-click="onNodeClick"
|
||||
<template slot-scope="scope">
|
||||
{{ getNameVersion(scope.row) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="roles"
|
||||
label="访问权限"
|
||||
width="150"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node">
|
||||
<div>
|
||||
<el-tooltip v-show="data.custom" content="自定义服务" class="item" effect="light" placement="left">
|
||||
<i class="el-icon-warning-outline"></i>
|
||||
</el-tooltip>
|
||||
<span v-if="data.label.length < serviceTextLimitSize">{{ data.label }}</span>
|
||||
<span v-else>
|
||||
<el-tooltip :content="data.label" class="item" effect="light" placement="right">
|
||||
<span>{{ data.label.substring(0, serviceTextLimitSize) + '...' }}</span>
|
||||
</el-tooltip>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<el-button
|
||||
v-if="data.custom === 1"
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
title="删除服务"
|
||||
@click.stop="() => onDelService(data)"
|
||||
/>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="!scope.row.permission">
|
||||
（公开）
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
<el-main style="padding-top:0">
|
||||
<el-form :inline="true" :model="searchFormData" class="demo-form-inline" size="mini">
|
||||
<el-form-item label="路由名称">
|
||||
<el-input v-model="searchFormData.id" :clearable="true" placeholder="输入接口名或版本号" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="searchFormData.permission">授权接口</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-checkbox v-model="searchFormData.needToken">需要token</el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSearchTable">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button
|
||||
v-show="isCustomService"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
@click.stop="addRoute"
|
||||
<span v-else class="roles-content" @click="onTableAuth(scope.row)" v-html="roleRender(scope.row)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ignoreValidate"
|
||||
label="签名校验"
|
||||
width="120"
|
||||
>
|
||||
新建路由
|
||||
</el-button>
|
||||
<el-table
|
||||
:data="pageInfo.rows"
|
||||
border
|
||||
highlight-current-row
|
||||
style="margin-top: 10px;"
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.ignoreValidate === 0">校验</span>
|
||||
<span v-if="scope.row.ignoreValidate === 1" style="color:#E6A23C">不校验</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mergeResult"
|
||||
label="统一格式输出"
|
||||
width="120"
|
||||
>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="接口名 (版本号)"
|
||||
width="350"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.name + (scope.row.version ? ' (' + scope.row.version + ')' : '') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="roles"
|
||||
label="访问权限"
|
||||
width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-html="roleRender(scope.row)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="ignoreValidate"
|
||||
label="签名校验"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.ignoreValidate === 0">校验</span>
|
||||
<span v-if="scope.row.ignoreValidate === 1" style="color:#E6A23C">不校验</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="mergeResult"
|
||||
label="统一格式输出"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.mergeResult === 1">是</span>
|
||||
<span v-if="scope.row.mergeResult === 0" style="color:#E6A23C">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="needToken"
|
||||
label="需要token"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.needToken === 1" style="font-weight: bold;color: #303133;">是</span>
|
||||
<span v-if="scope.row.needToken === 0">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.status === 0" style="color:#E6A23C">待审核</span>
|
||||
<span v-if="scope.row.status === 1" style="color:#67C23A">已启用</span>
|
||||
<span v-if="scope.row.status === 2" style="color:#F56C6C">已禁用</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="mini" @click="onTableUpdate(scope.row)">修改</el-button>
|
||||
<el-button v-if="scope.row.permission" type="text" size="mini" @click="onTableAuth(scope.row)">授权</el-button>
|
||||
<el-button v-if="scope.row.custom" type="text" size="mini" @click="onTableDel(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
style="margin-top: 5px"
|
||||
:current-page="searchFormData.pageIndex"
|
||||
:page-size="searchFormData.pageSize"
|
||||
:page-sizes="[10, 20, 40]"
|
||||
:total="pageInfo.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onPageIndexChange"
|
||||
/>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.mergeResult === 1">是</span>
|
||||
<span v-if="scope.row.mergeResult === 0" style="color:#E6A23C">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="needToken"
|
||||
label="需要token"
|
||||
width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.needToken === 1" style="font-weight: bold;color: #303133;">是</span>
|
||||
<span v-if="scope.row.needToken === 0">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
label="状态"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-switch
|
||||
v-model="scope.row.status"
|
||||
active-color="#13ce66"
|
||||
inactive-color="#ff4949"
|
||||
:active-value="1"
|
||||
:inactive-value="2"
|
||||
@change="onChangeStatus(scope.row)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
style="margin-top: 5px"
|
||||
:current-page="searchFormData.pageIndex"
|
||||
:page-size="searchFormData.pageSize"
|
||||
:page-sizes="[10, 20, 40]"
|
||||
:total="pageInfo.total"
|
||||
layout="total, sizes, prev, pager, next"
|
||||
@size-change="onSizeChange"
|
||||
@current-change="onPageIndexChange"
|
||||
/>
|
||||
</div>
|
||||
<!-- route dialog -->
|
||||
<el-dialog
|
||||
:title="routeDialogTitle"
|
||||
@@ -270,11 +215,14 @@
|
||||
}
|
||||
.el-input.is-disabled .el-input__inner {color: #909399;}
|
||||
.el-radio__input.is-disabled+span.el-radio__label {color: #909399;}
|
||||
.roles-content { cursor: pointer;color: #20a0ff }
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsData: [],
|
||||
tabsActive: '',
|
||||
serviceTextLimitSize: 20,
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
@@ -352,10 +300,21 @@ export default {
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadTree()
|
||||
this.loadTabs()
|
||||
this.loadRouteRole()
|
||||
},
|
||||
methods: {
|
||||
loadTabs() {
|
||||
this.post('registry.service.list', {}, function(resp) {
|
||||
this.tabsData = resp.data
|
||||
this.$nextTick(() => {
|
||||
if (this.tabsData.length > 0) {
|
||||
this.tabsActive = this.tabsData[0]
|
||||
this.loadRouteData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 加载树
|
||||
loadTree: function() {
|
||||
this.post('registry.service.list', {}, function(resp) {
|
||||
@@ -383,6 +342,14 @@ export default {
|
||||
this.loadTable()
|
||||
}
|
||||
},
|
||||
selectTab() {
|
||||
this.loadRouteData()
|
||||
},
|
||||
loadRouteData() {
|
||||
this.serviceId = this.tabsActive
|
||||
this.searchFormData.serviceId = this.serviceId
|
||||
this.loadTable()
|
||||
},
|
||||
/**
|
||||
* 数组转成树状结构
|
||||
* @param data 数据结构 [{
|
||||
@@ -421,6 +388,9 @@ export default {
|
||||
result.push(root)
|
||||
return result
|
||||
},
|
||||
getNameVersion(row) {
|
||||
return row.name + (row.version ? ' (' + row.version + ')' : '')
|
||||
},
|
||||
// table
|
||||
loadTable: function(param) {
|
||||
if (!this.searchFormData.serviceId) {
|
||||
@@ -469,6 +439,30 @@ export default {
|
||||
})
|
||||
})
|
||||
},
|
||||
// element-ui switch开关 点击按钮后，弹窗确认后再改变开关状态
|
||||
// https://blog.csdn.net/Gomeer/article/details/103697593
|
||||
onChangeStatus: function(row) {
|
||||
const newStatus = row.status
|
||||
const oldStatus = newStatus === 1 ? 2 : 1
|
||||
// 先将状态改成原来的值
|
||||
row.status = oldStatus
|
||||
const nameVersion = this.getNameVersion(row)
|
||||
const msg = oldStatus === 1 ? `确认要禁用 ${nameVersion} 吗？` : `确认要启用 ${nameVersion} 吗？`
|
||||
this.confirm(msg, function(done) {
|
||||
const data = {
|
||||
id: row.id,
|
||||
status: newStatus
|
||||
}
|
||||
// 'route.role.update', this.authDialogFormData
|
||||
this.post('route.status.update', data, function() {
|
||||
done()
|
||||
row.status = newStatus
|
||||
})
|
||||
}, (done) => {
|
||||
row.status = oldStatus
|
||||
done()
|
||||
})
|
||||
},
|
||||
onCloseRouteDialog: function() {
|
||||
this.resetForm('routeDialogFormRef')
|
||||
},
|
||||
@@ -495,20 +489,17 @@ export default {
|
||||
})
|
||||
},
|
||||
roleRender: function(row) {
|
||||
if (!row.permission) {
|
||||
return '（公开）'
|
||||
}
|
||||
const html = []
|
||||
const roles = row.roles
|
||||
for (let i = 0; i < roles.length; i++) {
|
||||
html.push(roles[i].description)
|
||||
}
|
||||
return html.length > 0 ? html.join(', ') : '<span class="x-red">未授权</span>'
|
||||
return html.length > 0 ? html.join(', ') : '点击授权'
|
||||
},
|
||||
onRouteDialogSave: function() {
|
||||
this.$refs.routeDialogFormRef.validate((valid) => {
|
||||
if (valid) {
|
||||
const uri = this.routeDialogFormData.id ? 'route.update' : 'route.add'
|
||||
const uri = this.routeDialogFormData.id ? 'route.status.update' : 'route.add'
|
||||
this.routeDialogFormData.serviceId = this.serviceId
|
||||
this.post(uri, this.routeDialogFormData, function() {
|
||||
this.routeDialogVisible = false
|
||||
|
||||
@@ -106,7 +106,7 @@
|
||||
<el-tabs v-model="tabsActiveName" type="card">
|
||||
<el-tab-pane label="灰度用户" name="first">
|
||||
<el-alert
|
||||
title="可以是appId或IP地址，多个用英文逗号隔开"
|
||||
title="可以是AppId或IP地址，多个用英文逗号隔开"
|
||||
type="info"
|
||||
:closable="false"
|
||||
style="margin-bottom: 20px;"
|
||||
@@ -114,13 +114,18 @@
|
||||
<el-form-item prop="userKeyContent">
|
||||
<el-input
|
||||
v-model="grayForm.userKeyContent"
|
||||
placeholder="可以是appId或IP地址，多个用英文逗号隔开"
|
||||
placeholder="可以是AppId或IP地址，多个用英文逗号隔开"
|
||||
type="textarea"
|
||||
:rows="6"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="接口配置" name="second">
|
||||
<el-alert
|
||||
title="灰度接口：接口名相同，版本号不同"
|
||||
type="info"
|
||||
:closable="false"
|
||||
/>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="addNameVersion">新增灰度接口</el-button>
|
||||
</el-form-item>
|
||||
@@ -138,7 +143,8 @@
|
||||
老接口：
|
||||
<el-select
|
||||
v-model="grayRouteConfig.oldRouteId"
|
||||
style="margin-right: 10px;"
|
||||
filterable
|
||||
style="margin-right: 10px;width: 250px"
|
||||
@change="onChangeOldRoute(grayRouteConfig)"
|
||||
>
|
||||
<el-option
|
||||
@@ -159,7 +165,9 @@
|
||||
灰度接口：
|
||||
<el-select
|
||||
v-model="grayRouteConfig.newVersion"
|
||||
filterable
|
||||
no-data-text="无数据"
|
||||
style="width: 250px"
|
||||
>
|
||||
<el-option
|
||||
v-for="routeNew in getGraySelectData(grayRouteConfig.oldRouteId)"
|
||||
|
||||
Reference in New Issue
Block a user