fix: 删除galaxy proxy和chart内容
This commit is contained in:
chenjinsong
@@ -80,8 +80,7 @@
|
||||
"jest": "^26.0.0",
|
||||
"ts-jest": "^26.4.4",
|
||||
"uglifyjs-webpack-plugin": "^2.2.0",
|
||||
"vue-jest": "^5.0.0-alpha.10",
|
||||
"vue3-ace-editor": "^2.0.2"
|
||||
"vue-jest": "^5.0.0-alpha.10"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@@ -1,408 +0,0 @@
|
||||
<template>
|
||||
<div class="right-box right-box-user">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{editObject.id ? $t('config.chart.edit') : $t('config.chart.add')}}</div>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="chartForm" :model="editObject" :rules="editObject.id ? rules2 : rules" label-position="top" label-width="120px">
|
||||
<!--name-->
|
||||
<el-form-item :label="$t('overall.name')" prop="name">
|
||||
<el-input id="chart-input-name" v-model="editObject.name" :disabled="editObject.name==='admin' && editObject.id === 1"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--i18n-->
|
||||
<el-form-item :label="$t('config.chart.i18n')" prop="i18n">
|
||||
<el-input id="chart-input-i18n" v-model="editObject.i18n"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--type-->
|
||||
<el-form-item :label="$t('config.chart.type')" prop="type">
|
||||
<el-select id="chart-type"
|
||||
v-model="editObject.type"
|
||||
class="right-box__select"
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
popper-class="right-box-select-dropdown prevent-clickoutside"
|
||||
size="small"
|
||||
@change="()=>{ this.$forceUpdate() }">
|
||||
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<span style="float: left">{{ item.label }}</span><span style="float: right;color: #909399;font-size: 13px;">{{ item.remark }}</span>
|
||||
</el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--panel-->
|
||||
<el-form-item :label="$t('config.chart.panel')" prop="panelId">
|
||||
<el-select id="chart-input-panelId"
|
||||
v-model="editObject.panelId"
|
||||
class="right-box__select"
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
:disabled="editObject.id?true:false"
|
||||
popper-class="right-box-select-dropdown prevent-clickoutside"
|
||||
size="small"
|
||||
@change="getChartData">
|
||||
|
||||
<el-option :key="panelTypeAndRouteMapping.trafficSummary" :label="$t('trafficSummary.trafficSummary')" :value="panelTypeAndRouteMapping.trafficSummary"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.networkAppPerformance" :label="$t('networkAppPerformance.networkAppPerformance')" :value="panelTypeAndRouteMapping.networkAppPerformance"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.cryptocurrency" :label="$t('overall.cryptocurrency')" :value="panelTypeAndRouteMapping.cryptocurrency"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.dnsServiceInsights" :label="$t('dnsServiceInsights.dnsServiceInsights')" :value="panelTypeAndRouteMapping.dnsServiceInsights"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.ipEntityDetail" :label="$t('entities.ipEntityDetail')" :value="panelTypeAndRouteMapping.ipEntityDetail"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.domainEntityDetail" :label="$t('entities.domainEntityDetail')" :value="panelTypeAndRouteMapping.domainEntityDetail"></el-option>
|
||||
<el-option :key="panelTypeAndRouteMapping.appEntityDetail" :label="$t('entities.appEntityDetail')" :value="panelTypeAndRouteMapping.appEntityDetail"></el-option>
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--pid-->
|
||||
<el-form-item :label="$t('config.chart.pid')" prop="pid">
|
||||
<el-select id="chart-pid"
|
||||
v-model="editObject.pid"
|
||||
class="right-box__select"
|
||||
clearable
|
||||
collapse-tags
|
||||
placeholder=""
|
||||
:disabled="editObject.id?true:false"
|
||||
popper-class="right-box-select-dropdown prevent-clickoutside"
|
||||
size="small"
|
||||
@change="()=>{ this.$forceUpdate() }">
|
||||
|
||||
<template v-for="chart in chartData" :key="chart.id">
|
||||
<el-option :label="chart.name" :value="chart.id"></el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--x-->
|
||||
<el-form-item :label="$t('config.chart.x')" prop="x">
|
||||
<el-input id="chart-input-x" v-model="editObject.x"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--y-->
|
||||
<el-form-item :label="$t('config.chart.y')" prop="y">
|
||||
<el-input id="chart-input-y" v-model="editObject.y"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--w-->
|
||||
<el-form-item :label="$t('config.chart.w')" prop="w">
|
||||
<el-input id="chart-input-x" v-model="editObject.w"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--h-->
|
||||
<el-form-item :label="$t('config.chart.h')" prop="h">
|
||||
<el-input id="chart-input-y" v-model="editObject.h"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!--params-->
|
||||
<el-form-item :label="$t('config.chart.params')" prop="params">
|
||||
<v-ace-editor
|
||||
v-model:value="editObject.params"
|
||||
lang="json"
|
||||
theme="chrome"
|
||||
style="height: 300px" />
|
||||
</el-form-item>
|
||||
<!--remark-->
|
||||
<el-form-item :label="$t('config.chart.remark')">
|
||||
<el-input maxlength="1024" show-word-limit :rows="2" size='mini' type="textarea" v-model="editObject.remark" id="chart-box-remark"/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__footer">
|
||||
<button id="chart-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button id="chart-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rightBoxMixin from '@/mixins/right-box'
|
||||
import axios from 'axios'
|
||||
import { panelTypeAndRouteMapping, storageKey } from '@/utils/constants'
|
||||
import { api } from '@/utils/api'
|
||||
import { VAceEditor } from 'vue3-ace-editor'
|
||||
import 'ace-builds/src-noconflict/mode-javascript'
|
||||
import 'ace-builds/src-noconflict/mode-json'
|
||||
import 'ace-builds/src-noconflict/theme-chrome'
|
||||
|
||||
export default {
|
||||
name: 'ChartBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
loginName: localStorage.getItem(storageKey.username),
|
||||
panelTypeAndRouteMapping: panelTypeAndRouteMapping,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
rules2: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
type: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
panel_id: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
x: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
y: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
w: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
],
|
||||
h: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
chartData: [],
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: 'map-1',
|
||||
remark: '流量流向地图-连线'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: 'map-2',
|
||||
remark: '地图-色块'
|
||||
}, {
|
||||
value: 3,
|
||||
label: 'map-3',
|
||||
remark: '地图-点'
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: 'map-4',
|
||||
remark: '地图-点'
|
||||
}, {
|
||||
value: 11,
|
||||
label: 'line-1',
|
||||
remark: '折线图-常规'
|
||||
},
|
||||
{
|
||||
value: 61,
|
||||
label: 'table-1',
|
||||
remark: '表格'
|
||||
}, {
|
||||
value: 62,
|
||||
label: 'table-2',
|
||||
remark: 'DNS记录'
|
||||
}, {
|
||||
value: 63,
|
||||
label: 'table-3',
|
||||
remark: '挖矿活跃ip'
|
||||
}, {
|
||||
value: 31,
|
||||
label: 'pie-1',
|
||||
remark: '饼图-带联动表格'
|
||||
}, {
|
||||
value: 51,
|
||||
label: 'singleValue-1',
|
||||
remark: '单值图'
|
||||
},
|
||||
{
|
||||
value: 91,
|
||||
label: 'tab-container',
|
||||
remark: 'tab标签(容器)'
|
||||
}, {
|
||||
value: 92,
|
||||
label: 'tab-item',
|
||||
remark: 'tab标签(标签页)'
|
||||
},
|
||||
{
|
||||
value: 93,
|
||||
label: 'title',
|
||||
remark: '标题'
|
||||
}, {
|
||||
value: 94,
|
||||
label: 'group',
|
||||
remark: '组'
|
||||
},
|
||||
{
|
||||
value: 12,
|
||||
label: 'line-2',
|
||||
remark: '折线图-带统计'
|
||||
}, {
|
||||
value: 52,
|
||||
label: 'singleValue-2',
|
||||
remark: '详情单值图'
|
||||
},
|
||||
{
|
||||
value: 53,
|
||||
label: 'singleValue-3',
|
||||
remark: '单值图'
|
||||
}, {
|
||||
value: 13,
|
||||
label: 'line-3',
|
||||
remark: '折线图-堆叠面积'
|
||||
},
|
||||
{
|
||||
value: 21,
|
||||
label: 'bar-1',
|
||||
remark: '柱状图'
|
||||
}, {
|
||||
value: 22,
|
||||
label: 'bar-2',
|
||||
remark: '开放端口'
|
||||
}, {
|
||||
value: 23,
|
||||
label: 'bar-3',
|
||||
remark: '挖矿事件统计(time类型柱状图)'
|
||||
}, {
|
||||
value: 24,
|
||||
label: 'bar-4',
|
||||
remark: '矿机所属单位(category类型柱状图)'
|
||||
},
|
||||
{
|
||||
value: 32,
|
||||
label: 'pie-2',
|
||||
remark: '饼图-常规'
|
||||
}, {
|
||||
value: 33,
|
||||
label: 'pie-3',
|
||||
remark: '托管域名'
|
||||
},
|
||||
{
|
||||
value: 34,
|
||||
label: 'pie-4',
|
||||
remark: '相关域名'
|
||||
}, {
|
||||
value: 42,
|
||||
label: 'relation-2',
|
||||
remark: '关系图谱'
|
||||
},
|
||||
{
|
||||
value: 43,
|
||||
label: 'relation-3',
|
||||
remark: '访问链路图'
|
||||
},
|
||||
{
|
||||
value: 82,
|
||||
label: 'base-2',
|
||||
remark: 'APP基本信息'
|
||||
}, {
|
||||
value: 83,
|
||||
label: 'list-1',
|
||||
remark: 'Whois'
|
||||
},
|
||||
{
|
||||
value: 84,
|
||||
label: 'list-2',
|
||||
remark: 'DNS记录'
|
||||
},
|
||||
{
|
||||
value: 85,
|
||||
label: 'list-3',
|
||||
remark: '近期挖矿事件'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
mounted () {
|
||||
if (this.editObject.id) {
|
||||
this.getChartData(this.editObject.panelId)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'editObject.panelId': function (newValue, oldValue) {
|
||||
this.editObject.pid = ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isCurrentUser (username) {
|
||||
return localStorage.getItem(storageKey.username) === username
|
||||
},
|
||||
/* 密码失去焦点 检验确认密码 */
|
||||
pinBlur () {
|
||||
if (this.editObject.pin && this.editObject.pinChange) {
|
||||
this.$refs.chartForm.validateField('pinChange')
|
||||
}
|
||||
},
|
||||
save () {
|
||||
if (this.blockOperation.save) { return }
|
||||
this.blockOperation.save = true
|
||||
|
||||
this.$refs.chartForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.editObject.id) {
|
||||
axios.put(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.status === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.data.message)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
axios.post(this.url, this.editObject).then(res => {
|
||||
this.blockOperation.save = false
|
||||
if (res.status === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
|
||||
this.esc(true)
|
||||
} else {
|
||||
this.$message.error(res.data.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.blockOperation.save = false
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
async getChartData (value) {
|
||||
await axios.get(api.chart, { params: { panelId: value } }).then(response => {
|
||||
if (response.status === 200) {
|
||||
this.chartData = response.data.data.list
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="right-box">
|
||||
<div class="right-box__header">
|
||||
<div class="header__title">{{editObject.id ? $t('overall.edit') : $t('overall.new')}}</div>
|
||||
<div class="header__operation">
|
||||
<span v-cancel="{object: editObject, func: esc}"><i class="cn-icon cn-icon-close"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__container">
|
||||
<div class="container__form">
|
||||
<el-form ref="form" :model="editObject" :rules="rules" label-position="top" label-width="120px">
|
||||
<!--name-->
|
||||
<el-form-item :label="$t('overall.name')" prop="name">
|
||||
<el-input id="proxy-name" v-model="editObject.name"
|
||||
maxlength="64" placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--path-->
|
||||
<el-form-item :label="$t('overall.path')" prop="path">
|
||||
<el-input id="proxy-path" v-model="editObject.path"
|
||||
placeholder="" show-word-limit size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--method-->
|
||||
<el-form-item :label="$t('overall.method')" prop="method">
|
||||
<el-select id="proxy-method"
|
||||
v-model="editObject.method"
|
||||
placeholder=" "
|
||||
size="small"
|
||||
class="right-box__select"
|
||||
popper-class="right-box-select-dropdown prevent-clickoutside"
|
||||
>
|
||||
<el-option value="get"></el-option>
|
||||
<el-option value="post"></el-option>
|
||||
<el-option value="put"></el-option>
|
||||
<el-option value="fetch"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!--version-->
|
||||
<el-form-item :label="$t('overall.version')" prop="version">
|
||||
<el-input id="proxy-version" v-model="editObject.version" placeholder="" size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--target-->
|
||||
<el-form-item :label="$t('galaxyProxy.targetUrl')" prop="targetUrl">
|
||||
<el-input id="proxy-targetUrl" v-model="editObject.targetUrl" placeholder="" size="small" type="text"></el-input>
|
||||
</el-form-item>
|
||||
<!--target param-->
|
||||
<el-form-item :label="$t('galaxyProxy.targetParam')" prop="targetParam">
|
||||
<!-- <prism-editor class="my-editor" v-model="editObject.targetParam" :highlight="jsonHl" line-numbers></prism-editor>-->
|
||||
<v-ace-editor
|
||||
v-model:value="editObject.targetParam"
|
||||
lang="json"
|
||||
theme="chrome"
|
||||
style="height: 300px" />
|
||||
</el-form-item>
|
||||
<!--target header-->
|
||||
<el-form-item :label="$t('galaxyProxy.targetHeader')" prop="targetHeader">
|
||||
<v-ace-editor
|
||||
v-model:value="editObject.targetHeader"
|
||||
lang="json"
|
||||
theme="chrome"
|
||||
style="height: 300px" />
|
||||
</el-form-item>
|
||||
<!--pre handle-->
|
||||
<el-form-item label="Pre handle" prop="preHandle">
|
||||
<v-ace-editor
|
||||
v-model:value="editObject.preHandle"
|
||||
lang="javascript"
|
||||
theme="chrome"
|
||||
style="height: 300px" />
|
||||
</el-form-item>
|
||||
<!--post handle-->
|
||||
<el-form-item label="Post handle" prop="postHandle">
|
||||
<v-ace-editor
|
||||
v-model:value="editObject.postHandle"
|
||||
lang="javascript"
|
||||
theme="chrome"
|
||||
style="height: 300px" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-box__footer">
|
||||
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
|
||||
<span>{{$t('overall.cancel')}}</span>
|
||||
</button>
|
||||
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
|
||||
<span>{{$t('overall.save')}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rightBoxMixin from '@/mixins/right-box'
|
||||
import { api } from '@/utils/api'
|
||||
import { VAceEditor } from 'vue3-ace-editor'
|
||||
import 'ace-builds/src-noconflict/mode-javascript'
|
||||
import 'ace-builds/src-noconflict/mode-json'
|
||||
import 'ace-builds/src-noconflict/theme-chrome'
|
||||
|
||||
export default {
|
||||
name: 'GalaxyProxyBox',
|
||||
mixins: [rightBoxMixin],
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.galaxyProxy,
|
||||
rules: { // 表单校验规则
|
||||
name: [
|
||||
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,329 +0,0 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="show"
|
||||
:top="top"
|
||||
:modal="modal"
|
||||
:custom-class="customClass"
|
||||
:show-close="showClose"
|
||||
:width="width"
|
||||
@close="closeDebug"
|
||||
@open="openDebug"
|
||||
destroy-on-close
|
||||
>
|
||||
|
||||
<div class="debug-wrapper">
|
||||
<el-select v-model="name" filterable placeholder="Select" class="item item-1" allow-create
|
||||
@change="changPath">
|
||||
<template v-for="(proxy,index) in galaxyProxyData" :key="proxy.id">
|
||||
<el-option :label="proxy.name" :value="index"></el-option>
|
||||
</template>
|
||||
</el-select>
|
||||
<div class="item item-2 sub-grid-send">
|
||||
<el-select v-model="method" filterable placeholder="Select" style="width:100px;" >
|
||||
<el-option
|
||||
v-for="item in methodOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input v-model="fullPathWithParams" placeholder="Please input" readonly/>
|
||||
<el-button @click="send">{{$t('galaxyProxy.debug.send')}}</el-button>
|
||||
</div>
|
||||
|
||||
<div class="item item-3 sub-grid-params">
|
||||
<div class="sub-grid-params-add">
|
||||
<span style="padding-left: 15px;">{{$t('galaxyProxy.debug.requestParams')}}</span>
|
||||
<el-button size="mini" @click="handleAddDetails"><i class="cn-icon-add cn-icon"></i></el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="paramsTableData"
|
||||
width="100%"
|
||||
@selection-change="handleDetailSelectionChange"
|
||||
:row-class-name="rowClassName"
|
||||
empty-text=""
|
||||
ref="tb">
|
||||
|
||||
<el-table-column type="selection" align="center" label="" width="30px" style="border-left:0px;" />
|
||||
|
||||
<el-table-column prop="key" align="center" width="80px" >
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('galaxyProxy.debug.key')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-input @change="paramsChange(scope.row)" v-model="scope.row.key"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="value" align="center" >
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('galaxyProxy.debug.value')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<el-input @change="paramsChange(scope.row)" v-model="scope.row.value"></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" style="border-right:0px;" width="70px">
|
||||
<template #header>
|
||||
<div class="table-operation-title">{{$t('overall.option')}}</div>
|
||||
</template>
|
||||
<template #default="scope">
|
||||
<div @click="deleteRow(scope.$index)" class="debug__params-delete">{{$t('overall.delete')}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<template v-slot:empty>
|
||||
<div style="height:0px;"></div>
|
||||
</template>
|
||||
|
||||
</el-table>
|
||||
|
||||
</div>
|
||||
<div class="item item-4">
|
||||
<div class="request-header" >{{$t('galaxyProxy.debug.request.header')}}</div>
|
||||
<div class="request-header-content" ><pre v-html="proxyRequestHeader" style="height: 98%;width: 98%;margin-left: -15px;margin-top: -10px;"></pre></div>
|
||||
<div class="response-header">{{$t('galaxyProxy.debug.response.header')}}</div>
|
||||
<div class="response-body">{{$t('galaxyProxy.debug.response.body')}}</div>
|
||||
<div class="response-header-content"><pre v-html="proxyResponseHeader" style="height: 98%;width: 98%;margin-left: -15px;margin-top: -10px;"></pre></div>
|
||||
<div class="response-body-content color-pre__style">
|
||||
<v-ace-editor
|
||||
v-model:value="proxyResponseBody"
|
||||
lang="json"
|
||||
readonly="true"
|
||||
theme="chrome"
|
||||
style="height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { api } from '@/utils/api'
|
||||
import { getForDebug, postForDebug } from '@/utils/http'
|
||||
import axios from 'axios'
|
||||
import { VAceEditor } from 'vue3-ace-editor'
|
||||
import 'ace-builds/src-noconflict/mode-javascript'
|
||||
import 'ace-builds/src-noconflict/mode-json'
|
||||
import 'ace-builds/src-noconflict/theme-chrome'
|
||||
|
||||
export default {
|
||||
name: 'GalaxyProxyDebug',
|
||||
components: {
|
||||
VAceEditor
|
||||
},
|
||||
props: {
|
||||
showDebug: Boolean,
|
||||
top: {
|
||||
type: String,
|
||||
default: '5vh'
|
||||
},
|
||||
modal: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: 'proxy-debug__dialog'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
width: { // 高度需要通过customClass自行定义
|
||||
type: [String, Number],
|
||||
default: '90vw'
|
||||
},
|
||||
curGalaxyProxy: Object // 实体，{ name: '', path: '', icon: icon-class }
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
show: false,
|
||||
galaxyProxyData: [],
|
||||
name: '',
|
||||
paramsTableData: [
|
||||
|
||||
],
|
||||
// 选中的数据
|
||||
checkedDetail: {},
|
||||
checkedRowData: [],
|
||||
methodOptions: [
|
||||
{
|
||||
value: 'GET',
|
||||
label: 'GET'
|
||||
},
|
||||
{
|
||||
value: 'POST',
|
||||
label: 'POST'
|
||||
}
|
||||
],
|
||||
method: 'GET',
|
||||
path: '', // 不带参数的路径，用于请求URL
|
||||
fullPathWithParams: '', // 带参数的完整路径，用于界面显示
|
||||
proxyResponseBody: '',
|
||||
proxyRequestHeader: '',
|
||||
proxyResponseHeader: ''
|
||||
}
|
||||
},
|
||||
setup () {
|
||||
},
|
||||
methods: {
|
||||
|
||||
handleAddDetails () {
|
||||
if (this.paramsTableData == undefined) {
|
||||
this.paramsTableData = new Array()
|
||||
}
|
||||
const obj = {}
|
||||
obj.key = ''
|
||||
obj.value = ''
|
||||
|
||||
this.paramsTableData.push(obj)
|
||||
},
|
||||
|
||||
// 删除当前行
|
||||
deleteRow (index) {
|
||||
this.paramsTableData.splice(index, 1)
|
||||
this.updateUrlParams()
|
||||
},
|
||||
|
||||
rowClassName ({ row, rowIndex }) {
|
||||
// 把每一行的索引放进row
|
||||
row.index = rowIndex
|
||||
},
|
||||
|
||||
// 参数发送改变时
|
||||
paramsChange (row) {
|
||||
this.fullPathWithParams = this.path
|
||||
this.checkedDetail = {}
|
||||
this.checkedRowData.forEach(t => {
|
||||
if (t.key != '') {
|
||||
this.checkedDetail[t.key] = t.value
|
||||
}
|
||||
})
|
||||
if (this.fullPathWithParams != '') {
|
||||
this.updateUrlParams()
|
||||
}
|
||||
},
|
||||
|
||||
updateUrlParams () {
|
||||
this.fullPathWithParams = this.path
|
||||
let params = ''
|
||||
for (const key in this.checkedDetail) {
|
||||
if (key != '') {
|
||||
params = params + key + '=' + this.checkedDetail[key] + '&'
|
||||
}
|
||||
}
|
||||
if (params.endsWith('&')) {
|
||||
params = params.substring(0, params.length - 1)
|
||||
}
|
||||
if (params != '') {
|
||||
this.fullPathWithParams = this.fullPathWithParams + '?' + params
|
||||
}
|
||||
},
|
||||
|
||||
// 单选框选中数据
|
||||
handleDetailSelectionChange (selection) {
|
||||
this.checkedDetail = {}
|
||||
this.checkedRowData = selection
|
||||
selection.forEach((item, index) => {
|
||||
this.checkedDetail[item.key] = item.value
|
||||
})
|
||||
this.updateUrlParams()
|
||||
},
|
||||
|
||||
async getGalaxyProxyData (value) {
|
||||
await axios.get(api.galaxyProxy + '?pageSize=-1').then(response => {
|
||||
if (response.status === 200) {
|
||||
this.galaxyProxyData = response.data.data.list
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
syntaxUrl (json) {
|
||||
if (typeof json != 'string') {
|
||||
json = JSON.stringify(json, undefined, 2)
|
||||
}
|
||||
return json = json.replace(/,/g, '&').replace(/{/g, '').replace(/}/g, '').replace(/"/g, '').replace(/:/g, '=').replace(/ /g, '')
|
||||
},
|
||||
|
||||
changPath (index) {
|
||||
// 修改input的值
|
||||
this.path = axios.defaults.baseURL + 'interface' + this.galaxyProxyData[index].path
|
||||
this.updateUrlParams()
|
||||
this.method = this.galaxyProxyData[index].method.toUpperCase()
|
||||
},
|
||||
|
||||
send () {
|
||||
// this.path = "galaxy/setting?pageNo=1&pageSize=1"
|
||||
// 注意有GET与POST两种方式
|
||||
if (this.method.toUpperCase() == 'GET') {
|
||||
getForDebug(this.path, this.checkedDetail).then(response => {
|
||||
this.proxyResponseBody = this.syntaxJson(JSON.parse(JSON.stringify(response.data)))
|
||||
this.proxyResponseHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.headers)))
|
||||
this.proxyRequestHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.config.headers)))
|
||||
this.proxyResponseHeader = this.proxyResponseHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
|
||||
this.proxyRequestHeader = this.proxyRequestHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
|
||||
})
|
||||
} else if (this.method.toUpperCase() == 'POST') {
|
||||
postForDebug(this.path, this.checkedDetail).then(response => {
|
||||
if (response) {
|
||||
this.proxyResponseBody = this.syntaxJson(JSON.parse(JSON.stringify(response.data)))
|
||||
this.proxyResponseHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.headers)))
|
||||
this.proxyRequestHeader = this.syntaxJson(JSON.parse(JSON.stringify(response.config.headers)))
|
||||
|
||||
this.proxyResponseHeader = this.proxyResponseHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
|
||||
this.proxyRequestHeader = this.proxyRequestHeader.replace(/{/g, '').replace(/}/g, '').replace(/"/g, '')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
// 格式化json
|
||||
syntaxJson (json) {
|
||||
if (typeof json != 'string') {
|
||||
json = JSON.stringify(json, undefined, 2)
|
||||
}
|
||||
return json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
},
|
||||
closeDebug () {
|
||||
this.paramsTableData = []// JSON.parse(JSON.stringify(paramsTableData))
|
||||
this.proxyResponseBody = ''
|
||||
this.proxyResponseHeader = ''
|
||||
this.proxyRequestHeader = ''
|
||||
this.name = ''
|
||||
this.path = ''
|
||||
this.fullPathWithParams = ''
|
||||
for (const key in this.curGalaxyProxy) {
|
||||
delete this.curGalaxyProxy[key]
|
||||
}
|
||||
},
|
||||
openDebug () {
|
||||
if (this.curGalaxyProxy.path) {
|
||||
this.name = this.curGalaxyProxy.name
|
||||
this.path = axios.defaults.baseURL + 'interface' + this.curGalaxyProxy.path
|
||||
this.fullPathWithParams = this.path
|
||||
this.method = this.curGalaxyProxy.method.toUpperCase()
|
||||
} else {
|
||||
this.name = ''
|
||||
this.path = ''
|
||||
this.method = 'GET'
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
// 获取代理名称及路径
|
||||
this.getGalaxyProxyData()
|
||||
},
|
||||
watch: {
|
||||
showDebug (n, o) {
|
||||
this.show = n
|
||||
},
|
||||
show (n, o) {
|
||||
this.$emit('update:show-debug', n)
|
||||
},
|
||||
path (n, o) {
|
||||
this.updateUrlParams()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -92,11 +92,6 @@ const routes = [
|
||||
path: '/i18n',
|
||||
component: () => import('@/views/administration/I18n')
|
||||
},
|
||||
{
|
||||
name: 'Chart',
|
||||
path: '/chart',
|
||||
component: () => import('@/views/administration/Chart')
|
||||
},
|
||||
{
|
||||
path: '/detectionsNew',
|
||||
component: () => import('@/views/detectionsNew/Index')
|
||||
|
||||
@@ -1,93 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<cn-data-list
|
||||
ref="dataList"
|
||||
:tableId="tableId"
|
||||
v-model:custom-table-title="tools.customTableTitle"
|
||||
:api="url"
|
||||
:from="fromRoute.chart"
|
||||
:layout="['columnCustomize','elementSet','search']"
|
||||
@search="search"
|
||||
>
|
||||
<template #top-tool-left>
|
||||
<button id="chart-add"
|
||||
class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||
@click="add">
|
||||
<i class="cn-icon-xinjian cn-icon"></i>
|
||||
<span>{{$t('overall.create')}}</span>
|
||||
</button>
|
||||
<button id="chart-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
||||
@click="editSelectRecord">
|
||||
<i class="cn-icon-edit cn-icon"></i>
|
||||
<span>{{$t('overall.edit')}}</span>
|
||||
</button>
|
||||
<button id="chart-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
|
||||
@click="delBatch">
|
||||
<i class="cn-icon-delete cn-icon"></i>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
</template>
|
||||
<template #default>
|
||||
<loading :loading="loading"></loading>
|
||||
<chart-table
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:isNoData="isNoData"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@delete="del"
|
||||
@edit="edit"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
/>
|
||||
</template>
|
||||
<template #pagination>
|
||||
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||
</template>
|
||||
</cn-data-list>
|
||||
<el-drawer
|
||||
v-model="rightBox.show"
|
||||
direction="rtl"
|
||||
custom-class="common-right-box"
|
||||
:size="700"
|
||||
:with-header="false"
|
||||
destroy-on-close>
|
||||
<chart-box
|
||||
:object="object"
|
||||
@close="closeRightBox"
|
||||
/>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import cnDataList from '@/components/table/CnDataList'
|
||||
import dataListMixin from '@/mixins/data-list'
|
||||
import chartTable from '@/components/table/administration/ChartTable'
|
||||
import chartBox from '@/components/rightBox/settings/ChartBox'
|
||||
import { api } from '@/utils/api'
|
||||
|
||||
export default {
|
||||
name: 'Chart',
|
||||
mixins: [dataListMixin],
|
||||
components: {
|
||||
cnDataList,
|
||||
chartTable,
|
||||
chartBox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
url: api.chart,
|
||||
listUrl: api.chartList,
|
||||
blankObject: { // 空白对象
|
||||
id: '',
|
||||
name: '',
|
||||
params: '',
|
||||
i18n: ''
|
||||
},
|
||||
tableId: 'chartTable'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<div style="height: 100%;">
|
||||
<cn-data-list
|
||||
ref="dataList"
|
||||
:tableId="tableId"
|
||||
v-model:custom-table-title="tools.customTableTitle"
|
||||
:api="url"
|
||||
:from="fromRoute.galaxyProxy"
|
||||
:layout="['columnCustomize','elementSet','search']"
|
||||
@search="search"
|
||||
>
|
||||
<template v-slot:top-tool-left>
|
||||
<button id="galaxy-proxy-clear-cache" class="top-tool-btn margin-r-10" :title="$t('overall.clearCache')"
|
||||
type="button" @click="clearCache">
|
||||
<i class="cn-icon cn-icon-clear-cache"></i>
|
||||
</button>
|
||||
<button id="galaxy-proxy-add"
|
||||
class="top-tool-btn margin-r-10 top-tool-btn--create"
|
||||
@click="add">
|
||||
<i class="cn-icon-xinjian cn-icon"></i>
|
||||
<span>{{$t('overall.create')}}</span>
|
||||
</button>
|
||||
<button id="galaxy-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
|
||||
@click="editSelectRecord">
|
||||
<i class="cn-icon-edit cn-icon"></i>
|
||||
<span>{{$t('overall.edit')}}</span>
|
||||
</button>
|
||||
<button id="galaxy-delete" class="top-tool-btn margin-r-10"
|
||||
@click="delBatch">
|
||||
<i class="cn-icon-delete cn-icon"></i>
|
||||
<span>{{$t('overall.delete')}}</span>
|
||||
</button>
|
||||
<button id="galaxy-proxy-debug" class="top-tool-btn margin-r-10" :title="$t('overall.debug')"
|
||||
type="button" @click="debug(true,{})">
|
||||
<i class="cn-icon-category cn-icon"></i>
|
||||
</button>
|
||||
<top-tool-more-options
|
||||
ref="export"
|
||||
id="model"
|
||||
:params="searchLabel"
|
||||
class="top-tool-export margin-l-10 margin-r-10"
|
||||
export-file-name="galaxyProxy"
|
||||
export-url="/galaxy/setting/export"
|
||||
import-url="/galaxy/setting/import"
|
||||
@afterImport="getTableData"
|
||||
>
|
||||
<template v-slot:before>
|
||||
</template>
|
||||
</top-tool-more-options>
|
||||
</template>
|
||||
<template v-slot:default>
|
||||
<loading :loading="loading"></loading>
|
||||
<galaxy-proxy-table
|
||||
ref="dataTable"
|
||||
:api="url"
|
||||
:isNoData="isNoData"
|
||||
:custom-table-title="tools.customTableTitle"
|
||||
:height="mainTableHeight"
|
||||
:table-data="tableData"
|
||||
@delete="del"
|
||||
@edit="edit"
|
||||
@orderBy="tableDataSort"
|
||||
@reload="getTableData"
|
||||
@selectionChange="selectionChange"
|
||||
@copy="copy"
|
||||
@debug="debugRow"
|
||||
></galaxy-proxy-table>
|
||||
</template>
|
||||
<!-- 分页组件 -->
|
||||
<template #pagination>
|
||||
<pagination ref="pagination" :page-obj="pageObj" :table-id="tableId" @pageNo='pageNo' @pageSize='pageSize'></pagination>
|
||||
</template>
|
||||
</cn-data-list>
|
||||
<el-drawer
|
||||
v-model="rightBox.show"
|
||||
direction="rtl"
|
||||
custom-class="common-right-box"
|
||||
:size="700"
|
||||
:with-header="false"
|
||||
destroy-on-close>
|
||||
<galaxy-proxy-box :object="object" @close="closeRightBox"></galaxy-proxy-box>
|
||||
</el-drawer>
|
||||
</div>
|
||||
<galaxy-proxy-debug
|
||||
v-model:show-debug="showDebug"
|
||||
top="5vh"
|
||||
:show-close="false"
|
||||
:curGalaxyProxy="curGalaxyProxy"></galaxy-proxy-debug>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import cnDataList from '@/components/table/CnDataList'
|
||||
import galaxyProxyBox from '@/components/rightBox/settings/GalaxyProxyBox'
|
||||
import galaxyProxyTable from '@/components/table/administration/GalaxyProxyTable'
|
||||
import dataListMixin from '@/mixins/data-list'
|
||||
import { api } from '@/utils/api'
|
||||
import axios from 'axios'
|
||||
import TopToolMoreOptions from '@/components/common/popBox/TopToolMoreOptions'
|
||||
import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
|
||||
|
||||
export default {
|
||||
name: 'GalaxyProxy',
|
||||
components: {
|
||||
cnDataList,
|
||||
galaxyProxyBox,
|
||||
galaxyProxyTable,
|
||||
TopToolMoreOptions,
|
||||
galaxyProxyDebug
|
||||
},
|
||||
mixins: [dataListMixin],
|
||||
data () {
|
||||
return {
|
||||
url: api.galaxyProxy,
|
||||
tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
|
||||
blankObject: { // 空白对象
|
||||
name: ''
|
||||
},
|
||||
showDebug: false,
|
||||
curGalaxyProxy: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
edit (u) {
|
||||
axios.get(`${this.url}/${u.id}`).then(response => {
|
||||
if (response.status === 200) {
|
||||
const editObject = response.data.data
|
||||
editObject.targetHeader || (editObject.targetHeader = '')
|
||||
editObject.preHandle || (editObject.preHandle = '')
|
||||
editObject.postHandle || (editObject.postHandle = '')
|
||||
editObject.targetParam || (editObject.targetParam = '')
|
||||
this.object = editObject
|
||||
this.rightBox.show = true
|
||||
}
|
||||
})
|
||||
},
|
||||
debug (isTopDebug, u) {
|
||||
if (!isTopDebug && u) {
|
||||
this.curGalaxyProxy = JSON.parse(JSON.stringify(u))
|
||||
}
|
||||
this.showDebug = true
|
||||
},
|
||||
debugRow (u) {
|
||||
this.debug(false, u)
|
||||
},
|
||||
clearCache () {
|
||||
axios.put(`${this.url}/clearCache`).then(response => {
|
||||
if (response.status === 200) {
|
||||
this.$message({ duration: 2000, type: 'success', message: this.$t('tip.success') })
|
||||
} else {
|
||||
this.$message.error(response.data.message)
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$message.error(this.$t('tip.unknownError'))
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user