CN-162 代理接口调试页面开发

src/components/setting/GalaxyProxyDebug.vue

@@ -0,0 +1,525 @@
+<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="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="path" placeholder="Please input" />
+        <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" style="width: 100%;"
+                  @selection-change="handleDetailSelectionChange"
+                  ref="tb">
+          <el-table-column  type="selection" align="center" label="" width="50px" style="border-left:0px;" />
+
+          <el-table-column prop="key"  label="Key" align="center" width="100px" >
+            <template #default="scope">
+              <el-input   @change=""  v-model="scope.row.key"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="value"  label="Value" align="center" style="border-right:0px;">
+            <template #default="scope">
+              <el-input  @change=""  v-model="scope.row.value"></el-input>
+            </template>
+          </el-table-column>
+
+        </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">
+            <pre v-html="proxyResponseBody"  style="height: 95%;width: 95%;"></pre>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, defineComponent } from 'vue'
+import { api } from '@/utils/api'
+import { get, 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',
+  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 }
+  },
+  components: {
+    VAceEditor
+  },
+  data () {
+    return {
+      show: false,
+      galaxyProxyData: [],
+      name: '',
+      paramsTableData: [
+        {
+          key: 'q',
+          value: 'ip'
+        },
+        {
+          key: 'addr',
+          value: '192'
+        }
+      ],
+      // 选中的数据
+      checkedDetail: {},
+      methodOptions: [
+        {
+          value: 'GET',
+          label: 'GET'
+        },
+        {
+          value: 'POST',
+          label: 'POST'
+        }
+      ],
+      method: 'GET',
+      path: '',
+      proxyResponseBody: '',
+      proxyRequestHeader: '',
+      proxyResponseHeader: ''
+    }
+  },
+  setup () {
+  },
+  methods: {
+
+    handleAddDetails () {
+      if (this.paramsTableData == undefined) {
+        this.paramsTableData = new Array()
+      }
+      const obj = {}
+      obj.key = ''
+      obj.value = ''
+
+      this.paramsTableData.push(obj)
+    },
+
+    // 单选框选中数据
+    handleDetailSelectionChange (selection) {
+      this.checkedDetail = {}
+      selection.forEach(t => {
+        this.checkedDetail[t.key] = t.value
+      })
+    },
+
+    async getGalaxyProxyData (value) {
+      await get(api.galaxyProxy + '?pageSize=-1').then(response => {
+        if (response.code === 200) {
+          this.galaxyProxyData = response.data.list
+        }
+      })
+    },
+
+    changPath (index) {
+      // 修改input的值
+      this.path = this.galaxyProxyData[index].path
+      this.method = this.galaxyProxyData[index].method.toUpperCase()
+    },
+
+    send () {
+      // this.path = "galaxy/setting?pageNo=1&pageSize=1"
+      const finalUrl = axios.defaults.baseURL + 'interface' + this.path
+      // 注意有GET与POST两种方式
+      if (this.method.toUpperCase() == 'GET') {
+        getForDebug(finalUrl, this.checkedDetail).then(response => {
+          this.proxyResponseBody = this.syntaxHighlight(JSON.parse(JSON.stringify(response.data)))
+          this.proxyResponseHeader = this.syntaxHighlight(JSON.parse(JSON.stringify(response.headers)))
+          this.proxyRequestHeader = this.syntaxHighlight(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(finalUrl, this.checkedDetail).then(response => {
+          if (response) {
+            this.proxyResponseBody = this.syntaxHighlight(JSON.parse(JSON.stringify(response.data)))
+            this.proxyResponseHeader = this.syntaxHighlight(JSON.parse(JSON.stringify(response.headers)))
+            this.proxyRequestHeader = this.syntaxHighlight(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
+    syntaxHighlight (json) {
+      if (typeof json != 'string') {
+        json = JSON.stringify(json, undefined, 2)
+      }
+      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+        let cls = 'number'
+        if (/^"/.test(match)) {
+          if (/:$/.test(match)) {
+            cls = 'key'
+          } else {
+            cls = 'string'
+          }
+        } else if (/true|false/.test(match)) {
+          cls = 'boolean'
+        } else if (/null/.test(match)) {
+          cls = 'null'
+        }
+        return '<span class="' + cls + '">' + match + '</span>'
+      })
+    },
+
+    closeDebug () {
+      const paramsTableData = []
+      const q = {}
+      q.key = 'q'
+      q.value = 'ip'
+      const addr = {}
+      addr.key = 'addr'
+      addr.value = '192'
+
+      paramsTableData.push(q)
+      paramsTableData.push(addr)
+
+      this.paramsTableData = JSON.parse(JSON.stringify(paramsTableData))
+      this.proxyResponseBody = ''
+      this.proxyResponseHeader = ''
+      this.proxyRequestHeader = ''
+      this.name = ''
+      this.path = ''
+      for (const key in this.curGalaxyProxy) {
+        delete this.curGalaxyProxy[key]
+      }
+    },
+    openDebug () {
+      if (this.curGalaxyProxy.path) {
+        this.name = this.curGalaxyProxy.name
+        this.path = this.curGalaxyProxy.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)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+
+  .proxy-debug__dialog {
+    height: 90vh;
+    overflow: hidden;
+    .el-dialog__header {
+      display: none;
+    }
+    .el-dialog__body {
+      height: 100%;
+      padding: 0;
+    }
+  }
+  .my-editor {
+    margin-top: 4px;
+    border: 1px solid $--right-box-border-color;
+
+    .prism-editor__textarea {
+      outline: none;
+    }
+  }
+  .wrapper{
+      width: 100%;
+      height:100%;
+      background: #fff;
+      text-align: center;
+      display: grid;
+      grid-template-columns: 25% auto;
+      grid-template-rows: 60px auto;
+      grid-row-gap: 20px;
+      grid-column-gap: 20px;
+      padding:25px;
+
+      .item{
+        text-align: center;
+        border:1px solid #bbbbbb;
+        font-size: 4em;
+        text-align: center;
+
+        color: #000C18;
+        line-height: 60px;
+        font-size: 16px;
+        text-align: left;
+      }
+
+      .item-1 {
+        border:0px;
+      }
+
+      .item-2 {
+        background-color: #ffffff;
+        border:0px;
+        .el-input__inner {
+          border-radius: 0px;
+          border-left: 0px;
+          border-right:0px;
+          border-top: 1px solid #bbbbbb;
+          border-bottom: 1px solid #bbbbbb;
+          color: #606266;
+          height: 60px;
+          line-height: 60px;
+          padding: 0 15px;
+        }
+      }
+
+      .sub-grid-send{
+        width: 100%;
+        height:100%;
+        background: #fff;
+        text-align: center;
+        display: grid;
+        grid-template-columns: 100px auto 80px;
+        grid-template-rows: 60px;
+        grid-row-gap: 0px;
+        grid-column-gap: 0px;
+        padding:0px;
+      }
+
+      .item-3 {
+        background-color: #ffffff;
+
+        .el-input__inner{
+          border: 0px;
+        }
+        .el-input__inner:hover {
+          border: 0px;
+        }
+        .el-input__inner:focus {
+          border: 1px solid #bbbbbb;
+        }
+
+        .el-table__header, .el-table__body{
+          witdh:100% !important;
+        }
+
+        .el-table__header-wrapper{
+          height: 60px;
+        }
+
+        .el-table th.is-leaf, .el-table td {
+          border-top: 1px solid #bbbbbb;
+          border-left: 1px solid #bbbbbb;
+          border-right: 0px;
+          padding-top: 3px;
+          padding-bottom: 3px;
+        }
+
+        .el-table{
+          border-bottom: 1px solid #bbbbbb;
+          border-right: 1px solid #bbbbbb;
+        }
+
+        .el-table .cell {
+          line-height: 23px;
+          padding-left: 3px;
+          padding-right: 3px;
+          text-align: center;
+        }
+
+        .el-table__body tr:hover >td {
+          background-color: #ffffff;
+        }
+
+        .el-table__body tr:focus >td {
+          background-color: cadetblue;
+        }
+      }
+
+      .item-4 {
+        height:100%;
+        overflow:hidden;
+        background-color: #ffffff;
+        display: grid;
+        grid-template-columns: 40% 60%;
+        grid-template-rows: 60px  minmax(100px, 1fr) 60px minmax(100px, 2fr);
+        grid-row-gap: 0px;
+        grid-column-gap: 0px;
+
+        pre {outline: 0px; padding: 0px; margin: 0px;height:360px;line-height: 20px; font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, monospace;}
+        .color-pre__style{
+          height: 95%;
+          width: 95%;
+          .string { color: green; }
+          .number { color: darkorange; }
+          .boolean { color: blue; }
+          .null { color: magenta; }
+          .key { color: red; }
+        }
+        .request-header {
+          grid-column-start: 1;
+          grid-column-end: 3;
+          border-bottom:1px solid #bbbbbb;
+          padding-left: 15px;
+        }
+
+        .request-header-content{
+          grid-column-start: 1;
+          grid-column-end: 3;
+          border-bottom:1px solid #bbbbbb;
+          padding-left: 0px;
+          overflow:scroll;
+          height: 100%;
+          width:100%;
+          line-height: 30px;
+        }
+
+        .response-header {
+          border-right:1px solid #bbbbbb;
+          border-bottom:1px solid #bbbbbb;
+          padding-left: 15px;
+        }
+
+        .response-header-content {
+          border-right:1px solid #bbbbbb;
+          padding-left: 0px;
+          height: 100%;
+          width:100%;
+          overflow:scroll;
+          line-height: 30px;
+        }
+
+        .response-body {
+          border-bottom:1px solid #bbbbbb;
+          padding-left: 15px;
+        }
+
+        .response-body-content {
+          padding-left: 5px;
+          height:100%;
+          width:100%;
+          overflow:scroll;
+        }
+      }
+
+      .sub-grid-params{
+            width: 100%;
+            height:100%;
+            background: #fff;
+            text-align: center;
+            display: grid;
+            grid-template-columns: 100%;
+            grid-template-rows: 60px auto;
+            grid-row-gap: 0px;
+            grid-column-gap: 0px;
+            padding:0px;
+
+      }
+
+      .sub-grid-params-add{
+        width: 100%;
+        height:100%;
+        background: #fff;
+        text-align: left;
+        display: grid;
+        grid-template-columns: 70% 30%;
+        grid-template-rows:100%;
+        grid-row-gap: 0px;
+        grid-column-gap: 0px;
+        padding:0px;
+      }
+
+      .el-select .el-input .el-input__inner{
+        height: 60px;
+        border-radius:0px;
+        border:1px solid #bbbbbb;
+      }
+      .el-select .el-input .el-select__caret {
+        line-height:60px;
+        font-weight: bolder;
+        color:black;
+      }
+
+      .el-button {
+        border-color: #bbbbbb;
+      }
+
+      .sub-grid-params-add  .el-button {
+        height: 38px;
+        margin-top: 11px;
+        margin-right: 10px;
+      }
+  }
+</style>

src/components/table/settings/GalaxyProxyTable.vue

@@ -99,6 +99,7 @@
               <el-dropdown-menu >
                 <el-dropdown-item :command="['copy', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.duplicate')}}</span></el-dropdown-item>
                 <el-dropdown-item :command="['delete', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+                <el-dropdown-item :command="['debug', scope.row]"><i class="cn-icon cn-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.debug')}}</span></el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>

src/utils/api.js

@@ -118,7 +118,7 @@ export async function getI18n () {
 export async function getIso36112JsonData (suffix) {
   const request = new Promise(resolve => {
     axios({
-      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`,
+      url: `${window.location.protocol}//${window.location.host}:${window.location.port}/geojson/${suffix}.json`
     }).then(response => {
       resolve(response.data || response || null)
     })

src/utils/http.js

@@ -55,6 +55,36 @@ axios.interceptors.response.use(
     return Promise.reject(error)
   }
 )
+export function getForDebug (url, params) {
+  return new Promise((resolve) => {
+    axios.get(url, {
+      params: params
+    }).then(response => {
+      resolve(response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
+export function postForDebug (url, params, headers) {
+  return new Promise(resolve => {
+    axios.post(url, params, { headers: headers }).then(response => {
+      resolve(response, response)
+    }).catch(err => {
+      if (err.response) {
+        resolve(err.response)
+      } else if (err.message) {
+        resolve(err.message)
+      }
+    })
+  })
+}
+
 export function get (url, params) {
   return new Promise((resolve) => {
     axios.get(url, {

src/views/settings/GalaxyProxy.vue

@@ -18,6 +18,10 @@
                 type="button" @click="add">
           <i class="cn-icon-add cn-icon"></i>
         </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"
@@ -46,6 +50,7 @@
             @reload="getTableData"
             @selectionChange="selectionChange"
             @copy="copy"
+            @debug="debugRow"
         ></galaxy-proxy-table>
       </template>
       <!-- 分页组件 -->
@@ -62,6 +67,11 @@
       <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>
@@ -72,6 +82,7 @@ import dataListMixin from '@/mixins/dataList'
 import { api } from '@/utils/api'
 import { get, put } from '@/utils/http'
 import topToolMoreOptions from '@/components/common/popBox/topToolMoreOptions'
+import galaxyProxyDebug from '@/components/setting/GalaxyProxyDebug'
 
 export default {
   name: 'GalaxyProxy',
@@ -80,6 +91,7 @@ export default {
     galaxyProxyBox,
     galaxyProxyTable,
     topToolMoreOptions,
+    galaxyProxyDebug
   },
   mixins: [dataListMixin],
   data () {
@@ -88,7 +100,9 @@ export default {
       tableId: 'galaxySettingTable', // 需要分页的table的id，用于记录每页数量
       blankObject: { // 空白对象
         name: ''
-      }
+      },
+      showDebug: false,
+      curGalaxyProxy: {}
     }
   },
   methods: {
@@ -105,6 +119,15 @@ export default {
         }
       })
     },
+    debug (isTopDebug, u) {
+      if (!isTopDebug && u) {
+        this.curGalaxyProxy = JSON.parse(JSON.stringify(u))
+      }
+      this.showDebug = true
+    },
+    debugRow (u) {
+      this.debug(false, u)
+    },
     clearCache () {
       put(`${this.url}/clearCache`).then(response => {
         if (response.code === 200) {
@@ -116,6 +139,7 @@ export default {
         this.$message.error(this.$t('tip.unknownError'))
       })
     }
+
   }
 }
 </script>