test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(接口测试): 重绘接口测试文档的样式 

重绘接口测试文档的样式
This commit is contained in:
song-tianyang 2022-03-02 18:11:39 +08:00 committed by CountryBuilder
parent 54e1dbaa20
commit 8bbf7fae56
17 changed files with 756 additions and 468 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
backend/src/main/java/io/metersphere/api/controller/ShareInfoController.java
View File

@ -9,9 +9,11 @@ import io.metersphere.api.service.ShareInfoService;
import io.metersphere.base.domain.ApiDefinitionWithBLOBs;
import io.metersphere.base.domain.ReportStatisticsWithBLOBs;
import io.metersphere.base.domain.ShareInfo;
import io.metersphere.base.domain.User;
import io.metersphere.commons.utils.LogUtil;
import io.metersphere.reportstatistics.dto.ReportStatisticsSaveRequest;
import io.metersphere.reportstatistics.service.ReportStatisticsService;
import io.metersphere.service.UserService;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
@ -34,6 +36,8 @@ public class ShareInfoController {
ApiDefinitionService apiDefinitionService;
@Resource
ReportStatisticsService reportStatisticsService;
@Resource
UserService userService;
@PostMapping("/selectApiSimpleInfo")
public List<ApiDocumentInfoDTO> list(@RequestBody ApiDocumentRequest request) {
@ -53,6 +57,7 @@ public class ShareInfoController {
//要根据ids的顺序进行返回排序
List<ApiDefinitionWithBLOBs> apiModels = apiDefinitionService.getBLOBs(request.getApiIdList());
Map<String, ApiDefinitionWithBLOBs> apiModelMaps = apiModels.stream().collect(Collectors.toMap(ApiDefinitionWithBLOBs::getId, a -> a, (k1, k2) -> k1));
Map<String, User> userIdMap = userService.queryName();
for (String id : request.getApiIdList()) {
ApiDefinitionWithBLOBs model = apiModelMaps.get(id);
if (model == null) {
@ -60,7 +65,7 @@ public class ShareInfoController {
model.setId(id);
model.setName(id);
}
ApiDocumentInfoDTO returnDTO = shareInfoService.conversionModelToDTO(model);
ApiDocumentInfoDTO returnDTO = shareInfoService.conversionModelToDTO(model,userIdMap);
returnList.add(returnDTO);
}
}
@ -72,7 +77,8 @@ public class ShareInfoController {
ApiDefinitionWithBLOBs apiModel = apiDefinitionService.getBLOBs(id);
ApiDocumentInfoDTO returnDTO = new ApiDocumentInfoDTO();
try {
returnDTO = shareInfoService.conversionModelToDTO(apiModel);
Map<String, User> userIdMap = userService.queryName();
returnDTO = shareInfoService.conversionModelToDTO(apiModel,userIdMap);
} catch (Exception e) {
LogUtil.error(e);
}

7
backend/src/main/java/io/metersphere/api/dto/share/ApiDocumentInfoDTO.java
View File

@ -18,8 +18,15 @@ public class ApiDocumentInfoDTO {
private String name;
private String status;
private String tags;
private String modules;
private String createUser;
private String responsibler;
private String desc;
private String requestHead;
private String urlParams;
private String restParams;
private String requestBodyParamType;
private String requestBodyFormData;
private String requestBodyStrutureData;

4
backend/src/main/java/io/metersphere/api/service/ApiModuleService.java
View File

@ -563,4 +563,8 @@ public class ApiModuleService extends NodeTreeService<ApiModuleDTO> {
example.createCriteria().andProjectIdEqualTo(projectId).andProtocolEqualTo(protocol).andStatusEqualTo("Trash");
return extApiDefinitionMapper.countByExample(example);
}
public String getModuleNameById(String moduleId) {
return extApiModuleMapper.getNameById(moduleId);
}
}

24
backend/src/main/java/io/metersphere/api/service/ShareInfoService.java
View File

@ -110,7 +110,7 @@ public class ShareInfoService {
return true;
}
public ApiDocumentInfoDTO conversionModelToDTO(ApiDefinitionWithBLOBs apiModel) {
public ApiDocumentInfoDTO conversionModelToDTO(ApiDefinitionWithBLOBs apiModel, Map<String,User> userIdMap) {
ApiDocumentInfoDTO apiInfoDTO = new ApiDocumentInfoDTO();
JSONArray previewJsonArray = new JSONArray();
if (apiModel != null) {
@ -120,6 +120,23 @@ public class ShareInfoService {
apiInfoDTO.setUri(apiModel.getPath());
apiInfoDTO.setStatus(apiModel.getStatus());
if(StringUtils.isNotEmpty(apiModel.getTags())){
JSONArray tagsArr = JSONArray.parseArray(apiModel.getTags());
List<String> tagList = new ArrayList<>();
for(int i = 0;i < tagsArr.size();i ++){
tagList.add(tagsArr.getString(i));
}
if(!tagList.isEmpty()){
apiInfoDTO.setTags(StringUtils.join(tagList,","));
}
}
apiInfoDTO.setResponsibler(userIdMap.get(apiModel.getUserId()) == null? apiModel.getUserId() : userIdMap.get(apiModel.getUserId()).getName());
apiInfoDTO.setCreateUser(userIdMap.get(apiModel.getCreateUser()) == null? apiModel.getCreateUser() : userIdMap.get(apiModel.getCreateUser()).getName());
apiInfoDTO.setDesc(apiModel.getDescription());
ApiModuleService apiModuleService = CommonBeanFactory.getBean(ApiModuleService.class);
apiInfoDTO.setModules(apiModuleService.getModuleNameById(apiModel.getModuleId()));
if (apiModel.getRequest() != null) {
JSONObject requestObj = this.genJSONObject(apiModel.getRequest());
if (requestObj != null) {
@ -150,6 +167,8 @@ public class ShareInfoService {
} catch (Exception e) {
}
}
//rest参数设置
JSONArray restParamArr = new JSONArray();
if (requestObj.containsKey("rest")) {
try {
//urlParam -- rest赋值
@ -157,13 +176,14 @@ public class ShareInfoService {
for (int index = 0; index < headArr.size(); index++) {
JSONObject headObj = headArr.getJSONObject(index);
if (headObj.containsKey("name")) {
urlParamArr.add(headObj);
restParamArr.add(headObj);
}
}
} catch (Exception e) {
}
}
apiInfoDTO.setUrlParams(urlParamArr.toJSONString());
apiInfoDTO.setRestParams(restParamArr.toJSONString());
//请求体参数类型
if (requestObj.containsKey("body")) {
try {

2
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.java
View File

@ -12,4 +12,6 @@ public interface ExtApiModuleMapper {
List<ApiModuleDTO> getNodeTreeByProjectId(@Param("projectId") String projectId, @Param("protocol") String protocol);
void updatePos(String id, Double pos);
String getNameById(String moduleId);
}

4
backend/src/main/java/io/metersphere/base/mapper/ext/ExtApiModuleMapper.xml
View File

@ -21,6 +21,10 @@
and api_module.protocol = #{protocol}
order by api_module.pos asc
</select>
<select id="getNameById" resultType="java.lang.String">
select name from api_module
where id = #{0}
</select>
<update id="updatePos">
update api_module set pos = #{pos} where id = #{id}

9
backend/src/main/java/io/metersphere/track/service/TestPlanReportService.java
View File

@ -3,6 +3,7 @@ package io.metersphere.track.service;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.esotericsoftware.minlog.Log;
import io.metersphere.api.dto.automation.TestPlanFailureApiDTO;
import io.metersphere.api.dto.automation.TestPlanFailureScenarioDTO;
import io.metersphere.api.service.ShareInfoService;
@ -53,8 +54,6 @@ import java.util.stream.Collectors;
@Transactional(rollbackFor = Exception.class)
public class TestPlanReportService {
Logger testPlanLog = LoggerFactory.getLogger("testPlanExecuteLog");
@Resource
TestPlanReportMapper testPlanReportMapper;
@Resource
@ -74,7 +73,6 @@ public class TestPlanReportService {
@Lazy
@Resource
TestPlanService testPlanService;
@Lazy
@Resource
TestPlanReportContentMapper testPlanReportContentMapper;
@Resource
@ -854,6 +852,7 @@ public class TestPlanReportService {
}
public TestPlanSimpleReportDTO getReport(String reportId) {
Log.info("----> SELECT REPORT: "+ reportId);
TestPlanReportContentExample example = new TestPlanReportContentExample();
example.createCriteria().andTestPlanReportIdEqualTo(reportId);
List<TestPlanReportContentWithBLOBs> testPlanReportContents = testPlanReportContentMapper.selectByExampleWithBLOBs(example);
@ -865,8 +864,11 @@ public class TestPlanReportService {
return null;
}
if (this.isDynamicallyGenerateReports(testPlanReportContent)) {
Log.info("----> GenerateReports: "+ JSONObject.toJSONString(testPlanReportContent));
testPlanReportContent = this.dynamicallyGenerateReports(testPlanReportContent);
Log.info("----> GenerateReports OVER: "+ JSONObject.toJSONString(testPlanReportContent));
}
Log.info("----> parse return object: "+ JSONObject.toJSONString(testPlanReportContent));
TestPlanSimpleReportDTO testPlanReportDTO = new TestPlanSimpleReportDTO();
BeanUtils.copyBean(testPlanReportDTO, testPlanReportContent);
if (StringUtils.isNotBlank(testPlanReportContent.getFunctionResult())) {
@ -914,6 +916,7 @@ public class TestPlanReportService {
testPlanReportDTO.setId(reportId);
TestPlanReport testPlanReport = testPlanReportMapper.selectByPrimaryKey(testPlanReportContent.getTestPlanReportId());
testPlanReportDTO.setName(testPlanReport.getName());
Log.info("----> SELECT REPORT OVER ");
return testPlanReportDTO;
}

183
frontend/src/business/components/api/definition/components/document/components/ApiInfoCollapse.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<div>
<el-row class="apiInfoRow">
<div class="blackFontClass">
<el-row>
<div class="tip" style="float: left">
<span>{{ title }}</span>
<span v-if="remarks" style="font-weight: 400;font-size: smaller;background: #F1F0F0;margin-left: 5px;">
{{ remarks }}
</span>
</div>
<div class="right-button">
<el-link v-if="active" @click="changeActive">
{{ $t('api_test.definition.document.close') }} <i class="el-icon-arrow-up"/>
</el-link>
<el-link v-if="!active" @click="changeActive">
{{ $t('api_test.definition.document.open') }} <i class="el-icon-arrow-down"/>
</el-link>
</div>
</el-row>
<el-collapse-transition>
<div v-show="active">
<div v-if="!showSlotCompnent">
<div v-if="isText">
<div class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="stringData">
</p>
<br/>
</div>
</div>
<div v-else-if="getJsonArr(stringData).length===0">
<div class="simpleFontClass" style="margin-top: 10px">
{{ $t('api_test.definition.document.data_set.none') }}
</div>
</div>
<div v-else>
<el-table border :show-header="true"
:data="getJsonArr(stringData)" class="test-content document-table">
<el-table-column v-for="item in tableColoumArr" :key="item.id"
:prop="item.prop"
:label="item.label"
show-overflow-tooltip/>
</el-table>
</div>
</div>
<slot name="request"></slot>
<slot name="response"></slot>
</div>
</el-collapse-transition>
</div>
</el-row>
</div>
</template>
<script>
export default {
name: "ApiInfoCollapse",
components: {},
data() {
return {
active: true,
tableColoumArr: [
{id: 1, prop: "name", label: this.$t('api_test.definition.document.table_coloum.name')},
{id: 2, prop: "isRequired", label: this.$t('api_test.definition.document.table_coloum.is_required')},
{id: 3, prop: "value", label: this.$t('api_test.definition.document.table_coloum.value')},
{id: 4, prop: "description", label: this.$t('api_test.definition.document.table_coloum.desc')},
],
};
},
props: {
title: String,
tableColoumType: String,
remarks: String,
isRequest: Boolean,
isResponse: Boolean,
isText:Boolean,
stringData: {
type: String,
default() {
return "{}";
}
},
},
activated() {
},
created: function () {
},
mounted() {
},
computed: {
showSlotCompnent() {
return this.isRequest || this.isResponse;
}
},
watch: {},
methods: {
getJsonArr(jsonString) {
let returnJsonArr = [];
if (jsonString === '无' || jsonString === null) {
return returnJsonArr;
}
let jsonArr = JSON.parse(jsonString);
//遍历，把必填项空的数据去掉
for (var index = 0; index < jsonArr.length; index++) {
var item = jsonArr[index];
if (item.name !== "" && item.name !== null) {
if (item.required) {
item.isRequired = "true";
} else {
item.isRequired = "false";
}
returnJsonArr.push(item);
}
}
return returnJsonArr;
},
changeActive() {
this.active = !this.active;
},
},
};
</script>
<style scoped>
.apiInfoRow {
margin: 10px 10px;
}
.apiInfoRow.el-row {
margin: 10px 10px;
}
.simpleFontClass {
font-weight: normal;
font-size: 14px;
margin-left: 10px;
}
.blackFontClass {
font-weight: bold;
font-size: 14px;
}
.document-table {
margin: 10px 0px 10px 10px;
width: auto;
}
.document-table /deep/ .el-table__row {
font-size: 12px;
font-weight: initial;
}
.document-table /deep/ .has-gutter {
font-size: 12px;
color: #404040;
}
.document-table /deep/ td {
border-right: 0px solid #EBEEF5
}
.document-table /deep/ th {
background-color: #FAFAFA;
border-right: 0px solid #EBEEF5
}
.right-button {
float: right;
}
.showDataDiv {
background-color: #F5F7F9;
margin: 10px 10px;
max-height: 300px;
overflow: auto;
}
</style>

392
frontend/src/business/components/api/definition/components/document/components/ApiInformation.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="baseDiv">
<div style="margin-bottom: 50px;border-bottom-width: 2px" ref="baseDiv">
<div style="font-size: 17px">
<el-popover
v-if="projectId"
@ -20,11 +20,6 @@
</span>
</div>
<!--api请求信息-->
<el-row class="apiInfoRow">
<div class="tip">
{{ $t('api_test.definition.document.request_info') }}
</div>
</el-row>
<el-row class="apiInfoRow">
<div class="simpleFontClass">
<el-tag size="medium"
@ -33,225 +28,59 @@
</el-tag>
{{ apiInfo.uri }}
</div>
<div class="attacInfo">
<el-row :gutter="10">
<el-col :span="6"> {{ $t('test_track.module.module') }} : {{ apiInfo.modules }}</el-col>
<el-col :span="6">{{ $t('commons.tag') }} : {{ apiInfo.tags }}</el-col>
<el-col :span="6">{{ $t('api_test.definition.request.responsible') }} : {{ apiInfo.responsibler }}</el-col>
<el-col :span="6">{{ $t('commons.create_user') }} : {{ apiInfo.createUser }}</el-col>
</el-row>
<el-row style="margin-top: 10px">
{{ $t('commons.description') }} : {{ apiInfo.desc }}
</el-row>
</div>
</el-row>
<!--api请求头-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.request_head') }}：
<div v-if="getJsonArr(apiInfo.requestHead).length==0">
<div class="simpleFontClass" style="margin-top: 10px">
{{ $t('api_test.definition.document.data_set.none') }}
</div>
</div>
<div v-else>
<el-table border :show-header="false"
:data="getJsonArr(apiInfo.requestHead)" class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.value')"
show-overflow-tooltip/>
</el-table>
</div>
</div>
</el-row>
<!--URL参数-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
URL{{ $t('api_test.definition.document.request_param') }}：
<div v-if="getJsonArr(apiInfo.urlParams).length==0">
<div class="simpleFontClass" style="margin-top: 10px">
{{ $t('api_test.definition.document.data_set.none') }}
</div>
</div>
<div v-else>
<el-table border
:data="getJsonArr(apiInfo.urlParams)" class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="required"
:label="$t('api_test.definition.document.table_coloum.is_required')"
:formatter="formatBoolean"
min-width="80px"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.value')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="description"
:label="$t('api_test.definition.document.table_coloum.desc')"
min-width="280px"
show-overflow-tooltip/>
</el-table>
</div>
</div>
</el-row>
<api-info-collapse table-coloum-type="nameAndValue" :title="$t('api_test.definition.document.request_head')"
:string-data="apiInfo.requestHead"/>
<!--QUERY参数-->
<api-info-collapse table-coloum-type="simple" :title="'QUERY'+$t('api_test.definition.document.request_param')"
:string-data="apiInfo.urlParams"/>
<!--REST参数-->
<api-info-collapse table-coloum-type="simple" :title="'REST'+$t('api_test.definition.document.request_param')"
:string-data="apiInfo.restParams"/>
<!--api请求体 以及表格-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.request_body') }}
</div>
<div class="smallFontClass">
{{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.requestBodyParamType }}
</div>
<div>
<el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
:data="getJsonArr(apiInfo.requestBodyFormData)"
class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="contentType"
:label="$t('api_test.definition.document.table_coloum.type')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="description"
:label="$t('api_test.definition.document.table_coloum.desc')"
min-width="280px"
show-overflow-tooltip/>
<el-table-column prop="required"
:label="$t('api_test.definition.document.table_coloum.is_required')"
:formatter="formatBoolean"
min-width="80px"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.default_value')"
min-width="120px"
show-overflow-tooltip/>
</el-table>
<div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :body="apiInfo.jsonSchemaBody" ref="jsonCodeEdit"/>
</div>
<div v-else-if="formatRowDataToJsonSchema(apiInfo,'request') " style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :body="apiInfo.requestJsonSchema" ref="jsonCodeEdit"/>
</div>
<div v-else class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
</p>
<br/>
</div>
</div>
</el-row>
<!--范例展示-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.example_presentation') }}
</div>
<div class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="genPreviewData(apiInfo.requestPreviewData)">
</p>
<br/>
</div>
</el-row>
<!--响应信息-->
<el-row class="apiInfoRow">
<div class="tip">
{{ $t('api_test.definition.document.response_info') }}
</div>
</el-row>
<el-row class="apiInfoRow">
<api-info-collapse :is-request="true" :remarks="apiInfo.requestBodyParamType"
:title="$t('api_test.definition.document.request_body')">
<api-request-info slot="request" :api-info="apiInfo"></api-request-info>
</api-info-collapse>
</el-row>
<!--响应头-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.response_head') }}:
<el-table border :show-header="false"
:data="getJsonArr(apiInfo.responseHead)" class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.value')"
show-overflow-tooltip/>
</el-table>
</div>
</el-row>
<api-info-collapse table-coloum-type="nameAndValue" :title="$t('api_test.definition.document.response_head')"
:string-data="apiInfo.responseHead"/>
<!--响应体-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.response_body') }}
</div>
<div class="smallFontClass">
{{ $t('api_test.definition.document.table_coloum.type') }}:{{ apiInfo.responseBodyParamType }}
</div>
<div>
<el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
:data="getJsonArr(apiInfo.responseBodyFormData)"
class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="contentType"
:label="$t('api_test.definition.document.table_coloum.type')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="description"
:label="$t('api_test.definition.document.table_coloum.desc')"
min-width="280px"
show-overflow-tooltip/>
<el-table-column prop="required"
:label="$t('api_test.definition.document.table_coloum.is_required')"
:formatter="formatBoolean"
min-width="80px"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.default_value')"
min-width="120px"
show-overflow-tooltip/>
</el-table>
<div v-else-if="apiInfo.responseBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :body="apiInfo.jsonSchemaResponseBody" ref="jsonCodeEdit"/>
</div>
<div v-else-if="formatRowDataToJsonSchema(apiInfo,'response') " style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :body="apiInfo.responseJsonSchema" ref="jsonCodeEdit"/>
</div>
<div v-else class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
</p>
<br/>
</div>
</div>
</el-row>
<api-info-collapse :is-response="true" :remarks="apiInfo.responseBodyParamType"
:title="$t('api_test.definition.document.response_body')">
<api-response-info slot="response" :api-info="apiInfo"></api-response-info>
</api-info-collapse>
<!--响应状态码-->
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.response_code') }}:
<el-table border :show-header="false"
:data="getJsonArr(apiInfo.responseCode)" class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.value')"
show-overflow-tooltip/>
</el-table>
</div>
</el-row>
<api-info-collapse :is-text="true" :string-data="getName(apiInfo.responseCode)"
:title="$t('api_test.definition.document.response_code')"/>
<el-divider></el-divider>
</div>
</template>
<script>
import {API_METHOD_COLOUR} from "@/business/components/api/definition/model/JsonData";
import MsCodeEdit from "@/business/components/common/components/MsCodeEdit";
import {formatJson,} from "@/common/js/format-utils";
import ApiStatus from "@/business/components/api/definition/components/list/ApiStatus";
import {calculate} from "@/business/components/api/definition/model/ApiTestModel";
import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
import Api from "@/business/components/api/router";
import {generateApiDocumentShareInfo} from "@/network/share";
import Convert from "@/business/components/common/json-schema/convert/convert";
import ApiInfoCollapse from "@/business/components/api/definition/components/document/components/ApiInfoCollapse";
import ApiRequestInfo from "@/business/components/api/definition/components/document/components/ApiRequestInfo";
import ApiResponseInfo from "@/business/components/api/definition/components/document/components/ApiResponseInfo";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const apiDocumentBatchShare = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./share/ApiDocumentBatchShare.vue") : {};
@ -261,12 +90,13 @@ export default {
components: {
Api,
MsJsonCodeEdit,
ApiStatus, MsCodeEdit,
ApiStatus, MsCodeEdit, ApiInfoCollapse, ApiRequestInfo, ApiResponseInfo,
"ApiDocumentBatchShare": apiDocumentBatchShare.default
},
data() {
return {
shareUrl: "",
apiActiveInfoNames: ["info"],
batchShareUrl: "",
apiStepIndex: 0,
apiInfoArray: [],
@ -286,6 +116,7 @@ export default {
id: "",
requestHead: "无",
urlParams: "无",
restParams: "无",
requestBodyParamType: "无",
requestBodyFormData: '[]',
requestBodyStrutureData: "",
@ -321,8 +152,7 @@ export default {
mounted() {
},
computed: {},
watch: {
},
watch: {},
methods: {
getId() {
return this.apiInfo.id;
@ -330,34 +160,6 @@ export default {
getHeight() {
return this.$refs.baseDiv.offsetHeight;
},
formatRowDataToJsonSchema(api, jsonType) {
if (jsonType === 'request' && api.requestBodyStrutureData) {
try {
let bodyStructData = JSON.parse(api.requestBodyStrutureData);
api.requestJsonSchema = {'raw': bodyStructData};
return true;
} catch (e) {
return false;
}
} else if (jsonType === 'response' && api.responseBodyStrutureData) {
try {
JSON.parse(api.responseBodyStrutureData);
api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
return true;
} catch (e) {
return false;
}
} else {
return false;
}
},
formatRowData(dataType, data) {
var returnData = data;
if (data) {
returnData = "<xmp>" + returnData + "</xmp>";
}
return returnData;
},
shareApiDocument(isBatchShare) {
this.shareUrl = "";
this.batchShareUrl = "";
@ -391,72 +193,27 @@ export default {
getColor(enable, method) {
return this.methodColorMap.get(method);
},
formatBoolean(row, column, cellValue) {
var ret = ''; //你想在页面展示的值
if (cellValue) {
ret = "是"; //根据自己的需求设定
} else {
ret = "否";
}
return ret;
},
getJsonArr(jsonString) {
let returnJsonArr = [];
getName(jsonString) {
let returnString = "无";
if (jsonString == '无' || jsonString == null) {
return returnJsonArr;
return returnString;
}
try {
let jsonArr = JSON.parse(jsonString);
//遍历，把必填项空的数据去掉
for (var index = 0; index < jsonArr.length; index++) {
var item = jsonArr[index];
if (item.name != "" && item.name != null) {
returnJsonArr.push(item);
if (item.name !== "") {
returnString = item.name;
break;
}
}
return returnJsonArr;
},
//构建预览数据
genPreviewData(previewData) {
if (previewData != null && previewData != '') {
let showDataObj = {};
for (var key in previewData) {
// showDataObj.set(key,previewData[key]);
let value = previewData[key];
if (typeof (value) == 'string') {
if (value.indexOf("@") >= 0) {
value = this.showPreview(value);
}
}
showDataObj[key] = value;
}
showDataObj = JSON.stringify(showDataObj);
previewData = formatJson(showDataObj);
}
return previewData;
},
showPreview(itemValue) {
// 找到变量本身
if (!itemValue) {
return;
}
let index = itemValue.indexOf("|");
if (index > -1) {
itemValue = itemValue.substring(0, index).trim();
} catch (e) {
returnString = jsonString;
}
this.mockVariableFuncs.forEach(f => {
if (!f.name) {
return;
}
itemValue += "|" + f.name;
if (f.params) {
itemValue += ":" + f.params.map(p => p.value).join(",");
}
});
itemValue = calculate(itemValue);
return itemValue;
return returnString;
},
},
};
@ -469,16 +226,6 @@ export default {
margin-left: 10px;
}
.blackFontClass {
font-weight: bold;
font-size: 14px;
}
.smallFontClass {
font-size: 13px;
margin: 20px 5px;
}
.apiInfoRow {
margin: 10px 10px;
}
@ -491,17 +238,9 @@ export default {
margin: 10px 10px;
}
.showDataDiv {
background-color: #F5F7F9;
margin: 10px 10px;
max-height: 300px;
overflow: auto;
}
/*
步骤条中，已经完成后的节点样式和里面a标签的样式
*/
/deep/ .el-step {
flex-basis: 40px !important;
}
@ -544,37 +283,14 @@ export default {
left: 9px;
}
/deep/ .el-step__icon {
width: 20px;
height: 20px;
}
.document-table {
margin: 10px 10px;
width: auto;
}
.document-table /deep/ .el-table__row {
.attacInfo {
font-size: 12px;
font-weight: initial;
}
.document-table /deep/ .has-gutter {
font-size: 12px;
color: #404040;
}
.document-table /deep/ td {
border-right: 0px solid #EBEEF5
}
.document-table /deep/ th {
background-color: #FAFAFA;
border-right: 0px solid #EBEEF5
}
.el-divider--horizontal {
margin: 12px 0;
color: #A0A0A0;
margin: 10px;
}
</style>

179
frontend/src/business/components/api/definition/components/document/components/ApiRequestInfo.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<div>
<el-row class="apiInfoRow">
<div>
<el-table border v-if="formParamTypes.includes(apiInfo.requestBodyParamType)"
:data="getJsonArr(apiInfo.requestBodyFormData)"
class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="contentType"
:label="$t('api_test.definition.document.table_coloum.type')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="description"
:label="$t('api_test.definition.document.table_coloum.desc')"
min-width="280px"
show-overflow-tooltip/>
<el-table-column prop="required"
:label="$t('api_test.definition.document.table_coloum.is_required')"
:formatter="formatBoolean"
min-width="80px"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.default_value')"
min-width="120px"
show-overflow-tooltip/>
</el-table>
<div v-else-if="apiInfo.requestBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :json-schema-disable="true" :body="apiInfo.jsonSchemaBody"
ref="jsonCodeEdit"/>
</div>
<div v-else-if="formatRowDataToJsonSchema(apiInfo,'request') " style="margin-left: 10px">
<ms-json-code-edit :show-preview="false" :json-schema-disable="true" :body="apiInfo.requestJsonSchema"
ref="jsonCodeEdit"/>
</div>
<div v-else class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="formatRowData(apiInfo.requestBodyParamType,apiInfo.requestBodyStrutureData)">
</p>
<br/>
</div>
</div>
</el-row>
<el-row class="apiInfoRow">
<div class="blackFontClass">
{{ $t('api_test.definition.document.example_presentation') }}
</div>
<div class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="genPreviewData(apiInfo.requestPreviewData)">
</p>
<br/>
</div>
</el-row>
</div>
</template>
<script>
import {formatJson} from "@/common/js/format-utils";
import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
export default {
name: "ApiRequestInfo",
components: {MsJsonCodeEdit},
data() {
return {
active: true,
formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
};
},
props: {
apiInfo:Object,
},
activated() {
},
created: function () {
},
mounted() {
},
computed: {
},
watch: {},
methods: {
formatBoolean(row, column, cellValue) {
var ret = ''; //你想在页面展示的值
if (cellValue) {
ret = "是"; //根据自己的需求设定
} else {
ret = "否";
}
return ret;
},
formatRowData(dataType, data) {
var returnData = data;
if (data) {
returnData = "<xmp>" + returnData + "</xmp>";
}
return returnData;
},
getJsonArr(jsonString) {
let returnJsonArr = [];
if (jsonString === '无' || jsonString === null) {
return returnJsonArr;
}
let jsonArr = JSON.parse(jsonString);
//遍历，把必填项空的数据去掉
for (var index = 0; index < jsonArr.length; index++) {
var item = jsonArr[index];
if (item.name !== "" && item.name !== null) {
returnJsonArr.push(item);
}
}
return returnJsonArr;
},
formatRowDataToJsonSchema(api, jsonType) {
if (jsonType === 'request' && api.requestBodyStrutureData) {
try {
let bodyStructData = JSON.parse(api.requestBodyStrutureData);
api.requestJsonSchema = {'raw': bodyStructData};
return true;
} catch (e) {
return false;
}
} else if (jsonType === 'response' && api.responseBodyStrutureData) {
try {
JSON.parse(api.responseBodyStrutureData);
api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
return true;
} catch (e) {
return false;
}
} else {
return false;
}
},
//构建预览数据
genPreviewData(previewData) {
if (previewData !== null && previewData !== '') {
let showDataObj = {};
for (var key in previewData) {
let value = previewData[key];
if (typeof (value) == 'string') {
if (value.indexOf("@") >= 0) {
value = this.showPreview(value);
}
}
showDataObj[key] = value;
}
showDataObj = JSON.stringify(showDataObj);
previewData = formatJson(showDataObj);
}
return previewData;
},
},
};
</script>
<style scoped>
.apiInfoRow {
margin: 10px 10px;
}
.blackFontClass {
font-weight: bold;
font-size: 14px;
}
.showDataDiv {
background-color: #F5F7F9;
margin: 10px 10px;
max-height: 300px;
overflow: auto;
}
</style>

154
frontend/src/business/components/api/definition/components/document/components/ApiResponseInfo.vue Normal file
View File

@ -0,0 +1,154 @@
<template>
<div>
<el-row class="apiInfoRow">
<div>
<el-table border v-if="formParamTypes.includes(apiInfo.responseBodyParamType)"
:data="getJsonArr(apiInfo.responseBodyFormData)"
class="test-content document-table">
<el-table-column prop="name"
:label="$t('api_test.definition.document.table_coloum.name')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="contentType"
:label="$t('api_test.definition.document.table_coloum.type')"
min-width="120px"
show-overflow-tooltip/>
<el-table-column prop="description"
:label="$t('api_test.definition.document.table_coloum.desc')"
min-width="280px"
show-overflow-tooltip/>
<el-table-column prop="required"
:label="$t('api_test.definition.document.table_coloum.is_required')"
:formatter="formatBoolean"
min-width="80px"
show-overflow-tooltip/>
<el-table-column prop="value"
:label="$t('api_test.definition.document.table_coloum.default_value')"
min-width="120px"
show-overflow-tooltip/>
</el-table>
<div v-else-if="apiInfo.responseBodyParamType == 'JSON-SCHEMA'" style="margin-left: 10px">
<ms-json-code-edit :json-schema-disable="true" :show-preview="false" :body="apiInfo.jsonSchemaResponseBody" ref="jsonCodeEdit"/>
</div>
<div v-else-if="formatRowDataToJsonSchema(apiInfo,'response') " style="margin-left: 10px">
<ms-json-code-edit :json-schema-disable="true" :show-preview="false" :body="apiInfo.responseJsonSchema" ref="jsonCodeEdit"/>
</div>
<div v-else class="showDataDiv">
<br/>
<p style="margin: 0px 20px;"
v-html="formatRowData(apiInfo.responseBodyParamType,apiInfo.responseBodyStrutureData)">
</p>
<br/>
</div>
</div>
</el-row>
</div>
</template>
<script>
import MsJsonCodeEdit from "@/business/components/common/json-schema/JsonSchemaEditor";
export default {
name: "ApiResponseInfo",
components: {MsJsonCodeEdit},
data() {
return {
active: true,
formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'],
};
},
props: {
apiInfo: Object,
},
activated() {
},
created: function () {
},
mounted() {
},
computed: {},
watch: {},
methods: {
formatRowData(dataType, data) {
var returnData = data;
if (data) {
returnData = "<xmp>" + returnData + "</xmp>";
}
return returnData;
},
getJsonArr(jsonString) {
let returnJsonArr = [];
if (jsonString === '无' || jsonString === null) {
return returnJsonArr;
}
let jsonArr = JSON.parse(jsonString);
//遍历，把必填项空的数据去掉
for (var index = 0; index < jsonArr.length; index++) {
var item = jsonArr[index];
if (item.name !== "" && item.name !== null) {
returnJsonArr.push(item);
}
}
return returnJsonArr;
},
formatBoolean(row, column, cellValue) {
var ret = ''; //你想在页面展示的值
if (cellValue) {
ret = "是"; //根据自己的需求设定
} else {
ret = "否";
}
return ret;
},
formatRowDataToJsonSchema(api, jsonType) {
if (jsonType === 'request' && api.requestBodyStrutureData) {
try {
let bodyStructData = JSON.parse(api.requestBodyStrutureData);
api.requestJsonSchema = {'raw': bodyStructData};
return true;
} catch (e) {
return false;
}
} else if (jsonType === 'response' && api.responseBodyStrutureData) {
try {
JSON.parse(api.responseBodyStrutureData);
api.responseJsonSchema = {'raw': api.responseBodyStrutureData};
return true;
} catch (e) {
return false;
}
} else {
return false;
}
},
},
};
</script>
<style scoped>
.apiInfoRow {
margin: 10px 10px;
}
.blackFontClass {
font-weight: bold;
font-size: 14px;
}
.showDataDiv {
background-color: #F5F7F9;
margin: 10px 10px;
max-height: 300px;
overflow: auto;
}
</style>
<style scoped>
.apiInfoRow {
margin: 10px 10px;
}
</style>

15
frontend/src/business/components/common/json-schema/JsonSchemaEditor.vue
View File

@ -2,11 +2,12 @@
<div id="app" v-loading="loading">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane :label="$t('organization.message.template')" name="apiTemplate">
<el-button type="primary" size="mini" style="margin: 10px 10px 0px" @click="openOneClickOperation">
<el-button v-show="!jsonSchemaDisable" type="primary" size="mini" style="margin: 10px 10px 0px" @click="openOneClickOperation">
{{ this.$t('commons.import') }}
</el-button>
<div style="min-height: 200px">
<div :style="jsonSchemaDisable? '' : 'min-height: 200px'">
<json-schema-editor class="schema"
:disabled="jsonSchemaDisable"
:value="schema"
:show-mock-vars="showMockVars"
:scenario-definition="scenarioDefinition"
@ -40,6 +41,10 @@
type: Boolean,
default: true
},
jsonSchemaDisable: {
type: Boolean,
default: false
},
showMockVars: {
type: Boolean,
default() {
@ -52,8 +57,7 @@
if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
this.schema = obj;
}
else if (this.body.jsonSchema) {
} else if (this.body.jsonSchema) {
this.schema = {"root": this.body.jsonSchema};
}
this.body.jsonSchema = this.schema.root;
@ -70,8 +74,7 @@
if (!this.body.jsonSchema && this.body.raw && this.checkIsJson(this.body.raw)) {
let obj = {"root": MsConvert.format(JSON.parse(this.body.raw))}
this.schema = obj;
}
else if (this.body.jsonSchema) {
} else if (this.body.jsonSchema) {
this.schema = {"root": this.body.jsonSchema};
}
this.body.jsonSchema = this.schema.root;

13
frontend/src/business/components/common/json-schema/schema/editor/main.vue
View File

@ -9,28 +9,28 @@
<input class="el-input el-input__inner" style="height: 32px" :disabled="disabled || root" :value="pickKey" @blur="onInputName" size="small"/>
<el-tooltip v-if="root" :content="$t('schema.checked_all')" placement="top">
<input type="checkbox" :disabled="!isObject && !isArray" class="ms-col-name-required" @change="onRootCheck"/>
<input type="checkbox" :disabled="disabled || (!isObject && !isArray)" class="ms-col-name-required" @change="onRootCheck"/>
</el-tooltip>
<el-tooltip v-else :content="$t('schema.required')" placement="top">
<input type="checkbox" :disabled="isItem" :checked="checked" class="ms-col-name-required" @change="onCheck"/>
<input type="checkbox" :disabled="disabled || isItem" :checked="checked" class="ms-col-name-required" @change="onCheck"/>
</el-tooltip>
</el-col>
<el-col :span="4">
<el-select v-model="pickValue.type" :disabled="disabledType" class="ms-col-type" @change="onChangeType" size="small">
<el-select v-model="pickValue.type" :disabled="disabled||disabledType" class="ms-col-type" @change="onChangeType" size="small">
<el-option :key="t" :value="t" :label="t" v-for="t in types"/>
</el-select>
</el-col>
<el-col :span="4">
<ms-mock :disabled="pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
<ms-mock :disabled="disabled || pickValue.type==='object' || pickKey ==='root' || pickValue.type==='array' || pickValue.type==='null'"
:schema="pickValue"
:scenario-definition="scenarioDefinition"
:show-mock-vars="showMockVars"
@editScenarioAdvance="editScenarioAdvance"/>
</el-col>
<el-col :span="4">
<el-input v-model="pickValue.description" class="ms-col-title" :placeholder="$t('schema.description')" size="small"/>
<el-input :disabled="disabled" v-model="pickValue.description" class="ms-col-title" :placeholder="$t('schema.description')" size="small"/>
</el-col>
<el-col :span="4" class="col-item-setting">
<el-col :span="4" class="col-item-setting" v-if="!disabled">
<el-tooltip class="item" effect="dark" :content="$t('schema.adv_setting')" placement="top">
<i class="el-icon-setting" @click="onSetting"/>
</el-tooltip>
@ -48,6 +48,7 @@
:parent="pickValue" :key="index" :deep="deep+1" :root="false" class="children"
:scenario-definition="scenarioDefinition"
:show-mock-vars="showMockVars"
:disabled="disabled"
@editScenarioAdvance="editScenarioAdvance"
:lang="lang" :custom="custom" @changeAllItemsType="changeAllItemsType" @reloadItems="reloadItems"/>
</template>

2
frontend/src/business/components/common/json-schema/schema/editor/mock/MockComplete.vue
View File

@ -10,7 +10,7 @@
value-key="name"
highlight-first-item
@select="change">
<i slot="suffix" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
<i slot="suffix" v-if="!disabled" class="el-input__icon el-icon-edit pointer" @click="advanced(mock)"></i>
</el-autocomplete>
<ms-api-variable-advance :show-mock-vars="showMockVars" :scenario-definition="scenarioDefinition" :current-item="mock" ref="variableAdvance"/>

2
frontend/src/i18n/en-US.js
View File

@ -1282,6 +1282,8 @@ export default {
esb_title: "You can use ${name} or ${parent name.child name} to generate xml struct in report template",
},
document: {
open: "Open",
close: "Close",
order: "Order",
create_time_sort: "From back to front by create time",
edit_time_positive_sequence: "From front to back by update time",

2
frontend/src/i18n/zh-CN.js
View File

@ -1287,6 +1287,8 @@ export default {
esb_title: "可以在报文模板中使用${参数名} 或 ${父节点参数名.子节点参数名}来生成xml数据结构",
},
document: {
open: "展开",
close: "收起",
order: "排序方式",
create_time_sort: "按创建时间从后到前",
edit_time_positive_sequence: "按更新时间从前到后",

2
frontend/src/i18n/zh-TW.js
View File

@ -1287,6 +1287,8 @@ export default {
esb_title: "可以在報文模板中使用${參數名} 或 ${父節點參數名.子節點參數名}來生成xml數據結構",
},
document: {
open: "展開",
close: "收起",
order: "排序方式",
create_time_sort: "按創建時間從後到前",
edit_time_positive_sequence: "按更新時間從前到後",