Skip to content

A
api-gateway
Commit 8c59eff0 by shaojiawen
Options

update：新建api

parent fc4b1f84
Showing with 308 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/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