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

feat(版本对比): dubbo/TCP/SQL接口定义版本对比 

--user=郭雨琦 dubbo/TCP/SQL接口定义版本对比
This commit is contained in:
guoyuqi 2022-01-14 14:43:04 +08:00 committed by xiaomeinvG
parent 14559fb403
commit 37dbf0aad9
8 changed files with 1032 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/src/business/components/api/definition/components/complete/EditCompleteDubboApi.vue
View File

@ -46,6 +46,22 @@
<api-other-info :api="basisData"/>
<ms-change-history ref="changeHistory"/>
<el-dialog
:fullscreen="true"
:visible.sync="dialogVisible"
width="100%"
>
<dubbo-api-version-diff
:old-data="basisData"
:show-follow="showFollow"
:new-data="newData"
:new-show-follow="newShowFollow"
:module-options="moduleOptions"
:request="request"
:old-request="oldRequest"
></dubbo-api-version-diff>
</el-dialog>
</div>
</template>
@ -58,6 +74,10 @@ import {getCurrentUser, hasLicense} from "@/common/js/utils";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
import DubboApiVersionDiff from "./version/DubboApiVersionDiff"
import {createComponent } from ".././jmeter/components";
const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
export default {
name: "MsApiDubboRequestForm",
@ -65,6 +85,7 @@ export default {
ApiOtherInfo,
MsBasisApi, MsBasisParameters, MsChangeHistory,
'MsVersionHistory': versionHistory.default,
DubboApiVersionDiff,
},
props: {
request: {},
@ -114,7 +135,12 @@ export default {
return {
validated: false,
showFollow: false,
dialogVisible:false,
newShowFollow:false,
versionData: [],
newData:{},
oldRequest:{},
oldResponse:{}
};
},
methods: {
@ -185,7 +211,95 @@ export default {
});
},
compare(row) {
// console.log(row);
this.$get('/api/definition/get/' + row.id+"/"+this.basisData.refId, response => {
this.$get('/api/definition/get/' + response.data.id, res => {
if (res.data) {
this.newData = res.data;
this.$get('/api/definition/follow/' + response.data.id, resp => {
if(resp.data&&resp.data.follows){
for (let i = 0; i <resp.data.follows.length; i++) {
if(resp.data.follows[i]===this.currentUser().id){
this.newShowFollow = true;
break;
}
}
}
});
this.setRequest(res.data)
if (!this.setRequest(res.data)) {
this.oldRequest = createComponent("DubboSampler");
this.dialogVisible = true;
}
this.formatApi(res.data)
}
});
});
},
setRequest(api) {
if (api.request !== undefined) {
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldRequest = api.request;
} else {
this.oldRequest = JSON.parse(api.request);
}
if (!this.oldRequest.headers) {
this.oldRequest.headers = [];
}
this.dialogVisible = true;
return true;
}
return false;
},
formatApi(api) {
if (api.response != null && api.response !== 'null' && api.response !== undefined) {
if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldResponse = api.response;
} else {
this.oldResponse = JSON.parse(api.response);
}
} else {
this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
}
if (!this.oldRequest.hashTree) {
this.oldRequest.hashTree = [];
}
if (this.oldRequest.body && !this.oldRequest.body.binary) {
this.oldRequest.body.binary = [];
}
// 处理导入数据缺失问题
if (this.oldResponse.body) {
let body = new Body();
Object.assign(body, this.oldResponse.body);
if (!body.binary) {
body.binary = [];
}
if (!body.kvs) {
body.kvs = [];
}
if (!body.binary) {
body.binary = [];
}
this.oldResponse.body = body;
}
this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
this.sort(this.oldRequest.hashTree);
},
sort(stepArray) {
if (stepArray) {
for (let i in stepArray) {
if (!stepArray[i].clazzName) {
stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
}
if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
}
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
this.sort(stepArray[i].hashTree);
}
}
}
},
checkout(row) {
let api = this.versionData.filter(v => v.versionId === row.id)[0];

121
frontend/src/business/components/api/definition/components/complete/EditCompleteSQLApi.vue
View File

@ -47,6 +47,22 @@
<ms-change-history ref="changeHistory"/>
<el-dialog
:fullscreen="true"
:visible.sync="dialogVisible"
width="100%"
>
<s-q-l-api-version-diff
:old-data="basisData"
:show-follow="showFollow"
:new-data="newData"
:new-show-follow="newShowFollow"
:module-options="moduleOptions"
:request="request"
:old-request="oldRequest"
></s-q-l-api-version-diff>
</el-dialog>
</div>
</template>
@ -56,9 +72,14 @@ import MsBasisParameters from "../request/database/BasisParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import {getCurrentUser, hasLicense} from "@/common/js/utils";
import SQLApiVersionDiff from "./version/SQLApiVersionDiff"
import {createComponent } from ".././jmeter/components";
import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const versionHistory = requireComponent.keys().length > 0 ? requireComponent("./version/VersionHistory.vue") : {};
const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
export default {
name: "MsApiSqlRequestForm",
@ -66,6 +87,7 @@ export default {
ApiOtherInfo,
MsBasisApi, MsBasisParameters, MsChangeHistory,
'MsVersionHistory': versionHistory.default,
SQLApiVersionDiff
},
props: {
request: {},
@ -101,10 +123,16 @@ export default {
return {
validated: false,
showFollow: false,
dialogVisible:false,
newShowFollow:false,
versionData: [],
newData:{},
oldRequest:{},
oldResponse:{}
};
},
created() {
console.log("看看是不是这页面")
this.$get('/api/definition/follow/' + this.basisData.id, response => {
this.basisData.follows = response.data;
for (let i = 0; i < response.data.length; i++) {
@ -187,7 +215,97 @@ export default {
});
},
compare(row) {
// console.log(row);
this.$get('/api/definition/get/' + row.id+"/"+this.basisData.refId, response => {
this.$get('/api/definition/get/' + response.data.id, res => {
if (res.data) {
this.newData = res.data;
this.$get('/api/definition/follow/' + response.data.id, resp => {
if(resp.data&&resp.data.follows){
for (let i = 0; i <resp.data.follows.length; i++) {
if(resp.data.follows[i]===this.currentUser().id){
this.newShowFollow = true;
break;
}
}
}
});
this.setRequest(res.data)
if (!this.setRequest(res.data)) {
this.oldRequest = createComponent("JDBCSampler");
if (!this.oldRequest.variables) {
this.oldRequest.variables = [];
}
this.dialogVisible = true
}
//this.formatApi(res.data)
}
});
});
},
setRequest(api) {
if (api.request !== undefined) {
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldRequest = api.request;
} else {
this.oldRequest = JSON.parse(api.request);
}
if (!this.oldRequest.headers) {
this.oldRequest.headers = [];
}
this.dialogVisible = true
return true;
}
return false;
},
formatApi(api) {
if (api.response != null && api.response !== 'null' && api.response !== undefined) {
if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldResponse = api.response;
} else {
this.oldResponse = JSON.parse(api.response);
}
} else {
this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
}
if (!this.oldRequest.hashTree) {
this.oldRequest.hashTree = [];
}
if (this.oldRequest.body && !this.oldRequest.body.binary) {
this.oldRequest.body.binary = [];
}
// 处理导入数据缺失问题
if (this.oldResponse.body) {
let body = new Body();
Object.assign(body, this.oldResponse.body);
if (!body.binary) {
body.binary = [];
}
if (!body.kvs) {
body.kvs = [];
}
if (!body.binary) {
body.binary = [];
}
this.oldResponse.body = body;
}
this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
this.sort(this.oldRequest.hashTree);
},
sort(stepArray) {
if (stepArray) {
for (let i in stepArray) {
if (!stepArray[i].clazzName) {
stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
}
if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
}
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
this.sort(stepArray[i].hashTree);
}
}
}
},
checkout(row) {
let api = this.versionData.filter(v => v.versionId === row.id)[0];
@ -198,6 +316,7 @@ export default {
},
create(row) {
// 创建新版本
this.basisData.versionId = row.id;
this.saveApi();
},

130
frontend/src/business/components/api/definition/components/complete/EditCompleteTCPApi.vue
View File

@ -74,7 +74,26 @@
<api-other-info :api="basisData"/>
<ms-change-history ref="changeHistory"/>
<el-dialog
:fullscreen="true"
:visible.sync="dialogVisible"
width="100%"
>
<t-c-p-api-version-diff
:old-data="basisData"
:show-follow="showFollow"
:new-data="newData"
:new-show-follow="newShowFollow"
:module-options="moduleOptions"
:request="request"
:old-request="oldRequest"
:mock-info="mockInfo"
:api-protocol="apiProtocol"
:old-api-protocol="oldApiProtocol"
:show-xpack-compnent="showXpackCompnent"
:method-types="methodTypes"
></t-c-p-api-version-diff>
</el-dialog>
</div>
</template>
@ -85,7 +104,11 @@ import MsTcpFormatParameters from "../request/tcp/TcpFormatParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import {getCurrentProjectID, getCurrentUser, hasLicense} from "@/common/js/utils";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import TCPApiVersionDiff from "./version/TCPApiVersionDiff"
import {createComponent } from ".././jmeter/components";
import { TYPE_TO_C} from "@/business/components/api/automation/scenario/Setting";
const {Body} = require("@/business/components/api/definition/model/ApiTestModel");
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
@ -98,6 +121,7 @@ export default {
"esbDefinition": esbDefinition.default,
"esbDefinitionResponse": esbDefinitionResponse.default,
'MsVersionHistory': versionHistory.default,
TCPApiVersionDiff,
},
props: {
request: {},
@ -123,6 +147,13 @@ export default {
],
showXpackCompnent: false,
versionData: [],
dialogVisible:false,
newShowFollow:false,
newData:{},
oldRequest:{},
oldResponse:{},
oldApiProtocol: "TCP",
};
},
created: function () {
@ -301,7 +332,102 @@ export default {
});
},
compare(row) {
// console.log(row);
this.$get('/api/definition/get/' + row.id+"/"+this.basisData.refId, response => {
this.$get('/api/definition/get/' + response.data.id, res => {
if (res.data) {
this.newData = res.data;
if (this.newData.method !== 'TCP' && this.newData.method !== 'ESB') {
this.newData.method = this.newData.protocol;
}
this.oldApiProtocol = this.basisData.method;
if (this.oldApiProtocol == null || this.oldApiProtocol === "") {
this.oldApiProtocol = "TCP";
}
this.$get('/api/definition/follow/' + response.data.id, resp => {
if(resp.data&&resp.data.follows){
for (let i = 0; i <resp.data.follows.length; i++) {
if(resp.data.follows[i]===this.currentUser().id){
this.newShowFollow = true;
break;
}
}
}
});
this.setRequest(res.data)
if (!this.setRequest(res.data)) {
this.oldRequest = createComponent("TCPSampler");
this.dialogVisible = true;
}
this.formatApi(res.data)
}
});
});
},
setRequest(api) {
if (api.request !== undefined) {
if (Object.prototype.toString.call(api.request).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldRequest = api.request;
} else {
this.oldRequest = JSON.parse(api.request);
}
if (!this.oldRequest.headers) {
this.oldRequest.headers = [];
}
this.dialogVisible = true;
return true;
}
return false;
},
formatApi(api) {
if (api.response != null && api.response !== 'null' && api.response !== undefined) {
if (Object.prototype.toString.call(api.response).match(/\[object (\w+)\]/)[1].toLowerCase() === 'object') {
this.oldResponse = api.response;
} else {
this.oldResponse = JSON.parse(api.response);
}
} else {
this.oldResponse = {headers: [], body: new Body(), statusCode: [], type: "HTTP"};
}
if (!this.oldRequest.hashTree) {
this.oldRequest.hashTree = [];
}
if (this.oldRequest.body && !this.oldRequest.body.binary) {
this.oldRequest.body.binary = [];
}
// 处理导入数据缺失问题
if (this.oldResponse.body) {
let body = new Body();
Object.assign(body, this.oldResponse.body);
if (!body.binary) {
body.binary = [];
}
if (!body.kvs) {
body.kvs = [];
}
if (!body.binary) {
body.binary = [];
}
this.oldResponse.body = body;
}
this.oldRequest.clazzName = TYPE_TO_C.get(this.oldRequest.type);
this.sort(this.oldRequest.hashTree);
},
sort(stepArray) {
if (stepArray) {
for (let i in stepArray) {
if (!stepArray[i].clazzName) {
stepArray[i].clazzName = TYPE_TO_C.get(stepArray[i].type);
}
if (stepArray[i].type === "Assertions" && !stepArray[i].document) {
stepArray[i].document = {type: "JSON", data: {xmlFollowAPI: false, jsonFollowAPI: false, json: [], xml: []}};
}
if (stepArray[i].hashTree && stepArray[i].hashTree.length > 0) {
this.sort(stepArray[i].hashTree);
}
}
}
},
checkout(row) {
let api = this.versionData.filter(v => v.versionId === row.id)[0];

6
frontend/src/business/components/api/definition/components/complete/TCPBasicApi.vue
View File

@ -3,7 +3,7 @@
<el-form :model="basicForm" label-position="right" label-width="80px" size="small" :rules="rule" ref="basicForm" style="margin-right: 20px">
<!-- 基础信息 -->
<el-row>
<el-col :span="8">
<el-col :span="isDiff?16:8">
<el-form-item :label="$t('commons.name')" prop="name">
<!-- <el-input class="ms-http-input" size="small" v-model="basicForm.name"/>-->
<el-input v-model="basicForm.name" class="ms-http-input" size="small">
@ -81,6 +81,10 @@
moduleOptions: Array,
methodTypes: Array,
basisData: {},
isDiff:{
type: Boolean,
default: false
},
},
created() {
this.getMaintainerOptions();

203
frontend/src/business/components/api/definition/components/complete/version/DubboApiVersionDiff.vue Normal file
View File

@ -0,0 +1,203 @@
<template>
<div class="compare-class">
<el-card style="width: 50%;" ref="old">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions"
:basisData="oldData" ref="basicForm"
/>
</el-col>
</el-row>
<!-- 请求参数 -->
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-basis-parameters :showScript="false" :request="oldRequest"/>
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="oldData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
</template>
<dependencies-list @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
<el-card style="width: 50%;" ref="new">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions"
:basisData="newData" ref="basicForm"/>
</el-col>
</el-row>
<!-- 请求参数 -->
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-basis-parameters :showScript="false" :request="request"/>
<!-- 其他信息-->
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="newData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
</template>
<dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
</div>
</template>
<script>
const {diff} = require("@/business/components/performance/v_node_diff");
import MsBasisApi from ".././BasisApi";
import MsBasisParameters from "../../request/dubbo/BasisParameters";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
import {getRelationshipCountApi} from "@/network/api";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default{
name:"DubboApiVersionDiff",
components:{
MsBasisApi,
MsBasisParameters,
MsFormDivider,
ApiInfoContainer,
TabPaneCount,
FormRichTextItem,
DependenciesList,
},
props:{
oldData:{
type:Object
},
newData:{
type:Object
},
showFollow:{
type:Boolean
},
newShowFollow:{
type:Boolean
},
moduleOptions:{},
request: {},
oldRequest:{},
},
watch:{
activeName() {
if (this.activeName === 'dependencies') {
this.$refs.oldDependencies.open();
this.$refs.newDependencies.open();
}
},
},
data(){
return{
activeName: 'remark',
relationshipCount: 0,
oldRelationshipCount: 0,
}
},
methods:{
getDiff(){
let oldVnode = this.$refs.old
let vnode = this.$refs.new
diff(oldVnode,vnode);
},
setCount(count) {
this.relationshipCount = count;
this.$nextTick(function () {
setTimeout(this.getChildDiff,1000)
})
},
setOldCount(count) {
this.oldRelationshipCount = count;
},
getChildDiff(){
let oldVnode = this.$refs.oldDependencies
let vnode = this.$refs.newDependencies
if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
diff(oldVnode,vnode);
}
}
},
mounted() {
getRelationshipCountApi(this.newData.id, (data) => {
this.relationshipCount = data;
});
getRelationshipCountApi(this.oldData.id, (data) => {
this.oldRelationshipCount = data;
});
this.$nextTick(function () {
setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
})
}
}
</script>
<style scoped>
.compare-class{
display: flex;
justify-content:space-between;
}
</style>

3
frontend/src/business/components/api/definition/components/complete/version/HttpApiVersionDiff.vue
View File

@ -267,7 +267,6 @@
<script>
import {API_STATUS, REQ_METHOD} from "../../../model/JsonData";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import MsResponseText from "../../response/ResponseText";
import MsApiRequestForm from "../../request/http/ApiHttpRequestForm";
import MsSelectTree from "../../../../../common/select-tree/SelectTree";
@ -284,7 +283,6 @@ const {diff} = require("@/business/components/performance/v_node_diff");
export default{
name: "HttpApiVersionDiff",
components: {
ApiOtherInfo,
MsFormDivider,
MsResponseText,
MsApiRequestForm,
@ -375,7 +373,6 @@ export default{
},
setOldCount(count) {
this.oldRelationshipCount = count;
},
getChildDiff(){
let oldVnode = this.$refs.oldDependencies

195
frontend/src/business/components/api/definition/components/complete/version/SQLApiVersionDiff.vue Normal file
View File

@ -0,0 +1,195 @@
<template>
<div class="compare-class">
<el-card style="width: 50%;" ref="old">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions"
:basisData="oldData" ref="basicForm"
/>
</el-col>
</el-row>
<!-- 请求参数 -->
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-basis-parameters :showScript="false" :request="oldRequest"/>
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="oldData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
</template>
<dependencies-list @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
<el-card style="width: 50%;" ref="new">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-basis-api :moduleOptions="moduleOptions"
:basisData="newData" ref="basicForm"
/>
</el-col>
</el-row>
<!-- 请求参数 -->
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-basis-parameters :showScript="false" :request="request"/>
<!-- 其他信息-->
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="newData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
</template>
<dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
</div>
</template>
<script>
const {diff} = require("@/business/components/performance/v_node_diff");
import MsBasisApi from ".././BasisApi";
import MsBasisParameters from "../../request/database/BasisParameters";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
import {getRelationshipCountApi} from "@/network/api";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
export default{
name:"SQLApiVersionDiff",
components:{
MsBasisApi,
MsBasisParameters,
MsFormDivider,
ApiInfoContainer,
TabPaneCount,
FormRichTextItem,
DependenciesList,
},
props:{
oldData:{
type:Object
},
newData:{
type:Object
},
showFollow:{
type:Boolean
},
newShowFollow:{
type:Boolean
},
moduleOptions:{},
request: {},
oldRequest:{},
},
data(){
return{
activeName: 'remark',
relationshipCount: 0,
oldRelationshipCount: 0,
}
},
methods:{
getDiff(){
let oldVnode = this.$refs.old
let vnode = this.$refs.new
diff(oldVnode,vnode);
},
setCount(count) {
this.relationshipCount = count;
this.$nextTick(function () {
setTimeout(this.getChildDiff,1000)
})
},
setOldCount(count) {
this.oldRelationshipCount = count;
},
getChildDiff(){
let oldVnode = this.$refs.oldDependencies
let vnode = this.$refs.newDependencies
if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
diff(oldVnode,vnode);
}
}
},
mounted() {
getRelationshipCountApi(this.newData.id, (data) => {
this.relationshipCount = data;
});
getRelationshipCountApi(this.oldData.id, (data) => {
this.oldRelationshipCount = data;
});
this.$nextTick(function () {
setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
})
}
}
</script>
<style scoped>
.compare-class{
display: flex;
justify-content:space-between;
}
</style>

266
frontend/src/business/components/api/definition/components/complete/version/TCPApiVersionDiff.vue Normal file
View File

@ -0,0 +1,266 @@
<template>
<div class="compare-class">
<el-card style="width: 50%;" ref="old">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!showFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="showFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-tcp-basic-api
:is-diff = true
:method-types="methodTypes"
:moduleOptions="moduleOptions"
:basisData="oldData" ref="basicForm"/>
</el-col>
</el-row>
<!-- MOCK信息 -->
<p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
<div class="mock-info">
<el-row>
<el-col :span="20">
Mock地址：
<el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
type="primary">{{ this.mockInfo }}
</el-link>
<el-link v-else target="_blank" style="color: darkred"
type="primary">当前项目未开启Mock服务
</el-link>
</el-col>
</el-row>
</div>
<!-- 请求参数 -->
<div v-if="oldApiProtocol==='TCP'">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-tcp-format-parameters :show-script="false" :request="oldRequest" ref="tcpFormatParameter"/>
</div>
<div v-else-if="oldApiProtocol==='ESB'">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="oldRequest" ref="esbDefinition"/>
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
<esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
:request="oldRequest"/>
<!-- <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
</div>
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="oldData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="oldData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="oldRelationshipCount"/>
</template>
<dependencies-list @setCount="setOldCount" :read-only="true" :resource-id="oldData.id" resource-type="API" ref="oldDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
<el-card style="width: 50%;" ref="new">
<div style="background-color: white;">
<el-row>
<el-col>
<!--操作按钮-->
<el-tooltip :content="$t('commons.follow')" placement="bottom" effect="dark" v-if="!newShowFollow">
<i class="el-icon-star-off"
style="color: #783987; font-size: 25px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
<el-tooltip :content="$t('commons.cancel')" placement="bottom" effect="dark" v-if="newShowFollow">
<i class="el-icon-star-on"
style="color: #783987; font-size: 28px; margin-right: 5px; position: relative; top: 5px; cursor: pointer "/>
</el-tooltip>
</el-col>
</el-row>
<!-- 基础信息 -->
<p class="tip">{{ $t('test_track.plan_view.base_info') }} </p>
<br/>
<el-row>
<el-col>
<ms-tcp-basic-api
:is-diff = true
:method-types="methodTypes"
:moduleOptions="moduleOptions"
:basisData="newData" ref="basicForm"/>
</el-col>
</el-row>
<!-- MOCK信息 -->
<p class="tip">{{ $t('test_track.plan_view.mock_info') }} </p>
<div class="mock-info">
<el-row>
<el-col :span="20">
Mock地址：
<el-link v-if="this.mockInfo !== '' " target="_blank" style="color: black"
type="primary">{{ this.mockInfo }}
</el-link>
<el-link v-else target="_blank" style="color: darkred"
type="primary">当前项目未开启Mock服务
</el-link>
</el-col>
</el-row>
</div>
<!-- 请求参数 -->
<div v-if="apiProtocol=='TCP'">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<ms-tcp-format-parameters :show-script="false" :request="request" ref="tcpFormatParameter"/>
</div>
<div v-else-if="apiProtocol=='ESB'">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<esb-definition v-xpack v-if="showXpackCompnent" :show-script="false" :request="request" ref="esbDefinition"/>
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
<esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true"
:request="request"/>
<!-- <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
</div>
<!-- 其他信息-->
<ms-form-divider :title="$t('test_track.case.other_info')"/>
<api-info-container>
<el-form :model="newData" ref="api-form" label-width="100px">
<el-collapse-transition>
<el-tabs v-model="activeName" style="margin: 20px">
<el-tab-pane :label="$t('commons.remark')" name="remark" class="pane">
<form-rich-text-item class="remark-item" :disabled="true" :data="newData" prop="remark" label-width="0"/>
</el-tab-pane>
<el-tab-pane :label="$t('commons.relationship.name')" name="dependencies" class="pane">
<template v-slot:label>
<tab-pane-count :title="$t('commons.relationship.name')" :count="relationshipCount"/>
</template>
<dependencies-list @setCount="setCount" :read-only="true" :resource-id="newData.id" resource-type="API" ref="newDependencies"/>
</el-tab-pane>
</el-tabs>
</el-collapse-transition>
</el-form>
</api-info-container>
</div>
</el-card>
</div>
</template>
<script>
import MsTcpBasicApi from ".././TCPBasicApi";
import MsTcpFormatParameters from "../../request/tcp/TcpFormatParameters";
import MsFormDivider from "@/business/components/common/components/MsFormDivider";
import ApiInfoContainer from "@/business/components/api/definition/components/complete/ApiInfoContainer";
import DependenciesList from "@/business/components/common/components/graph/DependenciesList";
import FormRichTextItem from "@/business/components/track/case/components/FormRichTextItem";
import {getRelationshipCountApi} from "@/network/api";
import TabPaneCount from "@/business/components/track/plan/view/comonents/report/detail/component/TabPaneCount";
const requireComponent = require.context('@/business/components/xpack/', true, /\.vue$/);
const esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
const {diff} = require("@/business/components/performance/v_node_diff");
export default{
name:"TCPApiVersionDiff",
components:{
MsTcpBasicApi,
MsTcpFormatParameters,
MsFormDivider,
ApiInfoContainer,
TabPaneCount,
FormRichTextItem,
DependenciesList,
"esbDefinition": esbDefinition.default,
"esbDefinitionResponse": esbDefinitionResponse.default,
},
props:{
oldData:{
type:Object
},
newData:{
type:Object
},
showFollow:{
type:Boolean
},
newShowFollow:{
type:Boolean
},
moduleOptions:{},
request: {},
oldRequest:{},
mockInfo:String,
apiProtocol:String,
oldApiProtocol:String,
showXpackCompnent:{
type:Boolean,
default:false
},
methodTypes:Array,
},
data(){
return{
activeName: 'remark',
relationshipCount: 0,
oldRelationshipCount: 0,
}
},
methods:{
getDiff(){
let oldVnode = this.$refs.old
let vnode = this.$refs.new
diff(oldVnode,vnode);
},
setCount(count) {
this.relationshipCount = count;
this.$nextTick(function () {
setTimeout(this.getChildDiff,1000)
})
},
setOldCount(count) {
this.oldRelationshipCount = count;
},
getChildDiff(){
let oldVnode = this.$refs.oldDependencies
let vnode = this.$refs.newDependencies
if(oldVnode._data.postCount>0||oldVnode._data.preCount>0||vnode._data.postCount>0||vnode._data.preCount>0){
diff(oldVnode,vnode);
}
}
},
mounted() {
getRelationshipCountApi(this.newData.id, (data) => {
this.relationshipCount = data;
});
getRelationshipCountApi(this.oldData.id, (data) => {
this.oldRelationshipCount = data;
});
this.$nextTick(function () {
setTimeout(this.getDiff,(this.$refs.old.$children.length+1)/2*1000)
})
}
}
</script>
<style scoped>
.compare-class{
display: flex;
justify-content:space-between;
}
</style>