Skip to content

A
api-gateway
Commit 2763cda8 by shaojiawen
Options

updata：api管理交互

parent 691a6922
Showing with 267 additions and 123 deletions
src/components/api/api-version-show.vue
......@@ -46,7 +46,9 @@ import apiVersionShow from '@/components/api/api-version-show.vue';
回滚
</el-button>
</div>
<div class="anchor-wrap">
<div
v-if="apiData.type == 2"
class="anchor-wrap">
<div class="el-tabs el-tabs--right">
<div class="el-tabs__header is-right">
<div class="el-tabs__nav-wrap is-right">
......@@ -70,25 +72,15 @@ import apiVersionShow from '@/components/api/api-version-show.vue';
@click="goAuthor('#frontend', 1)">
前端配置
</div>
<div
id="tab-2"
:class="['el-tabs__item h-24 is-right', activeInfo == 2 ? 'is-active' : '']"
@click="goAuthor('#backend', 2)">
后端配置
</div>
<div
id="tab-3"
:class="['el-tabs__item h-24 is-right', activeInfo == 3 ? 'is-active' : '']"
@click="goAuthor('#result', 3)">
返回结果
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="anchor-wrap">
<div
v-else
class="anchor-wrap">
<div class="el-tabs el-tabs--right">
<div class="el-tabs__header is-right">
<div class="el-tabs__nav-wrap is-right">
......@@ -112,29 +104,51 @@ import apiVersionShow from '@/components/api/api-version-show.vue';
@click="goAuthor('#frontend', 1)">
前端配置
</div>
<div
id="tab-2"
:class="['el-tabs__item h-24 is-right', activeInfo == 2 ? 'is-active' : '']"
@click="goAuthor('#backend', 2)">
后端配置
</div>
<div
id="tab-3"
:class="['el-tabs__item h-24 is-right', activeInfo == 3 ? 'is-active' : '']"
@click="goAuthor('#result', 3)">
返回结果
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
<div
id="base"
class="base-info-wrap info-wrap">
<div class="commont-info-title font-14 color-303133">
基础信息
</div>
<base-info-show :api-data="apiData" />
<base-info-show
:api-data="apiData"
:api-type="apiData.type" />
</div>
<div
id="frontend"
class="frontend-set-wrap info-wrap">
<div class="commont-info-title font-14 color-303133 m-t-47">
前端配置
{{ apiData.type == 2 ?'字段配置':'前端配置' }}
</div>
<div v-if="apiData.type == 2">
<back-info-show
:api-data="apiData"
:api-type="apiData.type" />
</div>
<div v-else>
<frontend-info-show :api-data="apiData" />
</div>
<frontend-info-show :api-data="apiData" />
</div>
<div
v-if="apiData.type != 2"
id="backend"
class="backend-set-wrap info-wrap">
<div class="commont-info-title font-14 color-303133 m-t-47">
......@@ -143,6 +157,7 @@ import apiVersionShow from '@/components/api/api-version-show.vue';
<backend-info-show :api-data="apiData" />
</div>
<div
v-if="apiData.type != 2"
id="result"
class="back-result-wrap info-wrap">
<div class="commont-info-title font-14 color-303133 m-t-47">
......@@ -208,7 +223,8 @@ export default {
proxyCode: '',
resultParams: '',
backendRequestType: '',
timeout: 43087112
timeout: 43087112,
type: 2,
},
activeInfo: 0,
......@@ -367,6 +383,7 @@ export default {
resData.result.endParams = JSON.parse(resData.result.endParams);
resData.result.errCode = JSON.parse(resData.result.errCode);
resData.result.resultParams = JSON.parse(resData.result.resultParams);
resData.result.type = resData.result.code ? 2 : 1;// 测试
that.apiData = resData.result || {};
return;
}
......
src/components/api/back-info-show.vue
......@@ -13,95 +13,174 @@ import backInfoShow from '@/components/api/back-info-show.vue';
-->
<template>
<div class="back-info-show border-box">
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="返回参数:">
<div
class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
style="width: 100%; table-layout: fixed;">
<div class="el-table__header-wrapper">
<table
cellspacing="0"
cellpadding="0"
border="0"
class="el-table__header"
style="width: 100%;">
<thead class="has-gutter">
<tr class="">
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf"
style="width: 36px;">
<div class="cell" />
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf">
<div class="cell">
参数名
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_2 is-leaf">
<div class="cell">
参数类型
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_4 is-leaf">
<div class="cell">
示例
</div>
</th>
</tr>
</thead>
</table>
<div v-if="apiType==2">
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="协议:">
{{ apiInfoData.protocol }}
</el-form-item>
<el-form-item label="API版本号:">
{{ apiInfoData.version }}
</el-form-item>
<el-form-item>
<div
class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
style="width: 100%; table-layout: fixed;">
<div class="el-table__header-wrapper">
<table
cellspacing="0"
cellpadding="0"
border="0"
class="el-table__header"
style="width: 100%;">
<thead class="has-gutter">
<tr class="">
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf"
style="width: 36px;">
<div class="cell" />
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf">
<div class="cell">
参数名
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_2 is-leaf">
<div class="cell">
参数类型
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_4 is-leaf">
<div class="cell">
示例
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_4 is-leaf">
<div class="cell">
描述
</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="el-table__body-wrapper is-scrolling-none">
<div class="table-content">
<back-info-table
:item-data="apiInfoData.resultParams"
is-des="true" />
</div>
</div>
</div>
<div class="el-table__body-wrapper is-scrolling-none">
<div class="table-content">
<back-info-table :item-data="apiInfoData.resultParams" />
</el-form-item>
</el-form>
</div>
<div v-else>
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="返回参数:">
<div
class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition"
style="width: 100%; table-layout: fixed;">
<div class="el-table__header-wrapper">
<table
cellspacing="0"
cellpadding="0"
border="0"
class="el-table__header"
style="width: 100%;">
<thead class="has-gutter">
<tr class="">
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf"
style="width: 36px;">
<div class="cell" />
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_1 is-leaf">
<div class="cell">
参数名
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_2 is-leaf">
<div class="cell">
参数类型
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_4 is-leaf">
<div class="cell">
示例
</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="el-table__body-wrapper is-scrolling-none">
<div class="table-content">
<back-info-table :item-data="apiInfoData.resultParams" />
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item label="错误码:">
<el-table
:data="apiInfoData.errCode"
style="width: 100%">
<el-table-column
prop="orig_error_code"
label="原始错误码" />
<el-table-column
prop="error_code"
label="映射错误码" />
<el-table-column
prop="error_info"
label="错误信息"
show-overflow-tooltip />
</el-table>
</el-form-item>
<el-form-item label="成功返回示例:">
<div class="common-back-pre">
<pre>
</el-form-item>
<el-form-item label="错误码:">
<el-table
:data="apiInfoData.errCode"
style="width: 100%">
<el-table-column
prop="orig_error_code"
label="原始错误码" />
<el-table-column
prop="error_code"
label="映射错误码" />
<el-table-column
prop="error_info"
label="错误信息"
show-overflow-tooltip />
</el-table>
</el-form-item>
<el-form-item label="成功返回示例:">
<div class="common-back-pre">
<pre>
{{ apiInfoData.sucReturn }}
</pre>
</div>
</el-form-item>
<el-form-item label="失败返回示例:">
<div class="common-back-pre">
<pre>
</div>
</el-form-item>
<el-form-item label="失败返回示例:">
<div class="common-back-pre">
<pre>
{{ apiInfoData.errReturn }}
</pre>
</div>
</el-form-item>
</el-form>
</div>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
......@@ -128,6 +207,12 @@ export default {
]
};
}
},
apiType: {
type: Number,
default(){
return 0;
}
}
},
data() {
......
src/components/api/back-info-table.vue
......@@ -58,6 +58,15 @@ import backInfoTable from '@/components/api/back-info-table.vue';
{{ itemValue.example }}
</div>
</td>
<td
v-if="isDes"
rowspan="1"
colspan="1"
class="el-table_1_column_4">
<div class="cell el-tooltip">
{{ itemValue.description }}
</div>
</td>
</tr>
</tbody>
</table>
......@@ -85,6 +94,9 @@ export default {
default() {
return {};
}
},
isDes: {
type: Boolean
}
},
data() {
......
src/components/api/base-info-show.vue
......@@ -13,24 +13,43 @@ import baseInfoShow from '@/components/api/base-info-show.vue';
-->
<template>
<div class="base-info-show border-box">
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="API名称:">
{{ apiInfoData.interfaceName }}
</el-form-item>
<el-form-item label="API类型:">
{{ apiInfoData.target == 1 ? '公开' : '私有' }}
</el-form-item>
<el-form-item label="访问类型:">
{{ apiInfoData.requestType }}
</el-form-item>
<el-form-item
label="描述:"
class="max-w-1000">
{{ apiInfoData.interfaceDescribe }}
</el-form-item>
</el-form>
<div v-if="apiType==2">
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="API名称:">
{{ apiInfoData.interfaceName }}
</el-form-item>
<el-form-item label="配置code:">
{{ apiInfoData.code }}
</el-form-item>
<el-form-item
label="描述:"
class="max-w-1000">
{{ apiInfoData.interfaceDescribe }}
</el-form-item>
</el-form>
</div>
<div v-else>
<el-form
label-width="120px"
:model="apiInfoData">
<el-form-item label="API名称:">
{{ apiInfoData.interfaceName }}
</el-form-item>
<el-form-item label="API类型:">
{{ apiInfoData.target == 1 ? '公开' : '私有' }}
</el-form-item>
<el-form-item label="访问类型:">
{{ apiInfoData.requestType }}
</el-form-item>
<el-form-item
label="描述:"
class="max-w-1000">
{{ apiInfoData.interfaceDescribe }}
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
......@@ -41,6 +60,12 @@ export default {
type: [ Object, Array ],
default() {
return {};
},
},
apiType: {
type: Number,
default(){
return 0;
}
}
},
......
src/components/createApi/create-event-base.vue
......@@ -85,11 +85,11 @@ export default {
/* eslint-disable */
console.log(that.$route.query.interfaceId);
console.log(that.$store.state.baseEventInfo);
console.log(Object.keys(that.$store.state.baseEventInfo));
if (that.$route.query.interfaceId && !Object.keys(that.$store.state.baseEventInfo).length) {
let baseEventInfo = that.$store.state.baseEventInfo || {}
if (that.$route.query.interfaceId && !Object.keys(baseEventInfo).length) {
that.getData();
}
if (Object.keys(that.$store.state.baseEventInfo).length) {
if (Object.keys(baseEventInfo).length) {
that.apiInfoData = that.$store.state.baseEventInfo;
}
},
......
src/components/createApi/create-event-field.vue
......@@ -168,7 +168,12 @@ export default {
*/
toAddItem() {
const that = this;
let length = that.keyLength++;
let length = Object.keys(that.resultParams.properties || {}).length + 1;
// console.log(that.resultParams);
// console.log(Object.keys(that.resultParams.properties).length);
// console.log(keyLength);
// let length = keyLength++;
that.$set(that.resultParams.properties, 'field' + length, {
level: 2,
parentKey: '', // 新增父级的 key
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment