zhangdaiscott
5 years ago
parent
35ef0eff90
commit
a004acee4b
@ -0,0 +1,3 @@
|
|||||||
|
NODE_ENV=production
|
||||||
|
VUE_APP_PLATFORM_NAME=Jeecg-Boot 企业级快速开发平台
|
||||||
|
VUE_APP_SSO=false
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
NODE_ENV=development
|
||||||
|
VUE_APP_API_BASE_URL=http://localhost:8080/jeecg-boot
|
||||||
|
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
|
||||||
|
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
NODE_ENV=production
|
||||||
|
VUE_APP_API_BASE_URL=http://boot.jeecg.com:8080/jeecg-boot
|
||||||
|
VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
|
||||||
|
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
NODE_ENV=production
|
||||||
|
VUE_APP_API_BASE_URL=https://bootapi.jeecg.com
|
||||||
|
VUE_APP_CAS_BASE_URL=http://localhost:8888/cas
|
||||||
|
VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
|
||||||
@ -1,7 +1,11 @@
|
|||||||
import T from './JDictSelectTag.vue'
|
import JDictSelectTag from './JDictSelectTag.vue'
|
||||||
const JDictSelectTag = {
|
import JMultiSelectTag from './JMultiSelectTag.vue'
|
||||||
|
import JSearchSelectTag from './JSearchSelectTag.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
install: function (Vue) {
|
install: function (Vue) {
|
||||||
Vue.component('JDictSelectTag',T);
|
Vue.component('JDictSelectTag',JDictSelectTag);
|
||||||
|
Vue.component('JMultiSelectTag',JMultiSelectTag);
|
||||||
|
Vue.component('JSearchSelectTag',JSearchSelectTag);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
export default JDictSelectTag;
|
|
||||||
@ -1,11 +1,41 @@
|
|||||||
import JModal from './JModal'
|
import JModal from './JModal'
|
||||||
import JFormContainer from './JFormContainer.vue'
|
import JFormContainer from './JFormContainer.vue'
|
||||||
import JPopup from './JPopup.vue'
|
import JPopup from './JPopup.vue'
|
||||||
|
import JMarkdownEditor from './JMarkdownEditor'
|
||||||
|
import JCodeEditor from './JCodeEditor.vue'
|
||||||
|
import JEditor from './JEditor.vue'
|
||||||
|
import JEditableTable from './JEditableTable.vue'
|
||||||
|
import JAreaLinkage from './JAreaLinkage.vue'
|
||||||
|
import JSuperQuery from './JSuperQuery.vue'
|
||||||
|
import JUpload from './JUpload.vue'
|
||||||
|
import JTreeSelect from './JTreeSelect.vue'
|
||||||
|
import JCategorySelect from './JCategorySelect.vue'
|
||||||
|
import JImageUpload from './JImageUpload.vue'
|
||||||
|
import JTreeDict from './JTreeDict.vue'
|
||||||
|
import JCheckbox from './JCheckbox.vue'
|
||||||
|
import JCron from './JCron.vue'
|
||||||
|
import JSelectMultiple from './JSelectMultiple.vue'
|
||||||
|
import JPopupOnlReport from './modal/JPopupOnlReport.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
install(Vue) {
|
install(Vue) {
|
||||||
Vue.component('JFormContainer', JFormContainer)
|
Vue.component('JFormContainer', JFormContainer)
|
||||||
Vue.component('JPopup', JPopup)
|
Vue.component('JPopup', JPopup)
|
||||||
Vue.component(JModal.name, JModal)
|
Vue.component(JModal.name, JModal)
|
||||||
|
Vue.component('JMarkdownEditor', JMarkdownEditor)
|
||||||
|
Vue.component('JEditor', JEditor)
|
||||||
|
Vue.component('JCodeEditor', JCodeEditor)
|
||||||
|
Vue.component('JEditableTable', JEditableTable)
|
||||||
|
Vue.component('JAreaLinkage', JAreaLinkage)
|
||||||
|
Vue.component('JSuperQuery', JSuperQuery)
|
||||||
|
Vue.component('JUpload', JUpload)
|
||||||
|
Vue.component('JTreeSelect', JTreeSelect)
|
||||||
|
Vue.component('JCategorySelect', JCategorySelect)
|
||||||
|
Vue.component('JImageUpload', JImageUpload)
|
||||||
|
Vue.component('JTreeDict', JTreeDict)
|
||||||
|
Vue.component('JCheckbox', JCheckbox)
|
||||||
|
Vue.component('JCron', JCron)
|
||||||
|
Vue.component('JPopupOnlReport', JPopupOnlReport)
|
||||||
|
Vue.component('JSelectMultiple', JSelectMultiple)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
/** init domain config */
|
||||||
|
import Vue from 'vue'
|
||||||
|
//设置全局API_BASE_URL
|
||||||
|
Vue.prototype.API_BASE_URL = process.env.VUE_APP_API_BASE_URL
|
||||||
|
window._CONFIG['domianURL'] = Vue.prototype.API_BASE_URL
|
||||||
|
//单点登录地址
|
||||||
|
window._CONFIG['casPrefixUrl'] = process.env.VUE_APP_CAS_BASE_URL
|
||||||
|
window._CONFIG['onlinePreviewDomainURL'] = process.env.VUE_APP_ONLINE_BASE_URL
|
||||||
|
window._CONFIG['staticDomainURL'] = Vue.prototype.API_BASE_URL + '/sys/common/static'
|
||||||
|
window._CONFIG['pdfDomainURL'] = Vue.prototype.API_BASE_URL+ '/sys/common/pdf/pdfPreviewIframe'
|
||||||
@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
404 page
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "404"
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
@ -1,101 +1,111 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-card :bordered="false" style="height: 100%">
|
<a-card :bordered="false">
|
||||||
<div style="padding-bottom: 2px">
|
<!-- 操作按钮区域 -->
|
||||||
<a-alert type="warning" show-icon>
|
<div class="table-operator">
|
||||||
<div slot="message" style="width: 100%">
|
<a-button @click="showModal(null)" type="primary" icon="plus">新增</a-button>
|
||||||
<span>路由配置请慎重</span>
|
|
||||||
<span style="display:inline-block;float:right;padding-right: 5px">
|
|
||||||
<a @click="clearRedis"><a-icon type="reload" />清除缓存</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</a-alert>
|
|
||||||
</div>
|
</div>
|
||||||
<div :id="eleId" :style="{ height: editorHeight + 'px', width: '100%' }"></div>
|
<div>
|
||||||
<div style="text-align: center;padding-top:10px">
|
<a-table
|
||||||
<a-button type="primary" @click="submitForm" style="width:160px">保存</a-button>
|
ref="table"
|
||||||
|
size="middle"
|
||||||
|
:scroll="{x:true}"
|
||||||
|
bordered
|
||||||
|
rowKey="id"
|
||||||
|
:columns="columns"
|
||||||
|
:dataSource="dataSource"
|
||||||
|
:pagination="false"
|
||||||
|
:loading="loading"
|
||||||
|
class="j-table-force-nowrap"
|
||||||
|
@change="handleTableChange">
|
||||||
|
<span slot="status" slot-scope="text, record, index">
|
||||||
|
<a-tag color="pink" v-if="text==0">禁用</a-tag>
|
||||||
|
<a-tag color="#87d068" v-if="text==1" >正常</a-tag>
|
||||||
|
</span>
|
||||||
|
<span slot="action" slot-scope="text, record">
|
||||||
|
<a @click="showModal(record)">编辑</a>
|
||||||
|
|
||||||
|
<a-divider type="vertical"/>
|
||||||
|
<a-dropdown>
|
||||||
|
<a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
|
||||||
|
<a-menu slot="overlay">
|
||||||
|
<a-menu-item>
|
||||||
|
<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
|
||||||
|
<a>删除</a>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-menu-item>
|
||||||
|
</a-menu>
|
||||||
|
</a-dropdown>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</a-table>
|
||||||
</div>
|
</div>
|
||||||
|
<gate-way-route-modal ref="modalForm" @ok="modalFormOk"></gate-way-route-modal>
|
||||||
</a-card>
|
</a-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import JsonEditor from 'jsoneditor'
|
|
||||||
import 'jsoneditor/dist/jsoneditor.min.css'
|
import '@/assets/less/TableExpand.less'
|
||||||
import { getAction, postAction } from '@/api/manage'
|
import { mixinDevice } from '@/utils/mixin'
|
||||||
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
||||||
|
import GateWayRouteModal from './modules/GateWayRouteModal'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "SysGatewayRouteList",
|
name: 'TenantList',
|
||||||
data () {
|
mixins: [JeecgListMixin, mixinDevice],
|
||||||
|
components: {
|
||||||
|
GateWayRouteModal
|
||||||
|
},
|
||||||
|
data() {
|
||||||
return {
|
return {
|
||||||
eleId:'jsoneditor',
|
description: 'adad管理页面',
|
||||||
description: 'gateway路由管理管理页面',
|
// 表头
|
||||||
editor: null,
|
columns: [
|
||||||
editorWidth:400,
|
{
|
||||||
editorHeight:500,
|
title: '路由ID',
|
||||||
url:{
|
align: 'center',
|
||||||
|
dataIndex: 'routerId'
|
||||||
|
}, {
|
||||||
|
title: '路由名称',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '路由URI',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'uri'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
align: 'center',
|
||||||
|
dataIndex: 'status',
|
||||||
|
scopedSlots: { customRender: 'status' }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
dataIndex: 'action',
|
||||||
|
align: 'center',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 147,
|
||||||
|
scopedSlots: { customRender: 'action' }
|
||||||
|
}
|
||||||
|
],
|
||||||
|
url: {
|
||||||
list: '/sys/gatewayRoute/list',
|
list: '/sys/gatewayRoute/list',
|
||||||
update: '/sys/gatewayRoute/updateAll',
|
delete: '/sys/gatewayRoute/delete'
|
||||||
clear: '/sys/gatewayRoute/clearRedis'
|
|
||||||
},
|
},
|
||||||
|
dictOptions: {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
let winWidth = window.innerWidth;
|
|
||||||
console.log("页面宽度",winWidth)
|
|
||||||
this.editorWidth = winWidth
|
|
||||||
|
|
||||||
},
|
|
||||||
mounted(){
|
|
||||||
this.initJsonEditor();
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initJsonEditor() {
|
showModal(record) {
|
||||||
let container = document.getElementById(this.eleId);
|
this.$refs['modalForm'].show(record)
|
||||||
let options = {
|
|
||||||
modes: ['text', 'code', 'tree', 'form', 'view'],
|
|
||||||
mode: 'tree',
|
|
||||||
ace: ace,
|
|
||||||
sortObjectKeys: 'code',
|
|
||||||
mainMenuBar:['format']
|
|
||||||
};
|
|
||||||
this.editor = new JsonEditor(container, options);
|
|
||||||
this.initRouteData();
|
|
||||||
},
|
|
||||||
initRouteData(){
|
|
||||||
getAction(this.url.list).then(res=>{
|
|
||||||
if(res.success){
|
|
||||||
let array = res.result
|
|
||||||
console.log('当前路由配置信息为', array)
|
|
||||||
this.editor.set(array)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
// 获取json
|
|
||||||
submitForm() {
|
|
||||||
let text = this.editor.getText()
|
|
||||||
console.log("保存的json数据",text)
|
|
||||||
if(!text || text.length<=0 || text=='{}' || text=='[]'){
|
|
||||||
this.$message.warning('未录入任何信息')
|
|
||||||
return ;
|
|
||||||
}
|
|
||||||
postAction(this.url.update,{
|
|
||||||
routes:text
|
|
||||||
}).then(res=>{
|
|
||||||
if(res.success){
|
|
||||||
this.$message.success(res.message)
|
|
||||||
}else{
|
|
||||||
this.$message.error(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
clearRedis(){
|
|
||||||
getAction(this.url.clear).then(res=>{
|
|
||||||
if(res.success){
|
|
||||||
this.$message.success(res.message)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
@import '~@assets/less/common.less';
|
||||||
|
</style>
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
<!--<template>-->
|
||||||
|
<!-- <a-card :bordered="false" style="height: 100%">-->
|
||||||
|
<!-- <div style="padding-bottom: 2px">-->
|
||||||
|
<!-- <a-alert type="warning" show-icon>-->
|
||||||
|
<!-- <div slot="message" style="width: 100%">-->
|
||||||
|
<!-- <span>路由配置请慎重</span>-->
|
||||||
|
<!-- <span style="display:inline-block;float:right;padding-right: 5px">-->
|
||||||
|
<!-- <a @click="clearRedis"><a-icon type="reload" />清除缓存</a>-->
|
||||||
|
<!-- </span>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </a-alert>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div :id="eleId" :style="{ height: editorHeight + 'px', width: '100%' }"></div>-->
|
||||||
|
<!-- <div style="text-align: center;padding-top:10px">-->
|
||||||
|
<!-- <a-button type="primary" @click="submitForm" style="width:160px">保存</a-button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </a-card>-->
|
||||||
|
<!--</template>-->
|
||||||
|
|
||||||
|
<!--<script>-->
|
||||||
|
<!-- import JsonEditor from 'jsoneditor'-->
|
||||||
|
<!-- import 'jsoneditor/dist/jsoneditor.min.css'-->
|
||||||
|
<!-- import { getAction, postAction } from '@/api/manage'-->
|
||||||
|
|
||||||
|
<!-- export default {-->
|
||||||
|
<!-- name: "SysGatewayRouteList",-->
|
||||||
|
<!-- data () {-->
|
||||||
|
<!-- return {-->
|
||||||
|
<!-- eleId:'jsoneditor',-->
|
||||||
|
<!-- description: 'gateway路由管理管理页面',-->
|
||||||
|
<!-- editor: null,-->
|
||||||
|
<!-- editorWidth:400,-->
|
||||||
|
<!-- editorHeight:500,-->
|
||||||
|
<!-- url:{-->
|
||||||
|
<!-- list: '/sys/gatewayRoute/list',-->
|
||||||
|
<!-- update: '/sys/gatewayRoute/updateAll',-->
|
||||||
|
<!-- clear: '/sys/gatewayRoute/clearRedis'-->
|
||||||
|
<!-- },-->
|
||||||
|
|
||||||
|
<!-- }-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- created() {-->
|
||||||
|
<!-- let winWidth = window.innerWidth;-->
|
||||||
|
<!-- console.log("页面宽度",winWidth)-->
|
||||||
|
<!-- this.editorWidth = winWidth-->
|
||||||
|
|
||||||
|
<!-- },-->
|
||||||
|
<!-- mounted(){-->
|
||||||
|
<!-- this.initJsonEditor();-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- methods: {-->
|
||||||
|
<!-- initJsonEditor() {-->
|
||||||
|
<!-- let container = document.getElementById(this.eleId);-->
|
||||||
|
<!-- let options = {-->
|
||||||
|
<!-- modes: ['text', 'code', 'tree', 'form', 'view'],-->
|
||||||
|
<!-- mode: 'tree',-->
|
||||||
|
<!-- ace: ace,-->
|
||||||
|
<!-- sortObjectKeys: 'code',-->
|
||||||
|
<!-- mainMenuBar:['format']-->
|
||||||
|
<!-- };-->
|
||||||
|
<!-- this.editor = new JsonEditor(container, options);-->
|
||||||
|
<!-- this.initRouteData();-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- initRouteData(){-->
|
||||||
|
<!-- getAction(this.url.list).then(res=>{-->
|
||||||
|
<!-- if(res.success){-->
|
||||||
|
<!-- let array = res.result-->
|
||||||
|
<!-- console.log('当前路由配置信息为', array)-->
|
||||||
|
<!-- this.editor.set(array)-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- })-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- // 获取json-->
|
||||||
|
<!-- submitForm() {-->
|
||||||
|
<!-- let text = this.editor.getText()-->
|
||||||
|
<!-- console.log("保存的json数据",text)-->
|
||||||
|
<!-- if(!text || text.length<=0 || text=='{}' || text=='[]'){-->
|
||||||
|
<!-- this.$message.warning('未录入任何信息')-->
|
||||||
|
<!-- return ;-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- postAction(this.url.update,{-->
|
||||||
|
<!-- routes:text-->
|
||||||
|
<!-- }).then(res=>{-->
|
||||||
|
<!-- if(res.success){-->
|
||||||
|
<!-- this.$message.success(res.message)-->
|
||||||
|
<!-- }else{-->
|
||||||
|
<!-- this.$message.error(res.message)-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- })-->
|
||||||
|
<!-- },-->
|
||||||
|
<!-- clearRedis(){-->
|
||||||
|
<!-- getAction(this.url.clear).then(res=>{-->
|
||||||
|
<!-- if(res.success){-->
|
||||||
|
<!-- this.$message.success(res.message)-->
|
||||||
|
<!-- }-->
|
||||||
|
<!-- })-->
|
||||||
|
<!-- }-->
|
||||||
|
|
||||||
|
<!-- }-->
|
||||||
|
<!-- }-->
|
||||||
|
<!--</script>-->
|
||||||
@ -0,0 +1,306 @@
|
|||||||
|
<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" @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" @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-bootom-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 '@/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/gatewayRoute/updateAll',
|
||||||
|
clear: '/sys/gatewayRoute/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
|
||||||
|
this.$nextTick(function() {
|
||||||
|
this.$refs.input.focus()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//路由选项输入框失去焦点事件
|
||||||
|
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>
|
||||||
|
.drawer-bootom-button {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
padding: 10px 16px;
|
||||||
|
text-align: right;
|
||||||
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 0 2px 2px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue