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 @@
"vue-axios": "^2.1.1",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue": "2.6.12",
"vue-template-compiler": "^2.5.2",
"vue2-ace-editor": "0.0.14",
"vuedraggable": "^2.17.0",
......
src/components/createApi/result-table.vue
......@@ -62,6 +62,15 @@ import resultTable from '@/components/createApi/result-table.vue';
</div>
</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"
colspan="1"
class="el-table_1_column_3">
......@@ -106,6 +115,9 @@ export default {
default() {
return {};
}
},
isDescription: {
type: Boolean
}
},
data() {
......
src/components/program/new-api-group.vue
......@@ -31,6 +31,22 @@ import newApiGroup from '@/components/program/new-api-group.vue'
:get-by-type="'word'"
:max-length="20" />
</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="描述:">
<limit-textarea
:input-width="440"
......@@ -80,10 +96,14 @@ export default {
return {
interfaceGroupId: '',
groupName: '',
remark: ''
remark: '',
type: '1',
};
}
}
},
// groupType: {
// type: String
// }
},
data() {
return {
......@@ -91,7 +111,8 @@ export default {
formData: {
interfaceGroupId: '',
groupName: '',
remark: ''
remark: '',
type: '1',
},
rules: {
groupName: [ { required: true, message: '请输入分组名称', trigger: 'blur' } ],
......@@ -135,6 +156,8 @@ export default {
that.customDialog = false;
that.formData.groupName = '';
that.formData.remark = '';
that.formData.type = '1';
that.formData.interfaceGroupId = '';
that.$emit('hideDialog', '');
/* that.$nextTick(() => {
that.formData.classifyName = '';
......@@ -164,7 +187,8 @@ export default {
interfaceGroupId: that.formData.interfaceGroupId,
groupName: that.formData.groupName,
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)
.then(res => {
......@@ -194,6 +218,8 @@ export default {
that.$nextTick(() => {
that.formData.groupName = '';
that.formData.remark = '';
that.formData.type = '1';
that.interfaceGroupId = '';
});
}
},
......
src/router/index.js
......@@ -81,6 +81,11 @@ export const constantRouterMap = [
component: _import('index', 'createApi')
},
{
path: '/createEventApi',
name: '创建API',
component: _import('index', 'createEventApi')
},
{
path: '/apiListManage',
name: 'API列表管理',
component: _import('index', 'apiListManage')
......
src/store/store.js
......@@ -50,6 +50,9 @@ export default new Vuex.Store({
saveBase: (state, data) => {
state.baseInfo = data;
},
saveBaseEvent: (state, data) => {
state.baseEventInfo = data;
},
saveFront: (state, data) => {
state.frontInfo = data;
},
......@@ -70,6 +73,7 @@ export default new Vuex.Store({
state.frontInfo = {};
state.backInfo = {};
state.resultInfo = {};
state.baseEventInfo = {};
},
clearLog: state => {
localStorage.removeItem('logInfo');
......@@ -104,6 +108,9 @@ export default new Vuex.Store({
saveTempBackData(context, data) {
context.commit('saveTempBack', data);
},
saveBaseEventInfo(context, data) {
context.commit('saveBaseEvent', data);
},
clearTempBackData(context, data) {
context.commit('clearTempBack');
},
......
src/views/index/apiProgramGroup.vue
......@@ -41,6 +41,13 @@
label="分组名称"
show-overflow-tooltip />
<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="描述"
show-overflow-tooltip>
<template slot-scope="scope">
......@@ -170,7 +177,12 @@ export default {
*/
createApi(index, row) {
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: 编辑环境
......@@ -236,7 +248,7 @@ export default {
*/
toApiList(index, row) {
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: 编辑
......@@ -247,6 +259,7 @@ export default {
handleEdit(index, row) {
const that = this;
that.editIndex = index;
row.type += '';
that.editRow = row;
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 {
path: ''
}
],
apiType: this.$route.query.apiType || '1',
projectId: this.$route.query.projectId || '',
interfaceGroupId: this.$route.query.interfaceGroupId || '',
searchValue: '',
......@@ -240,7 +241,11 @@ export default {
*/
createApi() {
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: 分页
......
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