blob: 9923b258c89c9a67fc7cd6dd95d410289aa64e3e [file] [log] [blame]
<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
-->
<template>
<div v-if="showForm">
<div style="padding-left: 10px;padding-right: 10px;">
<div>
<v-timeline
align-top
dense
>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiNameShowLabel') }}</strong>
</div>
<div>{{ this.apiInfoData.apiDocName }}</div>
</div>
</v-timeline-item>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiPathShowLabel') }}</strong>
</div>
<div>{{ this.apiInfoData.apiModelClass }}#{{ this.apiInfoData.apiName }}</div>
</div>
</v-timeline-item>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiMethodParamInfoLabel') }}</strong>
</div>
<div>{{ this.apiInfoData.methodParamInfo || $t('apiDocsRes.apiForm.none') }}</div>
</div>
</v-timeline-item>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiRespDecShowLabel') }}</strong>
</div>
<div>
{{ this.apiInfoData.apiRespDec || $t('apiDocsRes.apiForm.none') }}
</div>
</div>
</v-timeline-item>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiVersionShowLabel') }}</strong>
</div>
<div>
{{ this.apiInfoData.apiVersion || $t('apiDocsRes.apiForm.none') }}
</div>
</div>
</v-timeline-item>
<v-timeline-item
color="cyan"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.apiDescriptionShowLabel') }}</strong>
</div>
<div>
{{ this.apiInfoData.description || $t('apiDocsRes.apiForm.none') }}
</div>
</div>
</v-timeline-item>
</v-timeline>
<v-form ref="form">
<v-select
v-model="formItemAsync"
:items="formItemAsyncSelectItems"
:label="$t('apiDocsRes.apiForm.isAsyncFormLabel')"
outline
readonly
></v-select>
<v-text-field
v-model="formItemInterfaceClassName"
:label="$t('apiDocsRes.apiForm.apiModuleFormLabel')"
outline
readonly
></v-text-field>
<v-text-field
v-model="formItemMethodName"
:label="$t('apiDocsRes.apiForm.apiFunctionNameFormLabel')"
outline
readonly
></v-text-field>
<v-text-field
v-model="formItemRegistryCenterUrl"
:label="$t('apiDocsRes.apiForm.registryCenterUrlFormLabel')"
placeholder="nacos://127.0.0.1:8848"
outline
></v-text-field>
<div style="marginTop: 20px;"
v-for="item in this.publicFormsArray"
:key="item.get('name')">
<v-layout row wrap>
<v-flex lg4>
<v-card style="height: 300px; overflowY: auto; overflowX: hidden">
<v-card-text>
<v-timeline
align-top
dense
>
<v-timeline-item
color="deep-purple lighten-1"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.paramNameLabel') }}</strong>
</div>
<div style="wordBreak: break-word">{{item.get('name')}}</div>
</div>
</v-timeline-item>
<v-timeline-item
color="deep-purple lighten-1"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.paramPathLabel') }}</strong>
</div>
<div style="wordBreak: break-word">[{{item.get('paramIndex')}}]{{item.get('paramType')}}#{{item.get('name')}}</div>
</div>
</v-timeline-item>
<v-timeline-item
color="deep-purple lighten-1"
small
>
<div>
<div class="font-weight-normal">
<strong>{{ $t('apiDocsRes.apiForm.paramDescriptionLabel') }}</strong>
</div>
<div style="wordBreak: break-word">{{item.get('description') || $t('apiDocsRes.apiForm.none')}}</div>
</div>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
</v-flex>
<v-flex lg8>
<apiFormItem :formItemInfo="item" :formValues="formValues" />
</v-flex>
</v-layout>
</div>
<div style="marginTop: 20px;">
<v-btn
block
elevation="2"
x-large
color="info"
@click="doTestApi()"
>{{ $t('apiDocsRes.apiForm.doTestBtn') }}</v-btn>
</div>
</v-form>
</div>
<div>
<v-system-bar
window
dark
style="marginTop: 30px;"
>
<span>{{ $t('apiDocsRes.apiForm.responseLabel') }}</span>
</v-system-bar>
<v-layout row wrap>
<v-flex lg6>
<div>
<v-system-bar
window
dark
color="primary"
>
<span>{{ $t('apiDocsRes.apiForm.responseExampleLabel') }}</span>
</v-system-bar>
</div>
<div style="marginTop: 10px;">
<jsonViewer
:value="getJsonOrString(this.apiInfoData.response)"
copyable
boxed
sort></jsonViewer>
</div>
</v-flex>
<v-flex lg6>
<div>
<v-system-bar
window
dark
color="teal"
>
<span>{{ $t('apiDocsRes.apiForm.apiResponseLabel') }}</span>
</v-system-bar>
</div>
<div style="marginTop: 10px;">
<jsonViewer
:value="responseData"
copyable
boxed
sort></jsonViewer>
</div>
</v-flex>
</v-layout>
</div>
</div>
</div>
</template>
<script>
import JsonViewer from 'vue-json-viewer'
import ApiFormItem from '@/components/apiDocs/ApiFormItem'
export default {
name: 'ApiForm',
components: {
JsonViewer,
ApiFormItem
},
props: {
formInfo: {
type: Object,
default: function () {
return {}
}
}
},
data: () => {
return {
showForm: false,
formItemAsyncSelectItems: [true, false],
formItemAsync: false,
formItemInterfaceClassName: '',
formItemMethodName: '',
formItemRegistryCenterUrl: '',
apiInfoData: {},
publicFormsArray: [],
responseData: '',
formValues: new Map()
}
},
watch: {
formInfo: 'changeFormInfo'
},
methods: {
getJsonOrString (str) {
if (!str) return ''
try {
return JSON.parse(str)
} catch (error) {
return str
}
},
changeFormInfo (curVal) {
this.publicFormsArray = []
this.formValues = new Map()
this.responseData = ''
this.$axios
.get('/docs/apiParamsResp', {
params: {
dubboIp: curVal.dubboIp,
dubboPort: curVal.dubboPort,
apiName: curVal.moduleClassName + '.' + curVal.apiName
}
})
.then((response) => {
if (response && response.data && response.data !== '') {
this.apiInfoData = JSON.parse(response.data)
this.formItemAsync = this.apiInfoData.async
this.formItemInterfaceClassName = this.apiInfoData.apiModelClass
this.formItemMethodName = this.apiInfoData.apiName
var params = this.apiInfoData.params
const formsArray = []
for (var i = 0; i < params.length; i++) {
var paramItem = params[i]
if (paramItem.htmlType) {
// Has htmlType, that's a basic type
var formItem = new Map()
formItem.set('name', paramItem.name)
formItem.set('htmlType', paramItem.htmlType)
formItem.set('paramType', paramItem.paramType)
formItem.set('javaType', paramItem.paramType)
formItem.set('paramIndex', paramItem.paramIndex)
formItem.set('docName', paramItem.docName)
formItem.set('description', paramItem.description)
formItem.set('example', paramItem.example)
formItem.set('defaultValue', paramItem.defaultValue)
formItem.set('allowableValues', paramItem.allowableValues)
formItem.set('required', paramItem.required)
formsArray.push(formItem)
} else {
// No htmltype, that's an object
var paramInfoArray = paramItem.paramInfo
for (var j = 0; j < paramInfoArray.length; j++) {
var paramInfoItem = paramInfoArray[j]
// eslint-disable-next-line no-redeclare
var formItem = new Map()
formItem.set('name', paramInfoItem.name)
formItem.set('htmlType', paramInfoItem.htmlType)
formItem.set('paramType', paramItem.paramType)
formItem.set('javaType', paramInfoItem.javaType)
formItem.set('paramIndex', paramItem.paramIndex)
formItem.set('docName', paramInfoItem.docName)
formItem.set('description', paramInfoItem.description)
formItem.set('example', paramInfoItem.example)
formItem.set('defaultValue', paramInfoItem.defaultValue)
formItem.set(
'allowableValues',
paramInfoItem.allowableValues
)
formItem.set('subParamsJson', paramInfoItem.subParamsJson)
formItem.set('required', paramInfoItem.required)
formsArray.push(formItem)
}
}
}
this.publicFormsArray = formsArray
}
})
.catch((error) => {
console.log('error', error.message)
})
this.showForm = true
},
doTestApi () {
if (!this.$refs.form.validate()) {
return false
}
var tempMap = new Map()
this.formValues.forEach((value, key) => {
var elementIdSplited = key.split('@@')
var tempMapKey = elementIdSplited[0] + '@@' + elementIdSplited[1]
var tempMapValueArray = tempMap.get(tempMapKey)
if (!tempMapValueArray) {
tempMapValueArray = new Array()
tempMap.set(tempMapKey, tempMapValueArray)
}
var element = {}
element.key = key
element.value = value
tempMapValueArray.push(element)
})
var postData = []
tempMap.forEach((value, key) => {
var postDataItem = {}
postData[key.split('@@')[1]] = postDataItem
postDataItem.paramType = key.split('@@')[0]
var postDataItemValue = {}
postDataItem.paramValue = postDataItemValue
value.forEach(element => {
var elementKeySplited = element.key.split('@@')
var elementName = elementKeySplited[3]
if (elementKeySplited[4] === 'TEXT_AREA') {
if (element.value !== '') {
postDataItemValue[elementName] = element.value
}
} else {
var elementValue = element.value
postDataItemValue[elementName] = elementValue
}
})
})
if (this.formItemRegistryCenterUrl === '') {
this.formItemRegistryCenterUrl = 'dubbo://' + this.formInfo.dubboIp + ':' + this.formInfo.dubboPort
}
this.$axios({
url: '/docs/requestDubbo',
method: 'post',
params: {
async: this.formItemAsync,
interfaceClassName: this.formItemInterfaceClassName,
methodName: this.formItemMethodName,
registryCenterUrl: this.formItemRegistryCenterUrl,
version: this.apiInfoData.apiVersion || ''
},
headers: {
'Content-Type': 'application/json; charset=UTF-8'
},
data: JSON.stringify(postData)
}).catch(error => {
console.log(error)
}).then(response => {
this.responseData = response.data
})
}
},
mounted () {
}
}
</script>
<style scoped>
</style>