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

feat:实现 接口测试-接口定义界面，ctrl + s 保存快捷键 (#1254)

This commit is contained in:
Coooder-X 2021-01-26 13:05:03 +08:00 committed by GitHub
parent cffe0f8b3a
commit 5ee7fffd68
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 102 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/business/components/api/automation/ApiAutomation.vue
View File

@ -35,7 +35,7 @@
closable>
<div class="ms-api-scenario-div">
<ms-edit-api-scenario @refresh="refresh" :currentScenario="item.currentScenario"
:moduleOptions="moduleOptions"/>
:moduleOptions="moduleOptions" ref="autoScenarioConfig"/>
</div>
</el-tab-pane>
@ -111,6 +111,16 @@
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
},
'$route'(to, from) { // 路由改变时，把接口定义界面中的 ctrl s 保存快捷键监听移除
if (to.path.indexOf('/api/automation') == -1) {
if (this.$refs && this.$refs.autoScenarioConfig) {
console.log(this.$refs.autoScenarioConfig);
this.$refs.autoScenarioConfig.forEach(item => {
item.removeListener();
});
}
}
}
},
methods: {
@ -158,6 +168,20 @@
label = tab.currentScenario.name;
this.tabs.push({label: label, name: name, currentScenario: tab.currentScenario});
}
if (this.$refs && this.$refs.autoScenarioConfig) {
this.$refs.autoScenarioConfig.forEach(item => {
item.removeListener();
}); // 删除所有tab的 ctrl + s 监听
this.addListener();
}
},
addListener() {
let index = this.tabs.findIndex(item => item.name === this.activeName); // 找到当前选中tab的index
if(index != -1) { // 为当前选中的tab添加监听
this.$nextTick(()=>{
this.$refs.autoScenarioConfig[index].addListener();
});
}
},
handleTabClose() {
this.tabs = [];
@ -181,6 +205,7 @@
this.tabs = this.tabs.filter(tab => tab.name !== targetName);
if (this.tabs.length > 0) {
this.activeName = this.tabs[this.tabs.length - 1].name;
this.addListener(); // 自动切换当前标签时，也添加监听
} else {
this.activeName = "default"
}

19
frontend/src/business/components/api/automation/scenario/EditApiScenario.vue
View File

@ -5,7 +5,7 @@
<!--操作按钮-->
<div class="ms-opt-btn">
<el-button type="primary" size="small" @click="editScenario">{{$t('commons.save')}}</el-button>
<el-button type="primary" size="small" @click="editScenario" title="ctrl + s">{{$t('commons.save')}}</el-button>
</div>
<div class="tip">{{$t('test_track.plan_view.base_info')}}</div>
@ -222,6 +222,7 @@
import ScenarioApiRelevance from "./api/ApiRelevance";
import ScenarioRelevance from "./api/ScenarioRelevance";
import MsComponentConfig from "./component/ComponentConfig";
import {handleCtrlSEvent} from "../../../../../common/js/utils";
export default {
name: "EditApiScenario",
@ -295,6 +296,7 @@
this.operatingElements = ELEMENTS.get("ALL");
this.getMaintainerOptions();
this.getApiScenario();
this.addListener(); // 添加 ctrl s 监听
},
directives: {OutsideClick},
computed: {
@ -413,6 +415,17 @@
}
},
methods: {
addListener() {
document.addEventListener("keydown", this.createCtrlSHandle);
// document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi)));
},
removeListener() {
document.removeEventListener("keydown", this.createCtrlSHandle);
},
createCtrlSHandle(event) {
console.log("create ctrl + s");
handleCtrlSEvent(event, this.editScenario);
},
getIdx(index) {
return index - 0.33
},
@ -822,15 +835,13 @@
}
return bodyUploadFiles;
},
editScenario(showMessage) {
editScenario() {
this.$refs['currentScenario'].validate((valid) => {
if (valid) {
this.setParameter();
let bodyFiles = this.getBodyUploadFiles(this.currentScenario);
this.$fileUpload(this.path, null, bodyFiles, this.currentScenario, response => {
if (showMessage) {
this.$success(this.$t('commons.save_success'));
}
this.path = "/api/automation/update";
if (response.data) {
this.currentScenario.id = response.data.id;

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

@ -198,6 +198,15 @@
// 在 DOM 中添加 my-component 组件
this.renderComponent = true;
});
},
'$route'(to, from) { // 路由改变时，把接口定义界面中的 ctrl s 保存快捷键监听移除
if (to.path.indexOf('/api/definition') == -1) {
if (this.$refs && this.$refs.apiConfig) {
this.$refs.apiConfig.forEach(item => {
item.removeListener();
});
}
}
}
},
methods: {
@ -211,6 +220,17 @@
if (tab.name === 'add') {
this.handleTabsEdit(this.$t('api_test.definition.request.fast_debug'), "debug");
}
if(this.$refs.apiConfig) {
this.$refs.apiConfig.forEach(item => {
console.log(item);
item.removeListener();
}); // 删除所有tab的 ctrl + s 监听
let tabs = this.apiTabs;
let index = tabs.findIndex(item => item.name === tab.name); // 找到当前选中tab的index
if(index != -1) {
this.$refs.apiConfig[index - 1].addListener(); // 为选中tab添加 ctrl + s 监听（index-1的原因是要除去第一个固有tab）
}
}
},
handleCommand(e) {
switch (e) {

31
frontend/src/business/components/api/definition/components/ApiConfig.vue
View File

@ -3,16 +3,16 @@
<div class="card-container">
<!-- HTTP 请求参数 -->
<ms-edit-complete-http-api @runTest="runTest" @saveApi="saveApi" @createRootModelInTree="createRootModelInTree" :request="request" :response="response"
:basisData="currentApi" :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'HTTP'"/>
:basisData="currentApi" :moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'HTTP'" ref="httpApi"/>
<!-- TCP -->
<ms-edit-complete-tcp-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'TCP'"/>
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'TCP'" ref="tcpApi"/>
<!--DUBBO-->
<ms-edit-complete-dubbo-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'DUBBO'"/>
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'DUBBO'" ref="dubboApi"/>
<!--SQL-->
<ms-edit-complete-sql-api :request="request" @runTest="runTest" @createRootModelInTree="createRootModelInTree" @saveApi="saveApi" :basisData="currentApi"
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'SQL'"/>
:moduleOptions="moduleOptions" :syncTabs="syncTabs" v-if="currentProtocol === 'SQL'" ref="sqlApi"/>
</div>
</template>
@ -27,6 +27,7 @@
import {createComponent, Request} from "./jmeter/components";
import Sampler from "./jmeter/components/sampler/sampler";
import {WORKSPACE_ID} from '@/common/js/constants';
import {handleCtrlSEvent} from "../../../../../common/js/utils";
export default {
name: "ApiConfig",
@ -65,8 +66,30 @@
break;
}
this.formatApi();
this.addListener();
},
methods: {
addListener() {
document.addEventListener("keydown", this.createCtrlSHandle);
// document.addEventListener("keydown", (even => handleCtrlSEvent(even, this.$refs.httpApi.saveApi)));
},
removeListener() {
document.removeEventListener("keydown", this.createCtrlSHandle);
},
createCtrlSHandle(event) {
if(this.$refs.httpApi) {
handleCtrlSEvent(event, this.$refs.httpApi.saveApi);
}
else if(this.$refs.tcpApi) {
handleCtrlSEvent(event, this.$refs.tcpApi.saveApi);
}
else if(this.$refs.dubboApi) {
handleCtrlSEvent(event, this.$refs.dubboApi.saveApi);
}
else if(this.$refs.sqlApi) {
handleCtrlSEvent(event, this.$refs.sqlApi.saveApi);
}
},
runTest(data) {
this.setParameters(data);
let bodyFiles = this.getBodyUploadFiles(data);

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

@ -6,7 +6,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="saveApi" title="ctrl + s">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
</div>
</el-col>

2
frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue
View File

@ -6,7 +6,7 @@
<el-form :model="httpForm" :rules="rule" ref="httpForm" label-width="80px" label-position="right">
<!-- 操作按钮 -->
<div style="float: right;margin-right: 20px">
<el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="saveApi" title="ctrl + s">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
</div>
<br/>

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

@ -5,7 +5,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="saveApi" title="ctrl + s">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
</div>
</el-col>

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

@ -5,7 +5,7 @@
<el-col>
<!--操作按钮-->
<div style="float: right;margin-right: 20px;margin-top: 20px">
<el-button type="primary" size="small" @click="saveApi">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="saveApi" title="ctrl + s">{{ $t('commons.save') }}</el-button>
<el-button type="primary" size="small" @click="runTest">{{ $t('commons.test') }}</el-button>
</div>
</el-col>

9
frontend/src/common/js/utils.js
View File

@ -356,3 +356,12 @@ export function _getBodyUploadFiles(request, bodyUploadFiles, obj) {
}
}
}
export function handleCtrlSEvent(event, func) {
if (event.keyCode === 83 && event.ctrlKey) {
// console.log('拦截到 ctrl + s');//ctrl+s
func();
event.preventDefault();
event.returnValue = false;
return false;
}
}