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

refactor: 优化tcp，dubbo sql设置关注人

This commit is contained in:
CaptainB 2021-12-04 20:47:55 +08:00 committed by 刘瑞斌
parent 8d4c78fe16
commit 9ba2d455ea
5 changed files with 273 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/business/components/api/definition/components/complete/BasisApi.vue
View File

@ -45,28 +45,13 @@
<ms-input-tag :currentScenario="basicForm" ref="tag"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('api_test.automation.follow_people')" prop="followPeople">
<el-select v-model="basicForm.follows"
clearable multiple
:placeholder="$t('api_test.automation.follow_people')" filterable size="small"
class="ms-http-textarea">
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('commons.description')" prop="description">
<el-input class="ms-http-textarea"
v-model="basicForm.description"
type="textarea"
:autosize="{ minRows: 2, maxRows: 10}"
:rows="2" size="small"/>
:autosize="{ minRows: 1, maxRows: 10}"
:rows="1" size="small"/>
</el-form-item>
</el-col>
</el-row>

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

@ -6,6 +6,14 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px" class="ms-opt-btn">
<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 "
@click="saveFollow"/>
</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 "
@click="saveFollow"/>
</el-tooltip>
<el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">
{{ $t('operating_log.change_history') }}
</el-link>
@ -33,90 +41,131 @@
</template>
<script>
import MsBasisApi from "./BasisApi";
import MsBasisParameters from "../request/dubbo/BasisParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import MsBasisApi from "./BasisApi";
import MsBasisParameters from "../request/dubbo/BasisParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import {getCurrentUser} from "@/common/js/utils";
export default {
name: "MsApiDubboRequestForm",
components: {
ApiOtherInfo,
MsBasisApi, MsBasisParameters,MsChangeHistory
export default {
name: "MsApiDubboRequestForm",
components: {
ApiOtherInfo,
MsBasisApi, MsBasisParameters, MsChangeHistory
},
props: {
request: {},
basisData: {},
moduleOptions: Array,
isReadOnly: {
type: Boolean,
default: false
},
props: {
request: {},
basisData: {},
moduleOptions: Array,
isReadOnly: {
type: Boolean,
default: false
},
syncTabs: Array,
syncTabs: Array,
},
watch: {
syncTabs() {
if (this.basisData && this.syncTabs && this.syncTabs.includes(this.basisData.id)) {
// 标示接口在其他地方更新过，当前页面需要同步
let url = "/api/definition/get/";
this.$get(url + this.basisData.id, response => {
if (response.data) {
let request = JSON.parse(response.data.request);
let index = this.syncTabs.findIndex(item => {
if (item === this.basisData.id) {
return true;
}
})
this.syncTabs.splice(index, 1);
Object.assign(this.request, request);
}
});
}
}
},
created() {
this.$get('/api/definition/follow/' + this.basisData.id, response => {
this.basisData.follows = response.data;
for (let i = 0; i < response.data.length; i++) {
if (response.data[i] === getCurrentUser().id) {
this.showFollow = true;
break;
}
}
});
},
data() {
return {
validated: false,
showFollow: false
}
},
methods: {
openHis() {
this.$refs.changeHistory.open(this.basisData.id, ["接口定义", "接口定義", "Api definition"]);
},
watch: {
syncTabs() {
if (this.basisData && this.syncTabs && this.syncTabs.includes(this.basisData.id)) {
// 标示接口在其他地方更新过，当前页面需要同步
let url = "/api/definition/get/";
this.$get(url + this.basisData.id, response => {
if (response.data) {
let request = JSON.parse(response.data.request);
let index = this.syncTabs.findIndex(item => {
if (item === this.basisData.id) {
return true;
}
})
this.syncTabs.splice(index, 1);
Object.assign(this.request, request);
}
callback() {
this.validated = true;
},
validateApi() {
this.validated = false;
this.basisData.method = this.request.protocol;
this.$refs['basicForm'].validate();
},
saveApi() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
if (this.basisData.tags instanceof Array) {
this.basisData.tags = JSON.stringify(this.basisData.tags);
}
this.$emit('saveApi', this.basisData);
}
},
runTest() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
if (this.basisData.tags instanceof Array) {
this.basisData.tags = JSON.stringify(this.basisData.tags);
}
this.$emit('runTest', this.basisData);
}
},
createRootModelInTree() {
this.$emit("createRootModelInTree");
},
saveFollow() {
if (this.showFollow) {
this.showFollow = false;
for (let i = 0; i < this.basisData.follows.length; i++) {
if (this.basisData.follows[i] === getCurrentUser().id) {
this.basisData.follows.splice(i, 1)
break;
}
}
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.cancel_follow_success'));
});
}
} else {
this.showFollow = true;
if (!this.basisData.follows) {
this.basisData.follows = [];
}
this.basisData.follows.push(getCurrentUser().id)
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.follow_success'));
});
}
}
},
}
},
data() {
return {validated: false}
},
methods: {
openHis(){
this.$refs.changeHistory.open(this.basisData.id,["接口定义" , "接口定義" , "Api definition"]);
},
callback() {
this.validated = true;
},
validateApi() {
this.validated = false;
this.basisData.method = this.request.protocol;
this.$refs['basicForm'].validate();
},
saveApi() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
if (this.basisData.tags instanceof Array) {
this.basisData.tags = JSON.stringify(this.basisData.tags);
}
this.$emit('saveApi', this.basisData);
}
},
runTest() {
this.validateApi();
if (this.validated) {
this.basisData.request = this.request;
if (this.basisData.tags instanceof Array) {
this.basisData.tags = JSON.stringify(this.basisData.tags);
}
this.$emit('runTest', this.basisData);
}
},
createRootModelInTree() {
this.$emit("createRootModelInTree");
},
},
computed: {}
}
computed: {}
}
</script>
<style scoped>

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

@ -5,6 +5,14 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px" class="ms-opt-btn">
<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 "
@click="saveFollow"/>
</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 "
@click="saveFollow"/>
</el-tooltip>
<el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">
{{ $t('operating_log.change_history') }}
</el-link>
@ -38,12 +46,13 @@ import MsBasisApi from "./BasisApi";
import MsBasisParameters from "../request/database/BasisParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
import {getCurrentUser} from "@/common/js/utils";
export default {
name: "MsApiSqlRequestForm",
components: {
ApiOtherInfo,
MsBasisApi, MsBasisParameters,MsChangeHistory
MsBasisApi, MsBasisParameters, MsChangeHistory
},
props: {
request: {},
@ -53,7 +62,7 @@ export default {
type: Boolean,
default: false
},
syncTabs:{},
syncTabs: {},
},
watch: {
syncTabs() {
@ -76,11 +85,25 @@ export default {
}
},
data() {
return {validated: false}
return {
validated: false,
showFollow: false
}
},
created() {
this.$get('/api/definition/follow/' + this.basisData.id, response => {
this.basisData.follows = response.data;
for (let i = 0; i < response.data.length; i++) {
if (response.data[i] === getCurrentUser().id) {
this.showFollow = true;
break;
}
}
});
},
methods: {
openHis(){
this.$refs.changeHistory.open(this.basisData.id,["接口定义" , "接口定義" , "Api definition"]);
openHis() {
this.$refs.changeHistory.open(this.basisData.id, ["接口定义", "接口定義", "Api definition"]);
},
callback() {
this.validated = true;
@ -113,6 +136,33 @@ export default {
createRootModelInTree() {
this.$emit("createRootModelInTree");
},
saveFollow() {
if (this.showFollow) {
this.showFollow = false;
for (let i = 0; i < this.basisData.follows.length; i++) {
if (this.basisData.follows[i] === getCurrentUser().id) {
this.basisData.follows.splice(i, 1)
break;
}
}
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.cancel_follow_success'));
});
}
} else {
this.showFollow = true;
if (!this.basisData.follows) {
this.basisData.follows = [];
}
this.basisData.follows.push(getCurrentUser().id)
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.follow_success'));
});
}
}
}
},
}
</script>

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

@ -5,6 +5,14 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px" class="ms-opt-btn">
<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 "
@click="saveFollow"/>
</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 "
@click="saveFollow"/>
</el-tooltip>
<el-link type="primary" style="margin-right: 20px" @click="openHis" v-if="basisData.id">
{{ $t('operating_log.change_history') }}
</el-link>
@ -17,8 +25,9 @@
<br/>
<el-row>
<el-col>
<ms-tcp-basic-api :method-types="methodTypes" @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions" :basisData="basisData" ref="basicForm"
@changeApiProtocol="changeApiProtocol" @callback="callback"/>
<ms-tcp-basic-api :method-types="methodTypes" @createRootModelInTree="createRootModelInTree" :moduleOptions="moduleOptions"
:basisData="basisData" ref="basicForm"
@changeApiProtocol="changeApiProtocol" @callback="callback"/>
</el-col>
</el-row>
<!-- MOCK信息 -->
@ -30,7 +39,7 @@
<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"
<el-link v-else target="_blank" style="color: darkred"
type="primary">当前项目未开启Mock服务
</el-link>
</el-col>
@ -42,15 +51,15 @@
<!-- 请求参数 -->
<div v-if="apiProtocol=='TCP'">
<p class="tip">{{ $t('api_test.definition.request.req_param') }} </p>
<!-- <ms-basis-parameters :show-script="false" :request="request"/>-->
<!-- <ms-basis-parameters :show-script="false" :request="request"/>-->
<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" :show-options-button="true" :request="request" />
<!-- <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
<p class="tip">{{ $t('api_test.definition.request.res_param') }}</p>
<esb-definition-response v-xpack v-if="showXpackCompnent" :is-api-component="true" :show-options-button="true" :request="request"/>
<!-- <api-response-component :currentProtocol="apiCase.request.protocol" :api-item="apiCase"/>-->
</div>
<api-other-info :api="basisData"/>
@ -62,20 +71,21 @@
<script>
import MsTcpBasicApi from "./TCPBasicApi";
import MsTcpFormatParameters from "../request/tcp/TcpFormatParameters";
import MsTcpFormatParameters from "../request/tcp/TcpFormatParameters";
import MsChangeHistory from "../../../../history/ChangeHistory";
import {hasLicense, getCurrentProjectID, getUUID} from "@/common/js/utils";
import {hasLicense, getCurrentProjectID, getUUID, getCurrentUser} from "@/common/js/utils";
import ApiOtherInfo from "@/business/components/api/definition/components/complete/ApiOtherInfo";
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 esbDefinition = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinition.vue") : {};
const esbDefinitionResponse = (requireComponent != null && requireComponent.keys().length) > 0 ? requireComponent("./apidefinition/EsbDefinitionResponse.vue") : {};
export default {
name: "MsAddCompleteTcpApi",
components: {
ApiOtherInfo, MsTcpBasicApi, MsTcpFormatParameters,MsChangeHistory,
ApiOtherInfo, MsTcpBasicApi, MsTcpFormatParameters, MsChangeHistory,
"esbDefinition": esbDefinition.default,
"esbDefinitionResponse": esbDefinitionResponse.default},
"esbDefinitionResponse": esbDefinitionResponse.default
},
props: {
request: {},
basisData: {},
@ -84,41 +94,51 @@ export default {
type: Boolean,
default: false
},
syncTabs:Array,
syncTabs: Array,
},
data() {
return {
validated: false,
apiProtocol: "TCP",
mockInfo: "",
methodTypes:[
showFollow: false,
methodTypes: [
{
'key':"TCP",
'value':this.$t('api_test.request.tcp.general_format'),
'key': "TCP",
'value': this.$t('api_test.request.tcp.general_format'),
}
],
showXpackCompnent:false,
showXpackCompnent: false,
}
},
created: function () {
if(this.basisData.method != 'TCP'&& this.basisData.method != 'ESB'){
if (this.basisData.method != 'TCP' && this.basisData.method != 'ESB') {
this.basisData.method = this.basisData.protocol;
}
this.apiProtocol = this.basisData.method;
if(this.apiProtocol == null || this.apiProtocol == "" ){
if (this.apiProtocol == null || this.apiProtocol == "") {
this.apiProtocol = "TCP";
}
if (requireComponent != null && JSON.stringify(esbDefinition) != '{}'&& JSON.stringify(esbDefinitionResponse) != '{}') {
if (requireComponent != null && JSON.stringify(esbDefinition) != '{}' && JSON.stringify(esbDefinitionResponse) != '{}') {
this.showXpackCompnent = true;
if(hasLicense()){
if(this.methodTypes.length == 1){
if (hasLicense()) {
if (this.methodTypes.length == 1) {
let esbMethodType = {};
esbMethodType.key = "ESB";
esbMethodType.value="ESB";
esbMethodType.value = "ESB";
this.methodTypes.push(esbMethodType);
}
}
}
this.$get('/api/definition/follow/' + this.basisData.id, response => {
this.basisData.follows = response.data;
for (let i = 0; i < response.data.length; i++) {
if (response.data[i] === getCurrentUser().id) {
this.showFollow = true;
break;
}
}
});
this.getMockInfo();
},
watch: {
@ -142,8 +162,8 @@ export default {
},
},
methods: {
openHis(){
this.$refs.changeHistory.open(this.basisData.id,["接口定义" , "接口定義" , "Api definition"]);
openHis() {
this.$refs.changeHistory.open(this.basisData.id, ["接口定义", "接口定義", "Api definition"]);
},
callback() {
this.validated = true;
@ -159,23 +179,23 @@ export default {
if (this.basisData.tags instanceof Array) {
this.basisData.tags = JSON.stringify(this.basisData.tags);
}
if(this.basisData.method == 'ESB'){
if (this.basisData.method == 'ESB') {
let validataResult = this.$refs.esbDefinition.validateEsbDataStruct(this.request.esbDataStruct);
if(!validataResult){
if (!validataResult) {
return;
}
if(this.request.esbDataStruct != null){
if (this.request.esbDataStruct != null) {
this.esbDataStruct = JSON.stringify(this.request.esbDataStruct);
this.basisData.esbDataStruct = this.esbDataStruct;
}
if(this.request.backEsbDataStruct != null){
if (this.request.backEsbDataStruct != null) {
this.basisData.backEsbDataStruct = JSON.stringify(this.request.backEsbDataStruct);
}
if(this.request.backScript != null){
if (this.request.backScript != null) {
this.basisData.backScript = JSON.stringify(this.request.backScript);
}
}else{
if(this.$refs.tcpFormatParameter){
} else {
if (this.$refs.tcpFormatParameter) {
this.$refs.tcpFormatParameter.validateXmlDataStruct();
}
}
@ -204,8 +224,8 @@ export default {
if (this.request.backScript != null) {
this.basisData.backScript = JSON.stringify(this.request.backScript);
}
}else{
if(this.$refs.tcpFormatParameter){
} else {
if (this.$refs.tcpFormatParameter) {
this.$refs.tcpFormatParameter.validateXmlDataStruct();
}
}
@ -215,22 +235,49 @@ export default {
createRootModelInTree() {
this.$emit("createRootModelInTree");
},
changeApiProtocol(protocol){
changeApiProtocol(protocol) {
this.apiProtocol = protocol;
},
getMockInfo(){
getMockInfo() {
let projectId = getCurrentProjectID();
this.$get("/api/environment/getTcpMockInfo/" + projectId, response => {
this.mockInfo = response.data;
});
},
mockSetting() {
if(this.basisData.id){
this.$emit('changeTab','mock');
}else {
if (this.basisData.id) {
this.$emit('changeTab', 'mock');
} else {
this.$alert(this.$t('api_test.mock.create_error'));
}
},
saveFollow() {
if (this.showFollow) {
this.showFollow = false;
for (let i = 0; i < this.basisData.follows.length; i++) {
if (this.basisData.follows[i] === getCurrentUser().id) {
this.basisData.follows.splice(i, 1)
break;
}
}
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.cancel_follow_success'));
});
}
} else {
this.showFollow = true;
if (!this.basisData.follows) {
this.basisData.follows = [];
}
this.basisData.follows.push(getCurrentUser().id)
if (this.basisData.id) {
this.$post("/api/definition/update/follows/" + this.basisData.id, this.basisData.follows, () => {
this.$success(this.$t('commons.follow_success'));
});
}
}
}
},
}
</script>
@ -239,6 +286,7 @@ export default {
.mock-info {
margin: 20px 45px;
}
.ms-opt-btn {
position: fixed;
right: 50px;

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

@ -52,29 +52,13 @@
<ms-input-tag :currentScenario="basicForm" ref="tag"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('api_test.automation.follow_people')" prop="followPeople">
<el-select v-model="basicForm.follows"
clearable
multiple
:placeholder="$t('api_test.automation.follow_people')" filterable size="small"
class="ms-http-textarea">
<el-option
v-for="item in maintainerOptions"
:key="item.id"
:label="item.id + ' (' + item.name + ')'"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item :label="$t('commons.description')" prop="description">
<el-input class="ms-http-textarea"
v-model="basicForm.description"
type="textarea"
:autosize="{ minRows: 2, maxRows: 10}"
:rows="2" size="small"/>
:autosize="{ minRows: 1, maxRows: 10}"
:rows="1" size="small"/>
</el-form-item>
</el-col>
</el-row>