Skip to content

A
api-gateway
Commit 8c59eff0 by shaojiawen
Options

update：新建api

parent fc4b1f84
Showing with 1111 additions and 7 deletions
package.json
...@@ -85,6 +85,7 @@ ...@@ -85,6 +85,7 @@
"vue-axios": "^2.1.1", "vue-axios": "^2.1.1",
"vue-loader": "^13.3.0", "vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1", "vue-style-loader": "^3.0.1",
"vue": "2.6.12",
"vue-template-compiler": "^2.5.2", "vue-template-compiler": "^2.5.2",
"vue2-ace-editor": "0.0.14", "vue2-ace-editor": "0.0.14",
"vuedraggable": "^2.17.0", "vuedraggable": "^2.17.0",
......
src/components/createApi/create-event-base.vue 0 → 100644
<!--
<create-event-base></create-event-base>
import createBase from '@/components/api/create-event-base.vue';
-->
<template>
<div class="base-info-show border-box">
<el-form
ref="baseForm"
label-width="104px"
:model="apiInfoData"
:rules="rules">
<el-form-item
label="API名称:"
prop="interfaceName">
<limit-input
:input-width="329"
:disflag="$route.query.interfaceId ? true : false"
:input-value.sync="apiInfoData.interfaceName"
:holder="'请输入API名称'"
:get-by-type="'word'"
:max-length="20" />
</el-form-item>
<el-form-item
label="配置code:"
prop="code">
<limit-input
:input-width="329"
:disflag="$route.query.interfaceId ? true : false"
:input-value.sync="apiInfoData.code"
:holder="'请输入配置code'"
:get-by-type="'char'"
:max-length="20" />
</el-form-item>
<el-form-item label="描述:">
<limit-textarea
:input-width="500"
:dis-input="$route.query.interfaceId ? true : false"
:input-value.sync="apiInfoData.interfaceDescribe"
:holder="''"
:get-by-type="'word'"
:max-length="100" />
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="submitForm('baseForm')">
下一步
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitTextarea from '@/components/limit-textarea.vue';
import limitInput from '@/components/limit-input.vue';
import { getRequest } from '@/api/api';
// import showMsg from '@/assets/js/showmsg';
import errMsg from '@/assets/js/error';
export default {
name: 'CreateBase',
components: {
limitTextarea,
limitInput
},
data() {
return {
apiInfoData: {
interfaceId: '',
interfaceVersionId: '',
interfaceName: '',
// target: '1',
// optType: 'get',
// interfaceUrl: '',
interfaceDescribe: ''
},
rules: {
interfaceName: [ { required: true, message: '请输入API名称', trigger: 'blur' } ],
code: [ { required: true, message: '请输入配置code', trigger: 'blur' } ]
}
};
},
mounted() {
const that = this;
/* eslint-disable */
if (that.$route.query.interfaceId && !Object.keys(that.$store.state.baseInfo).length) {
that.getData();
}
if (Object.keys(that.$store.state.baseInfo).length) {
that.apiInfoData = that.$store.state.baseInfo;
}
},
methods: {
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
console.log(that.apiInfoData)
// if (formName == 'baseForm') {
that.$emit('submitNext', that.apiInfoData);
that.$store.dispatch('saveBaseEventInfo', that.apiInfoData);
// }
} else {
return false;
}
});
},
/**
* 处理 isRootKey
*/
async handleArrObjData(item) {
const that = this;
for (let childKey in item) {
item[childKey]['isRootKey'] = !item[childKey]['isRootKey'] || item[childKey]['isRootKey'] == '' || item[childKey]['isRootKey'] == 0 ? false : true; // 是否是后端参数字段
if (item[childKey].type == 'array' && Object.keys(item[childKey].items.properties).length) {
await that.handleArrObjData(item[childKey].items.properties);
}
if (item[childKey].type == 'object' && Object.keys(item[childKey].properties).length) {
await that.handleArrObjData(item[childKey].properties);
}
}
return item;
},
/**
* 处理数据存入 store
*/
// 前端通用数据处理
async handleQuery(front, allData, type) {
const that = this;
let newObj = {
type: 'object',
level: 1,
properties: {}
};
// 最开始处理的时候, frontParams 和 endParams是同一份数据，所有前后端公用一份参数数据
for (let key in allData.frontParams.properties) {
if (allData.frontParams.properties[key].frontOriginType == type && !allData.endParams.properties[key].constFlag) {
allData.frontParams.properties[key].isRootKey = allData.frontParams.properties[key].isRootKey == 1 || allData.frontParams.properties[key].isRootKey == true ? true : false;
that.$set(newObj.properties, allData.frontParams.properties[key].currentKey, allData.frontParams.properties[key]);
}
// 如果有数组出现
if (allData.frontParams.properties[key].type == 'array' && Object.keys(allData.frontParams.properties[key].items.properties).length) {
await that.handleArrObjData(allData.frontParams.properties[key].items.properties, allData.frontParams.properties[key].isRootKey);
}
// 如果有对象出现
if (allData.frontParams.properties[key].type == 'object' && Object.keys(allData.frontParams.properties[key].properties).length) {
await that.handleArrObjData(allData.frontParams.properties[key].properties, allData.frontParams.properties[key].isRootKey);
}
}
return newObj;
},
/**
* 处理常量参数
*/
handleConst(back, allData) {
const that = this;
let newObj = {
type: 'object',
level: 1,
properties: {}
};
for (let key in allData.endParams.properties) {
if (allData.endParams.properties[key].constFlag) {
allData.endParams.properties[key].constFlag = allData.endParams.properties[key].constFlag ? true : false;
that.$set(newObj.properties, allData.endParams.properties[key].currentKey, allData.endParams.properties[key]);
}
}
return newObj;
},
/**
* 获取已经保存的数据，处理前端数据
*/
async handleFrontData(data) {
const that = this;
let allData = JSON.parse(JSON.stringify(data));
let front = {
protocol: allData.protocol,
requestType: allData.requestType,
frontBodyType: allData.frontBodyType || 'json',
frontParams: {},
headerData: {},
queryData: {},
bodyJsonData: {},
bodyFormData: {}
};
front.queryData = await that.handleQuery(front, allData, 'query');
front.headerData = await that.handleQuery(front, allData, 'header');
if (allData.requestType == 'POST' && allData.frontBodyType == 'form') {
front.bodyFormData = await that.handleQuery(front, allData, 'form');
}
if (allData.requestType == 'POST' && allData.frontBodyType == 'json') {
// console.log('body', allData);
front.bodyJsonData = await that.handleQuery(front, allData, 'body');
}
// console.log('base:', allData.requestType, allData.frontBodyType, front);
that.$store.dispatch('saveFrontInfo', front);
},
/**
* 获取已经保存的数据，处理前端数据
*/
async handleBackData(data) {
const that = this;
let allData = JSON.parse(JSON.stringify(data));
let back = {
interfaceType: String(allData.interfaceType), // 后端服务
version: allData.version, // api 版本号
backendRequestType: allData.backendRequestType,
backendHttpPath: allData.backendHttpPath || '', // 请求路径
dubboInterface: allData.dubboInterface || '', // dubbo接口名称
dubboMethod: allData.dubboMethod || '', // dubbo请求方法
dubboVersion: allData.dubboVersion || '', // dubbo 请求版本号
proxyCode: allData.proxyCode || '', // 注册中心
timeout: allData.timeout, // 超时
backHeaderData: {},
backQueryData: {},
backBodyJsonData: {},
backBodyFormData: {},
constData: {}
};
back.backQueryData = await that.handleQuery(back, allData, 'query');
back.backHeaderData = await that.handleQuery(back, allData, 'header');
if (allData.requestType == 'POST' && allData.frontBodyType == 'form') {
back.backBodyFormData = await that.handleQuery(back, allData, 'form');
}
if (allData.requestType == 'POST' && allData.frontBodyType == 'json') {
back.backBodyJsonData = await that.handleQuery(back, allData, 'body');
}
// console.log('back:', back);
// 常量
back.constData = await that.handleConst(back, allData);
that.$store.dispatch('saveBackInfo', back);
},
handleResultData(data) {
const that = this;
let allData = JSON.parse(JSON.stringify(data));
let result = {
resultParams: allData.resultParams,
sucReturn: allData.sucReturn, // 成功返回示例
errReturn: allData.errReturn, // 失败返回示例
// 错误码
errCode: allData.errCode,
// 场景 code
sceneCode: allData.sceneCode
};
// console.log(result);
that.$store.dispatch('saveResultInfo', result);
},
/**
* 获取数据
*/
getData() {
const that = this;
let para = {
interfaceId: that.$route.query.interfaceId,
interfaceVersionId: that.$route.query.interfaceVersionId
};
getRequest('/gateway-manage/get-api', para)
.then(res => {
let resData = res.data;
if (resData.code == '0000') {
resData.result.frontParams = JSON.parse(resData.result.endParams); // 编辑获取的时候使用后端数据
resData.result.endParams = JSON.parse(resData.result.endParams); // 编辑获取的时候使用后端数据
resData.result.errCode = JSON.parse(resData.result.errCode);
resData.result.resultParams = JSON.parse(resData.result.resultParams);
that.apiInfoData.interfaceId = resData.result.interfaceId;
that.apiInfoData.interfaceVersionId = resData.result.interfaceVersionId;
that.apiInfoData.interfaceName = resData.result.interfaceName;
that.apiInfoData.target = String(resData.result.target);
that.apiInfoData.optType = resData.result.optType;
that.apiInfoData.interfaceUrl = resData.result.interfaceUrl;
that.apiInfoData.interfaceDescribe = resData.result.interfaceDescribe;
that.handleFrontData(resData.result);
that.handleBackData(resData.result);
that.handleResultData(resData.result);
that.$nextTick(() => {
that.submitForm('baseForm');
});
return false;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
}
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.w-329 {
width: 329px;
}
.base-info-show {
width: 100%;
margin-top: 56px;
.el-form {
/deep/ .el-form-item__label {
color: #606266;
}
/deep/ .el-form-item__content {
color: #303133;
}
}
}
</style>
src/components/createApi/create-event-field.vue 0 → 100644
<!--
<create-base></create-base>
import createBase from '@/components/api/create-base.vue';
-->
<template>
<div class="base-info-show border-box">
<el-form
ref="baseForm"
label-width="104px"
:model="apiInfoData"
:rules="rules">
<el-form-item
label="协议:"
prop="protocol">
{{ apiInfoData.protocol }}
</el-form-item>
<el-form-item
label="API版本号"
prop="version">
<limit-input
:input-width="329"
:input-value.sync="apiInfoData.version"
:holder="'请输入API版本号'"
:get-by-type="'word'"
:max-length="20" />
</el-form-item>
<el-form-item
label="参数配置"
class="color-303133 font-w-700" />
<el-form-item 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">
<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
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_5 is-leaf">
<div class="cell">
示例值
</div>
</th>
<th
colspan="1"
rowspan="1"
class="el-table_1_column_5 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">
<result-table
ref="resultBodyTable"
:is-description="true"
:item-data="resultParams"
@refreshData="refreshData" />
<div
class="add-line text-center"
@click="toAddItem">
<i class="el-icon-circle-plus-outline color-5584FF" /><span class="color-5584FF font-14 p-l-4">添加行</span>
</div>
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="submitback">
上一步
</el-button>
<el-button
type="primary"
@click="submitForm('baseForm')">
下一步
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import limitInput from '@/components/limit-input.vue';
import showMsg from '@/assets/js/showmsg';
import { postRequest } from '@/api/api';
// import { isRepeat } from '@/assets/js/public';
import errMsg from '@/assets/js/error';
import resultTable from '@/components/createApi/result-table.vue';
export default {
name: 'CreateFront',
components: {
limitInput,
resultTable
},
data() {
return {
importType: '',
showDialog: false,
apiInfoData: {
version: '',
resultParams: {},
protocol: 'http'
},
rules: {
version: [ { required: true, message: '请输入API版本号', trigger: 'blur' } ]
},
keyLength: 1,
resultParams: {
type: 'object',
level: 1,
properties: {
}
},
};
},
mounted() {
const that = this;
if (Object.keys(that.$store.state.frontInfo).length) {
that.handleStoreData();
}
},
methods: {
/**
* @description: 添加行
* @author: 唐尼
*/
toAddItem() {
const that = this;
let length = that.keyLength++;
that.$set(that.resultParams.properties, 'field' + length, {
level: 2,
parentKey: '', // 新增父级的 key
type: 'string',
currentKey: 'field' + length,
defaultVal: '', // 默认值
description: '描述',
example: '示例',
properties: {}
});
},
/**
* @description: 创建 API
* @author: 唐尼
*/
toPostApi() {
const that = this;
let apiInfoData = that.apiInfoData;
let para = {
interfaceGroupId: that.$route.query.interfaceGroupId,
projectId: that.$route.query.projectId, // 项目id
// 基础信息
interfaceName: that.$store.state.baseEventInfo.interfaceName, // 接口名称
code: that.$store.state.baseEventInfo.code, // 配置code
interfaceDescribe: that.$store.state.baseEventInfo.interfaceDescribe, // 接口描述
// 字段配置
protocol: apiInfoData.protocol, // 协议http
version: apiInfoData.version, // api版本号
resultParams: JSON.stringify(that.resultParams), // 配置结果
// 编辑
interfaceId: that.$store.state.baseEventInfo.interfaceId, // api id
// interfaceVersionId: that.$store.state.baseEventInfo.interfaceVersionId // api 版本 id
};
// console.log(para);
// return;
postRequest(that.$store.state.baseEventInfo.interfaceId ? '/gateway-manage/update-api' : '/gateway-manage/create-api', para)
.then(res => {
let resData = res.data;
if (resData.code == '0000') {
showMsg.showmsg('保存成功', 'success');
that.$store.dispatch('clearApiData');
that.$router.push(`/apiListManage?interfaceId=${resData.result.interfaceId}&interfaceName=${resData.result.interfaceName}&projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`);
return;
}
errMsg.errorMsg(resData);
})
.catch(function(error) {
that.$message.error({
duration: 1000,
message: error.message
});
});
},
/**
* @description: 处理properties
* @param {Object} item
* @author: 无尘
*/
async handleProperties(item) {
const that = this;
for (let childKey in item) {
// 为了以后切换type可以监听到属性，需要预制属性
if (item[childKey].type != 'array' && item[childKey].type != 'object') {
item[childKey].properties = {};
}
if (item[childKey].type == 'array' && Object.keys(item[childKey].items.properties).length) {
await that.handleProperties(item[childKey].items.properties, item[childKey]);
}
if (item[childKey].type == 'object' && Object.keys(item[childKey].properties).length) {
await that.handleProperties(item[childKey].properties, item[childKey]);
}
}
},
/**
* @description: 处理 isRootKey
* @param {Object} item
* @param {String} parentKey
* @returns {Object}
* @author: 无尘
*/
async handleArrObjData(item, parentKey) {
const that = this;
for (let childKey in item) {
item[childKey]['isRootKey'] = !item[childKey]['isRootKey'] || item[childKey]['isRootKey'] == '' || item[childKey]['isRootKey'] == 0 ? false : true; // 是否是后端参数字段
// 是否禁用，不能选择,这里暂时设置一下，后面后端配置中会去重新设置 isRootKeyFlag 这个字段值
item[childKey]['isRootKeyFlag'] = !parentKey.isRootKey || item[childKey]['isRootKey'] ? false : true;
if (item[childKey]['isRootKey']) {
parentKey.isRootKeyFlag = true; // 这里是必须的
}
// 为了以后切换type可以监听到属性，需要预制属性
if (item[childKey].type != 'array' && item[childKey].type != 'object') {
item[childKey].properties = {};
}
if (item[childKey].type == 'array' && Object.keys(item[childKey].items.properties).length) {
await that.handleArrObjData(item[childKey].items.properties, item[childKey]);
}
if (item[childKey].type == 'object' && Object.keys(item[childKey].properties).length) {
await that.handleArrObjData(item[childKey].properties, item[childKey]);
}
}
return item;
},
/**
* @description: 前端通用数据处理
* @param {Object} allData
* @param {String} type
* @returns {Object}
* @author: 无尘
*/
async handleQuery(allData, type) {
const that = this;
let newObj = {
type: 'object',
level: 1,
properties: {},
required: []
};
for (let key in allData.properties) {
allData.properties[key].isRootKey = allData.properties[key].isRootKey == 1 || allData.properties[key].isRootKey == true ? true : false;
allData.properties[key]['isRootKeyFlag'] = false;
// form 判断
if (allData.properties[key].frontOriginType == 'form') {
that.apiInfoData.requestType = 'POST';
that.apiInfoData.frontBodyType = 'form';
}
if (allData.properties[key].frontOriginType == type) {
that.$set(newObj.properties, allData.properties[key].currentKey, allData.properties[key]);
}
// 为了以后切换type可以监听到属性，需要预制属性
if (allData.properties[key].type != 'array' && allData.properties[key].type != 'object') {
allData.properties[key].properties = {};
}
// console.log(allData.properties[key]);
// 如果有数组出现
if (allData.properties[key].type == 'array' && Object.keys(allData.properties[key].items.properties).length) {
await that.handleArrObjData(allData.properties[key].items.properties, allData.properties[key]);
}
// 如果有对象出现
if (allData.properties[key].type == 'object' && Object.keys(allData.properties[key].properties).length) {
await that.handleArrObjData(allData.properties[key].properties, allData.properties[key]);
}
}
return newObj;
},
refreshData(data) {
const that = this;
that.frontData = data;
},
/**
* @description: 上一步
* @author: 无尘
*/
submitback() {
const that = this;
that.$emit('submitBack');
},
/**
* @description: 下一步
* @param {String} formName
* @author: 无尘
*/
submitForm(formName) {
const that = this;
that.$refs[formName].validate(valid => {
if (valid) {
that.handleData();
} else {
return false;
}
});
},
/**
* @description: 处理 提交的 isRootKey
* @param {Object} item
* @param {Object} parentItem
* @returns {Object}
* @author: 无尘
*/
async handleRootKey(item, parentItem) {
const that = this;
for (let childKey in item) {
item[childKey]['isRootKey'] = !item[childKey]['isRootKey'] || item[childKey]['isRootKey'] == '' || item[childKey]['isRootKey'] == 0 ? false : true; // 是否是后端参数字段
if (item[childKey]['isRootKey']) {
parentItem['isRootKey'] = false;
}
if (item[childKey].type == 'array' && Object.keys(item[childKey].items.properties).length) {
await that.handleRootKey(item[childKey].items.properties, item[childKey]);
}
if (item[childKey].type == 'object' && Object.keys(item[childKey].properties).length) {
await that.handleRootKey(item[childKey].properties, item[childKey]);
}
}
return item;
},
/**
* @description: 下一步之前处理数据
* @author: 唐尼
*/
async handleData() {
const that = this;
that.apiInfoData.resultParams = that.resultParams;
console.log(that.apiInfoData);
// that.$emit('submitNext', that.apiInfoData);
await that.toPostApi();
},
/**
* @description: 处理状态中的前端数据
* @author: 无尘
*/
async handleStoreData() {
const that = this;
that.apiInfoData = JSON.parse(JSON.stringify(that.$store.state.frontInfo));
that.headerData = that.apiInfoData.headerData;
that.queryData = that.apiInfoData.queryData;
const bodyJsonData = {
type: 'object',
level: 1,
properties: {
bodyRoot: {
level: 2,
currentKey: 'bodyRoot',
frontOriginType: 'body', // 来源类型 query,body,header
backendOriginType: 'body',
type: 'object',
isBackendField: 0, // 是否后端字段
defaultVal: 'val', // 默认值
isRootKey: false, // 是否是后端参数字段
isRootKeyFlag: false, // 禁用标志
rootKey: '', // 后端参数字段
objectClass: '', // 如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true,
properties: {}
}
},
required: []
};
const bodyFormData = {
type: 'object',
level: 1,
properties: {
bodyForm: {
level: 2,
currentKey: 'bodyForm',
frontOriginType: 'form', // 来源类型 query,body,header,form
backendOriginType: 'form',
type: 'string',
isBackendField: 0, // 是否后端字段
defaultVal: 'val', // 默认值
isRootKey: false, // 是否是后端参数字段
isRootKeyFlag: false, // 禁用标志
rootKey: '', // 后端参数字段
objectClass: '', // 如果是object 并且是dubbo
description: '描述',
example: '示例',
check: true,
properties: {}
}
},
required: []
};
// 为了处理修改 type 后添加子属性响应问题
if (Object.keys(that.apiInfoData.bodyJsonData).length) {
for (const key in that.apiInfoData.bodyJsonData.properties.bodyRoot.properties) {
if (that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].type != 'array' && that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].type != 'object' ){
that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].properties = {};
}
if (that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].type == 'array' && Object.keys(that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].items.properties).length) {
await that.handleProperties(that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].items.properties);
}
if (that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].type == 'object' && Object.keys(that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].properties).length) {
await that.handleProperties(that.apiInfoData.bodyJsonData.properties.bodyRoot.properties[key].properties);
}
}
}
// console.log('状态中:json//',JSON.stringify(that.apiInfoData.bodyJsonData));
that.bodyJsonData = Object.keys(that.apiInfoData.bodyJsonData).length ? that.apiInfoData.bodyJsonData : bodyJsonData;
that.bodyFormData = Object.keys(that.apiInfoData.bodyFormData).length ? that.apiInfoData.bodyFormData : bodyFormData;
}
}
};
</script>
<style lang="less" scoped>
.w-320 {
width: 320px;
}
.m-t-14 {
margin-top: 14px;
}
.w-329 {
width: 329px;
}
.base-info-show {
width: 100%;
margin-top: 56px;
.el-form {
/deep/ .el-form-item__label {
color: #606266;
}
.font-w-700 {
/deep/ .el-form-item__label {
color: #303133;
font-weight: 600;
}
}
/deep/ .el-form-item__content {
color: #303133;
}
}
.el-table th {
padding: 7px 0;
}
}
</style>
src/components/createApi/result-table.vue
...@@ -62,6 +62,15 @@ import resultTable from '@/components/createApi/result-table.vue'; ...@@ -62,6 +62,15 @@ import resultTable from '@/components/createApi/result-table.vue';
</div> </div>
</td> </td>
<td <td
v-if="isDescription"
rowspan="1"
colspan="1"
class="el-table_1_column_3">
<div class="cell">
<el-input v-model="itemValue.description" />
</div>
</td>
<td
rowspan="1" rowspan="1"
colspan="1" colspan="1"
class="el-table_1_column_3"> class="el-table_1_column_3">
...@@ -106,6 +115,9 @@ export default { ...@@ -106,6 +115,9 @@ export default {
default() { default() {
return {}; return {};
} }
},
isDescription: {
type: Boolean
} }
}, },
data() { data() {
......
src/components/program/new-api-group.vue
...@@ -31,6 +31,22 @@ import newApiGroup from '@/components/program/new-api-group.vue' ...@@ -31,6 +31,22 @@ import newApiGroup from '@/components/program/new-api-group.vue'
:get-by-type="'word'" :get-by-type="'word'"
:max-length="20" /> :max-length="20" />
</el-form-item> </el-form-item>
<el-form-item
label="分组类型"
prop="type">
<el-radio
v-model="formData.type"
:disabled="formData.interfaceGroupId.length>0"
label="1">
普通API
</el-radio>
<el-radio
v-model="formData.type"
:disabled="formData.interfaceGroupId.length>0"
label="2">
事件通知API
</el-radio>
</el-form-item>
<el-form-item label="描述:"> <el-form-item label="描述:">
<limit-textarea <limit-textarea
:input-width="440" :input-width="440"
...@@ -80,10 +96,14 @@ export default { ...@@ -80,10 +96,14 @@ export default {
return { return {
interfaceGroupId: '', interfaceGroupId: '',
groupName: '', groupName: '',
remark: '' remark: '',
type: '1',
}; };
} }
} },
// groupType: {
// type: String
// }
}, },
data() { data() {
return { return {
...@@ -91,7 +111,8 @@ export default { ...@@ -91,7 +111,8 @@ export default {
formData: { formData: {
interfaceGroupId: '', interfaceGroupId: '',
groupName: '', groupName: '',
remark: '' remark: '',
type: '1',
}, },
rules: { rules: {
groupName: [ { required: true, message: '请输入分组名称', trigger: 'blur' } ], groupName: [ { required: true, message: '请输入分组名称', trigger: 'blur' } ],
...@@ -135,6 +156,8 @@ export default { ...@@ -135,6 +156,8 @@ export default {
that.customDialog = false; that.customDialog = false;
that.formData.groupName = ''; that.formData.groupName = '';
that.formData.remark = ''; that.formData.remark = '';
that.formData.type = '1';
that.formData.interfaceGroupId = '';
that.$emit('hideDialog', ''); that.$emit('hideDialog', '');
/* that.$nextTick(() => { /* that.$nextTick(() => {
that.formData.classifyName = ''; that.formData.classifyName = '';
...@@ -164,7 +187,8 @@ export default { ...@@ -164,7 +187,8 @@ export default {
interfaceGroupId: that.formData.interfaceGroupId, 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,
type: that.formData.type
}; };
getRequest(that.editRow.interfaceGroupId ? '/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 => {
...@@ -194,6 +218,8 @@ export default { ...@@ -194,6 +218,8 @@ export default {
that.$nextTick(() => { that.$nextTick(() => {
that.formData.groupName = ''; that.formData.groupName = '';
that.formData.remark = ''; that.formData.remark = '';
that.formData.type = '1';
that.interfaceGroupId = '';
}); });
} }
}, },
......
src/router/index.js
...@@ -81,6 +81,11 @@ export const constantRouterMap = [ ...@@ -81,6 +81,11 @@ export const constantRouterMap = [
component: _import('index', 'createApi') component: _import('index', 'createApi')
}, },
{ {
path: '/createEventApi',
name: '创建API',
component: _import('index', 'createEventApi')
},
{
path: '/apiListManage', path: '/apiListManage',
name: 'API列表管理', name: 'API列表管理',
component: _import('index', 'apiListManage') component: _import('index', 'apiListManage')
......
src/store/store.js
...@@ -50,6 +50,9 @@ export default new Vuex.Store({ ...@@ -50,6 +50,9 @@ export default new Vuex.Store({
saveBase: (state, data) => { saveBase: (state, data) => {
state.baseInfo = data; state.baseInfo = data;
}, },
saveBaseEvent: (state, data) => {
state.baseEventInfo = data;
},
saveFront: (state, data) => { saveFront: (state, data) => {
state.frontInfo = data; state.frontInfo = data;
}, },
...@@ -70,6 +73,7 @@ export default new Vuex.Store({ ...@@ -70,6 +73,7 @@ export default new Vuex.Store({
state.frontInfo = {}; state.frontInfo = {};
state.backInfo = {}; state.backInfo = {};
state.resultInfo = {}; state.resultInfo = {};
state.baseEventInfo = {};
}, },
clearLog: state => { clearLog: state => {
localStorage.removeItem('logInfo'); localStorage.removeItem('logInfo');
...@@ -104,6 +108,9 @@ export default new Vuex.Store({ ...@@ -104,6 +108,9 @@ export default new Vuex.Store({
saveTempBackData(context, data) { saveTempBackData(context, data) {
context.commit('saveTempBack', data); context.commit('saveTempBack', data);
}, },
saveBaseEventInfo(context, data) {
context.commit('saveBaseEvent', data);
},
clearTempBackData(context, data) { clearTempBackData(context, data) {
context.commit('clearTempBack'); context.commit('clearTempBack');
}, },
......
src/views/index/apiProgramGroup.vue
...@@ -41,6 +41,13 @@ ...@@ -41,6 +41,13 @@
label="分组名称" label="分组名称"
show-overflow-tooltip /> show-overflow-tooltip />
<el-table-column <el-table-column
label="分组类别"
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row.type == 1 ? '普通API':'事件通知API' }}
</template>
</el-table-column>
<el-table-column
label="描述" label="描述"
show-overflow-tooltip> show-overflow-tooltip>
<template slot-scope="scope"> <template slot-scope="scope">
...@@ -170,7 +177,12 @@ export default { ...@@ -170,7 +177,12 @@ export default {
*/ */
createApi(index, row) { createApi(index, row) {
const that = this; const that = this;
that.$router.push(`/createApi?projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.groupName}`); if(row.type == 1){
that.$router.push(`/createApi?projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.groupName}`);
return;
}
that.$router.push(`/createEventApi?projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.groupName}`);
}, },
/** /**
* @description: 编辑环境 * @description: 编辑环境
...@@ -236,7 +248,7 @@ export default { ...@@ -236,7 +248,7 @@ export default {
*/ */
toApiList(index, row) { toApiList(index, row) {
const that = this; const that = this;
that.$router.push(`/groupApiList?projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.groupName}`); that.$router.push(`/groupApiList?projectId=${row.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${row.interfaceGroupId}&interfaceGroupName=${row.groupName}&apiType=${row.type}`);
}, },
/** /**
* @description: 编辑 * @description: 编辑
...@@ -247,6 +259,7 @@ export default { ...@@ -247,6 +259,7 @@ export default {
handleEdit(index, row) { handleEdit(index, row) {
const that = this; const that = this;
that.editIndex = index; that.editIndex = index;
row.type += '';
that.editRow = row; that.editRow = row;
that.showDialog = true; that.showDialog = true;
}, },
......
src/views/index/createEventApi.vue 0 → 100644
<template>
<div class="api-body-content border-box">
<div class="common-nav">
<nav-bread :nav-path="navPath" />
</div>
<div class="api-body-main common-body-main border-box">
<!-- style="height: auto;" -->
<div class="api-main-content border-box">
<div class="create-api-body">
<div class="create-api-step font-0">
<!-- || index + 1 <= activeStep -->
<div
v-for="(item, index) in stepData"
:key="index + item.stepName"
:class="['api-step-cell inline-block border-box', index + 1 == activeStep ? 'active-step' : '']"
:style="{ width: 100 / stepData.length + '%', 'max-width': 100 / stepData.length + '%' }">
<div class="api-step-cell_inner border-box">
<div
v-if="index < stepData.length - 1"
class="api-step-cell_line" />
<div class="api-step-cell_title">
<div class="el-step__icon is-text inline-block">
<div class="el-step__icon-inner font-14">
{{ index + 1 }}
</div>
</div>
<div class="api-step-cell_txt p-lr-10 bg-fff inline-block font-16">
{{ item.stepName }}
</div>
</div>
</div>
</div>
</div>
<div
v-if="activeStep == '1'"
class="create-api-base">
<create-event-base @submitNext="submitNext" />
</div>
<div
v-if="activeStep == '2'"
class="create-api-front">
<create-event-field
@submitBack="submitBack"
@submitNext="submitNext" />
</div>
<!-- <div
v-if="activeStep == '3'"
class="create-api-back">
<create-backend
@submitBack="submitBack"
@submitNext="submitNext" />
</div> -->
<!-- <div
v-if="activeStep == '4'"
class="create-api-result">
<create-result
@submitBack="submitBack"
@submitNext="submitNext" />
</div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import createEventBase from '@/components/createApi/create-event-base.vue';
import createEventField from '@/components/createApi/create-event-field.vue';
// import createBackend from '@/components/createApi/create-backend.vue';
// import createResult from '@/components/createApi/create-result.vue';
export default {
name: 'CreateApi',
components: {
navBread,
createEventBase,
createEventField,
// createBackend,
// createResult
},
data() {
return {
// 面包屑参数
createNav: [
{
name: 'API管理',
path: '/apiProgram'
},
{
name: `${this.$route.query.projectName}项目列表`,
path: '/apiProgramGroup'
},
{
name: `${this.$route.query.interfaceGroupName}分组列表`,
path: '/groupApiList'
},
{
name: this.$route.query.interfaceId ? '编辑API' : '创建API',
path: ''
}
],
editNav: [
{
name: 'API管理',
path: '/apiProgram'
},
{
name: `${this.$route.query.projectName}项目列表`,
path: '/apiProgramGroup'
},
{
name: `${this.$route.query.interfaceGroupName}分组列表`,
path: '/groupApiList'
},
{
name: this.$route.query.interfaceName ? `${this.$route.query.interfaceName}` : '',
path: '/apiListManage'
},
{
name: this.$route.query.interfaceId ? '编辑API' : '创建API',
path: ''
}
],
navPath: [],
activeStep: 1,
stepData: [
{
stepName: '基础信息'
},
{
stepName: '字段配置'
}
],
// 项目 id
projectId: this.$route.query.projectId,
// 项目中分组 id
interfaceGroupId: this.$route.query.interfaceGroupId
};
},
/* 接收数据 */
mounted() {
const that = this;
that.$emit('showTab', 22);
that.navPath = this.$route.query.interfaceId ? this.editNav : this.createNav;
},
beforeDestroy() {
this.$store.dispatch('clearApiData');
},
methods: {
/**
* 下一步
*/
submitNext() {
const that = this;
that.activeStep++;
},
/**
* 上一步
*/
submitBack() {
const that = this;
that.activeStep--;
}
},
watch: {
$route: {
handler: function(val, oldVal) {},
// 深度观察监听
deep: true
}
}
};
</script>
<style lang="less" scoped>
.create-api-body {
padding: 42px 0px;
.create-api-step {
.api-step-cell {
padding: 0 10px;
.bg-fff {
background: #fff;
}
.api-step-cell_inner {
position: relative;
width: 100%;
padding-right: 10px;
.api-step-cell_line {
position: absolute;
height: 1px;
top: 11px;
left: 0;
right: 0;
background: #c0c4cc;
z-index: 0;
}
.api-step-cell_title {
position: relative;
z-index: 1;
.el-step__icon {
border: 1px solid #c0c4cc;
color: #c0c4cc;
}
.api-step-cell_txt {
position: relative;
z-index: 1;
color: #909399;
}
}
}
&.active-step {
.api-step-cell_inner {
.api-step-cell_line {
background: #5584ff;
}
.api-step-cell_title {
.el-step__icon {
color: #fff;
border-color: #5584ff;
background: #5584ff;
}
.api-step-cell_txt {
color: #303133;
}
}
}
}
}
}
}
</style>
src/views/index/groupApiList.vue
...@@ -164,6 +164,7 @@ export default { ...@@ -164,6 +164,7 @@ export default {
path: '' path: ''
} }
], ],
apiType: this.$route.query.apiType || '1',
projectId: this.$route.query.projectId || '', projectId: this.$route.query.projectId || '',
interfaceGroupId: this.$route.query.interfaceGroupId || '', interfaceGroupId: this.$route.query.interfaceGroupId || '',
searchValue: '', searchValue: '',
...@@ -240,7 +241,11 @@ export default { ...@@ -240,7 +241,11 @@ export default {
*/ */
createApi() { createApi() {
const that = this; const that = this;
that.$router.push(`/createApi?projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`); if(that.apiType == 1){
that.$router.push(`/createApi?projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`);
return;
}
that.$router.push(`/createEventApi?projectId=${that.$route.query.projectId}&projectName=${that.$route.query.projectName}&interfaceGroupId=${that.$route.query.interfaceGroupId}&interfaceGroupName=${that.$route.query.interfaceGroupName}`);
}, },
/** /**
* @description: 分页 * @description: 分页
......
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