Skip to content

A
api-gateway
Commit b28fbed5 by 无尘
Options

feat: 增加创建 api

parent 9c9ed812
Showing with 1010 additions and 76 deletions
src/components/api/back-table-tr.vue
......@@ -16,7 +16,7 @@ import backTableTr from '@/components/api/back-table-tr.vue';
<div class="cell">{{ itemName }}</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">{{ itemValue.httpPath }}</div>
<div class="cell">{{ itemValue.originType }}</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">{{ itemValue.type }}</div>
......@@ -24,8 +24,8 @@ import backTableTr from '@/components/api/back-table-tr.vue';
</tr>
</tbody>
</table>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'array'" :itemData="itemValue.items.properties" :key="index + '122' + itemName"> </back-table-row>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'object'" :itemData="itemValue.properties" :key="index + '122' + itemName"> </back-table-row>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'array' && itemValue.items.properties.length" :itemData="itemValue.items.properties" :key="index + '122' + itemName"> </back-table-row>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'object' && itemValue.properties.length" :itemData="itemValue.properties" :key="index + '122' + itemName"> </back-table-row>
</template>
</div>
</template>
......
src/components/createApi/back-constant.vue 0 → 100644
<!--
<back-constant :itemData="itemData" :originType="originType"></back-constant>
import backConstant from '@/components/createApi/back-constant.vue';
-->
<template>
<div>
<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%; table-layout: fixed;">
<thead class="has-gutter">
<tr class="">
<th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
<div class="cell">参数名</div>
</th>
<th v-if="interfaceType == '0'" 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_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_7 is-leaf">
<div class="cell">操作</div>
</th>
</tr>
</thead>
</table>
</div>
<div class="el-table__body-wrapper is-scrolling-none">
<div class="table-content">
<template v-for="(itemValue, itemName, index) in trData.properties">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%; table-layout: fixed;" :key="index + itemName + 121">
<tbody>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1">
<div class="cell">
<el-input v-model="itemValue.currentKey" placeholder="请输入参数名"></el-input>
</div>
</td>
<td v-if="interfaceType == '0'" rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">
<el-select v-model="itemValue.originType" placeholder="请选择参数位置">
<el-option label="header" value="header"></el-option>
<el-option label="query" value="query"></el-option>
<el-option label="body" value="body"></el-option>
</el-select>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">
<el-select v-model="itemValue.type" placeholder="请选择参数类型">
<el-option label="string" value="string"></el-option>
<el-option label="number" value="number"></el-option>
<el-option label="boolean" value="boolean"></el-option>
</el-select>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3">
<div class="cell">
<el-input v-model="itemValue.defaultVal"></el-input>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3">
<div class="cell">
<el-button type="text" @click="handleDel(itemValue, itemName, index)">删除</el-button>
</div>
</td>
</tr>
</tbody>
</table>
</template>
</div>
</div>
</div>
<div class="add-line text-center" @click="toAddItem"><i class="el-icon-circle-plus-outline color-5584FF"></i><span class="color-5584FF font-14 p-l-4">添加常量参数</span></div>
</div>
</template>
<script>
export default {
name: 'back-constant',
props: {
itemData: {
type: Object,
default() {
return {};
}
},
interfaceType: {
type: String,
default() {
return '0';
}
}
},
data() {
return {
trData: {
type: 'object',
properties: {
name: {
originType: this.originType, //来源类型 query,body,header
type: 'string',
currentKey: 'name',
isBackendField: 0, //是否后端字段
defaultVal: 'val', //默认值
isRootKey: 0, //是否是后端参数字段
rootKey: '', //后端参数字段
objectClass: '', //如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true
}
}
},
keyLength: 1
};
},
methods: {
handleDel(obj, itemKey, index) {
const that = this;
// that.$emit('input', that.trData);
that.$delete(that.trData.properties, itemKey);
},
toAddItem() {
const that = this;
// console.log(that.trData.properties);
let length = that.keyLength++;
// console.log(Object.keys(that.trData.properties), length, that.trData.properties);
that.$set(that.trData.properties, 'field' + length, {
originType: that.originType, //来源类型 query,body,header
type: 'string',
currentKey: 'field' + length,
isBackendField: 0, //是否后端字段
defaultVal: 'val', //默认值
isRootKey: 0, //是否是后端参数字段
rootKey: '', //后端参数字段
objectClass: '', //如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true
});
}
},
watch: {
itemData: function(newData, oldData) {
const that = this;
// console.log(newData);
that.trData = JSON.parse(JSON.stringify(newData));
},
interfaceType: function(newData, oldData) {
const that = this;
console.log(newData);
that.backType = newData;
}
},
mounted() {
const that = this;
// console.log(that.itemData);
that.trData = JSON.parse(JSON.stringify(that.itemData));
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.add-line {
height: 48px;
line-height: 48px;
border-bottom: 1px solid #e4e7ed;
cursor: pointer;
}
.el-table th {
padding: 7px 0;
}
</style>
src/components/createApi/back-table-left.vue 0 → 100644
<!--
<back-table-left></back-table-left>
import backTableLeft from '@/components/createApi/back-table-left.vue';
-->
<template>
<div>
<template v-for="(itemValue, itemName, index) in itemData">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;table-layout: fixed;" :key="index + itemName + 121">
<tbody>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1" style="width: 36px;">
<div v-if="itemValue.type == 'object' || itemValue.type == 'array'" class="cell"><i class="el-icon-minus"></i></div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_1">
<div class="cell">{{ itemName }}</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">{{ itemValue.originType }}</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">{{ itemValue.type }}</div>
</td>
</tr>
</tbody>
</table>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'array' && itemValue.items.properties.length" :itemData="itemValue.items.properties" :key="index + '122' + itemName"> </back-table-row>
<back-table-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'object' && itemValue.properties.length" :itemData="itemValue.properties" :key="index + '122' + itemName"> </back-table-row>
</template>
</div>
</template>
<script>
export default {
name: 'back-table-row',
props: {
itemData: {
type: [Object, Array],
default() {
return {};
}
}
},
data() {
return {
trData: {}
};
},
watch: {
itemData: function(newData, oldData) {
const that = this;
that.trData = newData;
}
},
mounted() {
const that = this;
that.trData = that.itemData;
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.el-table .cell {
line-height: 32px;
}
</style>
src/components/createApi/back-table-right.vue 0 → 100644
<!--
<back-table-right></back-table-right>
import backTableRight from '@/components/createApi/back-table-right.vue';
-->
<template>
<div>
<template v-for="(itemValue, itemName, index) in itemData">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%;table-layout: fixed;" :key="index + itemName + 121">
<tbody>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1" style="width: 36px;">
<div v-if="itemValue.type == 'object' || itemValue.type == 'array'" class="cell"><i class="el-icon-minus"></i></div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_1">
<div class="cell">
<el-input class="w-110" v-model="itemValue.currentkey" placeholder="请输入参数名"></el-input>
</div>
</td>
<td v-if="interfaceType == '0'" rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">
<el-select v-model="itemValue.originType" placeholder="请选择参数类型">
<el-option label="header" value="header"></el-option>
<el-option label="query" value="query"></el-option>
<el-option label="body" value="body"></el-option>
</el-select>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3">
<div class="cell">{{ itemValue.type }}</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_4">
<div class="cell">
<el-input class="w-110" v-model="itemValue.defaultVal" placeholder="请输入参数值"></el-input>
</div>
</td>
</tr>
</tbody>
</table>
<back-table-row class="el-table__row child-row" v-if="itemValue.type == 'array'" :itemData="itemValue.items.properties" :key="index + '122' + itemName"> </back-table-row>
<back-table-row class="el-table__row child-row" v-if="itemValue.type == 'object'" :itemData="itemValue.properties" :key="index + '122' + itemName"> </back-table-row>
</template>
</div>
</template>
<script>
export default {
name: 'back-table-row',
props: {
itemData: {
type: [Object, Array],
default() {
return {};
}
},
interfaceType: {
type: String,
default() {
return '0';
}
}
},
data() {
return {
trData: {}
};
},
watch: {
itemData: function(newData, oldData) {
const that = this;
that.trData = newData;
}
},
mounted() {
const that = this;
that.trData = that.itemData;
}
};
</script>
<style lang="less" scoped>
.w-110 {
width: 110px;
}
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.child-row {
padding-left: 10px;
}
</style>
src/components/createApi/create-base.vue
......@@ -17,8 +17,11 @@ import createBase from '@/components/api/create-base.vue';
</el-form-item>
<el-form-item label="访问类型:" prop="optType">
<el-select v-model="apiInfoData.optType" placeholder="请选择">
<el-option label="GET" value="GET"></el-option>
<el-option label="POST" value="POST"></el-option>
<el-option label="list" value="list"></el-option>
<el-option label="delete" value="delete"></el-option>
<el-option label="update" value="update"></el-option>
<el-option label="get" value="get"></el-option>
<el-option label="search" value="search"></el-option>
</el-select>
</el-form-item>
<el-form-item label="请求路径:" prop="interfaceUrl">
......
src/components/createApi/create-front.vue
......@@ -28,8 +28,12 @@ import createBase from '@/components/api/create-base.vue';
</el-form-item>
<el-form-item v-if="apiInfoData.requestType == 'POST'" label="参数位置:">
<div class="font-14 color-303133">body</div>
<div class="font-14 color-303133">
<el-radio v-model="originType" label="json">json</el-radio>
<el-radio v-model="originType" label="form">form</el-radio>
</div>
</el-form-item>
<el-form-item v-if="apiInfoData.requestType == 'POST'" label="">
<el-form-item v-if="apiInfoData.requestType == 'POST' && originType == 'json'" label="">
<div class="body-param-wrap">
<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">
......@@ -69,6 +73,9 @@ import createBase from '@/components/api/create-base.vue';
</div>
</div>
</el-form-item>
<el-form-item v-if="apiInfoData.requestType == 'POST' && originType == 'form'" label="">
<header-param ref="frontQueryTable" :itemData="frontData" :originType="'form'"></header-param>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitback">上一步</el-button>
<el-button type="primary" @click="submitForm('baseForm')">下一步</el-button>
......@@ -92,6 +99,7 @@ export default {
data() {
return {
originType: 'body',
apiInfoData: {
protocol: 'http',
originType: 'header',
......@@ -142,7 +150,7 @@ export default {
console.log('frontQueryTable:', that.$refs.frontBodyTable.trData); */
that.$refs[formName].validate(valid => {
if (valid) {
// that.$emit('submitNext', that.apiInfoData);
that.$emit('submitNext', that.apiInfoData);
// that.$store.dispatch('saveFrontInfo', that.apiInfoData);
} else {
return false;
......
src/components/createApi/result-table.vue 0 → 100644
<!--
<result-table :itemData="itemData"></result-table>
import resultTable from '@/components/createApi/result-table.vue';
-->
<template>
<div>
<template v-for="(itemValue, itemName, index) in itemData.properties">
<table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width: 100%; table-layout: fixed;" :key="index + itemName + 121">
<tbody>
<tr class="el-table__row">
<td rowspan="1" colspan="1" class="el-table_1_column_1">
<div class="cell">
<el-input v-model="itemValue.currentKey" @blur="blurKey(itemValue, itemName)"></el-input>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">
<el-select v-model="itemValue.type" placeholder="请选择参数类型" @change="changeType(itemValue.type, itemValue, itemValue.currentKey, itemValue.level)">
<el-option label="string" value="string"></el-option>
<el-option label="number" value="number"></el-option>
<el-option label="boolean" value="boolean"></el-option>
<el-option label="object" value="object"></el-option>
<el-option label="array" value="array"></el-option>
</el-select>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3">
<div class="cell">
<el-input v-model="itemValue.example"></el-input>
</div>
</td>
<td rowspan="1" colspan="1" class="el-table_1_column_3">
<div class="cell">
<el-button v-if="itemValue.type == 'array' || itemValue.type == 'object'" type="text" @click="handleAdd(itemValue, itemValue.currentKey, index, itemValue.level)">添加子属性</el-button>
<el-button type="text" @click="handleDel(itemValue.parentKey, itemValue.currentKey, index, itemValue.level)">删除</el-button>
</div>
</td>
</tr>
</tbody>
</table>
<body-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'array' && Object.keys(itemValue.items.properties).length" :itemData="itemValue.items" :key="index + '122' + itemName"> </body-row>
<body-row class="el-table__row" style="padding-left: 10px;" v-if="itemValue.type == 'object' && Object.keys(itemValue.properties).length" :itemData="itemValue" :key="index + '122' + itemName"> </body-row>
</template>
</div>
</template>
<script>
export default {
name: 'body-row',
props: {
itemData: {
type: Object,
default() {
return {};
}
},
originType: {
type: String,
default() {
return '';
}
}
},
data() {
return {
trData: {},
keyLength: 1 // 记录生成 obj key的标志
};
},
methods: {
/**
* key 输入变化
*/
blurKey(obj, oldKey) {
const that = this;
if (obj.type == 'object' && Object.keys(obj.properties).length) {
for (let key in obj.properties) {
obj.properties[key].parentKey = obj.currentKey;
}
}
if (obj.type == 'array' && Object.keys(obj.items.properties).length) {
for (let key in obj.items.properties) {
obj.items.properties[key].parentKey = obj.currentKey;
}
}
console.log(obj);
},
/**
* 更新参数名字段
*/
updateKey(itemData) {
const that = this;
for (let key in itemData) {
if (key != itemData[key].currentKey) {
itemData[key].pkey = itemData[itemData[key].currentKey] = itemData[key];
that.$delete(itemData, key);
}
if (itemData[key] && itemData[key].type == 'object' && Object.keys(itemData[key].properties).length) {
that.updateKey(itemData[key].properties);
}
if (itemData[key] && itemData[key].type == 'array' && Object.keys(itemData[key].items.properties).length) {
that.updateKey(itemData[key].items.properties);
}
}
console.log(that.itemData);
},
/**
* 删除一项
*/
async handleDel(parentKey, itemKey, index, level) {
const that = this;
console.log('handleDel:', parentKey, itemKey, index, level, that.itemData);
/* console.log('handleDel:', that.$parent);
console.log('handleDel:', parentKey, itemKey, index, level);
console.log('handleDel:', that.trData, that.itemData); */
await that.updateKey(that.itemData.properties);
if (!parentKey) {
that.$delete(that.itemData.properties, itemKey);
return false;
}
that.handleDelData(that.itemData, parentKey, itemKey);
},
handleDelData(itemData, pkey, itemKey) {
const that = this;
// console.log(itemData, pkey, itemKey);
that.handleObjData(itemData, pkey, itemKey);
},
handleObjData(itemData, pkey, itemKey) {
const that = this;
for (let i in itemData) {
// console.log(itemData[i]);
if (itemData[i] == pkey) {
// console.log(itemData.properties);
that.$delete(itemData.properties, itemKey);
} else {
// that.handleObjData(itemData.properties, pkey, itemKey);
}
}
},
/**
* 修改 type
*/
changeType(type, obj, itemKey, level) {
const that = this;
// console.log('changeType:', type, obj, itemKey);
// that.$set(obj, 'type', obj.type);
if (type == 'string' || type == 'boolean' || type == 'number' || type == 'object') {
// console.log(type);
obj.properties = {};
if (obj.hasOwnProperty('items')) {
that.$delete(obj, 'items');
}
}
if (type == 'array') {
that.$set(obj, 'items', {
parentKey: itemKey, // 新增父级的 key
level: parseInt(level) + 1, // 层级
originType: that.originType, //来源类型 query,body,header
type: 'string',
isBackendField: 0, //是否后端字段
defaultVal: 'val', //默认值
isRootKey: 0, //是否是后端参数字段
rootKey: '', //后端参数字段
objectClass: '', //如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true,
properties: {}
});
}
// that.$emit('refreshData', that.trData);
that.$forceUpdate();
},
/**
* 添加子属性
* {
* properties: {}
* }
*/
handleAdd(obj, itemKey, index, level) {
const that = this;
// console.log('parent:', that.$parent);
// console.log('handleAdd:', obj, itemKey, index, level);
let length = that.keyLength++;
if (obj.type == 'array') {
that.$set(obj.items.properties, 'field' + length, {
parentKey: itemKey, // 新增父级的 key
level: parseInt(level) + 1, // 层级
originType: that.originType, // 来源类型 query,body,header
type: 'string',
currentKey: 'field' + length, // 当前的 key
isBackendField: 0, // 是否后端字段
defaultVal: 'val', // 默认值
isRootKey: 0, // 是否是后端参数字段
rootKey: '', // 后端参数字段
objectClass: '', // 如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true,
properties: {}
});
that.$forceUpdate();
return false;
}
// 这里是对对象的添加操作
that.$set(obj.properties, 'field' + length, {
parentKey: itemKey, // 新增父级的 key
level: parseInt(level) + 1, // 层级
originType: that.originType, // 来源类型 query,body,header
type: 'string',
currentKey: 'field' + length, // 当前的 key
isBackendField: 0, // 是否后端字段
defaultVal: 'val', // 默认值
isRootKey: 0, // 是否是后端参数字段
rootKey: '', // 后端参数字段
objectClass: '', // 如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true,
properties: {}
});
// console.log(that.trData);
// that.$emit('refreshData', that.trData);
that.$forceUpdate();
}
},
watch: {
itemData: function(newData, oldData) {
const that = this;
// console.log('itemData:', newData);
if (newData) {
that.trData = JSON.parse(JSON.stringify(newData));
}
}
/* trData: {
handler(newName, oldName) {
console.log('trData:', newName);
},
immediate: true,
deep: true
} */
},
mounted() {
const that = this;
// console.log('that.itemData:', that.itemData);
that.trData = JSON.parse(JSON.stringify(that.itemData));
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.add-line {
height: 48px;
line-height: 48px;
border-bottom: 1px solid #e4e7ed;
cursor: pointer;
}
</style>
src/components/env/env-set-list.vue
......@@ -147,8 +147,7 @@ export default {
postDelData(index, row) {
const that = this;
let para = {
project: that.repProjectName,
router: that.pathName,
backendProxyId: row.backendProxyId,
requestProject: that.repProjectName
};
getRequest('/gateway-manage/delete-proxy', para)
......
src/components/program/new-api-group.vue
......@@ -9,20 +9,20 @@ import newApiGroup from '@/components/program/new-api-group.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" :title="formData.programId ? '编辑分组' : '新建分组'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<el-dialog class="edit-dialog" :title="formData.interfaceGroupId ? '编辑分组' : '新建分组'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programGroupForm">
<el-form-item label="分组名称:" prop="groupName">
<limitInput :inputWidth="440" :inputValue.sync="formData.groupName" :holder="'请输入分组名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="描述:">
<limit-textarea :inputWidth="440" :inputValue.sync="formData.remark" :holder="'请输入备注内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
<limit-textarea :inputWidth="440" :inputValue.sync="formData.remark" :holder="'请输入描述内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('programGroupForm')">{{ formData.programId ? '保 存' : '新 建' }}</el-button>
<el-button type="primary" @click="customConfirm('programGroupForm')">{{ formData.interfaceGroupId ? '保 存' : '新 建' }}</el-button>
</div>
</el-dialog>
</div>
......@@ -44,7 +44,7 @@ export default {
type: Object,
default() {
return {
groupId: '',
interfaceGroupId: '',
groupName: '',
remark: ''
};
......@@ -59,7 +59,7 @@ export default {
return {
customDialog: false, // 弹框显示
formData: {
groupId: '',
interfaceGroupId: '',
groupName: '',
remark: ''
},
......@@ -118,15 +118,15 @@ export default {
postEditData() {
const that = this;
let para = {
groupId: that.formData.groupId,
interfaceGroupId: that.formData.interfaceGroupId,
groupName: that.formData.groupName,
remark: that.formData.remark,
projectId: that.$route.query.projectId
};
getRequest(that.editRow.groupId ? '/gateway-manage/update-api-group' : '/gateway-manage/create-api-group', para)
getRequest(that.editRow.interfaceGroupId ? '/gateway-manage/update-api-group' : '/gateway-manage/create-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == '0000') {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
......
src/components/program/new-program.vue
......@@ -9,20 +9,20 @@ import newProgram from '@/components/program/new-program.vue'
-->
<template>
<div v-show="customDialog">
<el-dialog class="edit-dialog" :title="formData.programId ? '编辑项目' : '新建项目'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<el-dialog class="edit-dialog" :title="formData.projectId ? '编辑项目' : '新建项目'" :visible.sync="customDialog" width="600px" :before-close="handleClose">
<div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programForm">
<el-form-item label="项目名称:" prop="projectName">
<limitInput :inputWidth="440" :inputValue.sync="formData.projectName" :holder="'请输入项目名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item>
<el-form-item label="描述:">
<limit-textarea :inputWidth="440" :inputValue.sync="formData.projectDescription" :holder="'请输入备注内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
<limit-textarea :inputWidth="440" :inputValue.sync="formData.projectDescribe" :holder="'请输入描述内容'" :getByType="'word'" :maxLength="100"> </limit-textarea>
</el-form-item>
</el-form>
</div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button>
<el-button type="primary" @click="customConfirm('programForm')">{{ formData.programId ? '保 存' : '新 建' }}</el-button>
<el-button type="primary" @click="customConfirm('programForm')">{{ formData.projectId ? '保 存' : '新 建' }}</el-button>
</div>
</el-dialog>
</div>
......@@ -46,7 +46,7 @@ export default {
return {
projectId: '',
projectName: '',
projectDescription: ''
projectDescribe: ''
};
}
}
......@@ -61,11 +61,11 @@ export default {
formData: {
projectId: '',
projectName: '',
projectDescription: ''
projectDescribe: ''
},
rules: {
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
projectDescription: [{ required: true, message: '请输入描述', trigger: 'blur' }]
projectDescribe: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}
};
},
......@@ -93,7 +93,7 @@ export default {
const that = this;
that.customDialog = false;
that.formData.projectName = '';
that.formData.projectDescription = '';
that.formData.projectDescribe = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
......@@ -106,7 +106,7 @@ export default {
customConfirm(formName) {
const that = this;
that.formData.projectName = String(that.formData.projectName).replace(/\s+/g, '');
that.formData.projectDescription = String(that.formData.projectDescription).replace(/\s+/g, '');
that.formData.projectDescribe = String(that.formData.projectDescribe).replace(/\s+/g, '');
that.$refs[formName].validate(valid => {
if (valid) {
that.postEditData();
......@@ -120,12 +120,12 @@ export default {
let para = {
projectId: that.formData.projectId,
projectName: that.formData.projectName,
projectDescription: that.formData.projectDescription
projectDescribe: that.formData.projectDescribe
};
getRequest(that.editRow.projectId ? '/gateway-manage/update-project' : '/gateway-manage/create-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == '0000') {
showMsg.showmsg('保存成功', 'success');
that.setData();
return;
......
src/views/index/apiList.vue
......@@ -14,7 +14,6 @@
<el-option v-for="item in targetTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</div>
<el-button type="primary" @click="createApi">新建API</el-button>
</div>
<div class="table-wrap">
<el-table :data="tableData" style="width: 100%">
......@@ -83,6 +82,8 @@ export default {
path: ''
}
],
projectId: this.$route.query.projectId || '',
interfaceGroupId: this.$route.query.interfaceGroupId || '',
searchValue: '',
targetType: '',
targetTypeOptions: [
......@@ -96,14 +97,14 @@ export default {
}
],
tableData: [
{
/*{
interfaceId: '1',
interfaceName: '测试',
interfaceGroupName: '234',
interfaceType: '0',
optType: 'get',
createTime: 1564455643252
}
} */
],
pageSize: 20,
currentPage: 1,
......@@ -115,14 +116,6 @@ export default {
},
methods: {
/**
* 编辑环境
*/
createApi() {
const that = this;
that.$router.push(`/createApi`);
},
/**
* 搜索
*/
searchData: _debounce(function(value) {
......@@ -170,6 +163,8 @@ export default {
getData() {
const that = this;
let para = {
projectId: that.projectId,
interfaceGroupId: that.interfaceGroupId,
search: that.searchValue,
target: that.targetType, //对象 0 对内 1对外 2对部分
pageSize: that.pageSize,
......@@ -178,7 +173,7 @@ export default {
getRequest('/gateway-manage/page-api', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == '0000') {
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
......@@ -205,6 +200,7 @@ export default {
mounted() {
const that = this;
that.$emit('showTab', 22);
that.getData();
}
};
</script>
......
src/views/index/apiProgram.vue
......@@ -16,7 +16,7 @@
<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="描述" show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.projectDescription }}
{{ scope.row.projectDescribe }}
</template>
</el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip>
......@@ -70,12 +70,12 @@ export default {
],
searchValue: '',
tableData: [
{
/* {
projectId: '1',
projectName: '测试',
projectDescription: '234',
projectDdescribe: '234',
createTime: 1564455643252
}
} */
],
pageSize: 20,
currentPage: 1,
......@@ -87,7 +87,7 @@ export default {
},
methods: {
/**
* 编辑环境
* 编辑项目
*/
editProgram() {
const that = this;
......@@ -101,13 +101,9 @@ export default {
that.showDialog = false;
return false;
}
if (that.editRow.projectId) {
that.tableData[that.editIndex].projectName = obj.projectName;
that.tableData[that.editIndex].projectDescribe = obj.projectDescribe;
} else {
that.currentPage = 1;
that.getData();
}
that.currentPage = 1;
that.getData();
that.editIndex = '';
that.editRow = {};
......@@ -182,8 +178,8 @@ export default {
getRequest('/gateway-manage/delete-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'warning');
if (resData.code == '0000') {
showMsg.showmsg('删除成功', 'success');
that.tableData.splice(index, 1);
return;
}
......@@ -209,7 +205,7 @@ export default {
getRequest('/gateway-manage/page-project', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == '0000') {
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
......@@ -236,6 +232,7 @@ export default {
mounted() {
const that = this;
that.$emit('showTab', 21);
that.getData();
}
};
</script>
......
src/views/index/apiProgramGroup.vue
......@@ -30,6 +30,7 @@
<el-button @click="toApiList(scope.$index, scope.row)" type="text">API列表</el-button>
<el-button @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(scope.$index, scope.row)" type="text">删除</el-button>
<el-button type="text" @click="createApi(scope.$index, scope.row)">新建API</el-button>
</template>
</el-table-column>
</el-table>
......@@ -74,12 +75,12 @@ export default {
],
searchValue: '',
tableData: [
{
groupId: '1',
/* {
interfaceGroupId: '1',
groupName: '测试',
remark: '234',
createTime: 1564455643252
}
} */
],
pageSize: 20,
currentPage: 1,
......@@ -91,6 +92,13 @@ export default {
},
methods: {
/**
* 创建 API
*/
createApi(index, row) {
const that = this;
that.$router.push(`/createApi?projectId=${row.projectId}&interfaceGroupId=${row.interfaceGroupId}`);
},
/**
* 编辑环境
*/
editProgram() {
......@@ -105,13 +113,13 @@ export default {
that.showDialog = false;
return false;
}
if (that.editRow.groupId) {
/* if (that.editRow.interfaceGroupId) {
that.tableData[that.editIndex].groupName = obj.groupName;
that.tableData[that.editIndex].remark = obj.remark;
} else {
that.currentPage = 1;
that.getData();
}
} else { */
that.currentPage = 1;
that.getData();
// }
that.editIndex = '';
that.editRow = {};
......@@ -150,7 +158,7 @@ export default {
*/
toApiList(index, row) {
const that = this;
that.$router.push(`/apiList`);
that.$router.push(`/apiList?projectId=${row.projectId}&interfaceGroupId=${row.interfaceGroupId}`);
},
/**
* 编辑
......@@ -181,13 +189,13 @@ export default {
postDelData(index, row) {
const that = this;
let para = {
groupId: row.groupId
interfaceGroupId: row.interfaceGroupId
};
getRequest('/gateway-manage/delete-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
showMsg.showmsg('删除成功', 'warning');
if (resData.code == '0000') {
showMsg.showmsg('删除成功', 'success');
that.tableData.splice(index, 1);
return;
}
......@@ -211,10 +219,10 @@ export default {
pageNum: that.currentPage,
projectId: that.$route.query.projectId
};
getRequest('/gateway-manage/list-api-group', para)
getRequest('/gateway-manage/page-api-group', para)
.then(res => {
let resData = res.data;
if (resData.errorCode == 1) {
if (resData.code == '0000') {
that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount;
return;
......@@ -241,6 +249,7 @@ export default {
mounted() {
const that = this;
that.$emit('showTab', 21);
that.getData();
}
};
</script>
......
src/views/index/createApi.vue
......@@ -20,12 +20,18 @@
</div>
</div>
</div>
<div v-if="activeStep == '2'" class="create-api-base">
<div v-if="activeStep == '1'" class="create-api-base">
<create-base @submitNext="submitNext"></create-base>
</div>
<div v-if="activeStep == '1'" class="create-api-front">
<div v-if="activeStep == '2'" class="create-api-front">
<create-front @submitBack="submitBack" @submitNext="submitNext"></create-front>
</div>
<div v-if="activeStep == '3'" class="create-api-back">
<create-backend @submitBack="submitBack" @submitNext="submitNext"></create-backend>
</div>
<div v-if="activeStep == '4'" class="create-api-result">
<create-result @submitBack="submitBack" @submitNext="submitNext"></create-result>
</div>
</div>
</div>
</div>
......@@ -35,13 +41,17 @@
import navBread from '@/components/nav/nav-bread.vue';
import createBase from '@/components/createApi/create-base.vue';
import createFront from '@/components/createApi/create-front.vue';
import createBackend from '@/components/createApi/create-backend.vue';
import createResult from '@/components/createApi/create-result.vue';
import { getRequest } from '@/api/api';
export default {
name: 'createApi',
components: {
navBread,
createBase,
createFront
createFront,
createBackend,
createResult
},
data() {
return {
......@@ -74,7 +84,11 @@ export default {
{
stepName: '定义返回'
}
]
],
// 项目 id
projectId: this.$route.query.projectId,
// 项目中分组 id
interfaceGroupId: this.$route.query.interfaceGroupId
};
},
methods: {
......@@ -147,7 +161,7 @@ export default {
<style lang="less" scoped>
.create-api-body {
padding: 42px 61px;
padding: 42px 0px;
.create-api-step {
.api-step-cell {
padding: 0 10px;
......
src/views/index/createEnvSet.vue
......@@ -126,14 +126,14 @@ export default {
}
],
envOptions: [
{
/* {
sceneCode: '1',
sceneName: '测试'
},
{
sceneCode: '2',
sceneName: '正式'
}
} */
]
};
},
......@@ -213,19 +213,32 @@ export default {
},
saveData() {
const that = this;
let spaceFlag = true;
that.tableData.forEach(ele => {
if (ele.sceneCode == '') {
spaceFlag = false;
}
if (that.formData.proxyType == 0) {
ele.proxyParams.forEach(child => {
spaceFlag = child.url == '' || child.weight == '' ? false : true;
that.$delete(child, 'zookeeperUrl');
});
} else {
ele.proxyParams.forEach(child => {
spaceFlag = child.zookeeperUrl == '' ? false : true;
that.$delete(child, 'balence');
that.$delete(child, 'url');
that.$delete(child, 'weight');
});
}
});
if (!spaceFlag) {
that.$message.error({
duration: 1000,
message: '请完善环境配置'
});
return false;
}
// console.log(that.tableData);
let para = {
backendProxyId: that.formData.backendProxyId,
......@@ -287,7 +300,14 @@ export default {
let resData = res.data;
if (resData.code == '0000') {
that.formData = resData.result;
that.tableData = JSON.parse(resData.result.envParams);
let newEnvParams = JSON.parse(resData.result.envParams);
newEnvParams.forEach(ele => {
ele.proxyParams = JSON.parse(ele.proxyParams);
});
that.tableData = newEnvParams;
if (that.tableData.length) {
that.shoEnvFlag = true;
}
return;
}
errMsg.errorMsg(resData);
......
static/css/public.css
......@@ -852,3 +852,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
.el-tabs__header .el-tabs__nav-wrap::after {
height:1px;
}
.back-table-left .el-table .cell {
line-height: 32px;
}
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