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