Commit b28fbed5 by 无尘

feat: 增加创建 api

parent 9c9ed812
...@@ -16,7 +16,7 @@ import backTableTr from '@/components/api/back-table-tr.vue'; ...@@ -16,7 +16,7 @@ import backTableTr from '@/components/api/back-table-tr.vue';
<div class="cell">{{ itemName }}</div> <div class="cell">{{ itemName }}</div>
</td> </td>
<td rowspan="1" colspan="1" class="el-table_1_column_2"> <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>
<td rowspan="1" colspan="1" class="el-table_1_column_2"> <td rowspan="1" colspan="1" class="el-table_1_column_2">
<div class="cell">{{ itemValue.type }}</div> <div class="cell">{{ itemValue.type }}</div>
...@@ -24,8 +24,8 @@ import backTableTr from '@/components/api/back-table-tr.vue'; ...@@ -24,8 +24,8 @@ import backTableTr from '@/components/api/back-table-tr.vue';
</tr> </tr>
</tbody> </tbody>
</table> </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 == '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'" :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 == 'object' && itemValue.properties.length" :itemData="itemValue.properties" :key="index + '122' + itemName"> </back-table-row>
</template> </template>
</div> </div>
</template> </template>
......
<!--
<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>
<!--
<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>
<!--
<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>
...@@ -17,8 +17,11 @@ import createBase from '@/components/api/create-base.vue'; ...@@ -17,8 +17,11 @@ import createBase from '@/components/api/create-base.vue';
</el-form-item> </el-form-item>
<el-form-item label="访问类型:" prop="optType"> <el-form-item label="访问类型:" prop="optType">
<el-select v-model="apiInfoData.optType" placeholder="请选择"> <el-select v-model="apiInfoData.optType" placeholder="请选择">
<el-option label="GET" value="GET"></el-option> <el-option label="list" value="list"></el-option>
<el-option label="POST" value="POST"></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-select>
</el-form-item> </el-form-item>
<el-form-item label="请求路径:" prop="interfaceUrl"> <el-form-item label="请求路径:" prop="interfaceUrl">
......
...@@ -28,8 +28,12 @@ import createBase from '@/components/api/create-base.vue'; ...@@ -28,8 +28,12 @@ import createBase from '@/components/api/create-base.vue';
</el-form-item> </el-form-item>
<el-form-item v-if="apiInfoData.requestType == 'POST'" label="参数位置:"> <el-form-item v-if="apiInfoData.requestType == 'POST'" label="参数位置:">
<div class="font-14 color-303133">body</div> <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>
<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="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 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"> <div class="el-table__header-wrapper">
...@@ -69,6 +73,9 @@ import createBase from '@/components/api/create-base.vue'; ...@@ -69,6 +73,9 @@ import createBase from '@/components/api/create-base.vue';
</div> </div>
</div> </div>
</el-form-item> </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-form-item>
<el-button type="primary" @click="submitback">上一步</el-button> <el-button type="primary" @click="submitback">上一步</el-button>
<el-button type="primary" @click="submitForm('baseForm')">下一步</el-button> <el-button type="primary" @click="submitForm('baseForm')">下一步</el-button>
...@@ -92,6 +99,7 @@ export default { ...@@ -92,6 +99,7 @@ export default {
data() { data() {
return { return {
originType: 'body',
apiInfoData: { apiInfoData: {
protocol: 'http', protocol: 'http',
originType: 'header', originType: 'header',
...@@ -142,7 +150,7 @@ export default { ...@@ -142,7 +150,7 @@ export default {
console.log('frontQueryTable:', that.$refs.frontBodyTable.trData); */ console.log('frontQueryTable:', that.$refs.frontBodyTable.trData); */
that.$refs[formName].validate(valid => { that.$refs[formName].validate(valid => {
if (valid) { if (valid) {
// that.$emit('submitNext', that.apiInfoData); that.$emit('submitNext', that.apiInfoData);
// that.$store.dispatch('saveFrontInfo', that.apiInfoData); // that.$store.dispatch('saveFrontInfo', that.apiInfoData);
} else { } else {
return false; return false;
......
<!--
<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>
...@@ -147,8 +147,7 @@ export default { ...@@ -147,8 +147,7 @@ export default {
postDelData(index, row) { postDelData(index, row) {
const that = this; const that = this;
let para = { let para = {
project: that.repProjectName, backendProxyId: row.backendProxyId,
router: that.pathName,
requestProject: that.repProjectName requestProject: that.repProjectName
}; };
getRequest('/gateway-manage/delete-proxy', para) getRequest('/gateway-manage/delete-proxy', para)
......
...@@ -9,20 +9,20 @@ import newApiGroup from '@/components/program/new-api-group.vue' ...@@ -9,20 +9,20 @@ import newApiGroup from '@/components/program/new-api-group.vue'
--> -->
<template> <template>
<div v-show="customDialog"> <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"> <div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programGroupForm"> <el-form :model="formData" label-width="94px" :rules="rules" ref="programGroupForm">
<el-form-item label="分组名称:" prop="groupName"> <el-form-item label="分组名称:" prop="groupName">
<limitInput :inputWidth="440" :inputValue.sync="formData.groupName" :holder="'请输入分组名称'" :getByType="'word'" :maxLength="20"> </limitInput> <limitInput :inputWidth="440" :inputValue.sync="formData.groupName" :holder="'请输入分组名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item> </el-form-item>
<el-form-item label="描述:"> <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-item>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;"> <div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button> <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> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -44,7 +44,7 @@ export default { ...@@ -44,7 +44,7 @@ export default {
type: Object, type: Object,
default() { default() {
return { return {
groupId: '', interfaceGroupId: '',
groupName: '', groupName: '',
remark: '' remark: ''
}; };
...@@ -59,7 +59,7 @@ export default { ...@@ -59,7 +59,7 @@ export default {
return { return {
customDialog: false, // 弹框显示 customDialog: false, // 弹框显示
formData: { formData: {
groupId: '', interfaceGroupId: '',
groupName: '', groupName: '',
remark: '' remark: ''
}, },
...@@ -118,15 +118,15 @@ export default { ...@@ -118,15 +118,15 @@ export default {
postEditData() { postEditData() {
const that = this; const that = this;
let para = { let para = {
groupId: that.formData.groupId, interfaceGroupId: that.formData.interfaceGroupId,
groupName: that.formData.groupName, groupName: that.formData.groupName,
remark: that.formData.remark, remark: that.formData.remark,
projectId: that.$route.query.projectId 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 => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
showMsg.showmsg('保存成功', 'success'); showMsg.showmsg('保存成功', 'success');
that.setData(); that.setData();
return; return;
......
...@@ -9,20 +9,20 @@ import newProgram from '@/components/program/new-program.vue' ...@@ -9,20 +9,20 @@ import newProgram from '@/components/program/new-program.vue'
--> -->
<template> <template>
<div v-show="customDialog"> <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"> <div class="edit-dialog-body">
<el-form :model="formData" label-width="94px" :rules="rules" ref="programForm"> <el-form :model="formData" label-width="94px" :rules="rules" ref="programForm">
<el-form-item label="项目名称:" prop="projectName"> <el-form-item label="项目名称:" prop="projectName">
<limitInput :inputWidth="440" :inputValue.sync="formData.projectName" :holder="'请输入项目名称'" :getByType="'word'" :maxLength="20"> </limitInput> <limitInput :inputWidth="440" :inputValue.sync="formData.projectName" :holder="'请输入项目名称'" :getByType="'word'" :maxLength="20"> </limitInput>
</el-form-item> </el-form-item>
<el-form-item label="描述:"> <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-item>
</el-form> </el-form>
</div> </div>
<div slot="footer" class="dialog-footer" style="padding-bottom: 10px;"> <div slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
<el-button @click="customCancel">取 消</el-button> <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> </div>
</el-dialog> </el-dialog>
</div> </div>
...@@ -46,7 +46,7 @@ export default { ...@@ -46,7 +46,7 @@ export default {
return { return {
projectId: '', projectId: '',
projectName: '', projectName: '',
projectDescription: '' projectDescribe: ''
}; };
} }
} }
...@@ -61,11 +61,11 @@ export default { ...@@ -61,11 +61,11 @@ export default {
formData: { formData: {
projectId: '', projectId: '',
projectName: '', projectName: '',
projectDescription: '' projectDescribe: ''
}, },
rules: { rules: {
projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }], projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
projectDescription: [{ required: true, message: '请输入描述', trigger: 'blur' }] projectDescribe: [{ required: true, message: '请输入描述', trigger: 'blur' }]
} }
}; };
}, },
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
const that = this; const that = this;
that.customDialog = false; that.customDialog = false;
that.formData.projectName = ''; that.formData.projectName = '';
that.formData.projectDescription = ''; that.formData.projectDescribe = '';
that.$emit('hideDialog', ''); that.$emit('hideDialog', '');
/* that.$nextTick(() => { /* that.$nextTick(() => {
that.formData.classifyName = ''; that.formData.classifyName = '';
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
customConfirm(formName) { customConfirm(formName) {
const that = this; const that = this;
that.formData.projectName = String(that.formData.projectName).replace(/\s+/g, ''); 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 => { that.$refs[formName].validate(valid => {
if (valid) { if (valid) {
that.postEditData(); that.postEditData();
...@@ -120,12 +120,12 @@ export default { ...@@ -120,12 +120,12 @@ export default {
let para = { let para = {
projectId: that.formData.projectId, projectId: that.formData.projectId,
projectName: that.formData.projectName, 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) getRequest(that.editRow.projectId ? '/gateway-manage/update-project' : '/gateway-manage/create-project', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
showMsg.showmsg('保存成功', 'success'); showMsg.showmsg('保存成功', 'success');
that.setData(); that.setData();
return; return;
......
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
<el-option v-for="item in targetTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option> <el-option v-for="item in targetTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select> </el-select>
</div> </div>
<el-button type="primary" @click="createApi">新建API</el-button>
</div> </div>
<div class="table-wrap"> <div class="table-wrap">
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" style="width: 100%">
...@@ -83,6 +82,8 @@ export default { ...@@ -83,6 +82,8 @@ export default {
path: '' path: ''
} }
], ],
projectId: this.$route.query.projectId || '',
interfaceGroupId: this.$route.query.interfaceGroupId || '',
searchValue: '', searchValue: '',
targetType: '', targetType: '',
targetTypeOptions: [ targetTypeOptions: [
...@@ -96,14 +97,14 @@ export default { ...@@ -96,14 +97,14 @@ export default {
} }
], ],
tableData: [ tableData: [
{ /*{
interfaceId: '1', interfaceId: '1',
interfaceName: '测试', interfaceName: '测试',
interfaceGroupName: '234', interfaceGroupName: '234',
interfaceType: '0', interfaceType: '0',
optType: 'get', optType: 'get',
createTime: 1564455643252 createTime: 1564455643252
} } */
], ],
pageSize: 20, pageSize: 20,
currentPage: 1, currentPage: 1,
...@@ -115,14 +116,6 @@ export default { ...@@ -115,14 +116,6 @@ export default {
}, },
methods: { methods: {
/** /**
* 编辑环境
*/
createApi() {
const that = this;
that.$router.push(`/createApi`);
},
/**
* 搜索 * 搜索
*/ */
searchData: _debounce(function(value) { searchData: _debounce(function(value) {
...@@ -170,6 +163,8 @@ export default { ...@@ -170,6 +163,8 @@ export default {
getData() { getData() {
const that = this; const that = this;
let para = { let para = {
projectId: that.projectId,
interfaceGroupId: that.interfaceGroupId,
search: that.searchValue, search: that.searchValue,
target: that.targetType, //对象 0 对内 1对外 2对部分 target: that.targetType, //对象 0 对内 1对外 2对部分
pageSize: that.pageSize, pageSize: that.pageSize,
...@@ -178,7 +173,7 @@ export default { ...@@ -178,7 +173,7 @@ export default {
getRequest('/gateway-manage/page-api', para) getRequest('/gateway-manage/page-api', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
that.tableData = resData.result.result; that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount; that.totalCount = resData.result.totalCount;
return; return;
...@@ -205,6 +200,7 @@ export default { ...@@ -205,6 +200,7 @@ export default {
mounted() { mounted() {
const that = this; const that = this;
that.$emit('showTab', 22); that.$emit('showTab', 22);
that.getData();
} }
}; };
</script> </script>
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column> <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip> </el-table-column>
<el-table-column label="描述" show-overflow-tooltip> <el-table-column label="描述" show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.projectDescription }} {{ scope.row.projectDescribe }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" show-overflow-tooltip> <el-table-column label="创建时间" show-overflow-tooltip>
...@@ -70,12 +70,12 @@ export default { ...@@ -70,12 +70,12 @@ export default {
], ],
searchValue: '', searchValue: '',
tableData: [ tableData: [
{ /* {
projectId: '1', projectId: '1',
projectName: '测试', projectName: '测试',
projectDescription: '234', projectDdescribe: '234',
createTime: 1564455643252 createTime: 1564455643252
} } */
], ],
pageSize: 20, pageSize: 20,
currentPage: 1, currentPage: 1,
...@@ -87,7 +87,7 @@ export default { ...@@ -87,7 +87,7 @@ export default {
}, },
methods: { methods: {
/** /**
* 编辑环境 * 编辑项目
*/ */
editProgram() { editProgram() {
const that = this; const that = this;
...@@ -101,13 +101,9 @@ export default { ...@@ -101,13 +101,9 @@ export default {
that.showDialog = false; that.showDialog = false;
return false; return false;
} }
if (that.editRow.projectId) {
that.tableData[that.editIndex].projectName = obj.projectName; that.currentPage = 1;
that.tableData[that.editIndex].projectDescribe = obj.projectDescribe; that.getData();
} else {
that.currentPage = 1;
that.getData();
}
that.editIndex = ''; that.editIndex = '';
that.editRow = {}; that.editRow = {};
...@@ -182,8 +178,8 @@ export default { ...@@ -182,8 +178,8 @@ export default {
getRequest('/gateway-manage/delete-project', para) getRequest('/gateway-manage/delete-project', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
showMsg.showmsg('删除成功', 'warning'); showMsg.showmsg('删除成功', 'success');
that.tableData.splice(index, 1); that.tableData.splice(index, 1);
return; return;
} }
...@@ -209,7 +205,7 @@ export default { ...@@ -209,7 +205,7 @@ export default {
getRequest('/gateway-manage/page-project', para) getRequest('/gateway-manage/page-project', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
that.tableData = resData.result.result; that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount; that.totalCount = resData.result.totalCount;
return; return;
...@@ -236,6 +232,7 @@ export default { ...@@ -236,6 +232,7 @@ export default {
mounted() { mounted() {
const that = this; const that = this;
that.$emit('showTab', 21); that.$emit('showTab', 21);
that.getData();
} }
}; };
</script> </script>
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
<el-button @click="toApiList(scope.$index, scope.row)" type="text">API列表</el-button> <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="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
<el-button @click="handleDel(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> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -74,12 +75,12 @@ export default { ...@@ -74,12 +75,12 @@ export default {
], ],
searchValue: '', searchValue: '',
tableData: [ tableData: [
{ /* {
groupId: '1', interfaceGroupId: '1',
groupName: '测试', groupName: '测试',
remark: '234', remark: '234',
createTime: 1564455643252 createTime: 1564455643252
} } */
], ],
pageSize: 20, pageSize: 20,
currentPage: 1, currentPage: 1,
...@@ -91,6 +92,13 @@ export default { ...@@ -91,6 +92,13 @@ export default {
}, },
methods: { methods: {
/** /**
* 创建 API
*/
createApi(index, row) {
const that = this;
that.$router.push(`/createApi?projectId=${row.projectId}&interfaceGroupId=${row.interfaceGroupId}`);
},
/**
* 编辑环境 * 编辑环境
*/ */
editProgram() { editProgram() {
...@@ -105,13 +113,13 @@ export default { ...@@ -105,13 +113,13 @@ export default {
that.showDialog = false; that.showDialog = false;
return false; return false;
} }
if (that.editRow.groupId) { /* if (that.editRow.interfaceGroupId) {
that.tableData[that.editIndex].groupName = obj.groupName; that.tableData[that.editIndex].groupName = obj.groupName;
that.tableData[that.editIndex].remark = obj.remark; that.tableData[that.editIndex].remark = obj.remark;
} else { } else { */
that.currentPage = 1; that.currentPage = 1;
that.getData(); that.getData();
} // }
that.editIndex = ''; that.editIndex = '';
that.editRow = {}; that.editRow = {};
...@@ -150,7 +158,7 @@ export default { ...@@ -150,7 +158,7 @@ export default {
*/ */
toApiList(index, row) { toApiList(index, row) {
const that = this; const that = this;
that.$router.push(`/apiList`); that.$router.push(`/apiList?projectId=${row.projectId}&interfaceGroupId=${row.interfaceGroupId}`);
}, },
/** /**
* 编辑 * 编辑
...@@ -181,13 +189,13 @@ export default { ...@@ -181,13 +189,13 @@ export default {
postDelData(index, row) { postDelData(index, row) {
const that = this; const that = this;
let para = { let para = {
groupId: row.groupId interfaceGroupId: row.interfaceGroupId
}; };
getRequest('/gateway-manage/delete-api-group', para) getRequest('/gateway-manage/delete-api-group', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
showMsg.showmsg('删除成功', 'warning'); showMsg.showmsg('删除成功', 'success');
that.tableData.splice(index, 1); that.tableData.splice(index, 1);
return; return;
} }
...@@ -211,10 +219,10 @@ export default { ...@@ -211,10 +219,10 @@ export default {
pageNum: that.currentPage, pageNum: that.currentPage,
projectId: that.$route.query.projectId projectId: that.$route.query.projectId
}; };
getRequest('/gateway-manage/list-api-group', para) getRequest('/gateway-manage/page-api-group', para)
.then(res => { .then(res => {
let resData = res.data; let resData = res.data;
if (resData.errorCode == 1) { if (resData.code == '0000') {
that.tableData = resData.result.result; that.tableData = resData.result.result;
that.totalCount = resData.result.totalCount; that.totalCount = resData.result.totalCount;
return; return;
...@@ -241,6 +249,7 @@ export default { ...@@ -241,6 +249,7 @@ export default {
mounted() { mounted() {
const that = this; const that = this;
that.$emit('showTab', 21); that.$emit('showTab', 21);
that.getData();
} }
}; };
</script> </script>
......
...@@ -20,12 +20,18 @@ ...@@ -20,12 +20,18 @@
</div> </div>
</div> </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> <create-base @submitNext="submitNext"></create-base>
</div> </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> <create-front @submitBack="submitBack" @submitNext="submitNext"></create-front>
</div> </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> </div>
</div> </div>
...@@ -35,13 +41,17 @@ ...@@ -35,13 +41,17 @@
import navBread from '@/components/nav/nav-bread.vue'; import navBread from '@/components/nav/nav-bread.vue';
import createBase from '@/components/createApi/create-base.vue'; import createBase from '@/components/createApi/create-base.vue';
import createFront from '@/components/createApi/create-front.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'; import { getRequest } from '@/api/api';
export default { export default {
name: 'createApi', name: 'createApi',
components: { components: {
navBread, navBread,
createBase, createBase,
createFront createFront,
createBackend,
createResult
}, },
data() { data() {
return { return {
...@@ -74,7 +84,11 @@ export default { ...@@ -74,7 +84,11 @@ export default {
{ {
stepName: '定义返回' stepName: '定义返回'
} }
] ],
// 项目 id
projectId: this.$route.query.projectId,
// 项目中分组 id
interfaceGroupId: this.$route.query.interfaceGroupId
}; };
}, },
methods: { methods: {
...@@ -147,7 +161,7 @@ export default { ...@@ -147,7 +161,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.create-api-body { .create-api-body {
padding: 42px 61px; padding: 42px 0px;
.create-api-step { .create-api-step {
.api-step-cell { .api-step-cell {
padding: 0 10px; padding: 0 10px;
......
...@@ -126,14 +126,14 @@ export default { ...@@ -126,14 +126,14 @@ export default {
} }
], ],
envOptions: [ envOptions: [
{ /* {
sceneCode: '1', sceneCode: '1',
sceneName: '测试' sceneName: '测试'
}, },
{ {
sceneCode: '2', sceneCode: '2',
sceneName: '正式' sceneName: '正式'
} } */
] ]
}; };
}, },
...@@ -213,19 +213,32 @@ export default { ...@@ -213,19 +213,32 @@ export default {
}, },
saveData() { saveData() {
const that = this; const that = this;
let spaceFlag = true;
that.tableData.forEach(ele => { that.tableData.forEach(ele => {
if (ele.sceneCode == '') {
spaceFlag = false;
}
if (that.formData.proxyType == 0) { if (that.formData.proxyType == 0) {
ele.proxyParams.forEach(child => { ele.proxyParams.forEach(child => {
spaceFlag = child.url == '' || child.weight == '' ? false : true;
that.$delete(child, 'zookeeperUrl'); that.$delete(child, 'zookeeperUrl');
}); });
} else { } else {
ele.proxyParams.forEach(child => { ele.proxyParams.forEach(child => {
spaceFlag = child.zookeeperUrl == '' ? false : true;
that.$delete(child, 'balence'); that.$delete(child, 'balence');
that.$delete(child, 'url'); that.$delete(child, 'url');
that.$delete(child, 'weight'); that.$delete(child, 'weight');
}); });
} }
}); });
if (!spaceFlag) {
that.$message.error({
duration: 1000,
message: '请完善环境配置'
});
return false;
}
// console.log(that.tableData); // console.log(that.tableData);
let para = { let para = {
backendProxyId: that.formData.backendProxyId, backendProxyId: that.formData.backendProxyId,
...@@ -287,7 +300,14 @@ export default { ...@@ -287,7 +300,14 @@ export default {
let resData = res.data; let resData = res.data;
if (resData.code == '0000') { if (resData.code == '0000') {
that.formData = resData.result; 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; return;
} }
errMsg.errorMsg(resData); errMsg.errorMsg(resData);
......
...@@ -852,3 +852,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { ...@@ -852,3 +852,7 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
.el-tabs__header .el-tabs__nav-wrap::after { .el-tabs__header .el-tabs__nav-wrap::after {
height:1px; 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