1796 lines
49 KiB
Vue
1796 lines
49 KiB
Vue
<template>
|
||
<div class="wrap">
|
||
<div class="nextbtn">
|
||
<el-button
|
||
:disabled="active == 0"
|
||
type="primary"
|
||
@click="backActiveHandle"
|
||
icon="el-icon-back"
|
||
>上一步
|
||
</el-button
|
||
>
|
||
<el-button
|
||
:disabled="active == 2"
|
||
type="primary"
|
||
@click="nextActiveHanlde"
|
||
icon="el-icon-right"
|
||
>下一步
|
||
</el-button
|
||
>
|
||
<el-button type="" icon="el-icon-close" @click="backPageHandle">取消</el-button>
|
||
<el-button
|
||
icon="el-icon-first-aid-kit"
|
||
:loading="commitLoading"
|
||
:disabled="active !== 2"
|
||
type="primary"
|
||
@click="commit"
|
||
>保存
|
||
</el-button>
|
||
|
||
</div>
|
||
<div class="step">
|
||
<el-steps :active="active" finish-status="success" simple>
|
||
<el-step title="设置API基本信息"></el-step>
|
||
<el-step title="添加服务信息"></el-step>
|
||
<el-step title="添加参数映射关系"></el-step>
|
||
</el-steps>
|
||
</div>
|
||
<div class="formdata" v-if="active === 0 || active === 1">
|
||
<div class="title">
|
||
<h1>API基本信息</h1>
|
||
</div>
|
||
<div class="content">
|
||
<!-- <router-view></router-view> -->
|
||
<template v-if="active === 0">
|
||
<div>
|
||
<baseNewForm
|
||
refName="stepZeroform"
|
||
ref="stepZeroform"
|
||
:spanNumber="24"
|
||
:formRow="stepZeroformRow"
|
||
:ruleForm="stepZeroForm"
|
||
:isFunBtn="false"
|
||
@onSubmit="onSubmitHandle"
|
||
@onChangeRadio="onChangeRadio"
|
||
>
|
||
</baseNewForm>
|
||
</div>
|
||
</template>
|
||
<template v-if="active === 1">
|
||
<div>
|
||
<baseNewForm
|
||
refName="stepOneform"
|
||
ref="stepOneform"
|
||
:spanNumber="24"
|
||
:formRow="stepOneformRow"
|
||
:ruleForm="stepOneForm"
|
||
:isFunBtn="false"
|
||
@onSubmit="onSubmitHandle"
|
||
></baseNewForm>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<div class="step3" v-if="active === 2">
|
||
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
|
||
<el-menu-item index="1">Headers入参</el-menu-item>
|
||
<el-menu-item index="2">Query入参</el-menu-item>
|
||
<el-menu-item index="3">Body入参</el-menu-item>
|
||
<el-menu-item index="4">Body出参</el-menu-item>
|
||
<el-menu-item index="5">调试</el-menu-item>
|
||
<el-menu-item index="6">返回值</el-menu-item>
|
||
</el-menu>
|
||
<template v-if="activeIndex === '1'">
|
||
<div class="tableBox">
|
||
<div class="title">
|
||
<div class="left"></div>
|
||
<div class="btn">
|
||
<el-button
|
||
type="primary"
|
||
@click="jsonImportSwitch('headersTableInfo', false)"
|
||
>导入JSON
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<baseTableForm
|
||
:showIndex="false"
|
||
:indexOperate="false"
|
||
:funWidth="150"
|
||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||
:tableInfo="headersTableInfo"
|
||
@onFunc="tableButtonHandle"
|
||
>
|
||
<template #parameterType="{ row }">
|
||
<div>
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="fatherSelectChangeHandle(row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in headerparameterTypeOptions"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<template #concreteType="{ row }">
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="(val) => sonSelectChangeHandle(val, row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in concreteTypeOptions[
|
||
row[0]['parameterType']
|
||
]"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
<template #example="{ row }">
|
||
<template v-if="row[0]['parameterType'] === 'authport'">
|
||
<!-- <baseCascader
|
||
v-model="row[0]['example']"
|
||
:itemObj="bodyExitTableInfo"
|
||
>
|
||
</baseCascader> -->
|
||
<el-cascader
|
||
style="width: 100%"
|
||
v-model="row[0][row[1].id]"
|
||
ref="elCascader"
|
||
:clearable="true"
|
||
:show-all-levels="false"
|
||
:options="authQueryOut"
|
||
:props="selectprops"
|
||
:disabled="false"
|
||
></el-cascader>
|
||
</template>
|
||
<template v-else>
|
||
<el-input v-model="row[0][row[1].id]"></el-input>
|
||
</template>
|
||
</template>
|
||
</baseTableForm>
|
||
<div class="add">
|
||
<el-link
|
||
type="primary"
|
||
@click="addTableData(headersTableInfo.tableData)"
|
||
:underline="false"
|
||
>+ 添加属性
|
||
</el-link
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="activeIndex === '2'">
|
||
<div class="tableBox">
|
||
<div class="title">
|
||
<div class="left"></div>
|
||
<div class="btn">
|
||
<el-button
|
||
type="primary"
|
||
@click="jsonImportSwitch('queryTableInfo', true)"
|
||
>导入JSON
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<baseTableForm
|
||
:showIndex="false"
|
||
:indexOperate="false"
|
||
:funWidth="150"
|
||
:funData="[{text:'删除',type:'dele',color:'#e47470'}]"
|
||
:tableInfo="queryTableInfo"
|
||
@newRow="queryTableAddHandle"
|
||
@onFunc="tableButtonHandle"
|
||
>
|
||
<template #parameterType="{ row }">
|
||
<div>
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="fatherSelectChangeHandle(row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in headerparameterTypeOptions"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<template #concreteType="{ row }">
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="(val) => sonSelectChangeHandle(val, row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in concreteTypeOptions[
|
||
row[0]['parameterType']
|
||
]"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
<template #example="{ row }">
|
||
<template v-if="row[0]['parameterType'] === 'authport'">
|
||
<!-- <baseCascader
|
||
v-model="row[0]['example']"
|
||
:itemObj="bodyExitTableInfo"
|
||
>
|
||
</baseCascader> -->
|
||
<el-cascader
|
||
style="width: 100%"
|
||
v-model="row[0][row[1].id]"
|
||
ref="elCascader"
|
||
:clearable="true"
|
||
:show-all-levels="false"
|
||
:options="authQueryOut"
|
||
:props="selectprops"
|
||
:disabled="false"
|
||
></el-cascader>
|
||
</template>
|
||
<template v-else>
|
||
<el-input v-model="row[0][row[1].id]"></el-input>
|
||
</template>
|
||
</template>
|
||
</baseTableForm>
|
||
<div class="add">
|
||
<el-link
|
||
type="primary"
|
||
@click="addTableData(queryTableInfo.tableData)"
|
||
:underline="false"
|
||
>+ 添加属性
|
||
</el-link>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="activeIndex === '3'">
|
||
<div class="tableBox">
|
||
<div class="title">
|
||
<div class="left"></div>
|
||
<div class="btn">
|
||
<el-button
|
||
type="primary"
|
||
@click="jsonImportSwitch('bodyEntTableInfo', true,true)"
|
||
>导入JSON
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<baseTableForm
|
||
:showIndex="false"
|
||
:indexOperate="false"
|
||
:funWidth="funWidth"
|
||
:funData="funData"
|
||
:tableInfo="bodyEntTableInfo"
|
||
@onFunc="tableButtonHandle"
|
||
>
|
||
<template #parameterName="{row}">
|
||
<div v-if="row[0]['first']" style="text-align: center;width: 100%">{{ row[0].parameterName }}</div>
|
||
<el-input v-else style="width: 100%" v-model="row[0].parameterName"></el-input>
|
||
</template>
|
||
<template #parameterType="{ row }">
|
||
<div v-if="row[0]['first']">
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="fatherSelectChangeHandle(row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in bodyOptions"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div v-else>
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="fatherSelectChangeHandle(row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in parameterTypeOptions"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<template #concreteType="{ row }">
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="(val) => sonSelectChangeHandle(val, row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in concreteTypeOptions[
|
||
row[0]['parameterType']
|
||
]"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
<template #example="{ row }">
|
||
<template v-if="row[0]['parameterType'] === 'authport'">
|
||
<!-- <baseCascader
|
||
v-model="row[0]['example']"
|
||
:itemObj="bodyExitTableInfo"
|
||
>
|
||
</baseCascader> -->
|
||
<el-cascader
|
||
style="width: 100%"
|
||
v-model="row[0][row[1].id]"
|
||
ref="elCascader"
|
||
:clearable="true"
|
||
:show-all-levels="false"
|
||
:options="authQueryOut"
|
||
:props="selectprops"
|
||
:disabled="false"
|
||
></el-cascader>
|
||
</template>
|
||
<template v-else>
|
||
<el-input v-model="row[0][row[1].id]"></el-input>
|
||
</template>
|
||
</template>
|
||
</baseTableForm>
|
||
<div class="add">
|
||
<el-link
|
||
type="primary"
|
||
@click="addTableData(bodyEntTableInfo.tableData,true)"
|
||
:underline="false"
|
||
>+ 添加属性
|
||
</el-link
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="activeIndex === '4'">
|
||
<div class="tableBox">
|
||
<div class="title">
|
||
<div class="left"></div>
|
||
<div class="btn">
|
||
<el-button
|
||
type="primary"
|
||
@click="jsonImportSwitch('bodyExitTableInfo', true)"
|
||
>导入JSON
|
||
</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
<baseTableForm
|
||
:showIndex="false"
|
||
:indexOperate="false"
|
||
:funWidth="funWidth"
|
||
:funData="funData"
|
||
:tableInfo="bodyExitTableInfo"
|
||
@onFunc="tableButtonHandle"
|
||
>
|
||
<template #parameterType="{ row }">
|
||
<div>
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="fatherSelectChangeHandle(row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in bodyOutOptions"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</template>
|
||
<template #concreteType="{ row }">
|
||
<el-select
|
||
class="w-100"
|
||
v-model="row[0][row[1].id]"
|
||
filterable
|
||
:clearable="true"
|
||
placeholder="请选择"
|
||
@change="(val) => sonSelectChangeHandle(val, row)"
|
||
>
|
||
<el-option
|
||
v-for="(el, index) in concreteTypeOptions[
|
||
row[0]['parameterType']
|
||
]"
|
||
:key="el.id"
|
||
:label="el.label"
|
||
:value="el.id"
|
||
>
|
||
</el-option>
|
||
</el-select>
|
||
</template>
|
||
</baseTableForm>
|
||
<div class="add">
|
||
<el-link
|
||
type="primary"
|
||
@click="addTableData(bodyExitTableInfo.tableData)"
|
||
:underline="false"
|
||
>+ 添加属性
|
||
</el-link
|
||
>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<template v-if="activeIndex === '5'">
|
||
<apiDebugging :queryTableInfo="queryTableInfo.tableData" :bodyEntTableInfo="bodyEntTableInfo.tableData"
|
||
:bodyExitTableInfo="bodyExitTableInfo.tableData" :stepZeroForm="stepZeroForm"
|
||
:stepOneForm="stepOneForm" :headersTableInfo="headersTableInfo.tableData"
|
||
></apiDebugging>
|
||
</template>
|
||
<template v-if="activeIndex === '6'">
|
||
<div style="margin-top: 30px">
|
||
<baseNewForm
|
||
refName="returnedFormName"
|
||
ref="returnedFormName"
|
||
:spanNumber="24"
|
||
:formRow="returnedFormRow"
|
||
:ruleForm="returnedForm"
|
||
:isFunBtn="false"
|
||
>
|
||
</baseNewForm>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
|
||
</div>
|
||
<baseRightDialog
|
||
:dialogVisible="rightDialog"
|
||
title="JSON导入"
|
||
@handleClose="dialoghandleClose"
|
||
@handleConfirmClick="JSONCommit"
|
||
:commitLoading="importLoading"
|
||
>
|
||
<div class="top" style="width: 90%; margin: 20px auto">
|
||
<vue-json-editor
|
||
v-model="resultInfo"
|
||
:showBtns="false"
|
||
:mode="'code'"
|
||
@json-change="onJsonChange"
|
||
@json-save="onJsonSave"
|
||
@has-error="onError"
|
||
/>
|
||
</div>
|
||
</baseRightDialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import baseCascader from './compoments/baseCascader/index.vue'
|
||
import vueJsonEditor from 'vue-json-editor'
|
||
import baseRightDialog from './compoments/baseRightDialog'
|
||
import { getApiModuleApi } from '@/api/apiChunks/index.js'
|
||
import baseNewForm from './compoments/baseNewForm.vue'
|
||
import baseTableForm from './compoments/baseTableForm_v2.vue'
|
||
import { v4 as uuidv4 } from 'uuid'
|
||
import apiDebugging from '@/views/applicationList/apiList/apiDebugging.vue'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
importLoading: false,
|
||
commitLoading: false,
|
||
authQueryOut: [],
|
||
selectprops: {
|
||
label: 'parameterName',
|
||
value: 'parameterName',
|
||
expandTrigger: 'hover'
|
||
}, //select label value配置
|
||
resultInfo: {
|
||
a: 'b'
|
||
},
|
||
rightDialog: false,
|
||
active: 0,//步骤控制
|
||
stepZeroformRow: [
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: 'API名称',
|
||
maxlength: 50,
|
||
id: 'apiName',
|
||
row: 24,
|
||
required: true,
|
||
disabled: !this.$route.query.add
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'textrea',
|
||
title: 'API功能描述',
|
||
maxlength: 200,
|
||
id: 'apiRemark',
|
||
row: 24
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: 'API应用',
|
||
id: 'appName',
|
||
row: 24,
|
||
required: false,
|
||
editDisable: true,
|
||
disabled: true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '模块',
|
||
id: 'catalogueName',
|
||
row: 24,
|
||
required: false,
|
||
editDisable: true,
|
||
disabled: true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'radio',
|
||
title: 'API是否需要认证',
|
||
id: 'needLogin',
|
||
row: 24,
|
||
required: true,
|
||
options: [
|
||
{
|
||
label: '是',
|
||
id: '1'
|
||
},
|
||
{
|
||
label: '否',
|
||
id: '2'
|
||
}
|
||
]
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'newSelect',
|
||
title: '认证接口',
|
||
id: 'authenticationPort',
|
||
row: 24,
|
||
show: true,
|
||
required: true
|
||
}
|
||
]
|
||
}
|
||
], //步骤1表
|
||
stepZeroForm: {
|
||
needLogin: '1',
|
||
enableAccessEntry: ['2']
|
||
}, //步骤1表（数据）
|
||
stepOneformRow: [
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '目标地址',
|
||
maxlength: 200,
|
||
id: 'destinationAddress',
|
||
pattern: '',
|
||
message: 'URL或协议不合法',
|
||
row: 24,
|
||
required: true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'select',
|
||
title: '请求编码',
|
||
id: 'requestCoding',
|
||
row: 24,
|
||
required: true,
|
||
options: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'select',
|
||
title: '请求方法',
|
||
id: 'requestMethod',
|
||
row: 24,
|
||
required: true,
|
||
options: []
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'num',
|
||
title: '超出时间',
|
||
id: 'timeoutPeriod',
|
||
row: 24,
|
||
min: 1,
|
||
max: 600000,
|
||
maxlength: 50,
|
||
required: true,
|
||
message: 'ms'
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'num',
|
||
title: '限流',
|
||
maxlength: 50,
|
||
id: 'currentLimiting',
|
||
min: 1,
|
||
row: 24,
|
||
max: 1000,
|
||
required: true,
|
||
message: 'TPS'
|
||
}
|
||
]
|
||
}
|
||
],//步骤2表
|
||
stepOneForm: {
|
||
requestCoding: '1',
|
||
timeoutPeriod: 10000,
|
||
currentLimiting: 100,
|
||
requestMethod: '1'
|
||
}, //步骤2表（数据）
|
||
stepThreeRadio: 1, //没用了（穿透配置）
|
||
stepThreeRadioOptions: [
|
||
{
|
||
label: 'query透传',
|
||
id: 1
|
||
},
|
||
{
|
||
label: '包装data透传',
|
||
id: 2
|
||
}
|
||
],//没用了（穿透配置）
|
||
funData: [
|
||
{
|
||
type: 'addattr',
|
||
text: '添加属性',
|
||
color: '#5a9cf8'
|
||
},
|
||
{
|
||
type: 'dele',
|
||
text: '删除',
|
||
color: '#e47470'
|
||
}
|
||
],//表单操作属性
|
||
queryTableInfo: {
|
||
id: 'queryIn',
|
||
tableData: [],
|
||
detailFields: [
|
||
{
|
||
type: 'input',
|
||
title: '参数名称',
|
||
id: 'parameterName',
|
||
width: 250,
|
||
maxlength: 50
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '参数类型',
|
||
id: 'parameterType'
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '具体类型',
|
||
id: 'concreteType'
|
||
},
|
||
{
|
||
type: 'switch',
|
||
title: '必选',
|
||
id: 'required',
|
||
width: 80
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '长度',
|
||
id: 'length',
|
||
width: 100,
|
||
maxlength: 50
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '示例',
|
||
id: 'example',
|
||
maxlength: 50
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '描述',
|
||
id: 'description',
|
||
maxlength: 50
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '文档顺序',
|
||
id: 'sorts',
|
||
width: 100,
|
||
maxlength: 50
|
||
}
|
||
]
|
||
}, //query表单信息
|
||
bodyEntTableInfo: {
|
||
id: 'bodyIn',
|
||
tableData: [
|
||
{
|
||
id: uuidv4(),
|
||
parameterName: 'body',
|
||
first: true
|
||
}
|
||
],
|
||
detailFields: [
|
||
{
|
||
type: 'input',
|
||
title: '参数名称',
|
||
id: 'parameterName',
|
||
width: 250
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '参数类型',
|
||
id: 'parameterType'
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '具体类型',
|
||
id: 'concreteType'
|
||
},
|
||
{
|
||
type: 'switch',
|
||
title: '必选',
|
||
id: 'required',
|
||
width: 80
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '长度',
|
||
id: 'length',
|
||
width: 100
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '示例',
|
||
id: 'example'
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '描述',
|
||
id: 'description'
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '文档顺序',
|
||
id: 'sorts',
|
||
width: 100
|
||
}
|
||
]
|
||
}, //body入参
|
||
bodyExitTableInfo: {
|
||
id: 'bodyOut',
|
||
tableData: [],
|
||
detailFields: [
|
||
{
|
||
type: 'input',
|
||
title: '参数名称',
|
||
id: 'parameterName',
|
||
width: 250
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '参数类型',
|
||
id: 'parameterType'
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '具体类型',
|
||
id: 'concreteType'
|
||
},
|
||
{
|
||
type: 'switch',
|
||
title: '必选',
|
||
id: 'required',
|
||
width: 80
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '长度',
|
||
id: 'length',
|
||
width: 100
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '示例',
|
||
id: 'example'
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '描述',
|
||
id: 'description'
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '文档顺序',
|
||
id: 'sorts',
|
||
width: 100
|
||
}
|
||
]
|
||
}, //body出参
|
||
headersTableInfo: {
|
||
id: 'headerIn',
|
||
tableData: [],
|
||
detailFields: [
|
||
{
|
||
type: 'input',
|
||
title: '参数名称',
|
||
id: 'parameterName',
|
||
width: 250
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '参数类型',
|
||
id: 'parameterType'
|
||
},
|
||
{
|
||
type: 'select',
|
||
title: '具体类型',
|
||
id: 'concreteType'
|
||
},
|
||
{
|
||
type: 'switch',
|
||
title: '必选',
|
||
id: 'required',
|
||
width: 80
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '长度',
|
||
id: 'length',
|
||
width: 100
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '示例',
|
||
id: 'example'
|
||
},
|
||
{
|
||
type: 'input',
|
||
title: '描述',
|
||
id: 'description'
|
||
},
|
||
{
|
||
type: 'number',
|
||
title: '文档顺序',
|
||
id: 'sorts',
|
||
width: 100
|
||
}
|
||
]
|
||
}, //头部
|
||
parameterTypeOptions: [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
},
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '基本列表',
|
||
id: 'fundamentallist'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
],
|
||
headerparameterTypeOptions: [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
}
|
||
], //头部options配置
|
||
concreteTypeOptions: {
|
||
fundamental: [
|
||
{
|
||
label: 'String',
|
||
id: 'String'
|
||
},
|
||
{
|
||
label: 'Int',
|
||
id: 'Number'
|
||
},
|
||
{
|
||
label: 'Long',
|
||
id: 'Long'
|
||
},
|
||
{
|
||
label: 'Float',
|
||
id: 'Float'
|
||
},
|
||
{
|
||
label: 'Double',
|
||
id: 'Double'
|
||
},
|
||
{
|
||
label: 'Boolean',
|
||
id: 'Boolean'
|
||
}
|
||
],
|
||
complex: [
|
||
{
|
||
label: 'Object',
|
||
id: 'Object'
|
||
},
|
||
{
|
||
label: 'Map',
|
||
id: 'Map'
|
||
}
|
||
],
|
||
fundamentallist: [
|
||
{
|
||
label: 'String',
|
||
id: 'String'
|
||
},
|
||
{
|
||
label: 'Int',
|
||
id: 'Number'
|
||
},
|
||
{
|
||
label: 'Long',
|
||
id: 'Long'
|
||
},
|
||
{
|
||
label: 'Float',
|
||
id: 'Float'
|
||
},
|
||
{
|
||
label: 'Double',
|
||
id: 'Double'
|
||
},
|
||
{
|
||
label: 'Boolean',
|
||
id: 'Boolean'
|
||
}
|
||
],
|
||
complexlist: [
|
||
{
|
||
label: 'Object',
|
||
id: 'ObjectCom'
|
||
}
|
||
],
|
||
authport: [
|
||
{
|
||
label: 'String',
|
||
id: 'String'
|
||
},
|
||
{
|
||
label: 'Int',
|
||
id: 'Int'
|
||
},
|
||
{
|
||
label: 'Long',
|
||
id: 'Long'
|
||
},
|
||
{
|
||
label: 'Float',
|
||
id: 'Float'
|
||
},
|
||
{
|
||
label: 'Double',
|
||
id: 'Double'
|
||
},
|
||
{
|
||
label: 'Boolean',
|
||
id: 'Boolean'
|
||
}
|
||
]
|
||
},
|
||
bodyOutOptions: [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
},
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '基本列表',
|
||
id: 'fundamentallist'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
], //出参options配置
|
||
importData: [],
|
||
importFlag: true,
|
||
activeIndex: '1',//选项卡序号
|
||
bodyOptions: [
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
],
|
||
bodyImport: false,//导入JSON是否为body
|
||
returnedForm: {},//返回值
|
||
returnedFormRow: [
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '返回成功字段',
|
||
maxlength: 200,
|
||
id: 'returnSuccessField',
|
||
row: 24,
|
||
required: true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '返回成功值',
|
||
maxlength: 200,
|
||
id: 'returnSuccessValue',
|
||
row: 24,
|
||
required: true
|
||
}
|
||
]
|
||
},
|
||
{
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '返回描述字段',
|
||
maxlength: 200,
|
||
id: 'returnMsg',
|
||
row: 24,
|
||
required: true
|
||
}
|
||
]
|
||
}
|
||
]//
|
||
}
|
||
},
|
||
methods: {
|
||
// 选项卡点击事件
|
||
handleSelect(key, keyPath) {
|
||
this.activeIndex = key
|
||
},
|
||
onChangeRadio(val, index, indexRow, row) {
|
||
if (row.id === 'needLogin') {
|
||
if (val == 1) {
|
||
this.stepZeroformRow[5]['elCol'][0]['show'] = true
|
||
} else {
|
||
this.stepZeroformRow[5]['elCol'][0]['show'] = false
|
||
this.stepZeroForm['authenticationPort'] = ''
|
||
}
|
||
}
|
||
},
|
||
jsonImportSwitch(data, flag, body = false) {
|
||
this.importFlag = flag
|
||
this.importData = data
|
||
this.rightDialog = true
|
||
this.bodyImport = body
|
||
},
|
||
JSONCommit() {
|
||
this.importLoading = true
|
||
if (this.checkJson()) {
|
||
let resultArr = []
|
||
// this.importData.push(this.JSONDataHandle(resultObj, this.resultInfo));
|
||
if (!this.JSONDataHandle(resultArr, this.resultInfo, this.importFlag, this.bodyImport)) {
|
||
this[this.importData].tableData = []
|
||
resultArr.forEach((item) => this[this.importData].tableData.push(item))
|
||
this.$message({
|
||
type: 'success',
|
||
message: '导入成功'
|
||
})
|
||
this.dialoghandleClose()
|
||
}
|
||
}
|
||
this.importLoading = false
|
||
},
|
||
JSONDataHandle(resultArr, obj, flag = true, bodyImport = false) {
|
||
if (bodyImport) {
|
||
if (obj instanceof Array) {
|
||
let resultObj = {
|
||
id: uuidv4(),
|
||
first: true,
|
||
parameterName: 'body',
|
||
parameterType: 'complexlist',
|
||
concreteType: 'ObjectCom',
|
||
children: []
|
||
}
|
||
resultArr.push(resultObj)
|
||
this.JSONDataHandle(resultArr[0].children, obj[0])
|
||
} else {
|
||
let resultObj = {
|
||
id: uuidv4(),
|
||
first: true,
|
||
parameterName: 'body',
|
||
parameterType: 'complex',
|
||
concreteType: 'Object',
|
||
children: []
|
||
}
|
||
resultArr.push(resultObj)
|
||
this.JSONDataHandle(resultArr[0].children, obj)
|
||
}
|
||
} else {
|
||
return Object.keys(obj).some((item) => {
|
||
let resultObj = {}
|
||
if (typeof obj[item] == 'object' && obj[item] != null) {
|
||
if (!flag) {
|
||
this.$message({
|
||
type: 'error',
|
||
message: 'Heardes不支持导入object类型'
|
||
})
|
||
return true
|
||
}
|
||
if (obj[item] instanceof Array) {
|
||
if (typeof obj[item][0] === 'object' && obj[item][0] != null) {
|
||
resultObj['parameterType'] = 'complexlist'
|
||
resultObj['concreteType'] = 'ObjectCom'
|
||
resultObj['parameterName'] = item
|
||
resultObj['id'] = uuidv4()
|
||
resultObj['children'] = []
|
||
let tempArr = resultObj['children']
|
||
resultArr.push(resultObj)
|
||
this.JSONDataHandle(tempArr, obj[item][0])
|
||
} else {
|
||
resultObj['parameterType'] = 'fundamentallist'
|
||
resultObj['concreteType'] = 'String'
|
||
resultObj['example'] = obj[item][0]
|
||
resultObj['parameterName'] = item
|
||
resultObj['id'] = uuidv4()
|
||
let tempArr = resultObj['children']
|
||
resultArr.push(resultObj)
|
||
}
|
||
} else {
|
||
resultObj['concreteType'] = 'Object'
|
||
resultObj['parameterName'] = item
|
||
resultObj['parameterType'] = 'complex'
|
||
resultObj['id'] = uuidv4()
|
||
resultObj['children'] = []
|
||
let tempArr = resultObj['children']
|
||
resultArr.push(resultObj)
|
||
this.JSONDataHandle(tempArr, obj[item])
|
||
}
|
||
} else {
|
||
let type = Object.prototype.toString.call(obj[item]).slice(8, -1)
|
||
let concreteType
|
||
if (type != 'Null') {
|
||
concreteType = type
|
||
resultObj['example'] = obj[item] !== '' ? obj[item].toString() : ''
|
||
} else {
|
||
concreteType = 'String'
|
||
resultObj['example'] = null
|
||
}
|
||
resultObj['concreteType'] = concreteType
|
||
resultObj['parameterName'] = item
|
||
resultObj['parameterType'] = 'fundamental'
|
||
resultObj['id'] = uuidv4()
|
||
resultArr.push(resultObj)
|
||
}
|
||
})
|
||
}
|
||
|
||
},
|
||
dialoghandleClose() {
|
||
this.rightDialog = false
|
||
this.resultInfo = {}
|
||
this.importFlag = false
|
||
},
|
||
// 父下拉框改变处理
|
||
fatherSelectChangeHandle(row) {
|
||
if (row[0].concreteType) {
|
||
row[0].concreteType = ''
|
||
}
|
||
if (row[0] && row[0].children) {
|
||
this.$delete(row[0], 'children')
|
||
}
|
||
if (row[0].example) {
|
||
row[0].example = ''
|
||
}
|
||
},
|
||
// 子下拉框改变处理
|
||
sonSelectChangeHandle(val, row) {
|
||
if (
|
||
val != 'Object' &&
|
||
val != 'ObjectCom' &&
|
||
val != 'Map' &&
|
||
row[0].children
|
||
) {
|
||
this.$delete(row[0], 'children')
|
||
}
|
||
if (row[0].example) {
|
||
row[0].example = ''
|
||
}
|
||
},
|
||
async APITestHandle() {
|
||
},
|
||
// 当为编辑模式时拿数据
|
||
async getEditInfo() {
|
||
console.log(this.$route.query.apiId, 'id')
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'sysApplicationService',
|
||
as: 'application',
|
||
dj: 'getAppApi'
|
||
},
|
||
{ id: this.$route.query.apiId }
|
||
)
|
||
if (res.status == 200) {
|
||
let obj0 = {}
|
||
this.stepZeroformRow.push({
|
||
elCol: [
|
||
{
|
||
type: 'input',
|
||
title: '接口编码',
|
||
id: 'apiCode',
|
||
row: 24,
|
||
required: false,
|
||
editDisable: true,
|
||
disabled: true
|
||
}
|
||
]
|
||
})
|
||
obj0['apiName'] = res.attribute.apiName
|
||
obj0['catalogueId'] = res.attribute.catalogueId
|
||
obj0['catalogueName'] = res.attribute.catalogueName
|
||
obj0['appName'] = res.attribute.appName
|
||
obj0['apiRemark'] = res.attribute.apiRemark
|
||
obj0['appId'] = res.attribute.appId
|
||
obj0['needLogin'] = res.attribute.needLogin
|
||
obj0['apiCode'] = res.attribute.apiCode
|
||
if (res.attribute.needLogin == 2) {
|
||
this.stepZeroformRow[5]['elCol'][0]['show'] = false
|
||
} else {
|
||
this.stepZeroformRow[5]['elCol'][0]['show'] = true
|
||
}
|
||
// this.stepZeroformRow[6]["elCol"][0]["show"] = false;
|
||
obj0['authenticationPort'] = res.attribute.authenticationPort
|
||
let obj1 = {}
|
||
obj1['destinationAddress'] = res.attribute.destinationAddress
|
||
obj1['requestCoding'] = res.attribute.requestCoding
|
||
obj1['requestMethod'] = res.attribute.requestMethod
|
||
obj1['timeoutPeriod'] = res.attribute.timeoutPeriod
|
||
obj1['currentLimiting'] = res.attribute.currentLimiting
|
||
this.stepZeroForm = obj0
|
||
this.stepOneForm = obj1
|
||
this.$set(this.returnedForm, 'returnSuccessField', res.attribute.returnSuccessField)
|
||
this.$set(this.returnedForm, 'returnSuccessValue', res.attribute.returnSuccessValue)
|
||
this.$set(this.returnedForm, 'returnMsg', res.attribute.returnMsg)
|
||
if (JSON.parse(res.attribute.queryIn) instanceof Array) {
|
||
this.queryTableInfo.tableData = JSON.parse(res.attribute.queryIn)
|
||
}
|
||
if (JSON.parse(res.attribute.bodyIn) instanceof Array) {
|
||
this.bodyEntTableInfo.tableData = JSON.parse(res.attribute.bodyIn)
|
||
}
|
||
if (JSON.parse(res.attribute.bodyOut) instanceof Array) {
|
||
this.bodyExitTableInfo.tableData = JSON.parse(res.attribute.bodyOut)
|
||
}
|
||
if (JSON.parse(res.attribute.headerIn) instanceof Array) {
|
||
this.headersTableInfo.tableData = JSON.parse(res.attribute.headerIn)
|
||
}
|
||
}
|
||
},
|
||
async initRequestCoding() {
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'generalServiceImpl',
|
||
as: 'dictionaryshop',
|
||
dj: 'selectDictionaryshop'
|
||
},
|
||
{
|
||
tab_name: 'sys_app_api',
|
||
column_name: 'request_coding'
|
||
}
|
||
)
|
||
if (res.status == 200) {
|
||
res.attribute.forEach((item) => {
|
||
this.stepOneformRow[1].elCol[0].options.push({
|
||
id: item.column_value,
|
||
label: item.column_content
|
||
})
|
||
})
|
||
}
|
||
},
|
||
async initRequestMethod() {
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'generalServiceImpl',
|
||
as: 'dictionaryshop',
|
||
dj: 'selectDictionaryshop'
|
||
},
|
||
{
|
||
tab_name: 'sys_app_api',
|
||
column_name: 'request_method'
|
||
}
|
||
)
|
||
if (res.status == 200) {
|
||
res.attribute.forEach((item) => {
|
||
this.stepOneformRow[2].elCol[0].options.push({
|
||
id: item.column_value,
|
||
label: item.column_content
|
||
})
|
||
})
|
||
}
|
||
},
|
||
// 点击提交数据处理
|
||
async commit() {
|
||
// this.commitLoading = true;
|
||
if (!this.returnedForm.returnSuccessField) {
|
||
this.$vmNews('请输入返回成功字段')
|
||
this.activeIndex = '6'
|
||
return
|
||
}
|
||
if (!this.returnedForm.returnSuccessValue) {
|
||
this.$vmNews('请输入返回成功值')
|
||
this.activeIndex = 6
|
||
return
|
||
}
|
||
if (!this.returnedForm.returnMsg) {
|
||
this.$vmNews('请输入返回成功值')
|
||
this.activeIndex = 6
|
||
return
|
||
}
|
||
let obj = {
|
||
apiStatus: 1,
|
||
appId: this.$route.query.id,
|
||
catalogueId: this.$route.query.catalogueId,
|
||
...this.stepZeroForm,
|
||
...this.stepOneForm,
|
||
...this.returnedForm
|
||
}
|
||
console.log(this.$route.query, 'query')
|
||
obj[this.queryTableInfo.id] = this.queryTableInfo.tableData
|
||
obj[this.bodyEntTableInfo.id] = this.bodyEntTableInfo.tableData
|
||
obj[this.bodyExitTableInfo.id] = this.bodyExitTableInfo.tableData
|
||
obj[this.headersTableInfo.id] = this.headersTableInfo.tableData
|
||
obj['bodyInType'] = 1
|
||
obj['parameterPassingMode'] = 1
|
||
if (this.$route.query.add) {
|
||
console.log(obj)
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'sysApplicationService',
|
||
as: 'application',
|
||
dj: 'saveApi'
|
||
},
|
||
obj
|
||
)
|
||
if (res.status == 200) {
|
||
this.$message({
|
||
message: '保存接口成功！',
|
||
type: 'success'
|
||
})
|
||
this.$router.back()
|
||
}
|
||
} else {
|
||
obj['id'] = this.$route.query.apiId
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'sysApplicationService',
|
||
as: 'application',
|
||
dj: 'updateApi'
|
||
},
|
||
obj
|
||
)
|
||
if (res.status == 200) {
|
||
this.$message({
|
||
message: '编辑接口成功！',
|
||
type: 'success'
|
||
})
|
||
this.$router.back()
|
||
}
|
||
}
|
||
this.commitLoading = false
|
||
},
|
||
// 添加行
|
||
addTableData(tabledata, flag = false) {
|
||
if (flag && tabledata.length) {
|
||
this.$vmNews('body入参只允许添加一行属性', 'warning')
|
||
return
|
||
} else {
|
||
if (flag) {
|
||
tabledata.push({ id: uuidv4(), first: true, parameterName: 'body' })
|
||
} else {
|
||
tabledata.push({ id: uuidv4() })
|
||
}
|
||
}
|
||
},
|
||
// 删除行辅助函数（递归）
|
||
idWatch(arr, id) {
|
||
arr.some((item, index) => {
|
||
if (item.id === id) {
|
||
arr.splice(index, 1)
|
||
return true
|
||
} else if (item.children && item.children.length) {
|
||
this.idWatch(item.children, id)
|
||
} else {
|
||
return false
|
||
}
|
||
})
|
||
},
|
||
// 表格操作按钮
|
||
tableButtonHandle(row, item, data) {
|
||
if (item.type === 'dele') {
|
||
this.$confirm('确认删除？')
|
||
.then(() => {
|
||
this.idWatch(data, row.id)
|
||
})
|
||
.catch(() => {
|
||
})
|
||
} else if (item.type === 'addattr') {
|
||
console.log(row)
|
||
if (
|
||
row.concreteType != 'Object' &&
|
||
row.concreteType != 'Map' &&
|
||
row.concreteType != 'ObjectCom'
|
||
) {
|
||
this.$notify({
|
||
title: '添加失败',
|
||
message: '具体类型为Object或Map时才能生成子集!',
|
||
type: 'error'
|
||
})
|
||
return
|
||
} else if (!row.children) {
|
||
this.$set(row, 'children', [])
|
||
row.children.push({ id: uuidv4() })
|
||
} else {
|
||
row.children.push({ id: uuidv4() })
|
||
}
|
||
this.$notify({
|
||
title: '添加成功',
|
||
message: '添加成功！',
|
||
type: 'success'
|
||
})
|
||
}
|
||
},
|
||
// 添加行
|
||
queryTableAddHandle(tableInfo) {
|
||
tableInfo.tableData.push({})
|
||
},
|
||
queryTableDeleHandle() {
|
||
},
|
||
// 点击取消
|
||
backActiveHandle() {
|
||
this.active--
|
||
},
|
||
// 点击下一步
|
||
nextActiveHanlde() {
|
||
if (this.active + 1 > 2) return
|
||
if (this.active == 0) {
|
||
this.$refs.stepZeroform.submitForm()
|
||
} else if (this.active == 1) {
|
||
this.$refs.stepOneform.submitForm()
|
||
}
|
||
},
|
||
// 点击取消
|
||
backPageHandle() {
|
||
this.$router.back()
|
||
},
|
||
// 点击下一步
|
||
onSubmitHandle(form) {
|
||
if (this.active == 0) {
|
||
if (this.stepZeroForm.needLogin == 1) {
|
||
// 如果需要认证点击下一步
|
||
// 请求认证接口拿到bodyOut
|
||
this.getAuthInfo(this.stepZeroForm.authenticationPort)
|
||
// 更改select选项
|
||
this.headerparameterTypeOptions = [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
},
|
||
{
|
||
label: '认证类型',
|
||
id: 'authport'
|
||
}
|
||
]
|
||
this.parameterTypeOptions = [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
},
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '基本列表',
|
||
id: 'fundamentallist'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
},
|
||
{
|
||
label: '认证类型',
|
||
id: 'authport'
|
||
}
|
||
]
|
||
this.bodyOptions = [
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
]
|
||
} else {
|
||
// 如果不是认证点击下一步
|
||
this.headerparameterTypeOptions = [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
}
|
||
]
|
||
this.parameterTypeOptions = [
|
||
{
|
||
label: '基本类型',
|
||
id: 'fundamental'
|
||
},
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '基本列表',
|
||
id: 'fundamentallist'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
]
|
||
this.bodyOptions = [
|
||
{
|
||
label: '复杂类型',
|
||
id: 'complex'
|
||
},
|
||
{
|
||
label: '复杂列表',
|
||
id: 'complexlist'
|
||
}
|
||
]
|
||
// 清空表格内带有认证的select
|
||
this.clearTableData()
|
||
}
|
||
}
|
||
this.$notify({
|
||
title: '成功',
|
||
message: '暂存成功！',
|
||
type: 'success'
|
||
})
|
||
this.active++
|
||
},
|
||
clearTableData() {
|
||
this.queryTableInfo.tableData = this.queryTableInfo.tableData.filter(
|
||
(item) => {
|
||
return item.parameterType != 'authport'
|
||
}
|
||
)
|
||
this.bodyEntTableInfo.tableData = this.bodyEntTableInfo.tableData.filter(
|
||
(item) => {
|
||
return item.parameterType != 'authport'
|
||
}
|
||
)
|
||
this.bodyExitTableInfo.tableData =
|
||
this.bodyExitTableInfo.tableData.filter((item) => {
|
||
return item.parameterType != 'authport'
|
||
})
|
||
this.headersTableInfo.tableData = this.headersTableInfo.tableData.filter(
|
||
(item) => {
|
||
return item.parameterType != 'authport'
|
||
}
|
||
)
|
||
},
|
||
//点击下一步如果有认证接口则请求
|
||
async getAuthInfo(id) {
|
||
const res = await getApiModuleApi(
|
||
{
|
||
tl: 'sysApplicationService',
|
||
as: 'application',
|
||
dj: 'getAppApi'
|
||
},
|
||
{ id }
|
||
)
|
||
console.log(res)
|
||
if (res.status == 200) {
|
||
this.authQueryOut = JSON.parse(res.attribute.bodyOut)
|
||
}
|
||
},
|
||
// 实时保存
|
||
onJsonChange(value) {
|
||
this.onJsonSave(value)
|
||
},
|
||
// json相关
|
||
onJsonSave(value) {
|
||
this.resultInfo = value
|
||
this.hasJsonFlag = true
|
||
},
|
||
// json相关（不用管）
|
||
onError(value) {
|
||
this.hasJsonFlag = false
|
||
},
|
||
// json相关（不用管）
|
||
checkJson() {
|
||
if (this.hasJsonFlag === false) {
|
||
alert('json验证失败')
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
baseNewForm,
|
||
baseTableForm,
|
||
baseRightDialog,
|
||
vueJsonEditor,
|
||
baseCascader,
|
||
apiDebugging
|
||
},
|
||
computed: {
|
||
funWidth() {
|
||
return this.funData.length * 90
|
||
}
|
||
},
|
||
mounted() {
|
||
this.initRequestCoding()
|
||
this.initRequestMethod()
|
||
if (!this.$route.query.add) {
|
||
this.getEditInfo()
|
||
} else {
|
||
this.$set(this.stepZeroForm, 'appId', this.$route.query.id)
|
||
this.$set(this.stepZeroForm, 'appName', this.$route.query.name)
|
||
this.$set(this.stepZeroForm, 'catalogueId', this.$route.query.catalogueId)
|
||
this.$set(this.stepZeroForm, 'catalogueName', this.$route.query.catalogueName)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
::v-deep .el-button {
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.wrap {
|
||
height: 100%;
|
||
overflow: scroll;
|
||
|
||
.step {
|
||
margin: 10px;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.step3 {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.formdata {
|
||
padding: 30px 10px;
|
||
margin: 10px;
|
||
background-color: #fff;
|
||
border-radius: 10px;
|
||
|
||
.content {
|
||
width: 50vw;
|
||
margin: 10px auto;
|
||
}
|
||
}
|
||
|
||
.nextbtn {
|
||
padding: 30 10px;
|
||
margin: 10px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.method {
|
||
margin: 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
padding: 30px 10px;
|
||
|
||
.title {
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
.tableBox {
|
||
margin: 10px;
|
||
border-radius: 10px;
|
||
background-color: #fff;
|
||
padding: 30px 10px;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.add {
|
||
margin-top: 30px;
|
||
border: 1px dotted #ccc;
|
||
text-align: center;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|